/* ============================================
 * 👥 MANAGERS — تغطية المدد ولوح اللصق
 * ============================================
 *
 * الصفحة تجيب عن سؤال واحد: أي مدة ليس لها حساب جاهز؟ لأن من
 * يشتري بطولها يدفع ولا تصله دعوة. فترتيب الأنماط هنا ترتيب العين:
 * التغطية أولا بصوت عال، ثم لوح اللصق، ثم الجدول تفصيلا.
 *
 * والحالات تقرأ من `data-state` و`data-tone` لا من صفوف مضافة —
 * لأن هذا ما تكتبه `dashboard/js/pages/managers.js`، وصف ينمط ولا
 * يكتب لون لا يظهر ولا خطأ يدل عليه.
 *
 * وكل لون من `tokens.css`: الثيمان يتبدلان تحت هذه الصفحة كما
 * يتبدلان تحت غيرها، ولون مكتوب بيد يفلت من التبديل فيبقى داكنا
 * في الفاتح.
 */

/* ‏وقسم «تغطية المدد» ذهب: بلاطاته وإنذاره وحصيلته لم يبق لها مولّد
   في `managers.js` — حلّت محلّها بطاقات المدد في `renderManagerCard`.
   وكان مئةً وثلاثين سطرا تقرأ كأنها تحكم شيئا. */

/* ============================================
 *  شريط اللصق ونافذته
 * ============================================ */

/* ‏واللصق زر لا لوح مفتوح دائما: هو فعل يقع حين تشترى حسابات
   جديدة، لا في كل فتحة للصفحة. ولوح فارغ يجلس بين التغطية والجدول
   يفصل بين ما يقرأ كل يوم بفراغ لا يخصه. */

/* ‏والنافذة أوسع من غيرها: ما يلصق فيها أسطر طويلة لا تقرأ
   مقطوعة، ومعاينتها جدول بسبعة أعمدة */
.modal:has(.mgr-paste) { max-width: 880px; }

.mgr-paste { display: block; }

.mgr-paste-head h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}
.mgr-paste-head h3 svg { width: var(--icon-md); height: var(--icon-md); color: var(--accent); }

.mgr-paste-head p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ‏وهذا المثال جملة عربية فيها كلمة لاتينية واحدة، لا سطر بيانات:
   فرض الاتجاه الإنجليزي عليه يقلب حقوله الثلاثة فيقرأ من آخره */
.mgr-paste-head code {
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--text-primary);
}

/* ‏ورأس اللوح سطر واحد: عنوان يمينه، ومدة الدفعة يساره. وكانت
   المدة في عمود جانبي معها شرح وتحذير برتقالي عريض، فصار ما
   حول الصندوق أكبر من الصندوق. */
.mgr-paste-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.mgr-paste-pick {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.mgr-paste-pick label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
.mgr-paste-pick .form-input {
  width: auto;
  min-width: 168px;
  padding: 7px var(--sp-3);
  font-size: var(--fs-sm);
}

/* ‏والصيغة ترى ولا تشرح: سطر فيه المثال نفسه، ونقطتاه بلون
   يميزهما — فيفهم الفاصل بالنظر لا بفقرة تصفه */
.mgr-paste-shape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.mgr-paste-shape code {
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 3px var(--sp-2);
}
.mgr-paste-shape code b { color: var(--accent); font-weight: var(--fw-bold); }

/* ‏والصندوق يساري الاتجاه دائما: ما يلصق فيه إيميلات وكلمات
   مرور، وعرضها بالاتجاه العربي يقذف النقطتين إلى آخر السطر فيظن
   الناظر أن ما لصقه تلف */
.mgr-paste-box {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mgr-paste-box::placeholder { color: var(--text-muted); }
.mgr-paste-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ‏والقيد يقال مرة بصوت هادئ: صندوق برتقالي عريض يقرع كلما
   فتحت الصفحة يعلم تجاوزه، ثم لا يقرأ يوم يهم */
.mgr-paste-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.mgr-paste-note svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); }

.mgr-paste-status {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.mgr-fail {
  color: var(--danger-text);
  font-weight: var(--fw-semibold);
}

/* ============================================
 *  معاينة ما فهم قبل الحفظ
 * ============================================ */

.mgr-preview:not(:empty) { margin-top: var(--sp-5); }

.mgr-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.mgr-preview-sum {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.mgr-reveal { cursor: pointer; margin: 0; font-size: var(--fs-sm); }

.mgr-preview-table { width: 100%; border-collapse: collapse; }

.mgr-preview-table th,
.mgr-preview-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-hairline);
  text-align: start;
  vertical-align: middle;
}

.mgr-preview-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.mgr-preview-table td { font-size: var(--fs-sm); }
.mgr-preview-table tbody tr:last-child td { border-bottom: none; }

/* ‏والمكرر يخفت ولا يخفى: هو معروض ليرى أنه لن يحفظ، لا ليقرأ */
/* ‏وخانةُ التحديد مثبّتة وخلفيّتُها المصمتة تستر ما يمرّ تحتها (style.css):
   فتخفت ما فيها لا هي، وإلا شفّت فظهر البريدُ تحت المربّع حين يُمرَّر الجدول */
.mgr-preview-table tr[data-state="dup"] td:not(.mgr-p-pick),
.mgr-preview-table tr[data-state="dup"] .mgr-p-pick > * { opacity: 0.62; }

.mgr-p-pick { width: 44px; }
.mgr-p-pick .form-check { margin: 0; }

.mgr-p-no {
  width: 48px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mgr-p-mail {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.mgr-p-secret {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.mgr-p-none { color: var(--text-muted); letter-spacing: normal; }

.mgr-p-dur { min-width: 132px; }
.mgr-p-dur .form-input { padding: 6px var(--sp-2); font-size: var(--fs-xs); }

.mgr-p-state { white-space: nowrap; }

.mgr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  padding: 3px var(--sp-3);
  white-space: nowrap;
}
.mgr-chip[data-tone="new"] {
  background: var(--success-soft);
  color: var(--success-text);
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
}
.mgr-chip[data-tone="dup"] {
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
/* ‏وبريدٌ في موضع كلمة المرور (managerPasteMailAsPassword): لن يُحفظ، فيُنبَّه عليه.
   وخانةُ السرّ بخطٍّ ثابت العرض ومباعدة — والتنبيه كلامٌ عربيّ يُقرأ */
.mgr-chip[data-tone="warn"] {
  background: var(--warning-soft);
  color: var(--warning-text);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  font-family: var(--font-sans);
  letter-spacing: normal;
}

/* ‏وما لم يفهم يعرض ولا يبتلع: سطر يسقط في صمت يظن محفوظا */
.mgr-rejected {
  margin-top: var(--sp-4);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}

.mgr-rejected p {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  color: var(--danger-text);
}
.mgr-rejected p svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; }

.mgr-rejected ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.mgr-rejected li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.mgr-rejected code {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 2px var(--sp-2);
  overflow-wrap: anywhere;
}

.mgr-preview-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ‏والمعطّل يُرى معطّلا: لا قاعدة في اللوحة تُخفت زرّا معطّلا، ولون المرور على
   .btn-primary في aurora.css بـ!important — فكان «احفظ» أخضرَ حيّا وهو لا يُضغط */
#mgrPasteSave:disabled { opacity: .45; cursor: not-allowed; }
#mgrPasteSave:disabled:hover { background: var(--accent-solid) !important; }
/* ‏ومثله «حفظ الإيميل» في نافذة الإضافة: يُطفأ ما دام الإنشاءُ جاريا (saveManager)
   وكان يبدو حيّا، فتُضغط ثانيةً ولا يحدث شيء. والمؤشّر «يعمل» لا «ممنوع»: يعود وحده */
#mSave:disabled { opacity: .6; cursor: progress; }
#mSave:disabled:hover { background: var(--accent-solid) !important; }

/* ============================================
 *  الجدول
 * ============================================ */

.mgr-table { width: 100%; border-collapse: collapse; }

.mgr-table th,
.mgr-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-hairline);
  text-align: start;
  vertical-align: middle;
}

.mgr-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.mgr-table tbody tr:last-child td { border-bottom: none; }
.mgr-table tbody tr { transition: background var(--transition-fast); }
.mgr-table tbody tr:hover { background: var(--bg-card-hover); }

/* ══════════════════════════════════════════════════════════
   عمود البريد — واتجاهه للخانة وحدها
   ══════════════════════════════════════════════════════════

   البريد لاتيني يقرأ من اليسار، فالخانة `direction: ltr`. أما
   عنوان العمود فعربي — «الإيميل» — ولا شأن له بذلك.

   وكانت القاعدة تشمل الرأس معه، فانقلبت عليه كل خاصية منطقية:

     مقبض تغيير العرض عند `inset-inline-end`، وهي في رأس لاتيني
     الاتجاه **يمينه** لا يساره. فمقبض عمود البريد كان يقع على حافة
     الجدول اليمنى — أي على حد لا يوجد بينه وبين عمود — لا بينه
     وبين «كلمة المرور».

     و`inset-inline-start: 0` التي تلزقه عند التمرير صارت تعني «الزم
     يسار الوعاء»، وموضعه الطبيعي أقصى اليمين — فالشرط لا ينعقد
     أبدا ولا يلزق. وقيس ذلك: يمرر الجدول مئة وثلاثة وستين،
     فيخرج عمود البريد من الوعاء كلها معه.

   فالاتجاه للخانة، والرأس يبقى على اتجاه الصفحة. */
/* ‏والاتجاه على النص لا على الخانة: الخانة نفسها لاصقة
   بـ`inset-inline-start`، فلو صارت `ltr` قرئت «الزم اليسار» وموضعها
   أقصى اليمين — فلا تلزق. وقيس: يمرر الجدول ثلاثمئة وتسعة
   وتسعين، فيثبت رأس عمود البريد وتخرج خلاياه من الوعاء. */
.mgr-mail {
  display: block;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgr-c-mail {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.mgr-c-act { text-align: end; width: 1%; }

.mgr-dur-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--surface-3);
  border-radius: var(--radius-full);
  padding: 2px var(--sp-2);
}

.mgr-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.mgr-state svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── والنقطة: الوسم نفسه بلا نص ──
   ذهب عمود «تسجيل الدخول»، وبقيت حاله نقطة في أول أزرار الخطوة
   التالية. وهي `mgr-state` نفسها — فلونا الثيمين مضبوطان فيها —
   إلا أن حشوتها تضيق: قرص بلا نص لا يحتاج عشرة في كل ناحية. */
/* ‏و`[data-tone]` في المحدِّد ليس زينة: مجموعة النغمات أدناه تكتب
   `padding` اختصارا بالأولوية نفسها وبعد هذا السطر، فتغلبه ويُصفّر
   `padding-inline`. والنقطة تحمل الصنفين والنغمة معا دائما، فلا
   حالة تنجو — كانت حشوتها عشرة لا خمسة، فتتمدّد وتدفع الأزرار. */
.mgr-state.mgr-dot[data-tone] { padding-inline: 5px; flex-shrink: 0; }
/* ‏وحالُ الجلسة بلفظها في أوّل الأزرار — لا تنضغط فيضيع لفظُها */
.mgr-state.mgr-sess { flex-shrink: 0; }
/* ── وللحالين لونان لا يلتبسان ──
   «تم تسجيل الدخول» حساب يبيع، و«غير مسجل دخول» حساب لا تصل منه
   دعوة لعميل دفع. وكان الثاني رماديا كبقية النص الخافت، فيقرأ
   خبرا هينا وهو أخطر ما في الصف.

   فقرصان: أخضر على أخضر خفيف، وأحمر على أحمر خفيف. والرموز
   `success`/`danger` مصوغة للثيمين معا، فلا لون صريح هنا. */
.mgr-state[data-tone="on"],
.mgr-state[data-tone="wait"],
.mgr-state[data-tone="bad"],
.mgr-state[data-tone="off"] {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.mgr-state[data-tone="on"] {
  color: var(--success-text);
  background: var(--success-soft);
  cursor: help;
}
.mgr-state[data-tone="off"] {
  color: var(--danger-text);
  background: var(--danger-soft);
}
/* ‏والانتظار ليس فشلا: دعوة خرجت وتنتظر صاحبها */
.mgr-state[data-tone="wait"] {
  color: var(--warning-text);
  background: var(--warning-soft);
}

/* ‏وعمود تسجيل الدخول موسط كعمود الدعوات: فيه وسم واحد لا نص
   يقرأ سطرا، فطرف الخانة ليس مكانه. */
/* ‏وحشوته أضيق: القرص عريض بلفظه، واثنتا عشرة من كل ناحية تدفعه
   خارج الخانة فلا يوسط. */
/* ‏وقواعد `mgr-c-state` ذهبت مع عمودها: الحال صارت نقطة في أول
   أزرار «الخطوة التالية»، ولا خانة لها تُوسَّط ولا تُضيَّق حشوتها. */

.mgr-acts {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ‏وعمود الفعل أضيق ما في الجدول، فيلف «إرسال دعوة» سطرين ويصير
   الزر مربعا لا يقرأ إلا بتدقيق. ونص الزر لا يلف: هو ما يبحث
   عنه بالعين قبل أن تمد إليه اليد. */
.mgr-acts .btn { white-space: nowrap; }

.mgr-icon { padding-inline: var(--sp-2); }

/* ============================================
 *  نافذة الأمر — تسجيل الدخول يتم على الجهاز
 * ============================================ */

.mgr-modal-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
}
.mgr-modal-title svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--accent); }


/* ============================================
 *  شاشة الدخول الحية — ملء النافذة
 * ============================================
 *
 * ‏كانت في نافذة صغيرة، فتعرض صفحة جوجل داخل صندوق أضيق منها:
 * يقص رأسها وذيلها، ويظهر لها شريط تمرير، ويصير الحقل الذي يكتب
 * فيه أدق من أن ينقر. وهذه ليست شاشة تطالع بجوار غيرها — هي كل
 * ما يفعله من فتحها حتى يغلقها. فتأخذ النافذة كلها.
 */

.mgr-full {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: grid;
  /* ‏الرأس، ثمّ شريطُ المتصفّح، ثمّ الشاشة، ثمّ الأقراص */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  /* ‏والعمودُ الواحدُ لا يتجاوز الشاشة أبدا. قيس (2026-09-22) من متصفّح
     صاحبها: النافذةُ 1692 والمسرحُ 3344 يبدأ من -1652 — أي أنّ صفّا
     عريضا (شريطٌ لا يلتفّ) مطّ العمودَ كلَّه إلى ضعف الشاشة، وفي الاتجاه
     العربيّ يمتدّ الفائضُ يسارا خارجَها. فتوسّطت اللوحةُ في نصفٍ مخفيّ.
     `auto` تأخذ أدنى ما يحتاجه أعرضُ صفّ؛ و`minmax(0, 1fr)` تُعطي كلَّ
     صفٍّ عرضَ الشاشة ويتصرّف هو في فائضه. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg-primary);
}
/* ‏وكلُّ صفٍّ يحمل فائضَه: لا يمطّ العمود ولا يجرّ الصفحة */
.mgr-full > * { min-width: 0; }

/* ‏وما خلفها لا يمرر: صفحة تتحرك تحت شاشة تغطيها كلها تربك */
body.mgr-full-open { overflow: hidden; }

/* ‏وشريط الرأس سطرٌ واحد لا يلتفّ: كان `wrap` فتزاحم البريدُ
   وأقراصُ البرهان وتداخلا في الصورة. */
.mgr-full-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
  min-height: 48px;
  /* ‏وما فاض منه يُمرَّر داخله لا يمطّ الشبكة */
  overflow-x: auto;
}

.mgr-full-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.mgr-full-title > i { flex: none; }
/* ‏والعنوان الثابت «تسجيل الدخول» يختفي حين يضيق: البريد والأقراص
   أولى بالمكان منه — هو يقال مرة ويعرف، وهما يقرآن في كل فتحة. */
.mgr-full-title > span:not(.mgr-live-who) { flex: none; }
@media (max-width: 1180px) {
  .mgr-full-title > span:not(.mgr-live-who) { display: none; }
}
.mgr-full-acts { flex: none; }
.mgr-full-title svg { width: var(--icon-md); height: var(--icon-md); color: var(--accent); }

.mgr-full-acts { display: flex; align-items: center; gap: var(--sp-2); }
.mgr-full-acts .btn { white-space: nowrap; }

/* ‏قائمةُ حال الحساب داخل الشاشة — لحسابات المخزون وحدها.
   ‏تُختار قبل الإقفال فتخرج مع الموظّف وتُكتب على الحساب. ومكانُها أوّلَ
   ‏الأزرار: هي أوّلُ ما يفعله قبل أن يخرج، لا آخرُ ما يبحث عنه بعده. */
.mgr-live-status { display: inline-flex; align-items: center; }
.mgr-live-status select {
  height: 32px;
  padding-block: 0;
  padding-inline: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  max-width: 190px;
  border-radius: var(--radius-sm);
}
/* ‏واختيارٌ وقع يُرى: خانةٌ فارغةٌ وخانةٌ فيها حكمٌ لا تتشابهان */
.mgr-live-status select:not([value=""]) { font-weight: 600; }
@media (max-width: 900px) { .mgr-live-status select { max-width: 120px; } }
/* ‏و«تم الدخول» المعطَّل يُرى معطَّلا: لا قاعدةَ :disabled في اللوحة، وaurora تفرض
   لونَ الزرّ ولونَ مروره بـ!important — فكان أخضرَ حيّا يُضغط فلا يفعل شيئا
   (والمتصفّحُ يفتح، أو الخادمُ يتأكّد، أو الشاشةُ أُغلقت). */
.mgr-full-acts .btn:disabled { opacity: .5; cursor: not-allowed; }
.mgr-full-acts .btn-primary:disabled:hover { background: var(--accent-solid) !important; }
.mgr-full-acts .mgr-live-continue {
  color: var(--info-text);
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 34%, var(--border-default));
}
.mgr-full-acts .mgr-live-continue:hover:not(:disabled) {
  color: var(--text-on-accent);
  background: var(--info);
  border-color: var(--info);
}
.mgr-full-acts .mgr-live-continue:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.mgr-live-who {
  unicode-bidi: isolate;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  /* ‏ينكمش ولا يدفع: كان `flex:none` فيطغى البريدُ على زرّي «إلغاء»
     و«تم الدخول» في الشاشات الضيّقة */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* ‏والمسرح يأخذ ما بقي، والصورة تمركز فيه: مقاسه هو ما يطلب به
   فتح المتصفح على الخادم، فتقع الصورة فيه بمقاسها لا مصغرة */
.mgr-live-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* ‏ولا تمرير هنا: الصورة تلائم النافذة، فشريط التمرير يعني أنّ
     شيئا لم يلائم — وهو ما شكا منه صاحبها. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ‏والأرضية بيضاء دائما: هي أرضية صفحة جوجل لا أرضية لوحتنا،
     فخلفية داكنة خلف لقطة لم تصل بعد تقرأ شاشة مطفأة */
  background: #fff;
  line-height: 0;
}

/* ‏والمؤشر يملى من الصفحة البعيدة لا يثبت هنا: كان علامة تصويب
   دائمة، فتقرأ الشاشة صورة تنقر على التخمين لا صفحة تستعمل.
   و`default` قيمة أولية حتى تصل أول حركة. */
/* ‏خيط الانتظار: يمشي على رأس الشاشة بين الضغطة وظهور أثرها.
   ولا يعتم المشهد ولا يحركه — الصفحة تحته لم تتغير بعد. */
.mgr-live-stage.is-waiting::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: mgr-wait 0.75s linear infinite;
  pointer-events: none;
}
@keyframes mgr-wait {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mgr-live-stage.is-waiting::after { animation: none; background-size: 100% 100%; opacity: .5; }
}

.mgr-live-shot {
  display: block;
  max-width: 100%;
  max-height: 100%;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── شريطُ المتصفّح في اللوحة، على هيئة كروم ──
 *
 * ‏شريطُ كروم نفسُه مخفيٌّ في البثّ (ملءُ الشاشة) — كان يُرى ولا يُنقر،
 * ‏فشكا المالك: «مش عارف استخدم المتصفح». فهذا مكانُه: صفُّ تبويباتٍ فوق،
 * ‏وتحته الرجوعُ والتحديثُ والعنوان. ومن اليسار إلى اليمين كما في كروم،
 * ‏في صفحةٍ عربيّة.
 */
.mgr-browser {
  /* ‏درجاتُ كروم في الثيمين: صفُّ التبويبات أغمق، والتبويبُ الظاهرُ والشريطُ
     ‏تحته أفتح، وخانةُ العنوان أغمقُ قليلا منهما. وسطوحُ اللوحة في الداكن
     ‏متقاربةٌ جدّا (#0F1319 و#12161D) فلا تُفرّق — فتُمزج بالأبيض والأسود. */
  --bt-strip: color-mix(in srgb, #000 10%, var(--surface-1));
  --bt-bar: color-mix(in srgb, #fff 8%, var(--surface-1));
  --bt-box: color-mix(in srgb, #000 7%, var(--surface-1));
  --bt-hover: color-mix(in srgb, var(--text-strong) 9%, transparent);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bt-strip);
  border-bottom: 1px solid var(--border-default);
}
.mgr-bt-strip {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 6px 8px 0;
  /* ‏وعلوُّه علوُّ تبويبٍ من أوّل لحظة: التبويباتُ تصل بعد الفتح (٣٤) والزرُّ وحده ٣٢،
     فكان يطول بكسلين بعد أن قيس المسرحُ وضُبطت عليه نافذةُ الخادم */
  min-height: 40px;
}
.mgr-bt-tabs {
  display: flex;
  align-items: flex-end;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.mgr-bt-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 220px;
  min-width: 48px;
  height: 34px;
  padding: 0 6px 0 12px;
  border-radius: 10px 10px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.mgr-bt-tab:hover { background: var(--bt-hover); color: var(--text-strong); }
.mgr-bt-tab.is-active { background: var(--bt-bar); color: var(--text-strong); }
.mgr-bt-tab.is-popup { box-shadow: inset 0 -2px 0 var(--accent-solid, var(--accent)); }
.mgr-bt-ico { width: 16px; height: 16px; flex: none; }
.mgr-bt-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mgr-bt-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.mgr-bt-x:hover { background: var(--bt-hover); opacity: 1; }
.mgr-bt-x svg { width: 14px; height: 14px; }
.mgr-bt-new {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 2px 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.mgr-bt-new:hover { background: var(--bt-hover); color: var(--text-strong); }
.mgr-bt-new svg { width: 18px; height: 18px; }
.mgr-bt-tab:focus-visible, .mgr-bt-x:focus-visible, .mgr-bt-new:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mgr-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  background: var(--bt-bar);
}
.mgr-nav-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.mgr-nav-btn:hover { background: var(--bt-hover); color: var(--text-strong); }
.mgr-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mgr-nav-btn svg { width: 18px; height: 18px; }

.mgr-omnibox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 0 0 0 6px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--bt-box);
}
.mgr-omnibox:focus-within { background: var(--bt-bar); box-shadow: inset 0 0 0 2px var(--accent); }
.mgr-omnibox svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.mgr-omnibox input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-family: inherit;
  text-align: left;
  outline: none;
}

/* ── قائمةُ النقر الأيمن — على هيئة قائمة كروم ──
 * ‏قائمةُ كروم نفسُها نافذةٌ مستقلّةٌ لا تُبثّ؛ فهذه مكانُها، ويفعل ما فيها الخادم. */
.mgr-ctx {
  position: fixed;
  z-index: 30;
  min-width: 230px;
  padding: 6px 0;
  background: var(--surface-1);
  color: var(--text-strong);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  user-select: none;
}
.mgr-ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 32px;
  padding: 0 16px;
  cursor: pointer;
}
.mgr-ctx-item:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--text-strong) 9%, transparent); }
.mgr-ctx-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.mgr-ctx-key { color: var(--text-secondary); font-size: var(--fs-xs); }
.mgr-ctx-sep { height: 1px; margin: 6px 0; background: var(--border-default); }

