/* ════════════════════════════════════════════════════════════════════════════
 * 107-nav-harmony.css — تناسق الشريط العلوي عبر كل الأجهزة (طبقة إضافية، بعد 106)
 * ────────────────────────────────────────────────────────────────────────────
 * الغرض:
 *   جعل أيقونات إجراءات الهيدر «عنقوداً واحداً متناسقاً» بنفس المقاس ونفس نصف
 *   القطر، وإظهار عبارة «التواصل مع فريق الدعم» كاملةً بلا قصّ حتى على الجوالات
 *   الصغيرة — من غير أي لون صريح (كل زر يرث --primary/--border-color/--danger
 *   فيتلوّن ذهبياً في العلا، بنفسجياً في purple، غامقاً في light تلقائياً).
 *
 * آلية العمل:
 *   • طبقة بصرية بحتة 100٪ — صفر JS/HTML/handler/تغيير id أو class أو بنية.
 *   • تُحمَّل بعد 106 ⇒ تتغلّب على main.css و 97 و 103 و exam-system-student.css
 *     بنفس قوة المحدِّد + ترتيب التحميل (وبمحدّد أقوى حيث يلزم كسر ID/!important).
 *   • مبدأ «سقف clamp = الأصل أو أصغر»: لا تكبير فوق الأصل على الكمبيوتر/الآيباد
 *     إطلاقاً؛ العنقود يتوحّد على 36px (= مقاس rx-nav-home الأصلي) فيتناسق بلا نفخ.
 *   • سقوط رشيق: أي زر غير موجود (مثل زر الخروج الأحمر #exsLogoutTop المحقون شرطياً)
 *     ببساطة لا تُطبَّق عليه القاعدة — لا كسر ولا أثر.
 *
 * نقاط التوقّف: ≤480 (طيّ نص الواجهة الأساسية مطبَّق أصلاً في 103) / ≤390 (إحكام) /
 *              ≤360 (أصغر فجوة + فجوة العنوان) / ≤320 فقط (ملاذ أخير: طيّ نص الدعم).
 *
 * خطة الإزالة: احذف سطر <link> الخاص به من index.html + هذا الملف ⇒ رجوع كامل.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ─── (1) العنقود: توحيد مقاس أيقونات الإجراءات ──────────────────────────────
 * الأزرار المربّعة الأيقونية (الرئيسية + مبدّل الثيم + زر الخروج الأحمر إن وُجد)
 * تتوحّد على clamp(30px, 8.2vw, 36px): سقفها 36px (= rx-nav-home الأصلي) فلا تكبير
 * فوق الأصل، وأرضيّتها 30px على أضيق جوال. نصف قطر موحّد 10px + flex-shrink:0 لكلها.
 *
 * كسر الأسبقية:
 *   • theme-toggle: main.css/97 يعطيانه (0,1,0)؛ محدّدنا (0,3,0) + لاحق ⇒ يتغلّب.
 *   • rx-nav-home: 103 يعطيه (0,1,0) + min-height:36px؛ نعيد min-* إلى 0 لنسمح بالتدرّج.
 *   • #exsLogoutTop: مُعرَّف بـID (1,0,0) + خلفية حمراء صريحة في exam-system-student.css؛
 *     محدّدنا (1,2,0) + لاحق ⇒ يتغلّب على الحجم/الشكل، والخلفية تصير من --danger. */
.top-nav .nav-actions .rx-nav-home,
.top-nav .nav-actions .theme-toggle-btn,
.top-nav .nav-actions #exsLogoutTop {
  width: clamp(30px, 8.2vw, 36px);
  height: clamp(30px, 8.2vw, 36px);
  min-width: 0;             /* يتغلّب على min-width الموروث (h-upgrade/103) */
  min-height: 0;
  border-radius: 10px;      /* نصف قطر موحّد للعنقود كله */
  flex-shrink: 0;
  position: relative;       /* مرساة لمنطقة اللمس ::before */
}

/* زر الخروج الأحمر — لون من --danger (لا لون صريح)، ويبقى أحمراً في كل الثيمات.
 * نُبقيه دائرة الطاقة المألوفة بصرياً عبر الأيقونة، لكن ضمن مقاس/نصف قطر العنقود. */
.top-nav .nav-actions #exsLogoutTop {
  background: var(--danger);
  font-size: clamp(12px, 3.4vw, 15px);   /* سقف 15px = الأصل */
}

/* الإيموجي داخل مبدّل الثيم — يتناسب مع المقاس الجديد (36px) بلا «نفخ» iOS. */
.top-nav .nav-actions .theme-toggle-btn .tt-icon {
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  line-height: 1;
}

/* منطقة لمس ≥44px دون تكبير الإطار المرئي (حشوة شفّافة غير مرئية، نفس نهج 97).
 * عند الأرضية 30px (أضيق الجوالات) ⇒ 30 + 7×2 = 44px ⇒ يفي بحدّ ≥44px على كل
 * الأجهزة (وأكبر فوقها). لا خلفية/لا z-index ⇒ غير مرئية. */
.top-nav .nav-actions .rx-nav-home::before,
.top-nav .nav-actions .rx-nav-landing::before,
.top-nav .nav-actions .theme-toggle-btn::before,
.top-nav .nav-actions #exsLogoutTop::before {
  content: "";
  position: absolute;
  inset: -7px;
  /* تمرّر الضغط للزر نفسه (جزء من محتواه)، بلا أي أثر بصري */
}
/* نضمن أن الأصل مرساة موجبة للـ::before (rx-nav-landing static افتراضياً) */
.top-nav .nav-actions .rx-nav-landing { position: relative; }

