/* ==========================================================================
   DMDM — نظام التصميم (Design System)
   خط العرض: Tajawal للعناوين، IBM Plex Sans Arabic للنصوص
   لوحة الألوان: كُحلي مؤسسي + ذهبي محايد (بلا أي إشارة جغرافية)
   ========================================================================== */

:root{
  --color-bg: #F6F4EF;
  --color-bg-soft: #EFECE3;
  --color-surface: #FFFFFF;
  --color-ink: #1B2233;
  --color-ink-soft: #565F73;
  --color-primary: #1B2233;
  --color-primary-2: #2A3350;
  --color-gold: #B8863A;
  --color-gold-light: #E4C589;
  --color-teal: #2E5C5A;
  --color-border: #E3DFD2;
  --color-success: #2F7D5D;
  --color-success-bg: #E7F3ED;
  --color-danger: #B7473A;
  --color-danger-bg: #FBEAE7;
  --color-pending: #B8863A;
  --color-pending-bg: #FBF2E2;
  --shadow-soft: 0 10px 30px -12px rgba(27,34,51,0.18);
  --shadow-card: 0 2px 10px rgba(27,34,51,0.06);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  background-color:var(--color-bg);
  color:var(--color-ink);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
}

/* ==========================================================================
   خلفية زخرفية محايدة — نسيج نقطي مجرّد يرمز للاتصال العالمي دون أي خريطة
   أو حدود جغرافية أو رمز دولة
   ========================================================================== */
.dot-grid-bg{
  background-image: radial-gradient(var(--color-border) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: -6px -6px;
}

.gradient-veil{
  background: radial-gradient(80% 60% at 50% 0%, rgba(184,134,58,0.10) 0%, rgba(184,134,58,0) 60%);
}

/* ==========================================================================
   العنصر التوقيعي: "ختم الاعتماد" — دائرة مزدوجة بحدّ متقطع تدور ببطء،
   تُستخدم في الصفحة الرئيسية وشارات القبول، ترمز للتوثيق الرسمي والموثوقية
   ========================================================================== */
.seal{
  position:relative;
  width:180px; height:180px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.seal::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:2px dashed var(--color-gold-light);
  animation: seal-spin 40s linear infinite;
}
.seal::after{
  content:"";
  position:absolute; inset:14px;
  border-radius:50%;
  border:1.5px solid var(--color-gold);
  opacity:0.55;
}

/* إضافة: نسخة ثابتة (بدون دوران) من الشعار، خاصة بشاشة الصيانة عشان تبقى
   هادئة تماماً، بدون أي تأثير على استخدام .seal الأصلي في باقي الموقع */
.seal-static::before{ animation:none !important; }
.seal-core{
  position:relative; z-index:1;
  width:118px; height:118px;
  border-radius:50%;
  background: linear-gradient(155deg, var(--color-primary), var(--color-primary-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
@keyframes seal-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){
  .seal::before{ animation:none; }
}

/* ==========================================================================
   بطاقات ومكوّنات عامة
   ========================================================================== */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700;
  border-radius:var(--radius-sm);
  padding:.85rem 1.6rem;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{
  background:var(--color-primary);
  color:#fff;
}
.btn-primary:hover{ background:var(--color-primary-2); box-shadow:var(--shadow-soft); }
.btn-gold{
  background:var(--color-gold);
  color:#fff;
}
.btn-gold:hover{ background:#a3762f; box-shadow:var(--shadow-soft); }
.btn-outline{
  background:transparent;
  border:1.5px solid var(--color-border);
  color:var(--color-ink);
}
.btn-outline:hover{ border-color:var(--color-primary); }
.btn-danger-ghost{
  background:transparent;
  border:1.5px solid var(--color-danger);
  color:var(--color-danger);
}
.btn-danger-ghost:hover{ background:var(--color-danger-bg); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.input-field{
  width:100%;
  border:1.5px solid var(--color-border);
  background:#fff;
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-field:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(27,34,51,0.08);
}
.input-field.field-error{ border-color:var(--color-danger); }
.field-error-msg{ color:var(--color-danger); font-size:.8rem; margin-top:.35rem; display:none; }
.field-error-msg.show{ display:block; }

label.field-label{
  display:block; font-weight:700; font-size:.88rem; margin-bottom:.45rem; color:var(--color-ink);
}

.admin-tab.is-active, .content-tab.is-active{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

/* إضافة: نفس شكل تبويبات الأدمن الأساسية، لكن لتبويبات نافذة تفاصيل
   الطلب تحديداً (كلاس منفصل عمداً حتى لا يتداخل مع منطق تبويبات الجدول
   الرئيسي في 05-admin-tabs-filters-search-sort.js) */
.dmdm-applicant-tab.is-active{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

/* شارات الحالة */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700;
  padding:.3rem .75rem; border-radius:999px;
}
.badge-pending{ background:var(--color-pending-bg); color:var(--color-pending); }
.badge-approved{ background:var(--color-success-bg); color:var(--color-success); }
.badge-rejected{ background:var(--color-danger-bg); color:var(--color-danger); }
.badge-neutral{ background:var(--color-bg-soft); color:var(--color-ink-soft); }

/* خطوات الرحلة (تسلسل حقيقي) */
.step-item{ position:relative; }
.step-num{
  width:44px; height:44px; border-radius:50%;
  background:var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-family:'Tajawal',sans-serif; flex-shrink:0;
}
.step-line{
  position:absolute; top:44px; bottom:-2.5rem;
  right:21px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--color-border) 0 6px, transparent 6px 12px);
}

/* حركات ظهور */
.fade-up{ animation:fadeUp .6s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .fade-up{ animation:none; } }

/* تنبيهات */
.toast{
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--color-ink); color:#fff; padding:.85rem 1.4rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow-soft); z-index:100;
  transition:transform .3s ease; max-width:90vw; text-align:center;
}
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast.toast-error{ background:var(--color-danger); }
.toast.toast-success{ background:var(--color-success); }

/* شريط تمرير خفيف */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:999px; }

.skeleton{
  background:linear-gradient(90deg, var(--color-bg-soft) 25%, #fff 37%, var(--color-bg-soft) 63%);
  background-size:400% 100%;
  animation:skeleton-loading 1.4s ease infinite;
  border-radius:8px;
}
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* إضافة: تصميم أرقى وحركة دخول أنعم مخصصة للنوافذ المنبثقة، بدون التأثير
   على .fade-up المستخدمة في باقي الموقع */
.dmdm-popup-card{
  animation: dmdmPopupIn .45s cubic-bezier(.22,1,.36,1) both;
  box-shadow: 0 20px 50px rgba(27,34,51,.22), 0 4px 12px rgba(27,34,51,.1);
}
@keyframes dmdmPopupIn{
  from{ opacity:0; transform:translateY(22px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .dmdm-popup-card{ animation:none; } }