/* ‏و«الصفحة تسأل» — نافذةٌ من واجهة كروم لا يبلغها أحد، وتعلّق الصفحة
   حتى يُجاب عنها. فتُعرض فوق الشاشة ويُجاب عنها من هنا. */
.mgr-live-dialog {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
  line-height: var(--lh-relaxed);
}
.mgr-live-dialog[hidden] { display: none; }
.mgr-live-dialog-card {
  pointer-events: auto;
  width: min(460px, calc(100% - 32px));
  padding: var(--sp-4);
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.mgr-live-dialog-card strong { display: block; margin-bottom: var(--sp-2); color: var(--text-strong); }
.mgr-live-dialog-card p { margin: 0 0 var(--sp-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.mgr-live-dialog-card input {
  width: 100%;
  height: 34px;
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: inherit;
}
.mgr-live-dialog-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; }

.mgr-live-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  overflow: auto;
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  text-align: center;
  padding: var(--sp-5);
}
.mgr-live-veil p { margin: 0; max-width: 52ch; }
.mgr-live-veil svg { width: var(--icon-xl); height: var(--icon-xl); color: var(--danger-text); }
/* ‏و«أعد الوصل» على الحجاب: رمزُه بمقاس الأزرار ولونِها لا رمزُ الحجاب الأحمرُ الكبير.
   ولا قاعدةَ :disabled في اللوحة، وaurora تفرض لونَ مروره — فيُرى هنا أنّ الوصلَ جارٍ */
.mgr-live-veil .btn svg { width: 16px; height: 16px; color: inherit; }
.mgr-live-veil .btn:disabled { opacity: .55; cursor: progress; }
.mgr-live-veil .btn-primary:disabled:hover { background: var(--accent-solid) !important; }

/* ── الحقل الذي يلتقط لوحة المفاتيح ──
 *
 * ‏لا يخفى بـ`display:none` ولا بـ`visibility`: المخفي بهما لا
 * يركز عليه، ولوحة مفاتيح الجوال لا تظهر إلا لحقل مركز عليه.
 * فيبقى في الصفحة بمقاس لا يرى، ويقال للقارئ الآلي ما هو.
 */
.mgr-live-keys {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ‏شريط الدخول السريع: البريد معروف والكلمة تلصق، والخادم يكتب.
   ويعلو التلميح لأنه أول ما يفعل بالشاشة، والصورة فوقه لما تبقى. */
.mgr-live-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
}
.mgr-live-quick label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}
.mgr-live-quick label span {
  unicode-bidi: isolate;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.mgr-live-quick .form-input {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 460px;
  padding: 7px var(--sp-3);
  font-size: var(--fs-sm);
}
.mgr-live-quick .btn { flex-shrink: 0; white-space: nowrap; }
.mgr-live-quick-note {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.mgr-live-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-secondary);
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
}
.mgr-live-hint svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); }

.mgr-live-out:empty { display: none; }
.mgr-live-out { padding: 0 var(--sp-5) var(--sp-4); background: var(--surface-1); }

@media (max-width: 700px) {
  .mgr-full-bar { padding: var(--sp-2) var(--sp-3); }
  .mgr-live-hint { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
  .mgr-live-quick { padding: var(--sp-2) var(--sp-3); }
  .mgr-live-out { padding: 0 var(--sp-3) var(--sp-3); }
}

/* ============================================
 *  الدعوة اليدوية ونتيجتها
 * ============================================ */

.mgr-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.mgr-from strong {
  unicode-bidi: isolate;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  /* ‏وبريدٌ طويلٌ يلتفّ داخل الصندوق: كان يفيض يسارا في الهاتف فيُخفي أوّلَه،
     وأوّلُه هو ما يفرّق حسابا عن حساب */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mgr-from-key { color: var(--text-muted); font-size: var(--fs-xs); }

.mgr-cost {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--warning-text);
}
.mgr-cost svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: 3px; }

/* ‏والنتيجة ثلاث حالات لا اثنتان، ولكل لونها: «خرجت» خضراء،
   و«لم تخرج» حمراء، و«لا يعرف» صفراء بينهما — لأن رسمها خضراء
   يغلق باب الإعادة على عميل لم تصله، ورسمها حمراء يدفع إلى
   إعادة تحجز مقعدا ثانيا من خمسة. */
.mgr-result {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: 0;
}

.mgr-result h3 {
  grid-column: 2;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.mgr-result p {
  grid-column: 2;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

.mgr-result strong { unicode-bidi: isolate; font-weight: var(--fw-bold); }

.mgr-result-mark {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
}
.mgr-result-mark svg { width: var(--icon-lg); height: var(--icon-lg); }

.mgr-result[data-tone="ok"] {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.mgr-result[data-tone="ok"] h3,
.mgr-result[data-tone="ok"] .mgr-result-mark { color: var(--success-text); }

.mgr-result[data-tone="unknown"],
.mgr-result[data-tone="warn"] {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.mgr-result[data-tone="unknown"] h3,
.mgr-result[data-tone="unknown"] .mgr-result-mark,
.mgr-result[data-tone="warn"] h3,
.mgr-result[data-tone="warn"] .mgr-result-mark { color: var(--warning-text); }

.mgr-result[data-tone="bad"] {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.mgr-result[data-tone="bad"] h3,
.mgr-result[data-tone="bad"] .mgr-result-mark { color: var(--danger-text); }

.mgr-result[data-tone="info"] {
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
.mgr-result[data-tone="info"] h3,
.mgr-result[data-tone="info"] .mgr-result-mark { color: var(--info-text); }

.mgr-result[data-tone="run"] {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
}
.mgr-result[data-tone="run"] h3 { color: var(--text-strong); }

/* ‏و«ما يفعل الآن» يفصل عما حدث: من قرأ «قد تكون خرجت» يحتاج سطرا
   يقول له لا تعد الإرسال قبل أن تنظر، لا فقرة ثانية تشبه الأولى */
.mgr-do {
  border-inline-start: 3px solid currentColor;
  padding-inline-start: var(--sp-3);
  font-weight: var(--fw-semibold);
}

@keyframes mgr-spin { to { transform: rotate(360deg); } }

.mgr-spin {
  grid-column: 1;
  grid-row: 1;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: mgr-spin 0.8s linear infinite;
}

/* ‏وقاعدة «أبطئ الدوران عند تقليل الحركة» ذهبت: `tokens.css` يفرض
   `animation-duration: 0.01ms !important` على كلّ شيء، وهذه بلا
   `!important` فتسقط ولا تفعل. والحال مُعالَجة أصلا أدناه —
   `.mgr-asking svg { animation: none; opacity: .5 }` — فتُقرأ ساكنةً
   باهتةً لا واقفةً على لفّةٍ نصفِ منتهية. */

/* ============================================
 *  الشاشات الضيقة
 * ============================================ */

/* ‏و.mgr-paste كانت لوحا مفتوحا بحشوته، فصغُرت حشوتها هنا. وهي اليوم جسمُ نافذةٍ
   لها حشوتها — فكانت الحشوة تُضاف على الهاتف وحده فتأكل من الصندوق حيث يضيق */
@media (max-width: 768px) {
  .mgr-acts { flex-wrap: wrap; }
}

.mgr-hint {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7;
}
/* ‏والسحبُ لأعلى للتلميح تحت رأس النافذة وحده: تحت الحقل — والحقل بلا هامش — كان
   يُركب سطرَه الأول على حدّ الصندوق (ملاحظة مفتاح المصادقة) */
.form-input + .mgr-hint { margin-top: var(--sp-1); }

/* ============================================
 *  الجدول العريض — عمود لكل ما يخص الحساب
 * ============================================
 *
 * سبعة أعمدة لا تسع شاشة ضيقة، و`.table-wrap` تمرره أفقيا وحده
 * دون أن تدفع عرض المستند — وهو الفرق بين جدول يمرر وصفحة تزاح.
 *
 * والعرض يوزع صراحة لا يترك للمتصفح: البريد أطول ما فيه فيأخذ
 * ما يفضل، والحقول السرية متساوية فتقع تحت بعضها في كل صف —
 * وعمود يتذبذب عرضه بين صف وصف يقرأ فوضى.
 */
/* ‏و`min-width` على الحاوية لا على الخانات: مع `table-layout: fixed`
   تهمل قيود الخانات، فعمود البريد — وهو `auto` — يأخذ ما فضل مهما
   ضاق. وقد ضاق إلى مئة وستة وأربعين فصار «hadi585962…»، والبريد هو
   ما تمسح به الصفحة بالعين. فيوسع أدنى عرض للجدول حتى يبقى له
   مئتان وعشرون في أضيق الحالات. */
/* ‏وأدنى عرض يسع الأعمدة ويبقي للبريد ما يقرأ به: الثابتة منها
   846 بعد رفع عمود المدة، والبريد لا يقل عن 234 — فمجموعها هذا.
   وما زاد عن الحاوية يمرر داخلها وحدها، لا تزاح الصفحة له.
   وكل عمود حر يضاف يوسعه 140 — من managers.js، لا من هنا. */
/* ‏والعرض يكتب مضمنا من managers.js: مجموع ما طلب للأعمدة.
   وأرضيته الحاوية — إن ضاق المجموع عنها ابتلع الفائض عمود الحشو
   في آخره، لا بقية الأعمدة. وكان هنا 1390 ثابتة فوق مجموع 1316،
   فكان كل عمود يرسم أعرض مما طلب له والسحب لا يطابق الإصبع. */
.mgr-table-wide { min-width: 100%; table-layout: fixed; }

.mgr-table-wide th { font-weight: var(--fw-semibold); }
.mgr-table-wide td,
.mgr-table-wide th { vertical-align: middle; }

/* ── والعروض تكتب على `<th>` لا هنا ──
   صارت تسحب باليد وتحفظ لصاحبها، فمصدرها `MGR_COLUMNS` في
   managers.js وتوضع خاصية مضمنة. وقاعدة هنا بعرض ثابت كانت
   ستغلبها في التخصيص أو تربكها. */

/* ── البريد وحده يقص إن طال — والبقية مقاساتها معروفة ──
   و`td` وحدها لا `th`: المقبض في الرأس يخرج خمسة بكسلات عن حد
   العمود (واثنين وعشرين على اللمس)، و`overflow: hidden` على الرأس
   تقص نصفه — فيصير عمود البريد وحده لا يكاد يسحب، وهو أول ما
   يراد سحبه. وعنوان العمود كلمة واحدة لا تحتاج قصا أصلا. */
/* والقص على `.mgr-mail` بالأعلى — وهي التي تحمل النص */

/* ── الخانة التي تكتب ── */
.mgr-cell {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: text;
  padding: 3px 6px; border-radius: var(--radius-xs);
  font: inherit; color: inherit;
  max-width: 100%;
}
.mgr-cell:hover { background: var(--surface-3); }
.mgr-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ‏«أضف» يدعو ولا يصرخ: خط متقطع يقول «هنا يكتب» بلا لون */
.mgr-cell-add {
  color: var(--text-placeholder);
  border: 1px dashed var(--border-default);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.mgr-cell-add:hover { color: var(--text-secondary); border-color: var(--border-strong); }
.mgr-cell-add svg { width: 12px; height: 12px; }

.mgr-cell-set { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }

.mgr-secret {
  direction: ltr; unicode-bidi: isolate;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  letter-spacing: .06em;
  max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}
.mgr-secret[data-shown="1"] {
  color: var(--text-strong); font-weight: var(--fw-semibold); letter-spacing: 0;
}

.mgr-peek {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); padding: 3px;
  border-radius: var(--radius-xs);
  display: inline-flex; align-items: center;
}
.mgr-peek:hover { color: var(--text-primary); background: var(--surface-3); }
.mgr-peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mgr-peek svg { width: 14px; height: 14px; }

/* ── وصندوق الكتابة يملأ الخانة ──
   و`.mgr-edit` حذفت معه: كانت غلافا يصف الصندوق وزري حفظ وإلغاء،
   وقد رفع الزران — Enter يحفظ وEscape يتراجع والمغادرة تحفظ. وكانا في
   خانة عرضها مئة وثمانية عشر يأخذان نصفها ويتزحلقان إلى جارتها. */
.mgr-edit-in {
  display: block;
  width: 100%; min-width: 0;
  box-sizing: border-box;
  padding: 3px 8px; font-size: var(--fs-xs);
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
}
/* ‏وصندوقٌ سقط حفظُه وصاحبُه مضى عنه (mgrBackToFailed): يبقى بما فيه، ويُرى أنه لم يُحفظ */
.mgr-edit-in[data-failed="1"] {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}

/* ── رمز المصادقة حيا ── */
.mgr-otp { display: inline-flex; align-items: center; gap: 6px; }
.mgr-otp-code {
  direction: ltr; unicode-bidi: isolate;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: .12em; font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  background: transparent; border: 0; padding: 2px 4px;
  border-radius: var(--radius-xs); cursor: pointer;
}
.mgr-otp-code:hover { background: var(--surface-3); }
.mgr-otp-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mgr-otp-left {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 26px;
}
/* آخر خمس ثوان: لا يبدأ لصق رمز يموت قبل أن يصل */
.mgr-otp-left[data-low="1"] { color: var(--danger-text); font-weight: var(--fw-bold); }

/* ── وعمود الأفعال سطر واحد لا سطران ──
   كان يلف فينزل زران تحت زر، فيختلف ارتفاع الصفوف ويتكسر إيقاع
   الجدول. وعرض صريح للعمود يسع الأربعة يغني عن اللف. */
.mgr-table-wide td.mgr-c-act { white-space: nowrap; }
.mgr-table-wide .mgr-acts {
  flex-wrap: nowrap; justify-content: flex-end; gap: var(--sp-1);
}
.mgr-table-wide .mgr-acts .btn-sm { flex-shrink: 0; }
/* ‏وعلى اللمس الأزرار أربعةٌ وأربعون فيطول الصفّ الداخل عن عموده: يلتفّ
   سطرين خيرٌ من سلّة حذفٍ خارج الجدول لا تُرى. */
@media (pointer: coarse) {
  .mgr-table-wide .mgr-acts { flex-wrap: wrap; row-gap: 4px; }
}

/* شارة «محفوظ» في نافذة التعديل */
.mgr-cred-mark {
  margin-inline-start: 6px;
  font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full);
  color: var(--text-muted); background: var(--surface-3);
}
.mgr-cred-mark[data-saved="1"] { color: var(--success-text); background: var(--success-soft); }

/* حقول الدخول داخل نافذة الإضافة — مطوية تفتح */
.mgr-more { margin: var(--sp-4) 0; }
.mgr-more > summary {
  cursor: pointer; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-secondary); padding: var(--sp-2) 0;
}
.mgr-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── وأهداف اللمس في الجدول ──
   خانات الكتابة وأزرار الكشف صغيرة عمدا على الفأرة: صف من سبعة
   أعمدة لا يحتمل أهدافا بأربعة وأربعين بكسلا. وعلى اللمس لا خيار —
   إصبع لا تصيب واحدا وثلاثين.

   و(pointer: coarse) لا (max-width): شاشة لمس كبيرة تحتاجها بالقدر
   نفسه، وفأرة على شاشة صغيرة لا تحتاجها. وهي القاعدة نفسها التي
   يمشي عليها style.css. */
@media (pointer: coarse) {
  .mgr-cell,
  .mgr-peek,
  .mgr-otp-code,
  /* وزر الفرز في رأس العمود: نص عاري ارتفاعه ارتفاع سطره */
  .mgr-sort {
    min-height: 44px;
    min-width: 44px;
  }
  .mgr-sort { align-items: center; }
  .mgr-cell { justify-content: center; }
  .mgr-peek { justify-content: center; }
  /* والصف يتنفس معها، وإلا تراكبت الأهداف رأسيا */
  .mgr-table-wide td { padding-block: var(--sp-2); }
}

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

   كان الصف سبعة وخمسين بكسلا: عشرون منها حشوة فوق وتحت، وستة
   وثلاثون أزرار عمود الأفعال. والنص نفسه ثمانية وعشرون — أي أن
   نصف ارتفاع الصف فراغ حول أزرار لا نص.

   وأثر ذلك أن الشاشة تسع عشرة صفوف حيث تسع خمسة عشر، وجدول
   يمسح بالعين صفا صفا يصير أطول مما يحتاج بالثلث.

   فالحشوة خمسة، والأزرار في الجدول أقصر من أزرار الصفحة — وهي
   أزرار صف لا أزرار نموذج. وعلى ما يلمس تعود إلى مقاسها: القاعدة
   أسفل الملف تحت `(pointer: coarse)`. */
/* ── وحد العمود يرسم من الرأس إلى آخر صف ──
   و`--border-subtle` خافت جدا على سطح مصبوغ: صف العناوين كان بلا
   فواصل ترى، فتلتصق العناوين ولا يعرف أيها لأي عمود. */
.mgr-table-wide th,
.mgr-table-wide td {
  border-inline-start: 1px solid var(--border-default);
  padding: 5px 12px;
}
/* ولا حد على أول عمود: حافة الجدول تكفيه */
.mgr-table-wide th:first-child,
.mgr-table-wide td:first-child { border-inline-start: 0; }
/* ‏والخيط الظاهر على المقبض بلون الحد لا شفافا: يرى أين يمسك
   قبل أن تصله الفأرة، فلا يبحث عن حد لا يرى. */
.mgr-table-wide thead th .mgr-grip::after {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.mgr-table-wide thead th .mgr-grip:hover::after,
.mgr-table-wide thead th .mgr-grip:focus-visible::after { background: var(--accent); }

.mgr-table-wide tbody tr { border-top: 1px solid var(--border-subtle); }
.mgr-table-wide tbody tr:first-child { border-top: 0; }

/* ══════════════════════════════════════════════════════════
   صف العناوين
   ══════════════════════════════════════════════════════════

   كان بلون الخلايا نفسه، فلا يفصل عنها إلا بخط رفيع — ورأس لا
   يميز في جدول يمرر رأسيا وأفقيا يجعل القارئ يعد الصفوف
   ليعرف أيها الرأس.

   فصار مصبوغا بلون العلامة صبغة خفيفة: ثمانية بالمئة من `--accent`
   على `--surface-3`. وهي واحدة في الثيمين لأن الطرفين رمزان — أخضر
   فاتح على سطح داكن في الليل، وأخضر داكن على سطح فاتح في النهار
   — ولا لون صريح يكتب هنا.

   وحده السفلي أوضح من حدود الخلايا: هو الفصل بين ما يقرأ عنوانا
   وما يقرأ قيمة. */
.mgr-table-wide thead th {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
  /* ‏وفواصل الرأس أظهر من فواصل الخلايا: هي على سطح مصبوغ، وحد
     خافت عليه لا يرى. ولونها من لون العلامة فتقرأ جزءا من الشريط
     لا خطا غريبا فيه — في الثيمين معا، فالرمزان يتبدلان معهما. */
  border-inline-start-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border-default));
  color: var(--text-strong);
  position: relative;          /* سند المقبض */
  user-select: none;
}
/* ‏والعمودان اللاصقان يأخذان صبغة الرأس في صفه: لولا ذلك لبقيا بلون
   الخلايا فظهرا نافذتين في شريط مصبوغ. */
/* ‏وأوّلُ الرأس معهما وإن فُكّ لزقُه على الجوال (mgr-mail-loose): style.css
   تبيّض أوّل عمودٍ في كلّ جدول، فيبقى رأسُ البريد أبيضَ في شريطٍ مصبوغ. */
.mgr-table-wide thead th.mgr-pinned,
.mgr-table-wide thead th:first-child,
.mgr-table-wide thead th.mgr-c-act {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
}

/* ── مقبض تغيير العرض ──
 *
 * على حد نهاية العمود — يساره في صفحة من اليمين إلى اليسار. وعرضه
 * الظاهر خيط، ومساحة إمساكه تسع بكسلات: خيط بعرض بكسل لا يمسك
 * بفأرة ولا بإصبع.
 */
/* ‏ومساحة الإمساك داخل العمود كلها، لا تتخطى حده ──
   كانت تخرج خمسة بكسلات إلى جاره، فيتراكب مقبضان على حد واحد
   وتقع الضغطة على أيهما اتفق — ويسرق مقبض مستور تحت عمود لاصق
   ضغطة المقبض الظاهر فوقه. والخط المرئي يبقى على الحد نفسه:
   هو `::after` عند حافة المقبض لا في وسطه. */
/* ‏والحد الواحد نصفان: ستة في كل ناحية. فمن أمسك النصف الأيمن
   غير العمود الأيمن، ومن أمسك الأيسر غير الأيسر — ولكل عمود
   ناحيتان يسحب منهما، ولا ينازع مقبض مقبضا على البكسل نفسه. */
.mgr-grip {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 1;
}
.mgr-grip-start { inset-inline-end: auto; inset-inline-start: 0; }
/* والخيط المرئي على الحد نفسه في الحالين */
.mgr-grip-start::after { inset-inline-end: auto; inset-inline-start: 0; }
/* ‏والخيط بطول الرأس لا ستين بالمئة منه: خيط قصير في وسط الحد
   يقرأ زخرفة، وبطوله يقرأ حدا يسحب. */
.mgr-grip::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 2px;
  background: transparent;
  transition: background .12s ease;
}
.mgr-grip:hover::after,
.mgr-grip:focus-visible::after { background: var(--accent); }
/* ‏وأثناء السحب يبقى مضيئا وإن غادره المؤشر */
body.mgr-dragging .mgr-grip::after { background: transparent; }
.mgr-grip:focus-visible { outline: none; }

/* وأثناء السحب يبقى المؤشر واحدا ولا يحدد نص */
body.mgr-dragging { cursor: col-resize; user-select: none; }
body.mgr-dragging * { cursor: col-resize !important; }

/* والمقبض أوسع على اللمس — إصبع لا تصيب اثني عشر */
@media (pointer: coarse) {
  .mgr-grip { width: 15px; }
}

/* ── وحد عمود المدة ──
 *
 * هو أول عمود، و`style.css` تجعل أول عمود في كل جدول لاصقا
 * ليبقى مرئيا عند التمرير الأفقي. ومع `border-collapse: collapse`
 * تطوى حدود الخلايا اللاصقة فتختفي — وهو موثق في style.css نفسها.
 *
 * وحده هناك ظل لا يظهر إلا وقد مر شيء تحته، لأن جدولا يسع
 * شاشته لا يحتاج خطا زائدا. لكن هذا الجدول شبكة: لكل عمود
 * حده، فعمود بلا حد يقرأ خارجها — وهو ما أشار إليه صاحب اللوحة.
 *
 * فيرسم بظل داخلي لا بـ`border`: الظل يرسم على الخلية اللاصقة
 * ولا يطوى معها. وaurora.css تفرض ظلالا على `.card` بـ`!important`،
 * ولا تمس خلايا الجداول — فلا تنازع.
 */
.mgr-table-wide th:first-child,
.mgr-table-wide td:first-child {
  /* الصفحة من اليمين إلى اليسار، فأول عمود يمينها وحده يساره */
  box-shadow: inset -1px 0 0 0 var(--border-subtle);
}
/* ورأسه أغمق قليلا كبقية الرأس */
.mgr-table-wide thead th:first-child {
  box-shadow: inset -1px 0 0 0 var(--border-default);
}

/* والجدول مغلق من أطرافه، فلا تقرأ الخانة الطرفية مفتوحة */
/* ‏والحد الخارجي رفع: كان يحيط بمساحة الحشو فيجعلها تقرأ عمودا
   داخل الجدول. وحدود الخلايا تكفي — الشبكة ترسم بنفسها. */
.mgr-table-wide th:not(.mgr-c-fill),
.mgr-table-wide tbody tr:first-child td:not(.mgr-c-fill) { border-top: 1px solid var(--border-subtle); }
.mgr-table-wide tbody tr:last-child td:not(.mgr-c-fill) { border-bottom: 1px solid var(--border-subtle); }
.mgr-table-wide th.mgr-c-act,
.mgr-table-wide td.mgr-c-act { border-inline-end: 1px solid var(--border-subtle); }
.mgr-table-wide th.mgr-c-mail,
.mgr-table-wide td.mgr-c-mail { border-inline-start: 1px solid var(--border-subtle); }

/* ── وعمود الأفعال يلزق كما يلزق عمود المدة ──
 *
 * ثمانية أعمدة تحتاج ألفا ومئة وخمسين، وشاشة 1440 تعطي الجدول
 * ألفا وأربعة وستين بعد القائمة الجانبية. فالتمرير الأفقي واقع
 * لا مهرب منه — والذي كان يقص به هو عمود الأفعال: أول ما ينقر
 * في كل صف، وآخر ما يرى.
 *
 * ‏style.css تلزق أول عمود ليبقى ما يعرف به الصف مرئيا. وهذا
 * نظيره في الطرف الآخر: تبقى المدة في جهة والفعل في الأخرى، ويجري
 * ما بينهما.
 *
 * والخلفية صريحة لا شفافة، وإلا جرت الخلايا تحتها فاختلط ما يقرأ.
 * والحد ظل لا `border` — لأن الخلايا اللاصقة تطوى حدودها مع
 * `border-collapse: collapse`، وهي العلة نفسها التي عولجت في عمود
 * المدة.
 */
/* ‏وباسمه لا بموضعه: صار بعده عمود حشو يبتلع الفائض، فـ`:last-child`
   تلزق الحشو وتترك الأفعال تجري. */
.mgr-table-wide th.mgr-c-act,
.mgr-table-wide td.mgr-c-act {
  position: sticky;
  inset-inline-end: 0;
  z-index: var(--z-base);
  background: var(--surface-2);
  /* ‏وخطّان: الداخلُ يقابل ما يجري تحته — حدُّه المطويّ لا يُرسم فكانت
     التواريخ تنقطع عليه بلا فاصل — والخارجُ يغلق الجدول من طرفه. */
  box-shadow: inset -1px 0 0 0 var(--border-default), inset 1px 0 0 0 var(--border-subtle);
}
.mgr-table-wide thead th.mgr-c-act {
  z-index: calc(var(--z-base) + 1);   /* فوق خلايا الجسم اللاصقة */
  box-shadow: inset 1px 0 0 0 var(--border-default);
}
/* ‏ومرور الفأرة يشمله كما يشمل عمود البريد (style.css)، وإلا بدا الصفّ
   مقطوعا عند الأفعال. والتحديد يبقى فوقه. واللونُ أيضا (‎[data-bg]‎): كان
   المرورُ يُرمّد خانةَ الأفعال الملوّنة وحدها ووسطُ الصفّ على لونه. */
.mgr-table-wide tbody tr:hover td.mgr-c-act:not(.mgr-sel):not(.mgr-in-range):not([data-bg]) { background: var(--surface-3); }
/* ‏ولا يلزق حيث لا يبقى بينه وبين البريد ما يُقرأ — والوسمان من
   managers.js (looseManagerActs وpinManagerColumns) يقيسان الوعاء. وبـauto
   لا static: الرأس يبقى لاصقا من فوق (#mgrBody … thead th) ومحاذيا لجسمه. */
/* ‏وبلا ظلّ حينها: خليّةٌ لا تنزاح تُرسم حدودُها المطويّة، فيتضاعف الخطّ. */
.mgr-table-wide.mgr-act-loose th.mgr-c-act,
.mgr-table-wide.mgr-act-loose td.mgr-c-act { inset-inline-end: auto; box-shadow: none; }
/* ‏ويمرّ تحت البريد اللاصق كبقيّة الأعمدة: كان بطبقته نفسها وبعده في الترتيب
   فيُرسم فوقه، ويستره كلَّه على ٨٢٠. وpinManagerColumns لا تلزق البريد إلا حيث
   تسع الأفعالُ بجانبه — وهذا حارسُ الكسور، فالبريد يعلو دائما. */
.mgr-table-wide.mgr-act-loose td.mgr-c-act { z-index: auto; }
#mgrBody .mgr-table-wide.mgr-act-loose thead th.mgr-c-act { z-index: calc(var(--z-base) + 2); }
/* ‏وأفعالٌ تجري بجانب بريدٍ لاصق تُرصّ إلى نهاية خانتها — يسارِها — لا إلى بدايتها:
   الخانةُ بعرضها (٥٢٤) أعرضُ مما يبقى بجانب البريد على التابلت، وأوّلُها هو الذي
   ينزلق تحت البريد في آخر التمرير. فيكون ما تحته فراغَها، و«في جلسة» والرأسُ
   («الخطوة التالية») ظاهرين. و‎.mgr-table td‎ تبدأ كلَّ خانة من أوّلها فتغلب ‎.mgr-c-act‎. */
.mgr-table-wide.mgr-act-loose:not(.mgr-mail-loose) th.mgr-c-act,
.mgr-table-wide.mgr-act-loose:not(.mgr-mail-loose) td.mgr-c-act { text-align: end; }
/* ‏وحيث لا تسع الأزرارُ سطرا واحدا بجانبه (٧٠٠ و٧٦٨، و٨٢٠ و٩٠٠ بالقائمة الجانبية)
   تلتفّ سطرين في المتاح منه — والعرضُ يقيسه pinManagerColumns (--mgr-acts-max).
   كان البريد يُفكّ لزقُه هناك، فآخرُ التمرير — حيث «إرسال دعوة» والسلّة — لا يُري
   بريدَ صفّه. وسطرٌ ثانٍ خيرٌ من صفٍّ لا يُعرف لمن هو، كما يلتفّ على اللمس أعلاه. */
.mgr-table-wide.mgr-act-wrap .mgr-acts {
  flex-wrap: wrap; row-gap: 4px;
  max-width: var(--mgr-acts-max, none);
}
/* ‏وعلى الجوال يجري البريد كذلك: style.css تلزق أوّل عمود في كل جدول */
.mgr-table-wide.mgr-mail-loose th:first-child,
.mgr-table-wide.mgr-mail-loose td:first-child { inset-inline-start: auto; }
.mgr-table-wide.mgr-mail-loose th:first-child::after,
.mgr-table-wide.mgr-mail-loose td:first-child::after { display: none; }

/* ============================================
 *  التبويبات — مدة مدة
 * ============================================ */
.mgr-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-subtle);
}
/* ── التبويب لونه علامته ──
   ست مدد تبدل بينها عشرات المرات، ولون واحد يجعل العين تقرأ
   الاسم في كل مرة. فلكل لونه من `--tab-*` في tokens.css: خافت
   حين يسكن، صريح حين يختار. */
