/* ============================================================
   الطلبات · والربط بالمنصّات
   ============================================================
   صفحة الطلبات تُفتَح كل يوم وتُقرأ بسرعة: الصفّ يحمل ما يُميّز الطلب —
   رقمُه وصاحبه ومبلغه وحالته — والباقي خلف زرّ. أمّا الربط فإعدادٌ
   يُضبَط مرّةً ويُنسى، ومكانه صفحة الإعدادات لا هنا.

   كل لونٍ ومقاسٍ هنا من رموز التصميم (tokens.css) لا قيمةً مكتوبة:
   الثيمان يبدّلان الرموز، وقيمةٌ مكتوبة تبقى كما هي في الاثنين فتُقرأ
   في أحدهما ولا تُقرأ في الآخر.
   ============================================================ */

/* ── نصٌّ ثانويّ تحت السطر الأول ── */
.muted-sm {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  margin-top: 2px;
}

/* ============================================================
   شريط الإحصاء
   ============================================================ */
.orders-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.orders-stats:empty { display: none; }

.ostat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
/* مربّعُ الأيقونة المصبوغ مقاسٌ واحد في المنصّة — نظيرُه في ترويسة
   بطاقة KPI وفي ترويسة قسم الإعدادات. */
.ostat-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.ostat-icon i , .ostat-icon svg{ width: var(--icon-md); height: var(--icon-md); }
.ostat-body { min-width: 0; }
.ostat-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  /* المبلغ يُقرأ من اليسار حتى في صفحة عربية */
  direction: ltr;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ostat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* بطاقة الحالة تأخذ لون حالتها، فيُقرأ الشريط بلمحة.
   والأيقونةُ تقع على سطحِ حالتها الناعم، فتأخذ درجةَ نصّها لا درجةَ
   سطحها: الكهرمانيُّ السادس على سطحه يقيس 2.9:1 — دون حدّ الأيقونة. */
.ostat[data-tone="green"] .ostat-icon { background: var(--success-soft); color: var(--success-text); }
.ostat[data-tone="amber"] .ostat-icon { background: var(--warning-soft); color: var(--warning-text); }
.ostat[data-tone="red"]   .ostat-icon { background: var(--danger-soft);  color: var(--danger-text); }
.ostat[data-tone="blue"]  .ostat-icon { background: var(--info-soft);    color: var(--info-text); }

/* ============================================================
   شريط الأدوات
   ============================================================ */
.orders-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  /* المسافةُ تحت الشريط واحدةٌ لكلّ الصفحات، ومكانُها style.css */
}
.orders-bar-filters,
.orders-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.orders-bar select.form-input { width: 168px; }

/* حقل البحث بأيقونته داخله */
.field-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.field-inline > i , .field-inline > svg{
  position: absolute;
  inset-inline-start: 11px;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-muted);
  pointer-events: none;
}
.field-inline .form-input {
  width: 268px;
  padding-inline-start: 34px;
}

/* حبّة تُظهر تقدّم السحب ولا تُزحزح الشريط */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.sync-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: sync-beat 1.1s ease-in-out infinite;
}
@keyframes sync-beat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .sync-pill::before { animation: none; }
}

/* ============================================================
   الجدول
   ============================================================ */
/* البطاقة بلا حشوة: الجدول يملؤها إلى حوافّها */
.card-flush { padding: 0; overflow: hidden; }
#ordersTable { overflow-x: auto; }

/* الحشوةُ والمقاسُ من `th`/`td` في style.css: كثافةُ هذا الجدول صارت
   كثافةَ الجداول كلّها، فلم يبقَ هنا إلا ما يخصّه — ترويسةٌ لاصقةٌ
   وسطحُها، ومرورُ الفأرة، وعمودُ الإجراء. */
.orders-table {
  width: 100%;
  border-collapse: collapse;
}
.orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  text-align: start;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-subtle);
}
.orders-table tbody td {
  vertical-align: middle;
}
.orders-table tbody tr:last-child td { border-bottom: 0; }
.orders-table tbody tr { transition: background .12s ease; }
.orders-table tbody tr:hover { background: var(--surface-3); }

.o-num {
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  direction: ltr;
  display: inline-block;
}
.o-amount {
  direction: ltr;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* عمود الإجراء لا يتمدّد */
.orders-table td:last-child { width: 1%; white-space: nowrap; }

/* وسمُ الحالة `.tag` صار مع `.badge` في style.css مكوّناً واحداً:
   كان معرّفاً هنا مرّةً وهناك مرّة، فيختلف شكلُ الحالة بين صفحتين. */

/* ── الترقيم ── */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ============================================================
   تفاصيل الطلب
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.detail-grid > div {
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  min-width: 0;
}
.detail-grid span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-bottom: 2px;
}
.detail-grid b {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  /* الإيميل الطويل يُكسَر ولا يكسر الشبكة */
  overflow-wrap: anywhere;
}

.detail-title {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

/* خيارات المنتج — وفيها تقع المدّة في منتجٍ رقميّ */
.opt-row td {
  padding-top: 0;
  border-bottom: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* الردّ الخام: مطويّ، ولا يمدّ النافذة */
.raw-json {
  max-height: 300px;
  overflow: auto;
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  white-space: pre;
  text-align: left;
  direction: ltr;
}
details > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  user-select: none;
}

/* ============================================================
   الربط بالمنصّات — في صفحة الإعدادات
   ============================================================ */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  /* المسافةُ تحت الشريط واحدةٌ لكلّ الصفحات، ومكانُها style.css */
}
.section-head h3 {
  margin: 0 0 3px;
  font-size: var(--fs-md);
  color: var(--text-strong);
}
.section-head p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: 62ch;
  line-height: var(--lh-relaxed);
}

