.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  color: var(--text-muted);
}

.loading-full {
  min-height: 100vh;
  /* dvh يستثني شريط عنوان المتصفح المتغيّر؛ vh قبله احتياطٌ لمن لا يدعمه. */
  min-height: 100dvh;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

/* الترويسة الحاملة لأدوات: العناصر بمنتصف الصفّ لا بأعلاه، وإلا علا العنوان
   وهبطت الحقول عنه. */
/* flex-end لا center: بعض الأدوات لها عنوان صغير فوقها (مدى تاريخ التقرير)
   فصندوقها أطول. التوسيط يوسّط الصناديق فتختلف الخطوط السفلية للحقول
   نفسها؛ والمحاذاة للأسفل تجعل الحقول كلها على خطٍّ واحد مهما علا ما
   فوقها. وحيث تتساوى الارتفاعات لا فرق بين الاثنين. */
.page-header-with-toolbar {
  align-items: flex-end;
}

.page-header-title {
  flex: 0 0 auto;
}

/* يأخذ الفراغ بين العنوان والأزرار، وينزل سطرًا كاملًا عند ضيق الشاشة بدل
   أن يضغط الأزرار حتى تُقصّ نصوصها.
   flex-start لا space-between: الأخير يدفع البحث لطرف والفلاتر للطرف
   الآخر، فيُقرآن أداتين منفصلتين لا شريطًا واحدًا. */
.page-header-toolbar {
  flex: 1 1 260px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
}

/* القوائم المنسدلة داخل الترويسة بعرض محتواها لا بعرض السطر: .glass-select
   عرضه 100% ليملأ حقل النموذج، وهو هنا فلتر — فكل واحد كان ينزل سطرًا
   وحده ويصير شريط الأدوات ثلاثة أسطر. */
.page-header-toolbar .glass-select {
  width: auto;
  min-width: 150px;
}

.page-header h1 {
  font-size: 22px;
}

.page-header p {
  margin: 4px 0 0;
  font-size: 14px;
}

/* ⚠ هذه الثلاثة مشتركة فمكانها الملف المشترك: كانت بـ dashboard.css الذي
   يُحمَّل مع لوحة التحكم وحدها (Vite يقسّم الأنماط مع صفحاتها)، بينما
   تستعملها صفحتا التقارير ونظرة عامة للمنصّة ولا تستوردانه — فتظهران بلا
   هامش داخلي، ونصوصهما ملتصقة بالحافة.
   والأسوأ أن العطل متقطّع: من يزور لوحة التحكم أولًا يبقى الملف محمّلًا
   فتبدو الصفحتان سليمتين، ومن يفتح /reports مباشرة يراهما مكسورتين. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dash-card {
  padding: 18px 20px;
  margin-bottom: 18px;
}

/* ⚠ كان مستعملًا بثمانية ملفات وغير معرَّف بأيّ ملف: عنوان القسم والرابط
   بجانبه ينزلان سطرين لأنهما عنصران كتليّان بلا قاعدة تجمعهما.
   space-between يدفع الرابط إلى الطرف المقابل، وهو المكان الذي تقرؤه
   العين بعد العنوان لا قبله. */
.detail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.detail-section-head h2 {
  font-size: 16px;
}

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.dash-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 2px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}

.dash-list li:last-child {
  border-bottom: none;
}