.mgr-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  /* ‏والنسب من tokens.css لا من هنا: الفاتح يغمق نصه والداكن
     يفتحه، والقاعدة واحدة. */
  color: color-mix(in srgb, var(--tab) var(--tab-text-mix), var(--tab-text-base));
  background: color-mix(in srgb, var(--tab) var(--tab-tint), transparent);
  border: 1px solid color-mix(in srgb, var(--tab) var(--tab-edge), transparent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.mgr-tab:hover { background: color-mix(in srgb, var(--tab) calc(var(--tab-tint) + 10%), transparent); }
.mgr-tab:focus-visible { outline: 2px solid var(--tab); outline-offset: 2px; }
.mgr-tab[data-active="1"] {
  color: var(--tab-ink);
  background: color-mix(in srgb, var(--tab) var(--tab-solid-mix), var(--tab-solid-base));
  border-color: color-mix(in srgb, var(--tab) var(--tab-solid-mix), var(--tab-solid-base));
}
.mgr-tab-count {
  font-size: 11px; font-weight: var(--fw-bold);
  padding: 1px 7px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tab) 20%, transparent);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.mgr-tab[data-active="1"] .mgr-tab-count {
  background: color-mix(in srgb, var(--tab-ink) 18%, transparent);
}
/* ‏ونقطة حمراء على مدة لا حساب جاهزا لها — ترى قبل أن تفتح */
.mgr-tab[data-gap="1"] .mgr-tab-name::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; margin-inline-start: 6px;
  border-radius: 50%; background: var(--danger);
  vertical-align: middle;
}

/* ‏وتبويب «بلا مدة»: سطرٌ يقول لماذا لا تبيع هذه الحسابات، ومدّةٌ
   تُختار لكلّ واحدٍ فينتقل إلى تبويبها. */
.mgr-orphans {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: var(--radius-sm);
}
.mgr-orphans-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.7;
  color: var(--warning-text);
}
.mgr-orphans-note svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: 3px; }
.mgr-orphans-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mgr-orphans-list li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.mgr-orphans-mail {
  font-weight: var(--fw-semibold); color: var(--text-strong);
  min-width: 0; overflow-wrap: anywhere;
}
.mgr-orphans-was { font-size: var(--fs-xs); color: var(--text-muted); }
.mgr-orphans-pick { width: auto; min-width: 140px; margin-inline-start: auto; }

/* القيمة الظاهرة في خانة تكتب (التاريخ ومرجع الدفع) */
.mgr-plain {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* ── عمود الدعوات: عين واحدة في وسط الخانة ──
   وهي كل ما في العمود، فمكانها وسطه لا طرفه. و`text-align` وحدها
   لا توسط زرا `inline-flex` داخل خانة لها حشوة من ناحية — فيجعل
   الصف فليكس ويوسط صراحة. */
.mgr-table-wide td.mgr-c-inv,
.mgr-c-inv {
  text-align: center;
  padding-inline: 0;
}
.mgr-table-wide td.mgr-c-inv {
  display: table-cell;
}
/* ══════════════════════════════════════════════════════════
   عين الدعوات
   ══════════════════════════════════════════════════════════

   هي باب لوح الأعضاء — أكثر ما ينقر في الصف بعد «إرسال دعوة» —
   وكانت أيقونة رمادية بأربعة عشر بكسلا تشبه بقية الأيقونات
   الصامتة، فلا تقصد بالفأرة ولا تعرف أنها تفتح شيئا.

   فصارت قرصا بلون العلامة: `--accent` على `--accent-soft`، وكلاهما
   مصوغ لهذا الاقتران في الثيمين — أخضر فاتح على داكن في الليل،
   وأخضر داكن على فاتح في النهار. ولا لون صريح هنا: القاعدة أن
   الألوان من tokens.css وحدها. */
.mgr-eye {
  margin: 0 auto;
  width: 32px; height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.mgr-eye svg { width: 22px; height: 22px; }
.mgr-eye:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.mgr-eye:active { transform: scale(.94); }
.mgr-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mgr-eye { transition: none; }
  .mgr-eye:active { transform: none; }
}

/* ── وعناوين الأعمدة في المنتصف ──
   العنوان وسم العمود كله لا أول سطر فيه، ووسطه أهدأ للعين حين
   تمسح رأسا من عشرة عناوين. والقيم تحته تبقى على محاذاتها: البريد
   يقرأ من يساره، والأرقام من يمينها. */
.mgr-table-wide thead th { text-align: center; }
.mgr-table-wide thead th .mgr-sort { justify-content: center; width: 100%; }
.mgr-table-wide thead th .mgr-xhead { justify-content: center; width: 100%; }

/* ============================================
 *  درج الدعوات
 * ============================================
 *
 * يفتح من الجهة التي تقرأ منها الصفحة آخرا — يسارها في RTL —
 * فلا يغطي عمود المدة والاسم اللذين يعرف بهما الصف.
 */
.mgr-panel { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5); }
.mgr-panel-back {
  position: absolute; inset: 0;
  /* ‏ورمز الغطاء لا لون صريح: غطاء المنصة مضبوط للثيمين، وهذا كان
     مضبوطا للفاتح وحده — ففي الغامق يبقى ما خلفه يُقرأ ويشتّت. */
  background: var(--surface-overlay);
  opacity: 0; transition: opacity .22s ease;
}
.mgr-panel.is-open .mgr-panel-back { opacity: 1; }

.mgr-panel-card {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  /* ‏وأربعة أعمدة تريد عرضا أوسع من ثلاثة: رقم، فبريد، فاسم،
     فحال. وضيقه يدفع الجدول إلى شريط تمرير أفقي — والبيانات
     تقرأ لا تمرر. */
  width: min(62vw, 100%);
  min-width: min(900px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-inline-start: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(var(--mgr-panel-dir, -1) * 100%));
  transition: transform .26s cubic-bezier(.22,.9,.32,1);
}
/* والاتجاه يقلب في RTL: الدرج على اليسار فينزلق من اليسار.
   ‏و translateX لا ينقلب مع الاتجاه، فالإشارة تُكتب بيد — ولو بقيت
   على قيمة واحدة لانزلق الدرج في LTR من الجهة الخطأ: يبدأ ظاهرا
   داخل الشاشة ويخرج عند الفتح. فتُشتق من الاتجاه لا من الافتراض. */
:root { --mgr-panel-dir: -1; }
:root:dir(ltr) { --mgr-panel-dir: 1; }
.mgr-panel.is-open .mgr-panel-card { transform: none; }

.mgr-panel-note {
  margin: var(--sp-2) var(--sp-5) 0;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7;
}
/* ‏وكان هذا المحدِّد يُعرَّف ثلاث مرات بقيم متناقضة، فيُجمَع المحسوب
   من ثلاثتها: المرونة من هنا، والفيض من الثانية، والحشو من الثالثة.
   فمن قرأ أولاها ظنّها الحاكمة. جُمِعت في واحدة تقول ما يقع فعلا. */
.mgr-panel-body {
  flex: 1 1 auto;
  overflow: visible;
  padding: var(--sp-4) var(--sp-5) 0;
}
/* ‏وقاعدة حال التحميل ذهبت معها: اللوح لا يكتب حاله بصنف — يرسم
   صفوف انتظار. وكانت قاعدتان لمحدِّد واحد، فدُمجتا.
   ‏ولا يُسمّى الصنف الذاهب هنا: مِكنسة الأصناف تقرأ الاسم في
   التعليق فتحسبه قاعدة قائمة، فتقول «واحد بلا استعمال» وهي صفر. */
.mgr-panel-err { font-size: var(--fs-sm); color: var(--danger-text); }

/* وأثناء العمل: المتصفح يفتح على الخادم فيستغرق */
/* ‏ويحجب ما في اللوح لا اللوح نفسه: البطاقة كلها بلا نقر كانت تسقط
   النقرة إلى الغطاء تحتها، فيغلق اللوح والفعل ماض على الخادم — وأول
   فتحة لحساب لم يقرأ ترمي قراءتها. فالرأس وزر الإغلاق أحياء، ووعاء
   التمرير حي فتمرره العجلة، وما فيه وما في النافذة لا ينقر.
   ‏ولوحة المفاتيح تحجب في الشيفرة (managerPanelShell). */
.mgr-panel-card[data-busy="1"] .mgr-panel-scroll > *,
.mgr-panel-card[data-busy="1"] .mgr-pop-card * { pointer-events: none; }
/* ‏وفي النافذة يبقى إغلاقُها حيّا — × و«تراجع» والغطاء — كما يغلقها Esc:
   الفعل ماضٍ على الخادم وخبرُه يصل لافتة. كانت كلُّها تُحجب بمظهرها الحيّ.
   ‏والبطاقةُ نفسها تأخذ النقرة ولا يأخذها ما فيها: لو حُجبت هي لسقطت النقرةُ
   على نصّها إلى الغطاء تحتها فأُغلقت النافذة. وما لا يُنقر فيها يبهت. */
.mgr-panel-card[data-busy="1"] .mgr-pop-card :is(.mgr-pop-x, .mgr-pop-foot .btn-ghost) { pointer-events: auto; }
.mgr-panel-card[data-busy="1"] .mgr-pop-card { cursor: progress; }
.mgr-panel-card[data-busy="1"] .mgr-pop-card .mgr-fields { opacity: .6; }
.mgr-panel-card[data-busy="1"]::after {
  content: 'جار… قد يستغرق دقيقة';
  /* ‏تحت الرأس لا فوقه: كان يغطي اسم الحساب وزر الإغلاق. وارتفاع الرأس
     مقطوع (‎62px‎ في قاعدته أسفل الملف)، وفوق النافذة (‎5‎) ليرى أثناء
     الإرسال، ولا يأخذ نقرة. */
  position: absolute; inset-inline: 0; top: 62px; z-index: 6;
  pointer-events: none;
  box-sizing: border-box; height: var(--mgr-busy-h); line-height: var(--mgr-busy-h);
  padding: 0 6px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-on-accent); background: var(--accent);
}
/* ‏والشريط لا يستر ما تحته، وما لا يُنقر يبدو كذلك. كان يرسم فوق أعلى
   الأفعال الثلاثة (وبعد التمرير فوق ما يقع عند ارتفاعه)، والأفعالُ وأزرارُ
   الشات و«ألغ» تبتلع النقر بمظهرها الحيّ كاملا — ولا نمط عامّ للمطفأ. فيُفسَح
   له بارتفاعه نفسِه أعلى وعاء التمرير، ويبهت ما فيه، ويقول المؤشّر «يعمل».
   ‏والنافذة ليست في الوعاء: يبهت منها زرُّها وحده (mgr-pop-go أدناه). */
.mgr-panel-card { --mgr-busy-h: 30px; }
.mgr-panel-card[data-busy="1"] .mgr-panel-scroll { padding-top: var(--mgr-busy-h); cursor: progress; }
.mgr-panel-card[data-busy="1"] .mgr-panel-scroll > * { opacity: .6; }

/* ‏والبطاقة يدخلها التركيز عند الفتح (openLayer) لينطق اسمها، وهي ليست
   ما يضغط: إطار حول الدرج كله لا يدل على شيء */
.mgr-panel-card:focus-visible { outline: none; }

/* ‏والإشعارات في زاوية اللوح نفسها — أعلى اليسار في RTL — فكانت تغطي زر
   الإغلاق وأول الأفعال ثلاث ثوان. فتنتقل إلى الجهة الأخرى ما دام مفتوحا */
