/* ═══════════════════════════════════════════════════════════════════════════
   🧭 116-atlas-services.css — ATLAS-PULSE 2026-07-19
   أطلس الخدمات الجامعية داخل overlay الخدمات (#exsSvcOv):
   منتقي الـ34 (يعيد استخدام هوية ua-* من طبقة 114) + شاشة خدمات الجامعة
   + شاشة نسب الفروز.
   ─────────────────────────────────────────────────────────────────────────
   • طبقة مستقلة بعد bundle-lazy و114/115 (ترتيب المصدر يغلب) — لا مرايا حزم.
   • ألوان الجامعة تُحقن inline‏ --ua-c1/--ua-c2 (نفس عقد 114) فتعمل تحت كل
     الثيمات بلا تفريعات.
   • RTL بالخصائص المنطقية (inset-inline-*) + direction موروث — لا قواعد rtl صلبة.
   • قياسات clamp() لا padding بنسب مئوية (فخ UNI-ATLAS الموثق).
   • للإزالة: احذف الملف + رابطه في index.html + كتلة الأطلس في
     exam-system-student.js (علامة [ATLAS-PULSE]).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── المنتقي: شبكة الأطلس داخل الـoverlay ── */
#exsSvcOv .ap-grid {
  margin-block-start: clamp(10px, 2.5vw, 18px);
  padding-block-end: clamp(12px, 3vw, 22px);
}
#exsSvcOv .ap-cell { min-width: 0; }

/* حقل البحث (نمط ua-search لكن داخل الـoverlay) */
#exsSvcOv .ap-search {
  position: relative;
  margin-block-start: clamp(8px, 2vw, 14px);
}
#exsSvcOv .ap-search i {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #8b93a7);
  font-size: 0.85rem;
  pointer-events: none;
}
#exsSvcOv .ap-search input {
  width: 100%;
  padding-block: clamp(9px, 2vw, 12px);
  padding-inline-start: 40px;
  padding-inline-end: 14px;
  border-radius: var(--hu-r-md, 14px);
  border: 1px solid var(--border-color, rgba(139, 147, 167, 0.25));
  background: var(--bg-input, var(--bg-card, rgba(255, 255, 255, 0.04)));
  color: var(--text-primary, #eef1f8);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.18s ease;
}
#exsSvcOv .ap-search input:focus {
  border-color: var(--primary, #a855f7);
}
#exsSvcOv .ap-noresult,
#exsSvcOv .ap-loading,
#exsSvcOv .ap-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary, #aab2c5);
  padding-block: clamp(18px, 5vw, 34px);
  font-size: 0.95rem;
}
#exsSvcOv .ap-empty {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--border-color, rgba(139, 147, 167, 0.3));
  border-radius: var(--hu-r-lg, 18px);
  margin-block-start: clamp(10px, 3vw, 18px);
}

/* ── شاشة الجامعة: بطل بهوية الجامعة + شعار ── */
#exsSvcOv .ap-uni-hero { position: relative; }
#exsSvcOv .ap-hero-logo {
  display: inline-flex;
  width: clamp(56px, 14vw, 76px);
  height: clamp(56px, 14vw, 76px);
  margin-block-end: 8px;
  vertical-align: middle;
}
#exsSvcOv .ap-hero-logo .ua-logo {
  width: 100%;
  height: 100%;
  background: #fff;               /* لوح أبيض إجباري — قرار مالك UNI-ATLAS */
  border-radius: 20%;
  padding: clamp(3px, 1vw, 5px);
  object-fit: contain;
}
#exsSvcOv .ap-hero-logo .ua-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20%;
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.35rem);
  color: #fff;
  background: linear-gradient(135deg, var(--ua-c1, var(--primary, #a855f7)), var(--ua-c2, var(--primary, #a855f7)));
}
/* خط هوية سفلي رفيع بلوني الجامعة */
#exsSvcOv .ap-uni-hero::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-block-start: 10px;
  background: linear-gradient(90deg, var(--ua-c1, var(--primary, #a855f7)), var(--ua-c2, transparent));
  opacity: 0.75;
}

/* ── نسب الفروز ── */
#exsSvcOv .apr-year { margin-block-start: clamp(14px, 3.5vw, 24px); }
#exsSvcOv .apr-year-chip {
  display: inline-block;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ua-c1, var(--primary, #a855f7)), var(--ua-c2, var(--primary, #a855f7)));
  border-radius: 999px;
  padding-block: 4px;
  padding-inline: 14px;
  margin-block-end: 10px;
}
#exsSvcOv .apr-college {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(139, 147, 167, 0.18));
  border-radius: var(--hu-r-lg, 16px);
  padding: clamp(10px, 2.6vw, 16px);
  margin-block-end: clamp(10px, 2.5vw, 14px);
}
#exsSvcOv .apr-college-name {
  font-weight: 800;
  color: var(--text-primary, #eef1f8);
  font-size: 0.98rem;
  margin-block-end: clamp(8px, 2vw, 12px);
}
#exsSvcOv .apr-row {
  padding-block: clamp(7px, 1.8vw, 10px);
  border-block-start: 1px dashed var(--border-color, rgba(139, 147, 167, 0.15));
}
#exsSvcOv .apr-row:first-of-type { border-block-start: 0; }
#exsSvcOv .apr-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-end: 5px;
}
#exsSvcOv .apr-major {
  font-weight: 700;
  color: var(--text-primary, #eef1f8);
  font-size: 0.92rem;
}
#exsSvcOv .apr-meta {
  color: var(--text-muted, #8b93a7);
  font-size: 0.78rem;
}
#exsSvcOv .apr-val {
  margin-inline-start: auto;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ua-c1, var(--primary, #a855f7));
}
#exsSvcOv .apr-bar {
  display: block;
  width: 100%;
  height: clamp(8px, 2vw, 10px);
}
#exsSvcOv .apr-bar-bg { fill: var(--bg-input, rgba(139, 147, 167, 0.18)); }
#exsSvcOv .apr-bar-fill { fill: var(--ua-c1, var(--primary, #a855f7)); }
#exsSvcOv .apr-bar-prev .apr-bar-fill { fill: var(--ua-c2, var(--text-muted, #8b93a7)); opacity: 0.55; }
#exsSvcOv .apr-prev {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 4px;
}
#exsSvcOv .apr-prev .apr-bar { flex: 1 1 auto; height: 6px; }
#exsSvcOv .apr-prev-y,
#exsSvcOv .apr-prev-v {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted, #8b93a7);
  font-weight: 700;
}
#exsSvcOv .apr-note {
  margin-block-start: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary, #aab2c5);
}

