/* ============================================================================
 * ✨ الموجة الثامنة من التحسينات البصرية — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل بعد الموجات ١-٧. تركيز: تخطيط اللوحات · معرض المرفقات · قوالب وتوقيع · مؤشرات.
 * ============================================================================ */

/* ① عمود القائمة قابل للسحب (عرض يُحفظ للمستخدم) */
#vp-pane-resizer {
  position: absolute; inset-block: 0; inset-inline-end: -3px; width: 6px; cursor: col-resize;
  background: transparent; z-index: 15;
}
#vp-pane-resizer:hover { background: rgba(26, 139, 214, .35); }
.layout > .list { position: relative; }

/* ② شريط عناوين الأعمدة فوق القائمة */
#vp-col-labels {
  display: flex; gap: 10px; padding: 4px 12px; font-size: 10.5px; font-weight: 900; color: #7188a0;
  border-bottom: 1px solid rgba(11, 58, 91, .08); text-transform: none;
}
#vp-col-labels span:first-child { flex: 1 1 auto; }

/* ③ معرض المرفقات: شبكة بطاقات بدل القائمة */
#attach-rows.vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
#attach-rows.vp-grid tr, #attach-rows.vp-grid td { display: block; width: 100%; }
#attach-rows.vp-grid tr { border: 1px solid #e3ebf3; border-radius: 12px; padding: 10px; background: #fff; }
body.theme-dark #attach-rows.vp-grid tr { background: #16293a; border-color: #24435c; }

/* ④ صور مصغّرة داخل نافذة ملفات الرسالة */
.vp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vp-thumbs img, .vp-thumbs iframe {
  width: 96px; height: 96px; object-fit: cover; border: 1px solid #e3ebf3; border-radius: 10px; background: #fff;
}

/* ⑤ لوحة معاينة التوقيع في نافذة الإرسال */
#vp-signature-preview { margin-block: 8px; border: 1px solid #e3ebf3; border-radius: 12px; background: #f8fbfe; padding: 8px 10px; }
#vp-signature-preview summary { cursor: pointer; font-weight: 800; font-size: 12.5px; color: #33566f; }
#vp-signature-preview iframe { width: 100%; height: 190px; border: 1px solid #e6eef5; border-radius: 8px; margin-top: 8px; background: #fff; }

/* ⑥ قوالب جاهزة كرقائق في نافذة الإرسال */
#vp-template-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 6px; }
#vp-template-chips button {
  border: 1px solid #dbe7f2; background: #fff; color: #33566f; border-radius: 999px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
#vp-template-chips button:hover { background: #eef5fb; }

/* ⑦ أزرار الترجمة (الإرسال والعرض) */
#vp-translate-btn, #vp-view-translate { order: 7; }

/* ⑨ مؤشرات مركز العمل (KPI) */
#vp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.vp-kpi {
  background: #fff; border: 1px solid #e3ebf3; border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--vp-shadow-1, 0 1px 2px rgba(11,58,91,.06));
}
.vp-kpi b { display: block; font-size: 22px; font-weight: 900; color: #14567f; line-height: 1.3; }
.vp-kpi span { font-size: 12px; color: #5d7386; font-weight: 700; }
body.theme-dark .vp-kpi { background: #16293a; border-color: #24435c; }
body.theme-dark .vp-kpi b { color: #8cc4e8; }

/* ⑩ أزرار داخل الحالات الفارغة */
.vp-empty-cta { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ⑪ تجميع التنبيهات المتكرّرة بعدّاد */
.vp-toast .vp-repeat {
  margin-inline-start: 8px; background: rgba(255,255,255,.22); border-radius: 999px; padding: 0 7px; font-size: 11px;
}

/* ⑫ ساعة حيّة في شريط الحالة */
#vp-clock { font-variant-numeric: tabular-nums; }

/* ⑬ حلقة تركيز واضحة لكل عناصر الموجة */
#vp-pane-resizer:focus-visible, #vp-template-chips button:focus-visible, #vp-kpis .vp-kpi:focus-visible {
  outline: none; box-shadow: var(--vp-ring, 0 0 0 3px rgba(23,71,95,.22));
}

/* ⑭ تباين عالٍ: حدود أقوى وشريحة سياق أوضح */
body.high-contrast #vp-col-labels { color: #24384a; border-bottom-color: #94a9bb; }
body.high-contrast .vp-kpi { border-width: 2px; }

/* ⑮ هيكل تحميل شبكة المرفقات */
#attach-rows.vp-grid .vp-loading-row { height: 92px; border-radius: 12px; }

/* ⑯ الطباعة من الوضع الداكن: ألوان فاتحة دائمًا */
@media print {
  body.theme-dark, body.theme-dark * { background: #fff !important; color: #111 !important; border-color: #bbb !important; }
}

/* ⑰ دعم «تباين أعلى» من نظام المستخدم */
@media (prefers-contrast: more) {
  :where(.chip-muted) { background: #e3eaf2 !important; color: #1b3348 !important; }
  :where(#message-list li .m-meta, .muted, small) { color: #2b4459 !important; }
  :where(.btn-ghost) { border-color: #7f97ab !important; }
}

/* ⑱ رأس القائمة ثابت بلا اهتزاز */
.list-head, #list-head { position: sticky; top: 0; z-index: 11; background: #fff; }
body.theme-dark .list-head, body.theme-dark #list-head { background: #12212e; }

/* ⑲ شريحة عدد المرفقات في ترويسة الرسالة */
#vp-attach-count { font-variant-numeric: tabular-nums; }

/* ⑳ تنبيه حدّ الأحرف في نافذة الإرسال */
#vp-compose-count.vp-limit { color: #a32020; font-weight: 900; }

/* 🔒 تصحيح محدِّد عمود القائمة */
.layout > .list-pane { position: relative; }
.layout > .list { position: relative; }