body:has(#mgrPanel) .toast-container { left: auto; right: 24px; }
/* ‏ولا تمسك النقرة فوق اللوح ولا فوق الشاشة الحية: لا فعل عليها، وكانت فوق كلّ
   شيء ثلاث ثوانٍ فتبتلع النقرة عن زرٍّ تحتها — وأزرارُ الشاشة («تم الدخول»
   و«إلغاء») في زاويتها. وفي بقيّة اللوحة تبقى تُحدَّد وتُنسخ (style.css). */
body:has(#mgrPanel) .toast-container,
body:has(#mgrFull) .toast-container { pointer-events: none; max-width: calc(100vw - 48px); }
/* ‏ولا يتجاوز الإشعارُ الشاشة: إشعارٌ يحمل بريدا طويلا («ممنوع: a.very.long…@gmail.com»)
   كان على ٣٩٠ أعرضَ منها، فيبدأ خارجها ويُقصّ أوّلُ كلامه. وهنا لا في style.css:
   لا يمسّ إشعارَ صفحةٍ غيرِ هذه. */
body:has(#mgrPanel) .toast,
body:has(#mgrFull) .toast { min-width: 0; overflow-wrap: anywhere; }

.mgr-inv-table { min-width: 0; width: 100%; }
.mgr-state[data-tone="bad"] { color: var(--danger-text); background: var(--danger-soft); }

@media (max-width: 768px) {
  .mgr-tabs { gap: 6px; }
  .mgr-tab { padding: 10px 12px; }
  .mgr-panel-card { width: 100%; }
}

/* ── عنوان العمود يضغط فيفرز ── */
.mgr-sort {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.mgr-sort:hover { color: var(--text-strong); }
.mgr-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgr-sort[data-on="1"] { color: var(--accent); }
.mgr-arrow { font-size: 11px; line-height: 1; }

/* ============================================
 *  الشاشات الضيقة — تابلت وجوال
 * ============================================
 *
 * ‏الجدول يمرر أفقيا في حاويته ولا تزاح الصفحة. والعمودان الملزوقان —
 * ‏البريد والأفعال — يجريان مع صفّهما حيث لا يبقى بينهما ما يُقرأ
 * ‏(looseManagerActs في managers.js): كانا يستران الجدول كلّه على الجوال.
 */
@media (max-width: 1024px) {
  /* والتبويبات تمرر ولا تلتف: سطران منها يدفعان الجدول لأسفل */
  .mgr-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mgr-tabs::-webkit-scrollbar { display: none; }
  .mgr-tab { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .mgr-panel-card { width: 100%; }
  /* ‏وحافة واحدة للوح كله على الجوال: كان الرأس على عشرين والأفعال على
     اثني عشر والجدول على ستة عشر والملاحظة على ستة وثلاثين — فلا يستقيم
     منها طرف. والرأس حافته عند قاعدته أسفل الملف: هي بعد هذه فتغلبها. */
  .mgr-panel-body { padding-inline: var(--sp-4); }
  .mgr-panel-note { margin-inline: var(--sp-4); }
  .mgr-panel-card .mgr-deeds { margin-inline: var(--sp-4); }
}

/* ============================================
 *  الرأس — تنقل وفعل في سطر
 * ============================================ */
.mgr-head {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; row-gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
/* ‏والتبويبات في سطرها كاملةً، والأزرار تنزل تحتها إن لم يسعهما سطر:
   الرأس يلتفّ، وموضعُ الشريط يُقاس بطول تبويباته لا بما بقي له. وكان
   سطرا لا يلتفّ فتُعصر التبويبات وحدها — اثنان وأربعون بكسلا على ٨٢٠
   لا يُرى منها تبويبٌ ولا المفتوح، وسطرين داخل الشريط بين ١٠٢٥ و١٣٦٦.
   وما ضاق عنه سطرُها كلّه (التابلت والجوال) يمرّر داخل الشريط ولا يلتفّ. */
/* ‏والحشوة أربعة بقدر حلقة التركيز (خطّان وإزاحة اثنين): الشريط يمرّر
   فيقصّ ما خرج عن حشوته، فكانت الحلقة تُقطع من فوق ومن تحت. والهامش
   السالب يردّ ما زادته الحشوة فلا يطول الرأس. */
.mgr-head .mgr-tabs {
  margin: -4px 0; padding: 4px; border: 0;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: thin;
}
.mgr-head-acts {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--sp-2); margin-inline-start: auto;
  flex: 0 0 auto;
}

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

/* ‏وأنماط البطاقات القديمة رفعت مع البطاقات: «الكل» صارت لوح طاقة
   في آخر هذا الملف. */

/* ── العمودان المثبتان — إزاحتهما تقاس في JS ── */
.mgr-table-wide .mgr-pinned {
  position: sticky;
  z-index: var(--z-base);
  background: var(--surface-2);
}
.mgr-table-wide thead .mgr-pinned { z-index: calc(var(--z-base) + 1); }
.mgr-table-wide .mgr-pinned-edge { box-shadow: inset -1px 0 0 0 var(--border-default); }

@media (max-width: 640px) {
  /* ‏وعلى الجوال يلتف: أربعة أزرار وخمس تبويبات لا تسع سطرا
     عرضه ثلاثمئة وستون. */
  .mgr-head { gap: var(--sp-2); flex-wrap: wrap; }
  .mgr-head-acts { width: 100%; margin-inline-start: 0; flex-wrap: wrap; }
  .mgr-head-acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── شريط المقاعد فوق الجدول ── */
.mgr-seat-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.mgr-seat-sum { font-size: var(--fs-sm); color: var(--text-secondary); }
.mgr-seat-sum strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.mgr-seat-known { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); }
.mgr-seat-ok   { color: var(--success-text); font-weight: var(--fw-semibold); }
.mgr-seat-wait { color: var(--warning-text); font-weight: var(--fw-semibold); }
.mgr-seat-bar .btn { margin-inline-start: auto; }

.mgr-seat-free td { color: var(--text-placeholder); }


/* ولوح الدرج يمرر كله: الجدول ثم النموذجان */
.mgr-panel-scroll { flex: 1 1 auto; overflow: auto; }

/* ‏وما كان هنا وصف جدول بخمسة أعمدة ذهبت: ترقيم وزر إلغاء
   ورأس بمواضع أخرى. وكان يفرض `table-layout: auto` و`max-width: 0`
   على عمود البريد، فينازع القسمة بالنسب أدناه من حيث لا يرى. */

/* ── الشبكة تساس كما يساس الشيت ── */
.mgr-table-wide tbody td { cursor: cell; }
.mgr-table-wide td.mgr-sel {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}
.mgr-table-wide td.mgr-sel:focus { outline: 2px solid var(--accent); }

/* صفوف فارغة تحت — تدعو ولا تزاحم */
/* ‏ولا قاعدة hover هنا: سطح الجدول نفسه `--surface-2`، فتلوينها به
   لا يُرى — وهي تغلب `tr:hover` الموروثة من `.mgr-table` فتسلب
   الصفوف الفارغة استجابةً كانت لها. فتُترك لترثها. */
.mgr-blank td { background: transparent; }

/* ‏و`width: 100%` رفعت من هنا: هي وmin-width الثابتة كانتا تجعلان
   الجدول أعرض من مجموع أعمدته دائما، فيوزع `table-layout: fixed`
   الفارق عليها بالنسبة ولا يعطي عمودا ما طلب له. والملء الآن من
   `min-width: 100%` أعلاه ومن عمود الحشو. */

/* ════════════════════════════════════════════════════════════
   أعمدة يضيفها صاحب اللوحة
   ════════════════════════════════════════════════════════════ */

/* ‏والخانة كبقية الخانات: ما يكتب فيها نص يقرأ، فيقص إن طال
   ولا يلقي بالصف سطرين. */
.mgr-table-wide td.mgr-c-extra {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ‏ورأسه يحمل زر حذفه: من أضاف العمود من رأسه يحذفه من رأسه.
   والزر مستور حتى يمر على الرأس — وإلا صار في الرأس ستة
   صلبان تدعو إلى الحذف. */
.mgr-xhead { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
/* ‏والاسم يُقصّ بنقاطٍ داخل رأسه: كان نصّا عاريا لا ينكمش، فيفيض اسمٌ
   طويلٌ (أربعون حرفا مسموحة) على جاريه ويدفع زرّ الحذف تحت رأس الأفعال
   اللاصق فلا يُنقر. والاسم كاملا في العنوان. */
.mgr-xlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mgr-xdrop {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-placeholder);
  padding: 2px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  opacity: 0; transition: opacity .18s ease;
}
.mgr-xdrop svg { width: 12px; height: 12px; }
th:hover > .mgr-xhead > .mgr-xdrop,
.mgr-xdrop:focus-visible { opacity: 1; }
.mgr-xdrop:hover { color: var(--danger); background: var(--surface-3); }
.mgr-xdrop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ‏وعلى ما يلمس لا مرور فأرة يظهر: يبقى ظاهرا وإلا تعذر الحذف */
@media (pointer: coarse) {
  .mgr-xdrop { opacity: 1; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ── ونافذتها ── */
.mgr-cols { display: flex; flex-direction: column; gap: var(--sp-4); }

.mgr-cols-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.7;
}
.mgr-cols-note svg { flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; }

.mgr-col-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}

/* ‏والحاوية عمود مرن، فزرٌّ فيها يتمطّط عرضها كلَّه ويقرأ شريطاً
   لا زرّاً. فيُقصر على قدر نصّه ويُزاح إلى أوّل السطر. */
.mgr-col-reset { align-self: flex-start; }
.mgr-col-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.mgr-col-name { font-weight: var(--fw-medium); color: var(--text-primary); }

.mgr-col-add { display: flex; gap: var(--sp-2); }
.mgr-col-add .form-input { flex: 1 1 auto; min-width: 0; }
.mgr-col-add .btn { flex-shrink: 0; }
/* ‏ولا قاعدة عامّة للمعطّل في اللوحة: فيُقال هنا إنّ الحفظ جارٍ */
.mgr-col-add .btn:disabled { opacity: .55; cursor: progress; }

/* ══════════════════════════════════════════════════════════
   عمود الحشو
   ══════════════════════════════════════════════════════════

   بلا عرض مطلوب: `table-layout: fixed` تعطي الفائض للأعمدة التي لا
   عرض لها قبل أن توزعه على غيرها. فحين تتسع الشاشة عن مجموع
   الأعمدة يبتلعه هو وحده، وتبقى الأعمدة على مقاسها المطلوب — فيملأ
   الجدول الصفحة ويبقى السحب مطابقا للإصبع.

   ولا يكتب فيه ولا يحدد: هو مساحة لا خانة. وشبكته تنزل معه
   كبقية الجدول، فيقرأ امتدادا للورقة لا عمودا منقوصا. */
/* ‏ولا يرى عمودا: هو مساحة للحساب لا خانة تقرأ. فلا حد له ولا
   سطح — تنتهي الشبكة عند «الخطوة التالية» ويبقى ما بعدها فراغا. وكان
   يقرأ عمودا أخير لا معنى له، وسأل عنه صاحب الجدول. */
.mgr-table-wide th.mgr-c-fill,
.mgr-table-wide td.mgr-c-fill {
  padding: 0;
  background: transparent;
  border: 0;
  border-inline-start: 0;
  border-top: 0;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════
   شبكة تساس كما يساس الشيت
   ══════════════════════════════════════════════════════════ */

/* ‏الخلية الرأس لها حد صريح، وما حولها من المستطيل صبغة خفيفة —
   كما في الشيت: تعرف الخلية التي يكتب فيها من المدى الذي يعمل عليه. */
/* ‏والصبغة على سطح الجدول لا على الشفاف: هي تغلب خلفيّة العمودين
   اللاصقين، وصبغةٌ شفّافةٌ فيهما تُري ما يجري تحتهما — فيختلط البريد
   المحدَّد بما مرّ عليه من خانات. */
.mgr-table-wide td.mgr-in-range {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.mgr-table-wide tbody tr:hover td.mgr-in-range {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
}

/* ── مقبض التعبئة ── */
.table-wrap { position: relative; }

.mgr-fill {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--accent);
  border: 1px solid var(--surface-1);
  border-radius: 1px;
  cursor: crosshair;
  z-index: 3;
}
/* ‏وعلى ما يلمس أكبر: سبعة لا تصاب بإصبع */
@media (pointer: coarse) {
  .mgr-fill { width: 14px; height: 14px; margin: -4px 0 0 -4px; }
}
body.mgr-filling, body.mgr-filling * { cursor: crosshair !important; user-select: none; }

/* ‏وأنماط صندوق البحث ذهبت معه إلى الشريط العلوي — `.top-find`
   في `style.css`، صندوق واحد للمنصة لا واحد لكل صفحة. */

/* ── وقائمة الأعمدة: إظهار وإخفاء وحذف ── */
.mgr-col-see {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.mgr-col-see input { cursor: pointer; accent-color: var(--accent); }
.mgr-col-row[data-off="1"] .mgr-col-name { color: var(--text-placeholder); text-decoration: line-through; }
.mgr-col-fixed { font-size: var(--fs-xs); color: var(--text-placeholder); }

/* ══════════════════════════════════════════════════════════
   ورأس الجدول يبقى فوق
   ══════════════════════════════════════════════════════════

   جدول من خمسة وعشرين صفا يمرر، ورأس يغيب يترك القارئ يعد
   الأعمدة بإصبعه ليعرف أيها «تاريخ التفعيل».

   و`sticky` لا تعمل ما لم يمرر وعاؤها، والوعاء هنا بلا ارتفاع
   محدود — فالصفحة هي التي تمرر لا هو. فيحد ارتفاعه بما يسع
   الشاشة، فيمرر داخله ويلزق رأسه. والحد لا يبين حين تقصر
   الصفوف عنه: `max-height` لا `height`.

   وهو لهذا الجدول وحده: `.table-wrap` في اللوحة كلها، وحد ارتفاع
   عام يقص جداول صفحات لم تقصد.

   ─── والحد يقاس لا يحسب هنا ───

   كان `calc(100vh - 240px)`: رقم يقدر ما فوق الجدول — شريطا علويا
   وتبويبات وسطر إنذار. فلما ذهب سطر الإنذار بقي الرقم كما هو،
   فانفتحت تحت الجدول مئة وثلاثون بكسلا فارغة وشريط التمرير معلق
   فوقها.

   وكل تعديل في الشريط يبطل الرقم من جديد. فيقاس موضع الوعاء
   بعد كل رسمة ويملأ ما تحته — `fitManagerTable` — وهذه القيمة
   احتياط ريثما تقاس، ولمن عطل الجافاسكربت. */
/* ‏و`main` تحتها حشو من اثنين وثلاثين بكسلا لكل صفحة. وهي في غيرها
   فراغ يفصل آخر البطاقات عن حافة النافذة، أما هنا فتحتها شريط
   تمرير أفقي — فيبقى معلقا فوق فراغ لا شيء فيه. فترد عشرون
   منها إلى الجدول، ويبقى اثنا عشر يفصل الشريط عن الحافة. */
#page-managers { margin-bottom: -20px; }

#mgrBody .table-wrap {
  /* ‏و`dvh` لا `vh`: شريط متصفح الجوال يتحرك، و`vh` تحسب على أطوله
     — فيمتد الجدول تحته ويغيب آخر صف. */
  max-height: calc(100dvh - 190px);
  min-height: 180px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  /* ‏وما يستره اللاصقون — البريد والأفعال والرأس — حشوةُ تمرير يقيسها
     managers.js (looseManagerActs): بدونها يحسب المتصفّح خانةً تحت عمود
     الأفعال ظاهرة، فيقف السهم عليها ولا يمرّر إليها. */
  scroll-padding-inline: var(--mgr-pin-s, 0px) var(--mgr-pin-e, 0px);
  scroll-padding-top: var(--mgr-pin-t, 0px);
}
#mgrBody .mgr-table-wide thead th {
  position: sticky; top: 0;
  z-index: calc(var(--z-base) + 2);
}
/* والزاويتان اللاصقتان تعلوان الرأس نفسه */
#mgrBody .mgr-table-wide thead th.mgr-pinned,
#mgrBody .mgr-table-wide thead th.mgr-c-act { z-index: calc(var(--z-base) + 3); }

/* ── ورقة المفاتيح ── */
.mgr-keys { display: flex; flex-direction: column; gap: var(--sp-4); }
.mgr-keys section h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.mgr-keys dl {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px var(--sp-4);
}
.mgr-keys dl > div {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 3px 0;
}
.mgr-keys dt { flex-shrink: 0; margin: 0; }
.mgr-keys dd { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.mgr-keys kbd {
  display: inline-block;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: var(--fs-xs);
  padding: 2px 7px;
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   دليل سحب العمود
   ══════════════════════════════════════════════════════════

   خط بطول الجدول يقول أين يقع الحد في الصفوف كلها لا في الرأس
   وحده، ورقم يقول العرض — فمن أراد عمودين متساويين وجد عددا لا
   تقديرا بالعين. */
/* ‏و`fixed` لا `absolute`: الوعاء يعاد بناؤه والرأس لاصق، فالكتلة
   الحاوية تتبدل تحت الخط. والشاشة لا تتبدل — ويقاس الموضع في
   managers.js من `getBoundingClientRect` ويرسم حيث قيس. */
.mgr-guide {
  position: fixed;
  width: 2px;
  background: var(--accent-solid);
  pointer-events: none;
  z-index: 60;
}
/* ‏والرقم يتبع اليد: موضعه من managers.js على ارتفاع المؤشر. وكان
   عند رأس الجدول فيغطي عنوان العمود الذي يسحب. */
.mgr-guide-num {
  position: absolute;
  top: 6px; inset-inline-start: 6px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-on-accent);
  background: var(--accent-solid);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

/* ── وأزرار الصف أقصر من أزرار الصفحة ── */
.mgr-table-wide .mgr-acts .btn {
  min-height: 28px; padding-block: 3px;
  line-height: 1.2;
}
.mgr-table-wide .mgr-acts .mgr-icon { padding-inline: 7px; }

/* والخانة التي تكتب: سطرها سطر واحد، فلا يزاد عليه */
.mgr-table-wide .mgr-cell { padding-block: 2px; line-height: 1.45; }
.mgr-table-wide .mgr-peek { padding: 3px; }
.mgr-table-wide .mgr-state { padding-block: 2px; }

/* ‏والبريد زر الآن، فيملأ خانته كي تنقر من أي موضع فيها لا من
   فوق حروفه وحدها */
.mgr-mail-btn { width: 100%; justify-content: flex-start; }
.mgr-mail-btn .mgr-mail { width: 100%; }
/* ‏وفي بحث «الكل» تُقال مدّة الصفّ على بريده: الشريط فوقه يقول «الكل»
   والنتيجة من المدد كلّها. وهي مولَّدةٌ لا نصّ، كي لا تدخل صندوق
   التعديل ولا النسخ — وبلون تبويبها في الثيمين كما في سجلّ «الكل». */
.mgr-mail-btn[data-dur] .mgr-mail { width: auto; flex: 1 1 auto; min-width: 0; }
.mgr-mail-btn[data-dur]::after {
  content: attr(data-dur);
  flex: none; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  color: color-mix(in srgb, var(--hue) var(--tab-text-mix), var(--tab-text-base));
  background: color-mix(in srgb, var(--hue) var(--tab-tint), transparent);
}

/* ‏وما يلمس يعود إلى مقاسه: الكثافة للفأرة، والإصبع لا تصيب ثمانية
   وعشرين. وهذه بعد قواعد الكثافة كي تغلبها. */
@media (pointer: coarse) {
  .mgr-table-wide th,
  .mgr-table-wide td { padding-block: var(--sp-2); }
  .mgr-table-wide .mgr-acts .btn { min-height: 44px; }
  .mgr-table-wide .mgr-peek { padding: 10px; }
}

/* ‏كلمة المرور ظاهرة: لاتينية تقرأ حرفا حرفا، فخط أحادي
   العرض — «l» و«1» و«I» تفترق فيه، وهي كلمة تنسخ وتكتب بيد في
   شاشة دخول لا تقبل خطأ واحدا. */
.mgr-pass {
  direction: ltr; unicode-bidi: isolate;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   «الكل» — لوح الطاقة
   ══════════════════════════════════════════════════════════ */

.mgr-sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.mgr-sec-title svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── ١) الطاقة: رقم واحد يقرأ من آخر الغرفة ── */
.mgr-cap {
  padding: var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.mgr-cap-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.mgr-cap-figure { display: flex; align-items: baseline; gap: var(--sp-2); }
.mgr-cap-num {
  font-size: 44px; line-height: 1; font-weight: var(--fw-bold);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.mgr-cap-unit { font-size: var(--fs-base); color: var(--text-secondary); }
.mgr-cap-side { display: flex; flex-direction: column; gap: 2px; }
.mgr-cap-of { font-size: var(--fs-sm); color: var(--text-secondary); }
.mgr-cap-when { font-size: var(--fs-xs); color: var(--text-placeholder); }
.mgr-cap-ask { margin-inline-start: auto; flex-shrink: 0; }

/* والشريط مقسم بألوان المدد: يرى نصيب كل منها بلا قراءة */
.mgr-cap-bar {
  display: flex; gap: 3px;
  margin-top: var(--sp-4);
  height: 10px;
}
.mgr-cap-seg {
  border-radius: var(--radius-full);
  background: var(--hue);
  transition: opacity .2s ease;
}
/* ‏ومدة لا تبيع باهتة لا ملونة، ومجهولة مخططة لا مصمتة — فيفرق
   بالعين بين «ممتلئة» و«لا نعرف»، وهما ليسا شيئا واحدا. */
.mgr-cap-seg[data-tone="off"] { background: var(--border-default); }
.mgr-cap-seg[data-tone="full"] { opacity: .35; }
.mgr-cap-seg[data-tone="unknown"] {
  background: repeating-linear-gradient(135deg,
    var(--hue) 0 4px, transparent 4px 9px);
  border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent);
}

/* ── ٢) وحين لا شيء يمنع ── */
.mgr-allgood {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--success-text, var(--text-secondary));
  background: var(--success-soft);
  border-radius: var(--radius-sm);
}
.mgr-allgood svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   ٣) بطاقات المدد
   ══════════════════════════════════════════════════════════

   المدة وحدة قائمة بذاتها: حساب ومقاعد وعلة وفعل. والبطاقة
   تحتويها، والصف في قائمة يجعلها بندا في جدول. */
.mgr-cards-wrap { margin-top: var(--sp-4); }
.mgr-cards {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
@media (min-width: 1250px) { .mgr-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1750px) { .mgr-cards { grid-template-columns: repeat(5, 1fr); } }

.mgr-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  /* ‏وحافة ملونة بلون تبويبها: تعرف المدة من بعيد بلا قراءة */
  border-inline-start: 3px solid var(--hue);
  border-radius: var(--radius);
  /* ‏والأعمدة متساوية: بلا هذا يتسع عمود البطاقة لأعرض ما فيها */
  min-width: 0;
}
.mgr-card[data-state="blocked"] { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-subtle)); }
.mgr-card[data-state="empty"] { opacity: .78; }

.mgr-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.mgr-card-head h3 {
  margin: 0; font-size: var(--fs-md); color: var(--text-strong);
}
.mgr-card-state {
  margin-inline-start: auto;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); white-space: nowrap;
  color: color-mix(in srgb, var(--hue) var(--tab-text-mix), var(--tab-text-base));
  background: color-mix(in srgb, var(--hue) var(--tab-tint), transparent);
}

.mgr-card-seats { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mgr-card-num { font-size: var(--fs-sm); color: var(--text-secondary); }
.mgr-card-num b { color: var(--text-strong); font-size: var(--fs-base); }

/* والمقاعد خمس دوائر: مأخوذ، ومعلق لم يقبل، وفاض، ومجهول */
/* ‏وتلتف: مدة عليها أربع عائلات عشرون دائرة في سطر، كانت تفيض عن
   بطاقتها فتمرر صفحة الجوال جانبيا، وتمط عمودها على الشاشة الواسعة */
.mgr-pips { display: inline-flex; flex-wrap: wrap; gap: 5px; max-width: 100%; }
.mgr-pip {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.mgr-pip[data-tone="took"] { background: var(--hue); border-color: var(--hue); }
/* ‏والمعلق مجوف بحد متقطع: محجوز ولم يقبل بعد */
.mgr-pip[data-tone="pend"] {
  background: color-mix(in srgb, var(--hue) 22%, transparent);
  border-color: var(--hue); border-style: dashed;
}
.mgr-pip[data-tone="free"] { background: transparent; border-color: var(--border-default); }
.mgr-pip[data-tone="unknown"] { background: transparent; border-style: dotted; border-color: var(--border-default); }

.mgr-card-mail {
  margin: 0; font-size: var(--fs-sm); color: var(--text-secondary);
  direction: ltr; unicode-bidi: isolate; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mgr-card-why {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; font-size: var(--fs-xs); line-height: 1.6;
  color: var(--danger-text, var(--danger));
}
.mgr-card-why[data-ok="1"] { color: var(--text-placeholder); }
.mgr-card-why svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

.mgr-card-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-2);
}
.mgr-card-ask { margin-inline-start: auto; }
.mgr-card-ask svg { width: 13px; height: 13px; }

/* ودوران بينما يسأل جوجل — نصف دقيقة بلا علامة تقرأ عطلا */
/* ‏وباسم غير اسم دائرة الانتظار: كان الزر يحمل «mgr-spin» فيرث قاعدتها
   كلها — عرض أيقونة ونصف قطر وحد ودوران — فينطوي دائرة صغيرة يدور
   نصه حولها نصف دقيقة. والذي يدور هنا أيقونته وحدها. */
.mgr-asking svg { animation: mgrSpin 1s linear infinite; }
@keyframes mgrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mgr-asking svg { animation: none; opacity: .5; } }
/* ‏ولا نمط عام للمطفأ في اللوحة: فالمشغول يقال بلونه ومؤشره، وإلا بدا
   زر «اسأل عن الكل» في شوطه أخضر تاما ينتظر ضغطة */
.mgr-card-ask:disabled, .mgr-cap-ask:disabled { opacity: .65; cursor: progress; }
/* ‏وعنوان الشوط بريد طويل بلا فاصل، ويبقى على الزر ما دام الشوط: كان
   يمده خارج الجوال فتمرر الصفحة جانبيا. فينكسر داخل عرضه. */
.mgr-cap-ask.mgr-asking { max-width: 100%; overflow-wrap: anywhere; }

/* ── ٤) آخر الدعوات ── */
.mgr-feed-week { margin-inline-start: auto; font-weight: var(--fw-normal); color: var(--text-placeholder); }
.mgr-feed-week b { color: var(--danger-text, var(--danger)); }
.mgr-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mgr-feed-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1.4fr) auto auto minmax(0, 2fr);
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.mgr-feed-list svg { width: 15px; height: 15px; }
.mgr-feed-list li[data-ok="1"] svg { color: var(--success); }
.mgr-feed-list li[data-ok="0"] svg { color: var(--danger); }
/* ‏وما بين النجاح والفشل — مقيدة، و«ممكن تكون خرجت»، وملغاة — لا أحمر */
.mgr-feed-list li[data-ok="wait"] svg { color: var(--warning-text, var(--warning)); }
.mgr-feed-list li[data-ok="off"] svg { color: var(--text-placeholder); }
.mgr-feed-list li:not([data-ok="0"]) .mgr-feed-why { color: var(--text-placeholder); }
.mgr-feed-mail {
  direction: ltr; unicode-bidi: isolate; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-primary);
}
.mgr-feed-dur {
  padding: 1px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); white-space: nowrap;
  color: color-mix(in srgb, var(--hue) var(--tab-text-mix), var(--tab-text-base));
  background: color-mix(in srgb, var(--hue) var(--tab-tint), transparent);
}
/* ‏والوقت والسبب في عموديهما وإن غابت شارة المدة: كانا ينزاحان إلى
   مكانها فيأخذ السبب مسارا يتسع له ويعصر البريد — والدعوة الفاشلة بلا
   مدة غالبا. وبالدرجة نفسها لا أعلى: قاعدة الضيق بعدها تغلبها بترتيبها. */
.mgr-feed-when { grid-column: 4; font-size: var(--fs-xs); color: var(--text-placeholder); white-space: nowrap; }
/* ‏وسبب الفشل مكتوب لا مخفي: هو الذي يقرأ لتعرف العلة */
/* ‏واتجاهه من أول حرف فيه: خطأ المتصفح بالإنجليزية كان يقص من أوله
   — وأوله العلة — والنقاط في آخره */
.mgr-feed-why {
  grid-column: 5;
  font-size: var(--fs-xs); color: var(--danger-text, var(--danger));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext;
}

/* ── وعلى الشاشات الضيقة تنهار الشبكة إلى سطور ── */
@media (max-width: 900px) {
  .mgr-cap-num { font-size: 34px; }
  .mgr-cap-ask { margin-inline-start: 0; }
  .mgr-feed-list li { grid-template-columns: 18px 1fr auto; }
  .mgr-feed-why { grid-column: 2 / -1; white-space: normal; }
  .mgr-feed-when { display: none; }
}

/* ‏زر إغلاق الدرج.

   الشريط فوقه يغلقه بالضغط، لكن من فتحه ونزل إلى آخر حقوله لا يعرف
   أن الشريط زر — ولا شيء في الدرج نفسه يقول «أغلقني». وموضعه
   ركن الدرج الأعلى في جهة النهاية، وهو في درج الإرسال فوق عمود
   الحذف الفارغ فلا يزاحم عنوانا. */
/* ══════════════════════════════════════════════════════════
   الافعال الثلاثة: ثلاثة بارات فوق الجدول
   ══════════════════════════════════════════════════════════

   واسمها ليس `mgr-acts`: ذاك اسم عمود الفعل في الجدول، وطراز هذا
   يسبقه في الملف فيرثه العمود. فيصير اربعة ازرار في شبكة ثلاثة:
   ينزل الرابع سطرا، ويقص نص الاول. اسمان لشيئين.

   وثلاثتها بعرض واحد: هي ثلاث اجابات لسؤال واحد — ماذا افعل بهذا
   المقعد — فتعرض معروض الخيارات المتساوية لا معروض زر ومتعلقاته.

   والحافة دائرة تماما لا مستديرة قليلا: الشكل وحده يقول ان هذه
   افعال تضغط، لا حقول تملأ ولا لافتات تقرأ. */
.mgr-deeds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) var(--sp-5) var(--sp-4);
}

.mgr-deed {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding-inline: 20px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: .2px;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
              border-color .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s cubic-bezier(.4, 0, .2, 1),
              transform .12s cubic-bezier(.4, 0, .2, 1);
}
.mgr-deed svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ترتفع قليلا تحت المؤشر وتنزل تحت الضغط: البار الكبير بلا حركة
   يقرأ لافتة ملونة، والحركة وحدها تقول انه يضغط. */
.mgr-deed:hover { transform: translateY(-1px); }
.mgr-deed:active { transform: translateY(0); }
.mgr-deed:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* والاول مصمت والاخران مصبوغان: الارسال يفعل كل يوم فتقع عليه
   العين اولا، والالغاء نادر فلا يزاحمه في القوة. */
.mgr-deed[data-tone="send"] {
  background: var(--accent-solid);
  color: var(--text-on-accent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%),
              0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.mgr-deed[data-tone="send"]:hover {
  background: var(--accent-solid-hover);
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%),
              0 10px 22px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}

.mgr-deed[data-tone="swap"],
.mgr-deed[data-tone="drop"] {
  background: var(--deed-bg);
  border-color: var(--deed-edge);
  color: var(--deed-text);
}
.mgr-deed[data-tone="swap"]:hover,
.mgr-deed[data-tone="drop"]:hover {
  background: var(--deed-hover);
  border-color: var(--deed-tint);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--deed-tint) 50%, transparent);
}