/* ── 🧭 M6: جرس «أشعرني عند التوفر» على بطاقات قريباً ── */
#exsSvcOv .ap-notify {
  position: absolute;
  inset-inline-end: 8px;
  inset-block-start: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-input, rgba(139, 147, 167, 0.14));
  color: var(--text-secondary, #aab2c5);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 2;
}
#exsSvcOv .ap-notify:hover,
#exsSvcOv .ap-notify:focus-visible {
  color: var(--primary, #a855f7);
  background: var(--bg-card, rgba(168, 85, 247, 0.12));
  outline: none;
}
#exsSvcOv .svc-card { position: relative; }

/* ── الثيم الفاتح ── */
:root[data-theme="light"] #exsSvcOv .ap-search input {
  background: var(--bg-input, #fff);
  color: var(--text-primary, #1c2333);
}
:root[data-theme="light"] #exsSvcOv .apr-college {
  background: var(--bg-card, #fff);
}

/* ── استجابة ── */
@media (max-width: 480px) {
  #exsSvcOv .apr-row-head { gap: 6px; }
  #exsSvcOv .apr-meta { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  #exsSvcOv .ap-search input { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   🤝 [SORT-CROWD 2026-07-19] جدول نسب الفروز التفاعلي (apc-*)
   قرار المالك: تصميم واحد ثابت مهما اختلف الثيم ⇒ ألوان صلبة بلا var() إطلاقاً
   (كحلي عميق + ذهبي للهوية، أزرق #3b82f6 للطلاب، وردي #ec4899 للطالبات).
   للتراجع: احذف هذه الكتلة كاملة حتى نهاية الملف.
   ════════════════════════════════════════════════════════════════════════════ */
#exsSvcOv .apc-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
#exsSvcOv .apc-share:hover,
#exsSvcOv .apc-share:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
  outline: none;
}
#exsSvcOv .apc-wrap {
  background: #0d1730;
  border: 1px solid rgba(176, 136, 80, 0.45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(2, 6, 18, 0.5);
}
#exsSvcOv .apc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #101d3f, #0d1730);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}
#exsSvcOv .apc-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}
#exsSvcOv .apc-lg-m { background: rgba(59, 130, 246, 0.18); color: #7eb3ff; border: 1px solid rgba(59, 130, 246, 0.45); }
#exsSvcOv .apc-lg-f { background: rgba(236, 72, 153, 0.16); color: #ff9dcf; border: 1px solid rgba(236, 72, 153, 0.45); }
#exsSvcOv .apc-hint {
  flex: 1 1 100%;
  font-size: 0.74rem;
  color: #9aa5c0;
}
#exsSvcOv .apc-hint .fa-lock { color: #f5c56b; margin-inline-end: 4px; }
/* 🎭 [GRAND-STAGE E3 2026-08-05] التلميح كان #9aa5c0 رمادياً باهتاً على الخلفية
   الفاتحة (تباين <3) — override مفرد؛ جداول الفروز .apc-* الداكنة لا تُمس
   (استثناء تعاقدي بقرار مالك). */
:root[data-theme="light"] #exsSvcOv .apc-hint { color: #475569; }
#exsSvcOv .apc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#exsSvcOv .apc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: #eef2fb;
}
#exsSvcOv .apc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #101d3f;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #cfd8ee;
  border-block-end: 2px solid rgba(176, 136, 80, 0.5);
  white-space: nowrap;
}
#exsSvcOv .apc-th-major { text-align: start; }
#exsSvcOv .apc-th-m, #exsSvcOv .apc-th-f { width: 108px; text-align: center; }
#exsSvcOv .apc-th-m { color: #7eb3ff; }
#exsSvcOv .apc-th-f { color: #ff9dcf; }
#exsSvcOv .apc-sec td {
  padding: 10px 14px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #f5c56b;
  background: rgba(176, 136, 80, 0.10);
  border-block: 1px solid rgba(176, 136, 80, 0.22);
}
#exsSvcOv .apc-row td { border-block-end: 1px solid rgba(255, 255, 255, 0.055); }
#exsSvcOv .apc-row:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
#exsSvcOv .apc-major {
  padding: 10px 14px;
  line-height: 1.45;
  font-weight: 600;
}
#exsSvcOv .apc-cell {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#exsSvcOv .apc-cell.apc-m { background: rgba(59, 130, 246, 0.07); }
#exsSvcOv .apc-cell.apc-f { background: rgba(236, 72, 153, 0.06); }
#exsSvcOv .apc-na { color: #55607c; font-weight: 700; }
#exsSvcOv .apc-locked .apc-val {
  font-weight: 800;
  font-size: 0.94rem;
}
#exsSvcOv .apc-m .apc-val { color: #8fc0ff; }
#exsSvcOv .apc-f .apc-val { color: #ffadd6; }
#exsSvcOv .apc-locked .fa-lock {
  font-size: 0.62rem;
  color: #f5c56b;
  margin-inline-start: 6px;
  opacity: 0.85;
}
#exsSvcOv .apc-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #b9c4dd;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#exsSvcOv .apc-m .apc-add:hover, #exsSvcOv .apc-m .apc-add:focus-visible
  { color: #8fc0ff; border-color: #3b82f6; background: rgba(59, 130, 246, 0.12); outline: none; }
#exsSvcOv .apc-f .apc-add:hover, #exsSvcOv .apc-f .apc-add:focus-visible
  { color: #ffadd6; border-color: #ec4899; background: rgba(236, 72, 153, 0.12); outline: none; }

/* ── حوار إدخال النسبة (ثابت التصميم أيضاً) ── */
#exsSvcOv .apc-dlg {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#exsSvcOv .apc-dlg-card {
  width: min(360px, 92vw);
  background: #0f1a38;
  border: 1px solid rgba(176, 136, 80, 0.5);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  color: #eef2fb;
  box-shadow: 0 18px 50px rgba(2, 6, 18, 0.65);
}
#exsSvcOv .apc-dlg-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-block-end: 10px;
}
#exsSvcOv .apc-dlg-m .apc-dlg-head { background: rgba(59, 130, 246, 0.18); color: #7eb3ff; border: 1px solid rgba(59, 130, 246, 0.45); }
#exsSvcOv .apc-dlg-f .apc-dlg-head { background: rgba(236, 72, 153, 0.16); color: #ff9dcf; border: 1px solid rgba(236, 72, 153, 0.45); }
#exsSvcOv .apc-dlg-major { font-weight: 800; font-size: 1rem; line-height: 1.5; }
#exsSvcOv .apc-dlg-sec { font-size: 0.74rem; color: #9aa5c0; margin-block: 4px 12px; }
#exsSvcOv .apc-dlg-in {
  width: 130px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
}
#exsSvcOv .apc-dlg-m .apc-dlg-in:focus { border-color: #3b82f6; outline: none; }
#exsSvcOv .apc-dlg-f .apc-dlg-in:focus { border-color: #ec4899; outline: none; }
#exsSvcOv .apc-dlg-warn {
  font-size: 0.72rem;
  color: #f5c56b;
  margin-block: 10px 14px;
}
#exsSvcOv .apc-dlg-btns { display: flex; gap: 10px; justify-content: center; }
#exsSvcOv .apc-dlg-save {
  padding: 9px 22px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  color: #fff;
  cursor: pointer;
}
#exsSvcOv .apc-dlg-m .apc-dlg-save { background: linear-gradient(135deg, #2563eb, #3b82f6); }
#exsSvcOv .apc-dlg-f .apc-dlg-save { background: linear-gradient(135deg, #db2777, #ec4899); }
#exsSvcOv .apc-dlg-save:disabled { opacity: 0.6; cursor: default; }
#exsSvcOv .apc-dlg-cancel {
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: transparent;
  color: #b9c4dd;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ── استجابة: جوال/آيباد — نفس التصميم بقياسات أرحب لمساً ── */
@media (max-width: 560px) {
  #exsSvcOv .apc-th-m, #exsSvcOv .apc-th-f { width: 84px; }
  #exsSvcOv .apc-table { font-size: 0.8rem; }
  #exsSvcOv .apc-major { padding: 9px 10px; }
  #exsSvcOv .apc-add { padding: 5px 9px; font-size: 0.7rem; }
  #exsSvcOv .apc-locked .apc-val { font-size: 0.88rem; }
}