/* أول عنصر يأخذ المساحة الباقية فتصطف الشارات والتواريخ عند الحافة. */
.dash-list li > div:first-child {
  flex: 1;
  min-width: 0;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.stat-icon {
  color: var(--primary);
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-hint {
  font-size: 12px;
}

.stat-warning .stat-icon,
.stat-warning .stat-value {
  color: var(--warning);
}

.stat-success .stat-icon,
.stat-success .stat-value {
  color: var(--success);
}

.stat-danger .stat-icon,
.stat-danger .stat-value {
  color: var(--danger);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
}

.empty-icon {
  color: var(--text-muted);
  opacity: 0.6;
}

.empty-state p {
  margin: 0;
  max-width: 420px;
  font-size: 14px;
}

.data-table-wrap {
  /* الجداول العريضة تتمرر داخل حاويتها فقط — الصفحة نفسها ما تتمرر أفقياً */
  overflow-x: auto;
  padding: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 13px 16px;
  text-align: start;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
  vertical-align: middle;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--blur-card)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(1.4);
}

/* تظليل متناوب ناعم يخترق الخلفية الزجاجية — يعزز مسح الصفوف أفقياً */
.data-table tbody tr:nth-child(even) {
  background: var(--row-stripe);
}

.data-table tbody tr:hover {
  background: var(--row-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-muted {
  background: var(--surface-2);
  color: var(--text-muted);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-primary {
  background: var(--primary-soft);
  color: var(--primary);
}

/* رقم الهاتف مع إجراءاته (اتصال + واتساب).
   كان الصنف مستعملاً بلا تعريف، فيلتصق الرقم بكلمة «واتساب» ويُقرآن كلمة
   واحدة. الفاصل الرأسي يفصل بصرياً بلا محرفٍ يُنطق مع النص. */
.phone-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.phone-actions > a + a {
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--divider);
}

/* ⚠ مكانه الملف المشترك لا form-modal.css: يستعمله FieldRenderer داخل
   النوافذ، وقسم الأدوار داخل ConfirmDialog — وصفحة الإعدادات لا تحمّل
   أنماط النوافذ، فكان المربّع هناك بلا أي تنسيق. */
.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.95rem;
}

.field-checkbox input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ⚠ كان مستعملًا بـ PageHeader وغير معرَّف: مجرّد div كتليّة، فأي صفحة
   تمرّر زرّين تكدّسهما رأسيًا. صفحات اليوم تمرّر زرًّا واحدًا فلا يظهر
   الأثر — والتعريف يمنع عودته مع أول زر ثانٍ. */
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── ترويسة صفحات التفاصيل ───────────────────────────────────────
   ⚠ كانت بـ dealdetail.css، وصفحة تفاصيل العميل تستعملها ولا تستورده —
   فتظهر بلا تنسيق أصلًا: الحقول متراصّة عمودًا، والأيقونة فوق الاسم.
   مكانها المشترك لأن صفحتين تستعملانها. */
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.detail-title,
.detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.detail-title h1,
.detail-title-row h1 {
  font-size: 24px;
  line-height: 1.3;
}

.detail-card {
  margin-bottom: 16px;
  padding: 18px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px 20px;
  margin: 0;
}

/* ⚠ معلَّقة على .detail-grid لا على .detail-field: الأخير لا تستعمله أي
   صفحة، فبقي dt وdd بلا تنسيق — العنوان بحجم النصّ نفسه ولونه، فلا يُفرَّق
   الاسم عن قيمته. */
.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.detail-grid dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.detail-grid dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* الأسهم أيقونات اتجاهية: نعكسها بالإنجليزية حتى تشير للجهة الصحيحة.
   ⚠ كانت بـ data-table.css الذي يُحمَّل مع مكوّن الجدول وحده، وصفحتا
   تفاصيل العميل والصفقة تستعملانها بزرّ «رجوع» بلا جدول — فيشير السهم
   للجهة الخطأ بالإنجليزية. */
html[dir='ltr'] .dir-icon {
  transform: scaleX(-1);
}

/* نصّ تفسيري تحت عنوان قسم.
   كان بـsettings.css وحدها، وتستعمله صفحة المنصّة وحقول جهات الاتصال
   أيضًا — وكلتاهما لا تستوردها، فيُعرض النص بلا تنسيق. وVite يقسّم CSS مع
   الصفحة التي تستوردها، فما لا تستورده الصفحة لا يصلها. */
.settings-hint {
  margin: 0 0 16px;
  font-size: 13.5px;
}