.mgr-deed[data-tone="swap"] {
  --deed-tint: var(--warning);
  --deed-text: var(--warning-text);
  --deed-bg: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  --deed-edge: color-mix(in srgb, var(--warning) 34%, transparent);
  --deed-hover: color-mix(in srgb, var(--warning) 20%, var(--surface-1));
}
.mgr-deed[data-tone="drop"] {
  --deed-tint: var(--danger);
  --deed-text: var(--danger-text);
  --deed-bg: color-mix(in srgb, var(--danger) 12%, var(--surface-1));
  --deed-edge: color-mix(in srgb, var(--danger) 34%, transparent);
  --deed-hover: color-mix(in srgb, var(--danger) 20%, var(--surface-1));
}

/* وعلى الضيق: الارسال بار كامل فوق، والاخران يقتسمان ما تحته.
   ثلاثة عناوين عربية لا تسع ثلاثمئة وستين بكسلا. */
@media (max-width: 620px) {
  .mgr-deeds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: var(--sp-3);
    gap: var(--sp-2);
  }
  .mgr-deed[data-tone="send"] { grid-column: 1 / -1; }
  .mgr-deed { min-height: 48px; padding-inline: 14px; font-size: var(--fs-sm); }
}

/* ══════════════════════════════════════════════════════════
   نافذة الإلغاء — توسط في اللوح لا في الشاشة
   ══════════════════════════════════════════════════════════

   ‏مضيفها داخل بطاقة اللوح، فـ`inset: 0` تغطيه هو. ولوح الأعضاء
   فوق نافذة اللوحة العامة في الطبقات، فنافذة عامة تفتح من داخله
   ترسم خلفه — وهذه لا يقع لها ذلك لأنها منه. */
.mgr-pop {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.mgr-pop-back {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface-1) 68%, transparent);
  backdrop-filter: blur(2px);
}
/* ‏ولافتة «جار…» فوقها لا تحتها: كانت هذه الطبقة ترسم فوق اللافتة
   وغطاؤها المغبش يمحوها، فلا علامة تقرأ أن الفعل يجري دقيقة كاملة
   والنافذة مفتوحة — وهي الحال الغالبة، فالإلغاء يبقيها حتى يتم.
   ‏وعلوُّها (ستّة) في قاعدتها نفسها أعلى الملف، لا هنا ثانيةً. */
.mgr-pop-card {
  position: relative;
  width: min(430px, 100%);
  /* ‏ونافذة الإرسال أوسع: عمودان وخمسة صفوف لا يسعها عرض سؤال واحد */
}
.mgr-pop-card[data-wide="1"] { width: min(600px, 100%); }
.mgr-pop-card {
  max-height: 100%;
  overflow: hidden auto;
  display: grid; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface-1);
  /* ‏والحد مشتق من لون الفعل لا رمادي محايد: يقرأ إطار النافذة
     ولونها شيئا واحدا. وسماكته واحدة في الجهات الأربع — شريط
     غليظ في أعلاها وحده يقطع عند الزاويتين فيبدو ملصقا عليها. */
  border: 1px solid var(--pop-edge, var(--border-default));
  border-radius: var(--radius-lg);
  /* ‏وظل على طبقتين: قريب يفصلها عما تحتها، وبعيد واسع يعطيها
     ثقلا. وطبقة واحدة تجعلها تبدو ورقة مقصوصة لا لوحا مرفوعا. */
  /* ‏والطبقتان من الرمزين لا بلونين صريحين: القيمتان كانتا مضبوطتين
     للفاتح وحده، وفي الغامق لا يُرى الظل — فتلتحم النافذة بالدرج
     تحتها ولا يفصلهما إلا شعرة الحد. والرمزان ينقلبان مع الثيم. */
  box-shadow: var(--shadow-sm), var(--shadow-lg);
  animation: mgrPopIn .16s ease;
}

/* ‏وشريط اللون في أعلاها من الداخل: يتبع استدارة الزاوية ولا يقص
   عندها، ويقف عند حافة الحد لا فوقه. */
.mgr-pop-card::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--pop-tone, var(--accent));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@keyframes mgrPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mgr-pop-card { animation: none; } }

/* ‏ولون الرأس لون الزر الذي فتحه: من ضغط الأحمر يجد أحمر، فيعرف
   أنه في الفعل الذي قصده قبل أن يقرأ العنوان. */
.mgr-pop-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.mgr-pop-head h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; flex: 1 1 auto;
  font-size: var(--fs-md); color: var(--text-strong);
}
.mgr-pop-head svg { width: var(--icon-md); height: var(--icon-md); }
/* ‏ولون الفعل يكتب مرة في متغيرين، ويقرأ في الشريط والحد
   والأيقونة والزر — فلا يذكر اللون في أربعة مواضع تفترق. */
/* ── والنغمة من رمز النصّ لا من رمز اللون ──
   الزرّ `.mgr-pop-go` يجعل النغمة خلفيةً وحبرَه `--text-on-accent`.
   وفي الفاتح `--warning` كهرمانيٌّ متوسط، فالأبيض عليه 3.19:1 —
   دون الحدّ — و`--danger` 4.70:1 يمرّ بالكاد. وهذا زرّ التأكيد
   الأخير قبل إلغاء مقعدٍ اشتراه عميل.
   و`--warning-text`/`--danger-text` أغمق درجةً في الفاتح (5.02:1
   و5.4:1)، وفي الغامق هما الرمزان نفسهما حرفا بحرف — فالتبديل
   يُصلح الفاتح ولا يمسّ الغامق. */
.mgr-pop-card[data-tone="drop"] {
  --pop-tone: var(--danger-text);
  --pop-edge: color-mix(in srgb, var(--danger-text) 34%, var(--border-default));
}
.mgr-pop-card[data-tone="swap"] {
  --pop-tone: var(--warning-text);
  --pop-edge: color-mix(in srgb, var(--warning-text) 34%, var(--border-default));
}
.mgr-pop-card[data-tone="send"] {
  --pop-tone: var(--accent);
  --pop-edge: color-mix(in srgb, var(--accent) 34%, var(--border-default));
}
.mgr-pop-head svg { color: var(--pop-tone, var(--accent)); }

/* ‏وزر الإغلاق له شكل قبل أن يمر عليه: كان أيقونة عارية في
   فراغ، فلا يقرأ زرا ولا يعرف أين يضغط. */
.mgr-pop-x {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.mgr-pop-x:hover {
  color: var(--pop-tone, var(--text-strong));
  background: color-mix(in srgb, var(--pop-tone, var(--accent)) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--pop-tone, var(--accent)) 40%, transparent);
}
.mgr-pop-x svg { width: 15px; height: 15px; }

.mgr-pop-note {
  margin: 0;
  padding: 9px 12px;
  font-size: var(--fs-xs); line-height: 1.7;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--pop-tone, var(--accent)) 7%, transparent);
  border-inline-start: 3px solid color-mix(in srgb, var(--pop-tone, var(--accent)) 45%, transparent);
  border-radius: var(--radius-sm);
}
.mgr-pop-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-subtle);
}
/* ‏وزر الفعل صنف خاص لا `btn-primary`.
   `aurora.css` تفرض لون `btn-primary` بـ`!important`، فلا يلون بلون
   فعله إلا بمغالبتها بـ`!important` آخر — ومغالبة كهذه تورث: من
   يقرأ الملف بعد لا يعرف أي القاعدتين تحكم.
   وصنف لا ينازعه أحد أوضح وأقصر. */
.mgr-pop-go {
  margin-inline-start: auto;
  color: var(--text-on-accent);
  /* ‏نغمة النافذة، وتردّ إلى لون الفعل حين لا نغمة. وكانت قاعدتان
     متتاليتان: الأولى تكتب الخلفية والثانية تدهسها في السطر التالي. */
  background: var(--pop-tone, var(--accent-solid));
  border: 1px solid transparent;
}
.mgr-pop-go:hover:not(:disabled) { filter: brightness(1.08); }
/* ‏ولا نمط عاما للمطفأ في اللوحة: كان الزر يبقى زاهيا بمؤشر اليد وهو
   يعمل دقيقة، ودواره واقف — فيقرأ خاملا ويضغط ثانية. */
.mgr-pop-go:disabled,
.mgr-panel-card[data-busy="1"] .mgr-pop-go { opacity: .6; cursor: progress; filter: none; }
.mgr-pop-go svg.lucide-loader { animation: mgrSpin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mgr-pop-go svg.lucide-loader { animation: none; } }

/* ‏والملاحظة حين تحمل خبر الفعل — لا يعرف أخرج، أو خرج ولم يقيد —
   تأخذ لون التنبيه: هي ما يقرأ قبل الإغلاق، والنافذة تبقى لأجلها. */
.mgr-pop-note[data-say="1"] {
  --pop-tone: var(--warning-text);
  color: var(--text-strong);
}

@media (max-width: 620px) {
  .mgr-pop { padding: var(--sp-3); }
  .mgr-pop-card { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   صفوف الإرسال: شارة رقم، فعمود للرقم، فعمود للبريد
   ══════════════════════════════════════════════════════════

   كان حقلان تحت بعضهما بعنوان لكل منهما. وخمس دعوات في خمسة
   صفوف بذلك الشكل عشرة حقول وعشرة عناوين — عمود طويل لا يقرأ
   منه أي رقم يخص أي بريد. فعمودان بعنوان واحد فوقهما.

   ثم لزم الترقيم: خمسة صفوف متطابقة لا يميزها شيء، فمن قال
   «الثالث فيه خطأ» يعد بأصبعه. والشارة تعد عنه.

   ورقمها من عداد الطراز لا من جافاسكربت: الحذف يعيد الترقيم
   وحده بلا اعادة رسم — ومن ملأ اربعة ثم حذف الثاني لا يفقد ما
   كتب في الباقي. */
.mgr-send { display: grid; gap: var(--sp-2); }

#mgrSendRows { counter-reset: seat; display: grid; gap: var(--sp-2); }

.mgr-send-head,
.mgr-send-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.35fr) 34px;
  gap: var(--sp-2);
  align-items: center;
}
.mgr-send-head span {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.mgr-send-row .form-input { width: 100%; min-width: 0; }

/* والصف يحيط بحقوله حين تكتب: خمسة صفوف متجاورة بلا حد بينها
   يضيع فيها موضع المؤشر، وحاشية دائمة حول كل صف تجعل النافذة
   شبكة محاسبة. فلا تظهر الا للصف الذي فيه العمل. */
.mgr-send-row {
  counter-increment: seat;
  padding: 4px 6px;
  margin-inline: -6px;
  border-radius: var(--radius-md);
  transition: background-color .15s ease;
}
.mgr-send-row:focus-within { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.mgr-send-n {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  font-size: 12px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  user-select: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.mgr-send-n::before { content: counter(seat); }

/* والشارة تقول اين انت: تمتلئ للصف الذي تكتب فيه */
.mgr-send-row:focus-within .mgr-send-n {
  color: var(--text-on-accent);
  background: var(--accent-solid);
  border-color: transparent;
}

/* وزر الحذف يخفى على الصف الوحيد ولا يرفع: رفعه يزيح الاعمدة
   فيقفز الصف عرضا كلما زيد صف أو حذف. */
.mgr-send-x {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--text-placeholder);
  background: none; border: 0; border-radius: var(--radius-full);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.mgr-send-x:hover { color: var(--danger-text); background: var(--danger-soft); }
.mgr-send-x:focus-visible { outline: 2px solid var(--danger); outline-offset: 1px; }
.mgr-send-x svg { width: 16px; height: 16px; }
#mgrSendRows[data-alone="1"] .mgr-send-x { visibility: hidden; }

/* والصف الذي خرجت دعوته يعلم لحظة: من أرسل خمسا يريد أن يرى
   أيها تم، والحقول فرغت فلا شيء يدل عليه. */
.mgr-send-row[data-done="1"] .form-input {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border-default));
  background: color-mix(in srgb, var(--success) 6%, transparent);
}
/* ‏والرقم 12px بوزن 700 ليس «نصا كبيرا» فيلزمه 4.5:1، والأبيض على
   `--success` في الفاتح 3.77:1. و`--success-text` أغمق درجة (5.49:1)
   وهو `--success` نفسه في الغامق — والشارة هي العلامة الوحيدة على
   أن الدعوة خرجت بعد أن تفرغ الحقول. */
.mgr-send-row[data-done="1"] .mgr-send-n {
  color: var(--text-on-accent);
  background: var(--success-text);
  border-color: transparent;
}

/* ‏والصف الذي لم يخرج يعلم بالأحمر وسببه في تلميحه: منعه الخادم لأن
   لعنوانه مقعدا، أو سقط في الحزمة. كان يقال «٢ من العناوين» ولا
   يقال أيها، فيخمن من يقرأ أي صفين يحذف. */
.mgr-send-row[data-blocked="1"] .mgr-send-mail,
.mgr-send-row .mgr-send-mail[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* و«أضف دعوة أخرى» تحت الصفوف بعرضها: هي منها لا من أزرار
   القرار، وحدها المتقطع يقول ان مكانا فارغا ينتظر هنا. */
.mgr-send-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: var(--sp-1);
  color: var(--text-secondary);
  background: none;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-md);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.mgr-send-add:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
#mgrSendAdd:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 620px) {
  /* وعلى الضيق: الشارة والحذف على الجانبين، والحقلان بينهما */
  .mgr-send-head { display: none; }
  .mgr-send-row {
    grid-template-columns: 28px minmax(0, 1fr) 44px;
    row-gap: var(--sp-1);
  }
  /* ‏ولكل عنصر خانته صريحة: الشارة والحذف كانا يثبتان الصف وحده،
     فيضع الموزع الحذف في عمود الحقلين ويدفعهما سطرين تحته. */
  .mgr-send-n { grid-column: 1; grid-row: 1 / 3; }
  .mgr-send-ref { grid-column: 2; grid-row: 1; }
  .mgr-send-mail { grid-column: 2; grid-row: 2; }
  .mgr-send-x { grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; }
}

/* ولا وسم «اسم» بعد اليوم: كان يلصق بالاسم في خانة البريد ليقال
   إنه ليس بريدا. وللاسم عموده الآن، فلا يشتبه به. */

/* ══════════════════════════════════════════════════════════
   شريطا تمرير الجدول
   ══════════════════════════════════════════════════════════

   الجدول يمرر في المحورين: أفقيا لأن أعمدته أعرض من الشاشة،
   ورأسيا لأن له حد ارتفاع يبقي رأسه لاصقا. فشريطاه يريان معا
   في الركن، وشريط باهت في جدول يمرر عشرات المرات في اليوم يبحث
   عنه في كل مرة.

   فأثخن من شريط اللوحة العام (عشرة → أربعة عشر)، ومقبضه بلون العلامة
   مخففا — يرى ولا يصرخ — ويشتد عند المرور عليه. والمحوران بمقاس
   واحد ولون واحد، فلا يبدو أحدهما شريطا والآخر خطا.

   ولون العلامة رمز يتبدل بالثيم، فالشريط ظاهر في الداكن والفاتح
   بلا لون صريح يكتب هنا. */
/* ‏والخاصتان القياسيتان لمن لا يعرف أشباه webkit وحده (فايرفوكس): في
   كروم ١٢١ وما بعده تطفئ أي منهما كل قواعد webkit على العنصر نفسه —
   فكان الشريطان رفيعين بعشرة، بلا مسلك ولا اشتداد، لا ما كتب هنا. */
@supports not selector(::-webkit-scrollbar) {
  #mgrBody .table-wrap,
  .mgr-panel-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)) transparent;
  }
}
#mgrBody .table-wrap::-webkit-scrollbar {
  width: 13px; height: 13px;
}
/* ‏والمسلك يرى كمسلك: كان تلوينا باهتا بلا حد فيبدو المقبض خطا
   سابحا في فراغ. فصار له حد رفيع وأرضية تفصله عن الصفوف. */
#mgrBody .table-wrap::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
#mgrBody .table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 60%, var(--border-strong)) !important;
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
#mgrBody .table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}
/* ‏والركن بين الشريطين لا يترك أبيض في الداكن */
#mgrBody .table-wrap::-webkit-scrollbar-corner { background: transparent; }

/* ولوح الأعضاء يتبعهما، فلا يختلف شريطان في صفحة واحدة */
/* ‏وعرضه عرض شريط الجدول: التعليق أعلاه يشترط ألا يختلف شريطان في
   صفحة واحدة، وكان هذا أعرض بواحد — فرقٌ يُرى ولا يُفسَّر. */
.mgr-panel-scroll::-webkit-scrollbar { width: 13px; }
.mgr-panel-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 55%, var(--border-strong)) !important;
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.mgr-panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent) !important; }


/* ══════════════════════════════════════════════════════════
   لوح الأعضاء — سطر ثابت، وأشرطة تفتح
   ══════════════════════════════════════════════════════════ */

/* ── الرأس: اسم وصاحب عائلة وإغلاق في سطر واحد ──
   كان سطرين — عنوان فوق بريد تحته — بارتفاع يتبدل بطول البريد،
   فيقرأ الرأس غير مستقر. وارتفاعه هنا مقطوع لا يتبع ما فيه. */
.mgr-panel-head {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 62px; flex-shrink: 0;
  padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-default));
}
/* ‏وعلى الجوال حافته حافة الجدول تحته — انظر كتلة ‎640px‎ أعلى الملف */
@media (max-width: 640px) {
  .mgr-panel-head { padding-inline: var(--sp-4); }
}
.mgr-panel-tag {
  flex-shrink: 0;
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--text-on-accent); background: var(--accent-solid);
}
.mgr-panel-owner {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0; flex: 1 1 auto;
  font-size: var(--fs-sm);
}
.mgr-panel-owner-k { flex-shrink: 0; color: var(--text-placeholder); }
.mgr-panel-owner b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-strong); font-weight: var(--fw-semibold);
  direction: ltr; unicode-bidi: isolate;
}
.mgr-panel-x {
  flex-shrink: 0;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mgr-panel-x svg { width: 18px; height: 18px; }
.mgr-panel-x:hover { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger); }
.mgr-panel-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── الأشرطة: شريط يضغط فيفتح ما تحته ── */

.mgr-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.mgr-f { display: flex; flex-direction: column; gap: 5px; }
.mgr-f > span { font-size: var(--fs-xs); color: var(--text-secondary); }
.mgr-fields .btn { align-self: flex-start; }

/* ── الجدول: أربعة أعمدة ── */
/* ══════════════════════════════════════════════════════════
   حواف الجدول — شبكة كاملة ترى في الثيمين
   ══════════════════════════════════════════════════════════

   ‏كان الحد على جانب واحد من الخانة فقط، بلا سطر بين الصفوف ولا
   إطار حول الجدول: فتنتهي الشبكة عند حافة أول عمود وآخره، وتبدو
   الصفوف سابحة بلا وعاء.

   ─── واللون يشتق من لون النص ───

   «أسود واضح» في الثيم الفاتح هو نفسه المختفي في الداكن. و`--text-primary`
   داكن في الفاتح وفاتح في الداكن — أي أنه مناقض للأرضية في الحالين
   بحكم تعريفه. فيمزج منه الحد، فيرى في الثيمين بلا لون صريح
   يكتب مرتين وينسى أحدهما عند أول تبديل للألوان.

   وثلاث درجات: الإطار أغمقها، فحد الرأس، فشبكة الخانات. */