/* شكلُ الفراغ من «لا شيءَ هنا بعد» في style.css — والنصُّ وحدَه هنا */
.conn-list:empty::after {
  content: 'لا اتصال بعد.';
  font-size: var(--fs-sm);
}

.conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle);
  /* بندٌ في لوحٍ لا بطاقةٌ قائمةٌ بذاتها، فنصفُ قطره نصفُ قطرِ البند
     نفسِه في `.detail-grid` و`.look-block` لا نصفُ قطرِ البطاقة. */
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  background: var(--surface-2);
}
.conn-row:last-child { margin-bottom: 0; }
.conn-main { min-width: 0; }
.conn-main b { color: var(--text-strong); font-size: var(--fs-sm); }
.conn-domain {
  direction: ltr;
  text-align: start;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  margin-top: 1px;
}
.conn-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.conn-err { color: var(--danger-text); }
.conn-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* المسار الذي يولّد المفتاح يُنسخ كما هو، فيُعرَض من اليسار */
.form-group code,
.hint code {
  direction: ltr;
  display: inline-block;
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: var(--fs-xs);
}
.hint {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   الجوّال
   ============================================================ */
/* ── العتبةُ عرضُ المحتوى لا عرضُ النافذة ──
   الشريطُ الجانبيُّ يقتطع 270 بكسلاً من `.main` وحشوتُها 64، فنافذةٌ
   بتسعمئةٍ تترك للمحتوى 566. وكانت العتبةُ 720 — أي أنّها لا تُصيب
   إلا بعد أن يختفي الشريطُ أصلاً عند 768، فيبقى شريطُ الأدوات مزدحماً
   في كلّ ما بين الاثنين. فأُخذت العتبةُ الموحّدة 1024. */
@media (max-width: 1024px) {
  .orders-bar { align-items: stretch; }
  .orders-bar-filters,
  .orders-bar-actions { width: 100%; }
  .field-inline { flex: 1; }
  .field-inline .form-input { width: 100%; }
  .orders-bar select.form-input { flex: 1; width: auto; }
  .orders-bar-actions { justify-content: flex-end; }
  .conn-row { align-items: stretch; }
  .conn-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   لافتة «صدر تحديث»
   ============================================================
   تظهر أسفل الشاشة حين يُعاد تشغيل النظام بعد تعديل: من ترك اللوحة
   مفتوحة يرى نسخةً قديمة ولا شيء يخبره. ولا تُعيد التحميل من تلقائها —
   قد يكون بين يديه نموذجٌ لم يُحفظ.
   ============================================================ */
.update-banner {
  position: fixed;
  inset-inline-start: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  max-width: min(92vw, 420px);
  animation: banner-rise .22s ease-out;
}
@keyframes banner-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .update-banner { animation: none; }
}

/* ── تغيير الحالة في نافذة الطلب ── */
.status-change {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.status-change select { max-width: 220px; }

/* ── ملاحظةٌ مكان محتوًى غائب ──
   جدولُ بنودٍ فارغ يُقرأ "لم يشترِ شيئاً". وهو خطأ حين تكون المنصّة هي
   من لا يملكها — فيُقال أيّهما، ويُقال بنصّ المنصّة لا بنصٍّ منّا. */
.detail-note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--border-subtle); background: var(--surface-2);
  margin-top: 4px;
}
.detail-note i , .detail-note svg{ width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.detail-note b { display: block; font-size: var(--fs-base); margin-bottom: 3px; }
.detail-note span { font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-muted); }
.detail-note[data-tone="amber"] {
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-2));
}
/* على سطحِ التحذير الناعم يُكتَب بدرجةِ نصّه: السادسةُ تقيس 2.9:1 */
.detail-note[data-tone="amber"] i, .detail-note[data-tone="amber"] svg, .detail-note[data-tone="amber"] b { color: var(--warning-text); }

/* مصدرُ قائمة الحالات — سطرٌ صغير لا يزاحم المصفّيات */
.filter-note {
  font-size: var(--fs-xs); color: var(--text-muted);
  align-self: center; white-space: nowrap;
}

/* ── تذكير من ترك سلّته ──
   الشاشةُ تُبنى على أن يُقرأ ما سيُرسَل قبل أن يُرسَل: النصُّ كما يصل
   كلَّ عميل، لا عدداً ولا وصفاً. */
.outreach-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.outreach-head b { font-size: var(--fs-sm); color: var(--text-strong); }

.outreach-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 300px; overflow-y: auto; }
.outreach-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  padding: var(--sp-3);
}
.outreach-to {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-bottom: 6px;
}
.outreach-to strong { color: var(--text-primary); font-size: var(--fs-sm); }
/* النصّ كما سيصل: أسطرُه كما كُتبت، لا مطويّةً في سطرٍ واحد */
.outreach-text {
  white-space: pre-wrap;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

.outreach-skipped { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.outreach-skipped summary { cursor: pointer; color: var(--text-muted); }
.outreach-skipped > div {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 5px 2px; border-bottom: 1px solid var(--border-hairline);
  color: var(--text-secondary);
}
.outreach-skipped em { font-style: normal; color: var(--text-muted); }

/* `.empty-inline` شكلُها من «لا شيءَ هنا بعد» في style.css */