/* «الواجهة الأساسية» تُطوى لأيقونة عند ≤480px (في 103 بعرض 36px) ⇒ نُدخلها في مقاس
 * العنقود نفسه (clamp) لتبقى مطابقة تماماً للرئيسية/الثيم/الخروج. محدّدنا (0,3,0) +
 * لاحق لـ103 ⇒ يتغلّب. فوق 480px تبقى «بيل» نصّية كما هي (لا نلمسها). */
@media (max-width: 480px) {
  .top-nav .nav-actions .rx-nav-landing {
    width: clamp(30px, 8.2vw, 36px);
    height: clamp(30px, 8.2vw, 36px);
    min-width: 0;
    min-height: 0;
  }
}


/* ─── (2) الفجوات: عنقود مُحكَم يتدرّج على الجوال ────────────────────────────
 * سقف الفجوة = 12px (الأصل في main.css) فوق الجوال، ويضيق تدريجياً على الضيّق. */
.top-nav .nav-actions {
  gap: clamp(5px, 1.6vw, 10px);
  flex-shrink: 0;           /* لا يُضغط العنقود ⇒ نص الدعم لا يُقصّ (العنوان يتقلّص بدله) */
}
.top-nav .nav-actions .rx-nav-group {
  gap: clamp(4px, 1.2vw, 6px);
}


/* ─── (3) رابط الدعم «التواصل مع فريق الدعم» — كامل بلا قصّ ────────────────────
 * أنماطه سطرية في index.html + 97/h-upgrade يفرضان بـ!important ⇒ نستعمل !important
 * هنا (محدّد أقوى + محمّل أخيراً). ألوان الخلفية/الحد تبقى للثيمات (main.css/105) —
 * نحن نضبط التخطيط فقط: نص كامل، nowrap، خط/حشوة متدرّجان بسقف = الأصل، لا انضغاط. */
.top-nav .nav-actions a[target="_blank"] {
  font-size: clamp(0.6rem, 2.5vw, 0.8rem) !important;   /* سقف 0.8rem = الأصل */
  padding: clamp(4px, 1.4vw, 7px) clamp(8px, 2.6vw, 14px) !important;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.015em;
}
.top-nav .nav-actions a[target="_blank"] .fab {
  font-size: clamp(0.9rem, 3vw, 1.1rem) !important;     /* سقف 1.1rem = الأصل */
}


/* ─── (4) العنوان قابل للانكماش بأمان (لا يزاحم الإجراءات) ─────────────────────
 * الشعار ثابت (flex-shrink:0)، ونص «حمدان» يتقلّص خطّه بـclamp (سقف 1.2rem = الأصل)
 * قبل أي قصّ. flex:0 1 auto + min-width:0 يسمحان للعنوان بامتصاص أي ضيق. overflow:hidden
 * حارس أخير (نادراً ما يُفعَّل لأن تقلّص الخط يكفي على 360px). */
.top-nav .nav-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.85rem, 3.4vw, 1.2rem);   /* سقف 1.2rem = الأصل */
  white-space: nowrap;
}
.top-nav .nav-title .h-logo { flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════════════════════
 * نقاط التوقّف المرحلية — لِما لا يُناسبه clamp (الفجوات + ملاذ نص الدعم).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ≤390px (آيفون صغير) — إحكام بسيط إضافي للفجوة. */
@media (max-width: 390px) {
  .top-nav .nav-actions { gap: clamp(4px, 1.4vw, 8px); }
}

/* ≤440px (كل الجوالات الطولية) — قد يزاحم عنقودُ الإجراءات (حتى 5 أزرار + نصُّ دعم
 * كامل) كلمةَ «حمدان» فتُقصّ. الأولوية لنص الدعم الكامل + عنقود متناسق ⇒ نُظهر
 * الشعار وحده (28px، يحمل aria-label="حمدان") ونطوي الكلمة بصرياً (font-size:0) بلا
 * قصّ. الكلمة تبقى في DOM (وصولية). على ≥441px (تابلت/كمبيوتر) تعود «حمدان» كاملة. */
@media (max-width: 440px) {
  .top-nav .nav-title {
    font-size: 0 !important;
    gap: 0 !important;
  }
}

/* ≤360px — أصغر فجوة للعنقود. */
@media (max-width: 360px) {
  .top-nav .nav-actions { gap: 5px; }
  .top-nav .nav-actions .rx-nav-group { gap: 4px; }
}

/* ≤340px — نُلغي طيّ 97 (font-size:0): النص يبقى كاملاً حتى 320px على الجوالات
 * الواقعية. نُحكم الخط/الحشوة قليلاً ليفِد الكل داخل العرض. */
@media (max-width: 340px) {
  .top-nav .nav-actions a[target="_blank"] {
    font-size: clamp(0.56rem, 2.4vw, 0.8rem) !important;
    gap: 5px !important;
    padding: clamp(4px, 1.3vw, 6px) clamp(7px, 2.3vw, 11px) !important;
  }
  .top-nav .nav-actions a[target="_blank"] .fab {
    font-size: clamp(0.85rem, 2.9vw, 1rem) !important;
  }
}

/* ≤320px فقط (ملاذ أخير لأجهزة نادرة جداً) — نطوي نص الدعم لأيقونة. النص يبقى في
 * DOM (قارئ الشاشة يقرؤه) + «بانر الدعم» أسفل الشريط يعرض النص كاملاً دائماً على كل
 * الأجهزة ⇒ لا نفقد الميزة ولا الوصولية. هذا البلوك لاحق للـ≤340 ⇒ يتغلّب عند <320. */
@media (max-width: 320px) {
  .top-nav .nav-actions a[target="_blank"] {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 6px 9px !important;
  }
  .top-nav .nav-actions a[target="_blank"] .fab {
    font-size: 1rem !important;
  }
}