.mgr-inv-table {
  table-layout: fixed; width: 100%;
  --seat-grid: color-mix(in srgb, var(--text-primary) 30%, transparent);
  --seat-edge: color-mix(in srgb, var(--text-primary) 52%, transparent);
  border: 1.5px solid var(--seat-edge);
  border-radius: var(--radius-sm);
}
.mgr-inv-table th, .mgr-inv-table td {
  padding: 9px 10px;
  border: 1px solid var(--seat-grid);
}
.mgr-inv-table thead th {
  text-align: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
  border-color: var(--seat-grid);
  border-bottom: 2px solid var(--seat-edge);
}
/* ‏والعرض يكتب على العنوان أيضا: `table-layout: fixed` تقرأ عروض
   الأعمدة من الصف الأول وحده — صف العناوين — فعرض على خانة جسم
   لا يقرأ، وتقسم الأعمدة بالتساوي كأن لا عرض كتب.

   والقسمة على أربعة بالنسب لا بالبكسل: اللوح عرضه من عرض
   الشاشة، فقيمة ثابتة تفيض على شاشة وتضيق على أخرى.

   والبريد أوسعها: `name@gmail.com` أطول ما في الصف. والاسم دونه —
   «MonTher A» كلمتان — والرقم والحال أضيقهما. */
/* ‏وعمود يعد المقاعد: خمسة صفوف بلا رقم لا يشار إلى واحد منها —
   من قال «الثالث» عد بأصبعه من فوق. ورقمه من عداد لا من الشيفرة:
   الجدول يعاد رسمه كلما تغير شيء، فعد في الرسم يعاد كتابته في كل
   مرة، وعداد الطراز يكتبه مرة واحدة ويصح نفسه. */
.mgr-inv-table tbody { counter-reset: seatrow; }
.mgr-inv-table tbody tr { counter-increment: seatrow; }
.mgr-inv-table .mgr-inv-n {
  width: 5%;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--surface-2);
  user-select: none;
}
.mgr-inv-table tbody .mgr-inv-n::before { content: counter(seatrow); }
/* ‏وخانة الرأس بصبغة الرأس: سطح العمود أعلاه، وقاعدة العمود الأول
   اللاصق في style.css، كلاهما يغلب صبغة الرأس — فتبقى زاوية بيضاء في
   شريطه. وهذا المحدد يعادل الثاني ويليه فيغلبه. */
.mgr-inv-table thead .mgr-inv-n {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
}

/* ‏والأعمدة مئة لا مئة وواحد، والبريد أوسع مما كان: أطول ما في الصف
   وأوله هوية العميل، وكان يقص عند سبعة وعشرين حرفا والحال والزر في
   عمودين أعرض من حاجتهما. */
/* ‏ورقم الطلب سطر واحد يقص بنقاط والقيمة في تلميحها: كان يلتف ثلاثة
   أسطر، وما لا ينكسر منه يسيل تحت عمود الرقم اللاصق فتضيع خاناته
   الأخيرة بلا علامة. والحشوة ستة لا عشرة: رقم جوال من اثنتي عشرة
   خانة يسعه العمود كله على شاشة الحاسوب. */
.mgr-inv-table .mgr-inv-ref {
  width: 13%; text-align: center; font-variant-numeric: tabular-nums;
  padding-inline: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgr-inv-table .mgr-inv-mail {
  width: 31%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm);
}
.mgr-inv-table thead .mgr-inv-mail,
.mgr-inv-table thead .mgr-inv-name,
.mgr-inv-table thead .mgr-inv-chat,
.mgr-inv-table thead .mgr-inv-act { font-size: var(--fs-xs); }
.mgr-inv-table .mgr-inv-name {
  width: 16%; text-align: center; padding-inline: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
/* ‏والاسم يأخذ اتجاهه من أول حرف فيه: الخانة ترث RTL، فالاسم اللاتيني
   يقص من أوله — «…Saad Abdelrahman» — ويضيع الاسم الأول الذي يعرف به.
   والعربي يبقى كما هو. */
.mgr-inv-table tbody .mgr-inv-name { unicode-bidi: plaintext; }
/* ‏والخانة التي تكتب تقول انها تكتب قبل ان تنقر: مؤشر يتغير،
   وحد يظهر تحت المؤشر. وخانة تفتح على نقرة بلا اي علامة يجدها من
   نقر مصادفة، ولا يجدها من يبحث عنها. */
.mgr-inv-table .mgr-seat-edit { cursor: text; }
.mgr-inv-table .mgr-seat-edit:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.mgr-inv-table .mgr-seat-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mgr-seat-in {
  width: 100%; min-width: 0;
  height: 30px; padding: 2px 8px;
  font-size: var(--fs-sm);
  text-align: inherit;
}
/* ‏والمقعد الفارغ: «مقعد فارغ» تبهت تحت المؤشر لتقول ان مكانها يكتب */
/* ‏و‎.65 لا ‎.4: اللون موروث `--text-placeholder` وهو خافت أصلا،
   فأربعة من عشرة تهبط به إلى ما لا يُقرأ — يختفي النصّ في اللحظة
   التي يمرّ فيها المؤشّر ليكتب، وهي عكس المقصود. */
.mgr-inv-table .mgr-seat-free .mgr-seat-edit:hover .mgr-empty { opacity: .65; }

/* ‏والحشوة ستة: قرص «لم يسأل جوجل» أعرض ما في العمود، وقرص أعرض من
   خانته يسيل إلى جهة واحدة لا إلى الجهتين — فيركب على زر جاره */
.mgr-inv-table .mgr-inv-state { width: 17%; text-align: center; padding-inline: 6px; }
/* ‏وعمودُ الشات خمسةٌ من المئة، أُخذت من البريد والاسم والإلغاء: زرٌّ بلا نصّ عرضُه
   اثنان وثلاثون، وحشوتُه اثنان لتسعه الخانةُ على أضيق جدول (740px أدناه). والاسمُ
   ستّةَ عشر وحشوتُه ثمانية: «Mohammed Saad» يُقرأ كلُّه على الحاسوب كما كان.
   و«لا يلغى» أعرضُ ما في عمود الإلغاء — تسعةٌ وسبعون — فحشوتُه ستّةٌ كجاره لا عشرة. */
.mgr-inv-table .mgr-inv-chat { width: 5%; text-align: center; padding-inline: 2px; }
.mgr-inv-table .mgr-inv-act { width: 13%; text-align: center; padding-inline: 6px; }

/* ‏زرُّ الشات في صفّ العضو: قرصُ «ألغ» نفسُه ارتفاعا وشكلا، بلون العلامة لا الخطر —
   فعلٌ آمنٌ يُضغط كثيرا، يُرى ولا يُنذر. ويشتدّ عند المرور كما يشتدّ جارُه.
   ‏و:disabled له هنا: لا قاعدة عامّة في اللوحة، وهو يُطفأ ما دام الخيطُ يُفتح. */
.mgr-seat-chat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 33px; padding: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mgr-seat-chat svg { width: 16px; height: 16px; }
.mgr-seat-chat:hover {
  color: var(--text-on-accent);
  background: var(--accent-solid);
  border-color: var(--accent-solid);
}
.mgr-seat-chat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgr-seat-chat:disabled { opacity: .6; cursor: progress; }
.mgr-seat-chat:disabled:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mgr-seat-chat { transition: none; }
}
/* ‏والشرطةُ تقول لماذا لا زرّ في تلميحها — كشرطة جدول الشكاوى */
.mgr-seat-nochat { color: var(--text-muted); cursor: help; }

/* ‏زر إلغاء المقعد في صفه.

   ولونه الخطر مخففا لا صريحا: خمسة صفوف فيها خمسة أزرار حمراء
   صريحة تقرأ إنذارا في جدول أكثره سليم. فيهدأ حتى يمر عليه.

   والمطفأ يبقى مقروءا لا شبحا: هو يقول شيئا — «قبل فلا يلغى» —
   وسببه في تلميحه، فمن أخفاه أخفى الجواب. */
.mgr-seat-cut {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: not-allowed; white-space: nowrap;
}
.mgr-seat-cut svg { width: 13px; height: 13px; }
.mgr-seat-cut.is-live {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  cursor: pointer;
}
.mgr-seat-cut.is-live:hover {
  color: var(--text-on-accent);
  background: var(--danger);
  border-color: var(--danger);
}
.mgr-seat-cut.is-live:disabled { opacity: .6; cursor: progress; }
.mgr-seat-cut.is-live:disabled svg { animation: mgrSpin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mgr-seat-cut.is-live:disabled svg { animation: none; }
}
.mgr-inv-table tbody tr { height: 42px; }
.mgr-inv-table .mgr-seat-free td { text-align: center; }

/* ── وصفّ ينتظر جوابا ليس مقعدا فارغا ──
   يُرسم حين لم يُسأل الخادم بعد، ولا يُكتب فيه. وكان يحمل صنفه بلا
   قاعدة تميّزه، فيقرأ كالفارغ إلا من «…». فيبهت قليلا ويعلن أنه
   ليس موضع كتابة. */
.mgr-inv-table .mgr-seat-wait-row td { opacity: .55; cursor: default; }
/* ‏و`.mgr-table` العامة تضع `border-bottom` بلون شعري على كل خانة،
   وهي تلي هذه في الملف فتغلب عليها بالترتيب لا بالأولوية. فيعاد
   تثبيت لون الشبكة هنا صراحة. */
.mgr-inv-table th, .mgr-inv-table td { border-bottom-color: var(--seat-grid); }
.mgr-inv-table thead th { border-bottom-color: var(--seat-edge); }


/* ‏«يسأل جوجل…»: حال ثالثة لا خضراء ولا كهرمانية — لا نعرف بعد،
   وادعاء المعرفة هنا أسوأ من الانتظار. */
.mgr-state[data-tone="ask"] {
  padding: 3px 10px; border-radius: var(--radius-full);
  font-weight: var(--fw-semibold); white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-3);
}
/* ‏والزر يقول ما يفعل واسمه ثابت، والوقت بجانبه باهتا في قوسين:
   كان الاسم يستبدل بالوقت بعد اول قراءة فيضيع الزر نفسه. */
.mgr-seat-ask { gap: 6px; }
.mgr-seat-since {
  font-size: var(--fs-xs);
  /* ‏`--fw-regular` لا وجود له في التوكنز — والتصريح بمتغيّر غير
     معرَّف يسقط عند الحساب فيُورَث وزن الأب، وهو هنا وزن الزرّ
     نفسه. فكان الوقت يخرج ثقيلا، وتعليقه يعده باهتا. */
  font-weight: var(--fw-normal);
  color: var(--text-muted);
}
.mgr-seat-since::before { content: '('; }
.mgr-seat-since::after { content: ')'; }

.mgr-seat-none { font-size: var(--fs-xs); color: var(--text-muted); }

/* ‏والصف الفارغ خاناته كخانات غيره — الشبكة أعلاه تشمله، ولا
   يحتاج قاعدة تخصه بعد أن صار الحد على الجهات الأربع. */


/* ── ولا تمرير أفقيا في لوح الأعضاء على الشاشة الواسعة ──
   جدوله سبعة أعمدة بنسب من عرضه (`table-layout: fixed`) تسعه هناك.
   وشريط التمرير كان يظهر من `.table-wrap` العامة وحدها — شريط لا
   شيء خلفه يمرر إليه.
   ‏ولا حركة ظهور: اللوح يعيد رسم جدوله بعد كل تعديل وكل فعل، و`riseIn`
   العامة تعيد تشغيلها على كل غلاف جديد — فيغيب الجدول كله ويعود لخانة
   واحدة تغيرت. وانزلاق البطاقة يكفي أول ظهوره. */
.mgr-panel-card .table-wrap { overflow-x: visible; animation: none; }
/* ‏وعلى الجوال لا تسعه: سبعة أعمدة في ثلاثمئة وخمسين بكسلا تتراكب
   عناوينها، ويركب قرص الحال على زر «ألغ»، ويخرج «لا يلغى» من الشاشة.
   فيأخذ عرضا يسع أعرض ما فيه — قرص «لم يسأل جوجل» في عمود ١٧٪ — ويمرر
   في غلافه، والعمود الأول يبقى لاصقا من قاعدته العامة في style.css.
   ‏والحد عند ‎800px‎: ما فوقه يعطي الجدول ‎740px‎ فأكثر فلا يمرر شيئا.
   ‏ورقم الطلب هنا يلتف ولا يقص: لا تلميح يقرأ بالإصبع، والرقم يحتاج كله. */
@media (max-width: 800px) {
  .mgr-panel-card .table-wrap { overflow-x: auto; }
  .mgr-panel-card .mgr-inv-table { min-width: 740px; }
  .mgr-inv-table tbody .mgr-inv-ref { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}
/* ‏وعلى الجوال يلزق البريدُ بعد الرقم: «#» وحده كان اللاصق، فآخرُ التمرير —
   حيث زرُّ الشات و«ألغ» الحيّة التي تُلغي بلا سؤال — يُري الرقمَ و«—» للاسم
   (المعلّقُ لا اسم له) والحالَ، والبريدُ الذي يُعرف به العميل خارج الشاشة.
   وعرضُه اثنان وعشرون من المئة لا واحدٌ وثلاثون: لاصقٌ بعرضه كان يأكل ٢٦٦ من
   ٣٥٨ فلا يسع ما بجانبه الشاتَ والإلغاءَ معا. والتسعةُ للاسم والحال.
   والإزاحةُ عرضُ «#» من جدولٍ عرضُه هنا ‎740px‎ (القاعدة أعلاه) — والوعاءُ أضيق.
   والخلفيّةُ صريحةٌ والحدّان ظلّ: الحدودُ المطويّة لا تتبع الخانة اللاصقة. */
@media (max-width: 560px) {
  .mgr-inv-table .mgr-inv-mail { width: 22%; }
  .mgr-inv-table .mgr-inv-name { width: 21%; }
  .mgr-inv-table .mgr-inv-state { width: 21%; }
  .mgr-inv-table th.mgr-inv-mail,
  .mgr-inv-table td.mgr-inv-mail {
    position: sticky;
    /* ‏right لا inset-inline-start: خانةُ البريد تحمل dir="ltr" فيصير «أوّلُها» يسارا */
    right: 37px; left: auto;
    z-index: var(--z-base);
    background: var(--surface-1);
    box-shadow: inset 1px 0 0 0 var(--seat-grid), inset -1px 0 0 0 var(--seat-grid);
  }
  .mgr-inv-table thead th.mgr-inv-mail {
    z-index: calc(var(--z-base) + 1);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
  }
  .mgr-inv-table tbody tr:hover td.mgr-inv-mail { background: var(--surface-3); }
  .mgr-inv-table td.mgr-inv-mail.mgr-seat-edit:hover {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 45%, transparent),
                inset 1px 0 0 0 var(--seat-grid), inset -1px 0 0 0 var(--seat-grid);
  }
}

/* ── وشريط «إرسال دعوة جديدة» فعل لا عنوان ──
   كان بلون السطح، فيقرأ عنوانا مكتوبا لا زرا يضغط — وهو أكثر ما
   يضغط في اللوح. فصار بلون العلامة: سطح مصبوغ وحد وأيقونة ونص
   بلونها، ويشتد عند المرور. وشريطا الإلغاء يبقيان هادئين: فعل يقصد
   لا يبحث عنه. */




.mgr-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--success-text, #047857);
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #16a34a) 28%, transparent);
}
.mgr-proof-chip i {
  width: 12px;
  height: 12px;
}
.mgr-proof-chip b {
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
/* ‏والحال التي لا يريدها تقال حمراء صريحة، لا تخفى */
/* ══════════════════════════════════════════════════════════
   شريط البرهان — سطر واحد نظيف لا يلتف ولا يزاحم
   ══════════════════════════════════════════════════════════

   ‏الأقراص تأخذ ما بقي من الشريط وتنزلق أفقيا إن ضاق، ولا تدفع
   البريد ولا تنزل تحته. */
.mgr-live-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline-start: 10px;
}
.mgr-live-proof::-webkit-scrollbar { display: none; }

.mgr-proof-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
  /* ‏والنصُّ بدرجة «-text»: أحدَ عشرَ بكسلا بلون --success على صبغته كان 3.3:1 في
     الفاتح — والصبغةُ والحدُّ على اللون نفسِه كما كانا. واسمُ القرص (em) بشفوفية .9
     لا .72: كان 2.9:1 */
  color: var(--success-text, #047857);
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #16a34a) 28%, transparent);
}
.mgr-proof-chip i { width: 12px; height: 12px; flex: none; }
.mgr-proof-chip b {
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
/* ‏واسم القرص قبل قيمته: رقم بلا اسم لا يقرأ */
.mgr-proof-chip em {
  font-style: normal;
  opacity: .9;
  font-size: 10px;
  margin-inline-end: 1px;
}

.mgr-live-proof.is-local .mgr-proof-chip,
.mgr-live-proof.is-local {
  color: var(--danger-text, #be123c);
}
.mgr-live-proof.is-local {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
}
.mgr-live-proof.is-local i { width: 12px; height: 12px; }

/* ‏واسم القرص قبل قيمته: رقم بلا اسم لا يقرأ — سأل صاحب المتجر
   «زود فوق الحاجات بالعربي عشان نعرف اي الدنيا». */
.mgr-proof-chip em {
  font-style: normal;
  opacity: .9;
  font-size: 10px;
  margin-inline-end: 1px;
}

/* ‏والجواب يسكن الفراغ في الشريط لا شريطا ثالثا تحته: كان السطر
   الأخير خاليا في عرض الشاشة كله، وصاحبه يسأل «استغل الفراغ ده». */
.mgr-live-quick .mgr-live-out {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}
.mgr-live-quick .mgr-live-out:empty { display: none; }
/* ‏وجوابُ «تم الدخول» سطرٌ لا بطاقة: البطاقةُ كانت تنزل صفّا وحدها بعلوّ ١٥٠ بكسلا
   فيصغر المشهدُ ربعَه وتُعاد صفحةُ جوجل أصغرَ — وهي تقول «أكمل في الشاشة». وسطران
   على الأكثر في الهاتف، والنصُّ كلُّه في title. */
.mgr-live-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}
.mgr-live-note[data-tone="unknown"] { color: var(--warning-text); }
.mgr-live-note b { font-weight: var(--fw-bold); }
.mgr-live-note svg,
.mgr-live-note .mgr-spin {
  display: inline-block;
  width: var(--icon-sm);
  height: var(--icon-sm);
  vertical-align: -3px;
  margin-inline-end: var(--sp-1);
}

/* ══════════════════════════════════════════════════════════
   خانة «الخطوة التالية» — واحد يُفعل، وما سواه يُتاح
   ══════════════════════════════════════════════════════════

   ‏كانت خمسة أهداف في خانة عرضها 248: نقطة الحال، وزر رئيس،
   وأيقونة شاشة تفعل ما يفعله الرئيس نفسه، ومفتاح، وسلة حذف
   ملاصقة لما يضغط كل يوم.

   ‏ثم صار: الحال، ثم الخطوة، ثم مختصرها، ثم فاصل، ثم ما يندر — سبعةٌ تتزاحم، ويقع كلٌّ منها
   ‏في موضعٍ غير موضعه في الصفّ الذي فوقه. «العمود زحمة اوي ومنظره وحش» (المالك، 2026-09-26).

   ‏فصار الحالَ بعرضٍ واحد وزرًّا واحدا «إجراء» تنسدل منه الأفعالُ كلُّها، كما في صفحة الشكاوى:
   ‏«زر إجراء ويفتح قائمة منسدلة… نوفر المساحة ويبقى شكله شيك» (المالك). */
/* ‏والحالُ بعرض أطولها («موقوف مؤقتا») وفي وسطه: «إجراء» بعدها في خطٍّ واحد في كلّ صفّ */
.mgr-table-wide .mgr-acts .mgr-sess { min-width: var(--mgr-sess-w, 124px); justify-content: center; }
.mgr-acts .mgr-act-btn { flex: none; gap: 6px; }
.mgr-acts .mgr-act-btn .mgr-act-caret { width: 14px; height: 14px; margin-inline-start: -2px; opacity: .85; transition: transform .15s; }
.mgr-acts .mgr-act-btn[aria-expanded="true"] .mgr-act-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mgr-acts .mgr-act-btn .mgr-act-caret { transition: none; } }

/* ‏قائمة «إجراء» — بسطح نوافذ اللوحة؛ والخطوةُ التالية أوّلُها بلون العلامة، والحذفُ آخرُها بلونه */
.mgr-more-menu {
  position: fixed;
  z-index: calc(var(--z-topbar) + 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;
}
.mgr-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;
}
.mgr-more-menu [role^="menuitem"] svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.mgr-more-menu [role^="menuitem"]:hover,
.mgr-more-menu [role^="menuitem"]:focus-visible { background: var(--surface-3); outline: none; }
.mgr-more-menu [role^="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mgr-more-menu [data-main] { color: var(--accent); font-weight: var(--fw-bold); }
.mgr-more-menu [data-main] svg { color: currentColor; }
.mgr-more-menu [data-danger] { color: var(--danger-text); }
.mgr-more-menu [data-danger] svg { color: currentColor; }
.mgr-more-menu [data-danger]:hover,
.mgr-more-menu [data-danger]:focus-visible { background: var(--danger-soft); }
.mgr-more-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); }
@media (pointer: coarse) {
  .mgr-more-menu [role^="menuitem"] { min-height: 44px; }
}
/* ‏ودوّارةُ العمل تدور: ساكنةٌ تُقرأ عطبا لا انتظارا */
.mgr-acts .btn.is-busy svg {
  animation: mgr-spin-ico 1s linear infinite;
}
@keyframes mgr-spin-ico { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mgr-acts .btn.is-busy svg { animation: none; opacity: .6; }
}

/* ‏وما ليس بلدَ الحساب يُعرف بلونه: قرصٌ أحمر يقول إنّ الصفحة خرجت
   من دولةٍ غير التي ثُبّت عليها — ولا يُقرأ ذلك من اسم مقاطعة. */
.mgr-proof-chip.is-off {
  color: var(--danger-text, #be123c);
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
}

/* ‏ورقما استرداد فوق بعضهما لا جنب بعض: في سطر واحد يقرآن رقما
   طويلا واحدا، وهما اثنان يُتّصل بكل منهما وحده. */
.mgr-plain.mgr-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.3;
}
.mgr-plain.mgr-stack > span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  unicode-bidi: isolate;
}

/* ‏وشريط «المنصة تكمّل بنفسها» — بدل خانة تطلب ما في الخزانة */
.mgr-live-quick.is-hidden { display: none; }
.mgr-live-auto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.mgr-live-auto i {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--success, #16a34a);
}
.mgr-live-auto b {
  color: var(--text-primary);
  white-space: nowrap;
}
.mgr-live-auto > span {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}
@media (max-width: 720px) {
  .mgr-live-auto { flex-wrap: wrap; }
  .mgr-live-auto > span { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════
   أقراص بيانات الدخول — تحت الشاشة الحية، تُنسخ بضغطة
   ══════════════════════════════════════════════════════════

   ‏أول دخولٍ يحتاج إنسانا، فتوضع بياناته كلها بين يديه: البريد
   وكلمة المرور والرمز الحيّ وبريد الاسترداد. */
/* ‏والشريط سطرٌ واحد لا يأكل من المشهد: كان عمودا بارتفاعٍ حرّ
   فانزوت صفحة جوجل في أعلى الشاشة وبقي تحتها سوادٌ عريض. */
.mgr-live-creds {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
  /* ── شريطٌ واحدٌ يُسحب ──
     ‏كان «يلتفّ» — ولم يلتفّ: الأقراصُ في `.mgr-cred-row` التي لا تلتفّ،
     فبقي الصفُّ أعرضَ من الشاشة (قيس ٢٤٧٧ بكسلا)، والصفحةُ عربيّةٌ
     فيفيض يسارا حيث لا يُبلَغ. وطلب صاحبُها أن يسحبه، فيُمرَّر أفقيّا
     ويُسحب بالفأرة (`mgrDragScroll`) وبالعجلة وباللمس، وأوّلُه يمينا
     البريدُ وكلمةُ المرور والرمز. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  cursor: grab;
  padding-block: 2px;
  /* ── وعلوُّه من أوّل لحظةٍ علوُّه بعد أن تصل الأقراص ──
     ‏المسرحُ يُقاس لحظةَ الفتح، وعليه تُضبط نافذةُ المتصفّح على الخادم. وكان الشريطُ
     سطرا «تُجلب بيانات الدخول…» (٢٧) ثمّ يصير أقراصا وشريطَ تمرير (٥٢) — فيقصر المسرحُ
     بعد الضبط ٢٥ بكسلا، وتصغر الصورةُ ويسودّ جانباها (قيس من لقطة المالك: ٢٧ على
     جهازه). فيُحجز: قرصُ الرمز ٣٨ وحشوٌ ٤ وشريطُ تمريرٍ رفيع ١٠، ومعها بكسلان احتياطا. */
  min-height: 54px;
}
.mgr-live-creds.is-dragging { cursor: grabbing; user-select: none; }
.mgr-live-creds.is-dragging .mgr-cred { pointer-events: none; }
/* ‏وما وراء الحافّة يُرى: تتلاشى الحافّةُ التي خلفها أقراص */
.mgr-live-creds.is-more-left,
.mgr-live-proof.is-more-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
  mask-image: linear-gradient(to right, transparent 0, #000 56px);
}
.mgr-live-creds.is-more-right,
.mgr-live-proof.is-more-right {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px);
  mask-image: linear-gradient(to left, transparent 0, #000 56px);
}
.mgr-live-creds.is-more-left.is-more-right,
.mgr-live-proof.is-more-left.is-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.mgr-live-proof { cursor: grab; }
.mgr-live-proof.is-dragging { cursor: grabbing; user-select: none; }
.mgr-cred-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  /* ‏ولا يُضغط ليسع: عرضُه عرضُ أقراصه، والحاويةُ هي التي تمرّر */
  flex: none;
}
.mgr-cred-row > .mgr-cred { flex: none; }
.mgr-cred {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-2, rgba(255,255,255,.04));
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  max-width: 100%;
}
.mgr-cred:hover { border-color: var(--accent, #22c55e); }
.mgr-cred.is-copied {
  border-color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
}
.mgr-cred-k {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
/* ‏والقيمة غليظةٌ كبيرة: من يقرؤها ليكتبها في صفحة جوجل لا يحتمل
   حرفا يلتبس بغيره — صفرٌ بحرف O، أو l بـ1. وطلبها صاحبها صراحة:
   «خليهم بولت وكبّر الخط عشان محدش يتلغبط». */
.mgr-cred-v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-primary);
  unicode-bidi: isolate;
  /* ‏ولا يُقصّ بـ«…»: الشريطُ يُمرَّر ويُسحب، فالقرصُ يطول ولا يضيق — وعنوانٌ
     مقصوصٌ لا يُكتب في صفحة الدفع */
  white-space: nowrap;
}
.mgr-cred i,
.mgr-cred svg { width: 13px; height: 13px; flex: none; color: var(--text-muted); }
/* ‏ورمزُ المصادقة أكبرُها: ستة أرقامٍ تُقرأ في ثوانٍ قبل أن تموت */
.mgr-cred-otp .mgr-cred-v { font-size: 19px; letter-spacing: 3px; font-weight: 700; }
/* ‏ورمزٌ مات أو لم يتجدّد يُرى باهتا ولا يُنسخ حتى يصل طازج */
.mgr-cred-otp .mgr-cred-v[data-stale] { opacity: .4; }
.mgr-cred-left {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 26px;
  text-align: center;
}
.mgr-cred-left[data-low="1"] { color: var(--danger-text, #be123c); }
.mgr-cred-wait { font-size: var(--fs-xs); color: var(--text-muted); }
.mgr-cred-more { flex: none; }

/* ‏قلمُ التغيير بجوار كلمة المرور والرمز — صغيرٌ لا يزاحم القرصَ الذي يُنسخ */
.mgr-cred-edit {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline-start: -4px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.mgr-cred-edit:hover { color: var(--text-primary); border-color: var(--accent, #22c55e); }
.mgr-cred-edit svg, .mgr-cred-edit i { width: 14px; height: 14px; }
.mgr-cred-add { border-style: dashed; }
.mgr-cred-add .mgr-cred-k { font-size: 12px; }

/* ‏ومحرّرُه في الشريط نفسه: حقلٌ، ورمزُ الجديد، واحفظ */
.mgr-cred-editor .mgr-cred-input {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
  max-width: 340px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--accent, #22c55e);
  background: var(--surface-1, transparent);
  color: var(--text-primary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
}
/* ‏ولا قاعدةَ `:disabled` في اللوحة كلِّها — فـ«احفظ» قبل أن يصلح المفتاح
   كانت تُقرأ شغّالة. تُعلن هنا لما في المحرّر وحده */
.mgr-cred-editor .mgr-cred:disabled,
.mgr-cred-editor .btn:disabled { opacity: .45; cursor: not-allowed; }
.mgr-cred-editor .btn { flex: none; }

/* ‏والمحرّرُ يلتفّ ولا يُمرَّر: على الهاتف كان الحقلُ يملأ الشريط، فيقع رمزُ المفتاح
   الجديد و«احفظ» والتعليمةُ خارج النظر (قيس على ٣٩٠: من ‎-611‎ إلى ‎41‎) — ورمزٌ
   لا يُرى لا يُكتب في جوجل. فالصفُّ بعرض الشريط، والحقلُ يضيق إلى ما يسعه
   (‎.mgr-cred-input‎ فوق)، والتعليمةُ تلتفّ تحته. وعلى العريضة يبقى سطرا واحدا. */
.mgr-cred-row.mgr-cred-editor {
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
.mgr-cred-editor .mgr-cred-wait {
  flex: 1 1 220px;
  min-width: 0;
  white-space: normal;
}

/* ‏شاشة الخادم — موصولة في صفحتنا، وnoVNC يضع لوحته بداخلها */
.mgr-live-vnc {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #1a1a1a;
  overflow: hidden;
}
.mgr-live-vnc canvas {
  display: block;
  /* ‏ولا ظلّ ولا إطار: هي شاشة تُنظر لا بطاقة تُعرض */
  outline: none;
}

/* ‏وفاصلٌ بين بيانات الدخول وبيانات الدفع: هذه تُكتب في جوجل،
   وتلك تُكتب في صفحة الدفع — وخلطهما في سطر واحد يُربك. */
.mgr-cred-split {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin-inline: 4px;
  background: var(--border-default);
}

/* ══════════════════════════════════════════════════════════
   ألوان الخلفية — كما تُلوَّن ورقةُ الشيت
   ══════════════════════════════════════════════════════════
   ‏لوحُ الشيت نفسُه ممزوجا بسطح الجدول، فيبقى اللونُ مصمتا — الخلايا
   اللاصقة (المدة والأفعال) تمرّ تحتها الخلايا، ولونٌ شفّافٌ يُريها —
   ويتبع الثيم: في الداكن أعمق وفي الفاتح باستيل كما في الشيت.
   والأسماء لا الأكواد تُحفظ (src/services/managerFills.js). */
.mgr-table-wide,
.mgr-bg-pop { --mgr-bg-mix: 30%; }
:root[data-theme="light"] .mgr-table-wide,
:root[data-theme="light"] .mgr-bg-pop { --mgr-bg-mix: 42%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mgr-table-wide,
  :root:not([data-theme="dark"]) .mgr-bg-pop { --mgr-bg-mix: 42%; }
}
[data-bg="red"]    { --mgr-bg: color-mix(in srgb, #e06666 var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="orange"] { --mgr-bg: color-mix(in srgb, #f6b26b var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="yellow"] { --mgr-bg: color-mix(in srgb, #ffd966 var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="green"]  { --mgr-bg: color-mix(in srgb, #93c47d var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="teal"]   { --mgr-bg: color-mix(in srgb, #76a5af var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="blue"]   { --mgr-bg: color-mix(in srgb, #6d9eeb var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="purple"] { --mgr-bg: color-mix(in srgb, #8e7cc3 var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="pink"]   { --mgr-bg: color-mix(in srgb, #c27ba0 var(--mgr-bg-mix), var(--surface-2)); }
[data-bg="gray"]   { --mgr-bg: color-mix(in srgb, #999999 var(--mgr-bg-mix), var(--surface-2)); }

.mgr-table-wide tbody td[data-bg] { background-color: var(--mgr-bg); }
/* ‏ومرورُ الفأرة لا يُرمّد خانةَ البريد الملوّنة: style.css يصبغ الخانةَ اللاصقة الأولى
   (‎.table-wrap tr:hover td:first-child‎) فوق لونها، فكان الصفُّ الملوّن يُرى مقطوعَ
   الطرفين تحت الفأرة — وعلى اللمس يبقى المرورُ بعد النقر */
.mgr-table-wide tbody tr:hover td[data-bg]:first-child { background-color: var(--mgr-bg); }
/* ‏والتحديدُ يُرى فوق اللون صبغةً لا يمحوه — كما في الشيت */
.mgr-table-wide tbody td[data-bg].mgr-in-range,
.mgr-table-wide tbody td[data-bg].mgr-sel,
.mgr-table-wide tbody tr:hover td[data-bg].mgr-in-range,
.mgr-table-wide tbody tr:hover td[data-bg].mgr-sel {
  background-color: var(--mgr-bg);
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent),
                                    color-mix(in srgb, var(--accent) 18%, transparent));
}

/* ── لوح الألوان ── */
.mgr-bg-pop {
  position: fixed;
  z-index: calc(var(--z-topbar) + 1);   /* فوق الشريط العلوي، تحت النوافذ */
  width: 232px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; gap: 10px;
}
.mgr-bg-scope {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: 3px; gap: 3px;
}
.mgr-bg-scope button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary);
  font: inherit; font-size: 13px;
  padding: 6px 4px; border-radius: 6px;
}
.mgr-bg-scope button[aria-checked="true"] {
  background: var(--surface-2);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.mgr-bg-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mgr-bg-sw {
  aspect-ratio: 1; width: 100%;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--mgr-bg);
  cursor: pointer;
}
.mgr-bg-sw:hover { transform: scale(1.08); }
.mgr-bg-sw:focus-visible,
.mgr-bg-scope button:focus-visible,
.mgr-bg-none:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgr-bg-none {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-default); background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 13px;
  padding: 6px; border-radius: var(--radius-sm);
}
.mgr-bg-none svg { width: 14px; height: 14px; }
.mgr-bg-none:hover { background: var(--surface-3); color: var(--text-primary); }
.mgr-bg-hint { margin: 0; font-size: 12px; color: var(--text-secondary); text-align: center; }

/* ── لوح الأعضاء: مسودةُ المقعد الفارغ، ونافذةُ السؤال فوق اللوح ── */
/* ‏وبريد ركن في مقعد فارغ ولم يرسل يقرأ مسودة لا مقعدا: لون التنبيه
   وخط متقطع تحته، والتلميح يقول إن Enter ترسله. وبلا علامة كان يشبه
   دعوة خرجت، فيغلق اللوح من ظن أنها خرجت. */
.mgr-inv-table .mgr-seat-edit[data-draft="1"] {
  color: var(--warning-text);
  text-decoration: underline dashed color-mix(in srgb, var(--warning-text) 60%, transparent);
  text-underline-offset: 3px;
}

/* ‏ونافذة السؤال تعلو لوح الأعضاء ما دام مفتوحا: openLayer يكتب علوها في
   وسمها (مئتان وعدد الطبقات)، واللوح مئتان وخمسة — فكانت تفتح تحته.
   وسؤال «أرسلها رغم ذلك» أو «العائلة ممتلئة» يسأل من داخل اللوح، فنقرة
   الجواب تقع على غطاء اللوح فتغلقه ولا تجيب. و!important لأن العلو في
   الوسم نفسه، ولا يغلبه غيرها. */
/* ‏والعلو علوها الذي في dialog.css نفسه (٢٥٠): فوق اللوح وفوق الشاشة الحية
   (٢١٠) معا، وتحت اللافتات (٣٠٠). */
/* ‏والشاشة الحية وحدها كذلك: تأكيدٌ متأخّرٌ من لوحٍ أُغلق (مقعدٌ قائم، أو سجلٌّ لم
   يُقرأ) يُفتح بعلو openLayer (٢٠١) تحت الشاشة (٢١٠)، فلا يُرى ويحبس التركيز وEsc. */
body:has(#mgrPanel) #uiDialogOverlay,
body:has(#mgrFull) #uiDialogOverlay { z-index: 250 !important; }

/* ‏وقاعدتان كانتا هنا ذهبتا بعد الدمج، ولكلٍّ منهما أصلٌ أعلى الملف يقول ما قالته:
   التفافُ الرأس تحت ألفٍ ومئة (قاعدةُ ‎.mgr-head‎ في «الرأس — تنقل وفعل في سطر»
   تلفّه على كلّ عرض والتبويباتُ في سطرها كاملةً)، وصبغةُ المستطيل على العمودين
   اللاصقين (قاعدةُ ‎td.mgr-in-range‎ في «شبكة تساس كما يساس الشيت» صبغتُها على
   سطح الجدول لكلّ خانة). ونسختان من قاعدةٍ واحدة تفترقان عند أوّل تعديل. */

/* ── رمزُ مفتاح المصادقة تحت خانته وهي تُكتب ──
   ‏يُقارَن برمز صفحة جوجل قبل الحفظ (mgrOtpEditAssist). تحت الخانة لا
   داخلها: العمودُ مئةٌ وأربعة وعشرون والصندوقُ يملؤه. */
.mgr-table-wide td.mgr-c-otp { position: relative; }
/* ‏وبعرض الخانة يلتفّ لا سطرا واحدا: مفتاحُ جوجل اثنان وثلاثون حرفا (ثلاثمئةٍ وعشرون
   تقريبا)، فكان يخرج من يسار الجدول على ما دون الألف والأربعمئة ويُخفي نصفَه الأوّل
   حتى يُمرَّر — وهو ما يُقارَن بصفحة جوجل. فيلتفّ عند فواصل مجموعاته الأربعية */
.mgr-otp-tip {
  position: absolute;
  top: calc(100% - 2px);
  inset-inline: 6px;
  z-index: calc(var(--z-base) + 2);
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.mgr-otp-tip[data-tone="ok"]  { color: var(--success); }
.mgr-otp-tip[data-tone="bad"] { color: var(--danger); }
.mgr-otp-key {
  display: block;
  margin-top: 2px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: var(--text-primary);
  font-weight: var(--fw-normal);
}

/* ══════════════════════════════════════════════════════════
   ‏التحديد والسحب كما في الشيت
   ══════════════════════════════════════════════════════════ */

/* ‏حدٌّ واحدٌ حول المستطيل كلِّه (paintManagerRange) — لا خانةٌ خانة. وبالظلّ الداخليّ:
   ‏الخانةُ اللاصقة تحفظ موضعها، وحدٌّ حقيقيٌّ يُطوى مع جاره. والبدايةُ يمينٌ في العربيّة */
.mgr-table-wide td.mgr-rt, .mgr-table-wide td.mgr-rb,
.mgr-table-wide td.mgr-rs, .mgr-table-wide td.mgr-re {
  box-shadow:
    inset 0 var(--mgr-e-t, 0px) 0 0 var(--accent),
    inset 0 calc(-1 * var(--mgr-e-b, 0px)) 0 0 var(--accent),
    inset calc(-1 * var(--mgr-e-s, 0px)) 0 0 0 var(--accent),
    inset var(--mgr-e-e, 0px) 0 0 0 var(--accent);
}
.mgr-table-wide td.mgr-rt { --mgr-e-t: 2px; }
.mgr-table-wide td.mgr-rb { --mgr-e-b: 2px; }
.mgr-table-wide td.mgr-rs { --mgr-e-s: 2px; }
.mgr-table-wide td.mgr-re { --mgr-e-e: 2px; }
/* ‏والخانةُ النشطةُ داخل مستطيلٍ أوسع بلا صبغته، كالشيت: يُعرف أين يُكتب */
.mgr-table-wide td.mgr-sel.mgr-rt, .mgr-table-wide td.mgr-sel.mgr-rb,
.mgr-table-wide td.mgr-sel.mgr-rs, .mgr-table-wide td.mgr-sel.mgr-re { background: var(--surface-2); }
.mgr-table-wide td[data-bg].mgr-sel.mgr-rt, .mgr-table-wide td[data-bg].mgr-sel.mgr-rb,
.mgr-table-wide td[data-bg].mgr-sel.mgr-rs, .mgr-table-wide td[data-bg].mgr-sel.mgr-re {
  background-color: var(--mgr-bg); background-image: none;
}

/* ‏عمودُ أرقام الصفوف — كرؤوس الصفوف في الشيت: شريطٌ رماديٌّ ثابتٌ في أوّل الجدول من اليمين،
   ‏فيه رقمُ كلّ صفّ، ومع المرور مقبضُ السحب (⋮⋮) مكانَ الرقم. ضغطةٌ تحدّد الصفّ كلَّه وسحبٌ ينقله.
   ‏وهو داخل خانة البريد اللاصقة لا عمودٌ في الجدول: فلا يزاح عنه النسخُ واللصقُ والتلوين —
   ‏كلّها بموضع الخانة. والرقمُ عدّادُ الأنماط، فيبقى صحيحا بعد كلّ نقلٍ ورسم */
.mgr-table-wide { --mgr-gut: 30px; }
.mgr-table-wide tbody { counter-reset: mgr-row; }
.mgr-table-wide tbody tr[id^="mgrRow-"] { counter-increment: mgr-row; }
.mgr-table-wide td.mgr-c-mail:not(.mgr-pinned) { position: relative; }
.mgr-table-wide td.mgr-c-mail,
.mgr-table-wide thead th.mgr-c-mail { padding-inline-start: calc(var(--mgr-gut) + 10px); }
.mgr-table-wide td.mgr-c-mail::before,
.mgr-gut-head {
  content: '';
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--mgr-gut);
  background: var(--surface-3);
  border-inline-end: 1px solid var(--border-default);
  pointer-events: none;
}
.mgr-gut-head { z-index: 0; }
/* ‏ولا يلوّنه لونُ الصفّ: رؤوسُ الصفوف في الشيت تبقى رماديّة */
.mgr-row-grip {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1;
  width: var(--mgr-gut);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; line-height: 1;
  cursor: grab; touch-action: none; user-select: none;
  transition: color .12s, background-color .12s;
}
.mgr-row-grip::before { content: counter(mgr-row); }
.mgr-row-grip svg { display: none; width: 15px; height: 15px; pointer-events: none; }
/* ‏ومع المرور على الرقم نفسه: المقبضُ مكانه */
.mgr-row-grip:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, var(--surface-3)); }
.mgr-row-grip:hover::before { content: none; }
.mgr-row-grip:hover svg { display: block; }
/* ‏وصفوفُ المحدَّد أرقامُها بلون العلامة، كالشيت */
.mgr-table-wide tr.mgr-row-in > td.mgr-c-mail::before { background: color-mix(in srgb, var(--accent) 18%, var(--surface-3)); }
.mgr-table-wide tr.mgr-row-in .mgr-row-grip { color: var(--accent); font-weight: var(--fw-bold); }
/* ‏وحدُّ المستطيل من ناحية البداية على حافة الأرقام لا تحتها: الشريطُ يغطّي حافةَ الخانة */
.mgr-table-wide td.mgr-c-mail.mgr-rs::before { border-inline-end: 2px solid var(--accent); }
/* ‏وعلى اللمس أعرضُ قليلا، والمقبضُ ظاهرٌ تحت الرقم: لا مرورَ يُظهره */
@media (pointer: coarse) {
  .mgr-table-wide { --mgr-gut: 34px; }
  .mgr-row-grip { flex-direction: column; gap: 2px; }
  .mgr-row-grip svg { display: block; width: 13px; height: 13px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .mgr-row-grip { transition: none; } }

/* ‏وهو يُسحب: الصفوفُ المرفوعة باهتة، وخطٌّ بلون العلامة يقول أين تقع */
body.mgr-row-dragging, body.mgr-row-dragging * { cursor: grabbing !important; user-select: none; }
.mgr-table-wide tr.mgr-row-lifted > td { opacity: .45; }
/* ‏وعدّةُ ما يُنقل بجانب المؤشّر — «نقل ٣ صفوف» */
.mgr-drag-pill {
  position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none;
  padding: 4px 11px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--text-on-accent, #fff);
  font-size: 12.5px; font-weight: var(--fw-bold); white-space: nowrap;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25));
}
.mgr-drop-line {
  position: absolute; z-index: 4; height: 3px; margin-top: -2px;
  background: var(--accent); border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ‏وأزرارُ الشاشة الحيّة الصغيرة على شاشات اللمس: القلمُ و«+» و«×» كانت ٢٢–٣٠
   بكسل، فيُصاب القرصُ أو التبويبُ المجاور بدلها */
@media (pointer: coarse) {
  .mgr-cred-edit, .mgr-bt-new { width: 40px; height: 40px; }
  .mgr-bt-x { width: 32px; height: 32px; }
}

/* ══════════════════════════════════════════════════════════
   الفيزا تُسحب من المخزون — خانتُها ونافذتُها
   ══════════════════════════════════════════════════════════

   ‏الخانة مئةٌ واثنا عشر: فتضيق حشوتُها لتسع النقطة والعلم وآخر أربعة
   ‏في سطرٍ واحد. والبطاقة في النافذة داكنةٌ في الثيمين — شيءٌ يُمسك
   ‏باليد لا سطحٌ من الصفحة — وحالُها لونُ وهجها. */
.mgr-table-wide td.mgr-c-visa { padding-inline: 6px; }

.mgr-flag {
  flex: none; display: inline-block; vertical-align: middle;
  unicode-bidi: isolate; line-height: 1; font-size: 13px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
/* ‏وحيث لا يُرسم العلم (ويندوز): رمزُ البلد في شارةٍ كلوحة سيّارة — تُقرأ ولا تلتصق بما حولها */
.mgr-flag.is-code {
  font: 700 9.5px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: .04em;
  padding: 2px 3px 1px;
  border-radius: 3px;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  background: var(--surface-inset);
}
.mgr-vchip .mgr-flag.is-code {
  color: var(--text-strong); background: transparent;
  border-color: color-mix(in srgb, var(--vc-tone) 55%, transparent);
}

/* ‏قرصُ الفيزا المسحوبة: نقطةٌ تنبض ما دامت قيد الاستخدام، وعلامةٌ هادئةٌ بعدها */
.mgr-vchip {
  --vc-tone: var(--warning);
  cursor: pointer; gap: 3px;
  padding: 1px 5px 1px 4px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--vc-tone) 42%, transparent);
  background: color-mix(in srgb, var(--vc-tone) 12%, transparent);
  font-size: 13px; line-height: 1.5;
  white-space: nowrap;
}
.mgr-vchip[data-state="used"] { --vc-tone: var(--success); background: color-mix(in srgb, var(--vc-tone) 7%, transparent); }
.mgr-vchip:hover { background: color-mix(in srgb, var(--vc-tone) 22%, transparent); }
/* ‏وعمودٌ ضُيّق بالسحب (أدناه ٩٢) يأكل النقاطَ أوّلا — وآخرُ أربعةٍ تبقى تُقرأ */
.mgr-vchip { min-width: 0; overflow: hidden; }
.mgr-vchip-num {
  display: inline-flex; align-items: baseline; gap: .22em; min-width: 0;
  font-weight: var(--fw-semibold); color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  unicode-bidi: isolate;
}
.mgr-vchip-dots { flex: 0 1 auto; min-width: 0; overflow: hidden; letter-spacing: -.08em; opacity: .8; }
.mgr-vchip[data-state="used"] .mgr-vchip-num { font-weight: var(--fw-normal); }
.mgr-vchip-ok { width: 12px; height: 12px; flex: none; color: var(--success-text); }
.mgr-vchip-dot {
  flex: none; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warning);
  animation: mgr-vdot 1.8s ease-out infinite;
}
@keyframes mgr-vdot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 65%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warning) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ‏«اسحب فيزا»: دعوةٌ بلون العلامة — تُرى في الصفّ الفارغ ولا تصرخ */
.mgr-vpull {
  cursor: pointer; gap: 4px;
  padding: 1px 8px 1px 7px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.5;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.mgr-vpull svg { width: 13px; height: 13px; flex: none; }
.mgr-vpull:hover { background: var(--accent-solid); color: var(--text-on-accent); border-color: transparent; }
.mgr-vpull:disabled { cursor: progress; opacity: .85; }
.mgr-vpull[data-out="1"] {
  color: var(--text-placeholder); background: transparent;
  border: 1px dashed var(--border-default); font-weight: var(--fw-normal);
}
.mgr-vpull[data-out="1"]:hover { color: var(--text-secondary); background: var(--surface-3); border-color: var(--border-strong); }
.mgr-vnone { color: var(--text-placeholder); padding-inline: 6px; }

/* ‏والدوّارةُ تدور ما دام الطلبُ في الطريق */
.mgr-vpull.is-busy svg,
.mgr-vp .btn.is-busy svg,
.mgr-vx-opt.is-busy .mgr-vx-ico svg { animation: mgr-spin-ico 1s linear infinite; }

/* ‏والخانةُ التي امتلأت الآن تومض مرّة */
.mgr-table-wide td.mgr-c-visa.is-fresh { animation: mgr-vfresh 1.2s ease-out; }
@keyframes mgr-vfresh {
  0%   { box-shadow: inset 0 0 0 2px var(--warning), inset 0 0 22px color-mix(in srgb, var(--warning) 45%, transparent); }
  100% { box-shadow: inset 0 0 0 2px transparent, inset 0 0 22px transparent; }
}

/* ── النافذة ── */
.mgr-vp { display: grid; gap: var(--sp-4); }
.mgr-vp-top { display: grid; gap: var(--sp-3); }
.mgr-vp-mail {
  font-weight: var(--fw-semibold); unicode-bidi: isolate;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.modal-header h3:has(.mgr-vp-mail) { min-width: 0; }
.modal-header:has(.mgr-vp-mail) { gap: var(--sp-3); }
.mgr-vp-stage { display: grid; place-items: center; padding-top: var(--sp-1); perspective: 900px; }

/* ‏البطاقة: نسبةُ الكارت الحقيقيّ (85.6 × 54)، وشريحةٌ ذهبيّة، وخطوطٌ دقيقةٌ في الخلف */
.mgr-vcard {
  --vc-tone: var(--amber-400);
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box;
  width: min(100%, 360px); aspect-ratio: 1.586;
  container-type: inline-size;
  display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 6px;
  padding: 18px 20px 16px;
  border-radius: 16px;
  color: var(--slate-0);
  text-align: left;
  background:
    radial-gradient(95% 125% at 100% 0%, color-mix(in srgb, var(--vc-tone) 42%, transparent), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--vc-tone) 16%, transparent), transparent 70%),
    linear-gradient(140deg, var(--slate-700) 0%, var(--slate-850) 55%, var(--slate-950) 100%);
  box-shadow:
    0 24px 44px -22px rgba(0, 0, 0, .75),
    0 2px 6px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.mgr-vcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 112% 128%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 10px);
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, black 100%);
          mask-image: linear-gradient(100deg, transparent 25%, black 100%);
}
.mgr-vcard::after {
  content: ''; position: absolute; inset: -30% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%);
  transform: translateX(-38%);
}
.mgr-vcard[data-state="used"]   { --vc-tone: var(--emerald-400); }
.mgr-vcard[data-state="manual"] { --vc-tone: var(--sky-400); }
/* ‏والمسحوبةُ الآن تنزل من المخزون إلى مكانها، ويمرّ عليها بريقٌ واحد */
.mgr-vcard.is-new { animation: mgr-vcard-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.mgr-vcard.is-new::after { animation: mgr-vcard-sheen 1.3s .3s ease-out both; }
@keyframes mgr-vcard-in {
  from { opacity: 0; transform: translateY(28px) rotateX(26deg) scale(.95); }
}
@keyframes mgr-vcard-sheen {
  from { transform: translateX(-62%); }
  to   { transform: translateX(46%); }
}

.mgr-vcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mgr-vcard-chip {
  flex: none;
  width: 13cqw; height: 10cqw; max-width: 46px; max-height: 35px; min-width: 34px; min-height: 26px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 31%, rgba(0, 0, 0, .26) 31% 34%, transparent 34% 66%, rgba(0, 0, 0, .26) 66% 69%, transparent 69%),
    linear-gradient(0deg, transparent 30%, rgba(0, 0, 0, .26) 30% 34%, transparent 34% 66%, rgba(0, 0, 0, .26) 66% 70%, transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--amber-400) 55%, var(--slate-0)) 0%, var(--amber-500) 48%, color-mix(in srgb, var(--amber-400) 70%, var(--slate-0)) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .18);
}
.mgr-vcard-nfc { width: 20px; height: 20px; flex: none; opacity: .65; }
.mgr-vcard-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.3; white-space: nowrap;
  color: var(--slate-0);
  background: color-mix(in srgb, var(--vc-tone) 24%, rgba(0, 0, 0, .38));
  border: 1px solid color-mix(in srgb, var(--vc-tone) 60%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mgr-vcard-pill svg { width: 13px; height: 13px; }
.mgr-vcard-pill .mgr-vchip-dot { background: var(--amber-400); }
.mgr-vcard-num {
  align-self: end;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  font-size: clamp(15px, 6.4cqw, 23px); font-weight: 600;
  letter-spacing: .08em; word-spacing: .1em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 255, 255, .12);
}
.mgr-vcard-foot { display: flex; align-items: flex-end; gap: 5cqw; min-width: 0; }
.mgr-vcard-f { display: grid; gap: 1px; min-width: 0; }
.mgr-vcard-f small { font-size: 9px; letter-spacing: .14em; opacity: .62; font-weight: 600; }
.mgr-vcard-f b {
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  font-size: clamp(11px, 3.7cqw, 14px); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-vcard-f:first-child { flex: 1 1 auto; }
.mgr-vcard-mark { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.mgr-vcard-flag { font-size: 20px; }
.mgr-flag.is-code.mgr-vcard-flag {
  font-size: 11px; padding: 3px 5px 2px;
  color: var(--slate-0);
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
}
.mgr-vcard-brand {
  font: italic 800 clamp(16px, 6.2cqw, 22px)/1 system-ui, 'Segoe UI', sans-serif;
  letter-spacing: .01em;
}
.mgr-vcard-brand[data-b="mastercard"] { font-style: normal; font-weight: 700; font-size: 14px; }

/* ‏والمستخدمة مختومة: ختمٌ مائلٌ بتاريخها في الركن — لا يغطّي آخر أربعة */
.mgr-vcard-stamp {
  position: absolute; top: 14px; right: 16px;
  display: grid; justify-items: center;
  padding: 3px 14px 4px;
  border: 2.5px solid color-mix(in srgb, var(--emerald-400) 85%, transparent);
  border-radius: 10px;
  color: color-mix(in srgb, var(--emerald-400) 88%, var(--slate-0));
  background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald-400) 16%, transparent);
  font-size: clamp(16px, 6.4cqw, 22px); font-weight: 800; line-height: 1.25;
  transform: rotate(-9deg);
  pointer-events: none;
}
.mgr-vcard-stamp small {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; opacity: .9;
}

/* ‏ومكانٌ فارغٌ على مقاس البطاقة: هنا تنزل الفيزا حين تُسحب */
.mgr-vcard.is-ghost {
  display: grid; grid-template-rows: none; place-content: center; justify-items: center; gap: 6px;
  text-align: center; color: var(--text-secondary);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--border-default) 35%, transparent) 0 1px, transparent 1px 12px),
    var(--surface-inset);
  border: 2px dashed var(--border-strong);
  box-shadow: none;
  padding: 16px;
}
.mgr-vcard.is-ghost::before,
.mgr-vcard.is-ghost::after { display: none; }
.mgr-vcard-ghost-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.mgr-vcard-ghost-ico svg { width: 22px; height: 22px; }
.mgr-vcard.is-ghost[data-out="1"] .mgr-vcard-ghost-ico { color: var(--warning-text); background: var(--warning-soft); }
.mgr-vcard.is-ghost b { font-size: var(--fs-md, 16px); color: var(--text-strong); }
.mgr-vcard.is-ghost > span:last-child { font-size: 13px; color: var(--text-placeholder); }

/* ‏«اكشف» تحت البطاقة، وأقراصُ النسخ بعدها تلتفّ — النافذة ضيّقة على الهاتف */
.mgr-vp-reveal { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mgr-vp-hint { font-size: 12px; color: var(--text-placeholder); }
.mgr-vp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mgr-vp-chips .mgr-cred { padding: 6px 10px; gap: 6px; }
.mgr-vp-chips .mgr-cred-v { font-size: 14px; white-space: normal; overflow-wrap: anywhere; text-align: start; }

/* ‏الحقائق: مَن سحبها ومتى، وبلدُ البروكسي، وما في المخزون */
/* ‏عمودان دائما، والفردُ الأخيرُ يأخذ السطر كلّه — لا خانةٌ فارغةٌ في آخر الشبكة */
.mgr-vp-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 0;
}
.mgr-vp-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mgr-vp-fact {
  min-width: 0; padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.mgr-vp-fact dt {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-placeholder);
}
.mgr-vp-fact dt svg { width: 13px; height: 13px; flex: none; }
.mgr-vp-fact dd {
  margin: 2px 0 0; font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--text-strong); overflow-wrap: anywhere;
}
.mgr-vp-stock[data-zero="1"] { color: var(--danger-text); }
.mgr-vp-dim { color: var(--text-placeholder); font-weight: var(--fw-normal); }

.mgr-vp-acts,
.mgr-vp-step-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mgr-vp-acts[hidden] { display: none; }
.mgr-vp-step-acts .mgr-vp-clear { margin-inline-end: auto; }

/* ‏خطوةُ الاسترداد والكتابةُ اليدويّة داخل النافذة — لا نافذةٌ فوق نافذة */
.mgr-vp-step {
  display: grid; gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-inset);
}
.mgr-vp-step h4 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0;
  font-size: var(--fs-sm); color: var(--text-strong);
}
.mgr-vp-step h4 svg { width: 16px; height: 16px; }
.mgr-vp-step .mgr-hint { margin: 0; }
.mgr-vp-step .form-group { margin-bottom: 0; }
.mgr-vp-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.mgr-vp-reason {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-2); color: var(--text-primary);
  transition: border-color .15s, background .15s;
}
.mgr-vp-reason:hover { border-color: var(--border-strong); }
.mgr-vp-reason:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgr-vp-reason[aria-checked="true"] {
  border-color: var(--warning); background: var(--warning-soft);
  color: var(--warning-text); font-weight: var(--fw-bold);
}

/* ‏السجلّ: خطٌّ زمنيٌّ بلون كلّ فعل */
.mgr-vp-log h4 {
  display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
  font-size: var(--fs-sm); color: var(--text-strong);
}
.mgr-vp-log h4 svg { width: 16px; height: 16px; }
.mgr-vp-count {
  font-size: 12px; font-weight: 600; color: var(--text-placeholder);
  background: var(--surface-3); border-radius: var(--radius-full); padding: 1px 8px;
}
.mgr-vp-count:empty { display: none; }
/* ‏فيزا محجوزة ولم تُكتب في الحساب: سطرٌ تحذيريٌّ فوق السجلّ بزرّ «رجّعها» */
.mgr-vp-orphans { display: grid; gap: 8px; margin-bottom: 12px; }
.mgr-vp-orphans:empty { display: none; }
.mgr-vp-orphan {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-2));
}
.mgr-vp-orphan-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--warning-text); background: var(--warning-soft);
}
.mgr-vp-orphan-ico svg { width: 15px; height: 15px; }
.mgr-vp-orphan-txt { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.mgr-vp-orphan-txt b {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 14px; color: var(--text-strong);
}
.mgr-vp-orphan-txt b > [dir="ltr"] { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.mgr-vp-orphan-txt small { font-size: 12px; color: var(--text-placeholder); }
.mgr-vp-orphan .btn { flex: none; margin-inline-start: auto; }
.mgr-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.mgr-tl-i {
  --tl: var(--accent);
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; column-gap: 10px;
  padding-bottom: 14px;
}
.mgr-tl-i:last-child { padding-bottom: 0; }
.mgr-tl-i:not(:last-child)::before {
  content: ''; position: absolute;
  inset-inline-start: 14px; top: 32px; bottom: 2px;
  width: 2px; border-radius: 2px; background: var(--border-default);
}
.mgr-tl-i[data-a="used"]     { --tl: var(--success); }
.mgr-tl-i[data-a="returned"] { --tl: var(--warning); }
.mgr-tl-i[data-a="unused"]   { --tl: var(--info); }
.mgr-tl-ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tl);
  background: color-mix(in srgb, var(--tl) 15%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--tl) 38%, transparent);
}
.mgr-tl-ico svg { width: 15px; height: 15px; }
.mgr-tl-body { min-width: 0; padding-top: 4px; }
.mgr-tl-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-strong);
}
.mgr-tl-card {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; border-radius: var(--radius-full);
  background: var(--surface-3);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.mgr-tl-sub { margin-top: 2px; font-size: 12px; color: var(--text-placeholder); }
.mgr-tl-note {
  margin-top: 5px; padding: 4px 9px;
  border-radius: 6px;
  border-inline-start: 2px solid color-mix(in srgb, var(--tl) 60%, transparent);
  background: var(--surface-inset);
  font-size: 13px; color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.mgr-tl-empty,
.mgr-tl-fail {
  padding: 12px; text-align: center;
  border: 1px dashed var(--border-default); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-placeholder);
}
.mgr-tl-fail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mgr-tl-fail > svg { width: 16px; height: 16px; }
.mgr-tl-skel {
  height: 44px; margin-bottom: 8px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-3), var(--surface-inset), var(--surface-3));
  background-size: 200% 100%;
  animation: mgr-tl-shim 1.2s linear infinite;
}
@keyframes mgr-tl-shim { to { background-position: -200% 0; } }

/* ‏سؤالُ الاستبدال: الفيزا القائمة، وخياران كبيران لا زرّان صغيران */
.mgr-vx-cur {
  display: flex; align-items: center; gap: 12px;
  margin: var(--sp-3) 0;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-2));
}
.mgr-vx-mini {
  flex: none; width: 48px; height: 31px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--amber-400);
  background: linear-gradient(140deg, var(--slate-700), var(--slate-950));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mgr-vx-mini svg { width: 18px; height: 18px; }
.mgr-vx-cur-txt { display: grid; gap: 2px; min-width: 0; }
.mgr-vx-cur-txt b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text-strong); }
.mgr-vx-cur-txt small { font-size: 12px; color: var(--text-placeholder); }
.mgr-vx-tag {
  margin-inline-start: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: var(--fw-bold); color: var(--warning-text);
}
.mgr-vx-opts { display: grid; gap: 10px; }
.mgr-vx-opt {
  --vx: var(--warning);
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: start;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--border-default);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.mgr-vx-opt[data-tone="used"] { --vx: var(--danger); }
.mgr-vx-opt:hover,
.mgr-vx-opt:focus-visible {
  outline: none;
  border-color: var(--vx);
  background: color-mix(in srgb, var(--vx) 8%, var(--surface-2));
}
.mgr-vx-opt:active { transform: scale(.99); }
.mgr-vx-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--vx); background: color-mix(in srgb, var(--vx) 14%, transparent);
}
.mgr-vx-ico svg { width: 20px; height: 20px; }
.mgr-vx-txt { display: grid; gap: 2px; }
.mgr-vx-txt b { font-size: 15px; color: var(--text-strong); }
.mgr-vx-txt small { font-size: 13px; color: var(--text-placeholder); }
#modalContent[data-busy="1"] .mgr-vx-opt:not(.is-busy) { opacity: .5; pointer-events: none; }

@media (pointer: coarse) {
  .mgr-vp-reason { min-height: 40px; }
}
/* ‏وعلى الهاتف الأزرارُ بعرض النافذة، والأساسيُّ فوق — آخرُها في الترتيب هو الأساسيّ */
@media (max-width: 480px) {
  .mgr-vp-acts,
  .mgr-vp-step-acts { flex-direction: column-reverse; }
  .mgr-vp-acts .btn,
  .mgr-vp-step-acts .btn { width: 100%; justify-content: center; }
  .mgr-vp-step-acts .mgr-vp-clear { margin-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mgr-vchip-dot,
  .mgr-table-wide td.mgr-c-visa.is-fresh,
  .mgr-vcard.is-new,
  .mgr-vcard.is-new::after,
  .mgr-tl-skel { animation: none; }
  .mgr-vpull.is-busy svg,
  .mgr-vp .btn.is-busy svg,
  .mgr-vx-opt.is-busy .mgr-vx-ico svg { animation: none; opacity: .6; }
}

/* ════════════════════════════════════════════════════════════
   التحديد للحذف الجماعي — مربّع بجانب رقم الصف
   ════════════════════════════════════════════════════════════
   في شريط الأرقام نفسه فيتّسع له: الرقم ومقبضه في ناحيته، والمربّع بينه وبين
   البريد. وهو زرٌّ بدور مربّع اختيار (role=checkbox)، يُرسم من الأنماط كي يتبع
   الثيمين، و«حدّد الكل» في رأس العمود بحال ثالثة (mixed) حين يُحدَّد بعضها. */
.mgr-table-wide.mgr-pickable { --mgr-gut: 54px; --mgr-num: 28px; }
.mgr-table-wide.mgr-pickable .mgr-row-grip { width: var(--mgr-num); }
.mgr-pick {
  position: absolute; inset-block: 0; inset-inline-start: var(--mgr-num, 28px); z-index: 1;
  width: calc(var(--mgr-gut) - var(--mgr-num, 28px));
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.mgr-pick::before {
  content: ''; box-sizing: border-box; width: 17px; height: 17px;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-1);
  transition: background-color .12s, border-color .12s;
}
.mgr-pick:hover::before { border-color: var(--accent); }
.mgr-pick:focus-visible { outline: none; }
.mgr-pick:focus-visible::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.mgr-pick[aria-checked="true"]::before,
.mgr-pick[aria-checked="mixed"]::before { background: var(--accent); border-color: var(--accent); }
.mgr-pick[aria-checked="true"]::after {
  content: ''; position: absolute; width: 5px; height: 9px;
  border: solid var(--text-on-accent); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.mgr-pick[aria-checked="mixed"]::after {
  content: ''; position: absolute; width: 9px; height: 2px; border-radius: 1px;
  background: var(--text-on-accent);
}
/* والصفّ المحدَّد كلّه بصبغة خفيفة، وشريطُ رقمه بلون العلامة. ولون الخانة الذي
   وضعه صاحبه يبقى، وكذا صبغة المستطيل: تلك تقول أين يكتب */
.mgr-table-wide tr.mgr-picked > td:not([data-bg]):not(.mgr-in-range):not(.mgr-sel) {
  background-color: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
}
.mgr-table-wide tr.mgr-picked > td.mgr-c-mail::before { background: color-mix(in srgb, var(--accent) 20%, var(--surface-3)); }
@media (pointer: coarse) {
  .mgr-table-wide.mgr-pickable { --mgr-gut: 64px; --mgr-num: 32px; }
  .mgr-pick::before { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mgr-pick::before { transition: none; } }

/* والصفّ يبهت وهو يُحذف — ما فيه لا خلفيّته: الخانات اللاصقة تبقى تستر ما تحتها */
.mgr-table-wide tr.mgr-deleting { pointer-events: none; }
.mgr-table-wide tr.mgr-deleting > td > * { opacity: .3; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .mgr-table-wide tr.mgr-deleting > td > * { transition: none; } }

/* شريط المحدَّد في مكان أزرار الرأس ما دام شيء محدَّدا */
.mgr-bulk { display: flex; align-items: center; gap: var(--sp-2); }
.mgr-bulk[hidden] { display: none; }
.mgr-bulk-n { padding-inline: 4px; font-weight: var(--fw-bold); color: var(--accent); white-space: nowrap; }
.mgr-head[data-picking="1"] .mgr-head-acts > :not(.mgr-bulk) { display: none; }
@media (max-width: 640px) {
  .mgr-bulk { width: 100%; flex-wrap: wrap; }
  .mgr-bulk-n { flex: 1 0 100%; }
}

/* ── «رتّب»: الزر يقول الترتيب القائم، والقائمة تعلّم المختار ── */
.mgr-sort-btn[data-on="1"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.mgr-sort-btn .mgr-sort-now { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-menu-gap { width: 16px; height: 16px; flex: none; }
.mgr-sort-menu [aria-checked="true"] { color: var(--accent); font-weight: var(--fw-bold); }
.mgr-sort-menu [aria-checked="true"] svg { color: currentColor; }
/* والعمود الحرّ يُفرز من عنوانه، وزرّ حذفه بجانبه كما كان */
.mgr-table-wide thead th .mgr-xsort { width: auto; min-width: 0; flex: 0 1 auto; }

/* ── الحساب الجديد: «جديد» على بريده، وشريط فوق الجدول يعدّها ── */
.mgr-mail-btn[data-fresh] .mgr-mail { width: auto; flex: 1 1 auto; min-width: 0; }
.mgr-mail-btn[data-fresh]::before {
  content: 'جديد'; order: 1;
  flex: none; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
  color: var(--success-text); background: var(--success-soft);
}
/* وفي بحث «الكل» على البريد وسم مدّته أصلا: «جديد» نقطة هناك كي لا يُقصّ الإيميل إلى ثمانية أحرف */
.mgr-mail-btn[data-dur][data-fresh]::before {
  content: ''; align-self: center; width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--success);
}
.mgr-bulk .btn:disabled { opacity: .55; cursor: progress; }
.mgr-fresh-note {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3); padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-default));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
  color: var(--text-primary); font-size: var(--fs-sm);
}
.mgr-fresh-note > svg { width: 18px; height: 18px; flex: none; color: var(--success-text); }
.mgr-fresh-note > span { flex: 1 1 280px; min-width: 0; }
.mgr-fresh-note b { color: var(--success-text); }
.mgr-fresh-note .btn { flex: none; }

/* عنوان صغير داخل القائمة — «لمدة تانية» فوق المدد في قائمة «انقل» */
.mgr-menu-label {
  padding: 4px 10px 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* إكس الشريط: تقفله ولا يعود */
.mgr-fresh-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-inline-start: -4px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.mgr-fresh-x svg { width: 18px; height: 18px; }
.mgr-fresh-x:hover { background: var(--surface-3); color: var(--text-primary); }
.mgr-fresh-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .mgr-fresh-x { width: 40px; height: 40px; } }