/* ════════════════════════════════════════════════════════════════════════════
 * 97-responsive-harmony.css — طبقة توحيد التجاوب البصري (إضافية، تُحمَّل آخر <link>)
 * ────────────────────────────────────────────────────────────────────────────
 * موديول مستقل ضمن assets/css/ — قابل للإزالة بحذف سطر <link> الخاص به في index.html.
 *
 * الغرض: نفس التصميم السينمائي تماماً، لكنه «متناسق ومضبوط» على كل الأجهزة في
 *        الوضع الطبيعي (آيفون صغير/كبير، أندرويد، تابلت، لابتوب، كمبيوتر). نُصلح فقط
 *        ما يكسر التناسق على الشاشات الصغيرة (أزرار/إيموجي بأبعاد px ثابتة لا تصغر).
 *
 * العقد (Zero Alteration):
 *   • بصري بحت 100٪ — صفر JS، صفر HTML، صفر handler، صفر تغيير id/class/بنية.
 *   • يُحمَّل أخيراً ⇒ يتغلّب على main.css و h-upgrade.css و 96-cosmic-skin.css بالترتيب.
 *   • مبدأ «سقف clamp = الحالة الأصلية»: كل قيمة تتدرّج عبر clamp() وسقفها الأعلى =
 *     القيمة الحالية على الكمبيوتر. الـ vw لا «يَعَضّ» إلا على الشاشات الضيّقة ⇒
 *     **لا اختلاف بصري على اللابتوب/الكمبيوتر** (القيم تصل لسقفها = الأصل).
 *   • لا نلمس: مشغّل الفيديو/البوستر/Fingerprint/الثيمات/خلفية المعبد/أي ملف لاندنق.
 *
 * نقاط التوقّف — موحّدة مع منظومة اللاندنق: ≤600 (جوال) / ≤480 / ≤390 (آيفون صغير)
 *               / ≤360 / ≤340 (الأصغر). نعتمد clamp() للتدرّج السلس بدل القفزات.
 *
 * ملاحظة حركة: هذا الملف ساكن بصرياً (بلا أي animation/transition جديد) ⇒ لا يخالف
 *              prefers-reduced-motion المُحترَمة أصلاً في h-upgrade.css.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ─── (1) ثبات عبر المنصّات + حارس التمرير الأفقي ─────────────────────────────
 * نُكمل ضبط تضخّم النص (h-upgrade فيه -webkit- فقط) بإضافة القياسي، ونؤكّد منع
 * أي تمرير أفقي على كل المقاسات (overflow-x مضبوط أصلاً في h-upgrade:836، نُعزّزه). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;   /* حارس نهائي: لا سكرول أفقي على أي صفحة/أي عرض/أي ثيم */
}


/* ─── (2) الشريط العلوي .top-nav — أهم إصلاح ─────────────────────────────────
 * الهدف: نفس الشكل الفخم، لكن الأزرار والإيموجي تتناسب مع عرض الشاشة بلا «نفخ».
 *
 * تعارض الأسبقية المُعالَج: h-upgrade.css:857-863 يفرض min-width/min-height:44px عند
 * ≤600px فيمنع التصغير. هنا (محمّل لاحقاً، بنفس المحدّد) نُعيد min-* إلى 0 لنسمح
 * بالتدرّج، **مع الحفاظ على مساحة لمس آمنة ≥44px** عبر ::before شفّاف (Apple HIG). */

/* أزرار الأيقونة داخل الشريط العلوي (ملاحظة: لا يوجد .nav-btn داخل .top-nav حالياً —
   القاعدة وقائية لأي زر أيقونة مستقبلي في الشريط، وسقفها = 44px الأصلية). */
.top-nav .nav-btn {
  width: clamp(38px, 11vw, 44px);
  height: clamp(38px, 11vw, 44px);
  min-width: 0;            /* يتغلّب على min-width:44px في h-upgrade (محمّل قبلنا) */
  min-height: 0;
  font-size: clamp(0.9rem, 3.4vw, 1rem);   /* سقف 1rem = الأصل */
}

/* زر تغيير الثيم — سقفه 40px (قيمته الأصلية على الكمبيوتر في main.css:642). */
.theme-toggle-btn {
  width: clamp(36px, 10vw, 40px);
  height: clamp(36px, 10vw, 40px);
  min-width: 0;
  min-height: 0;
}

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

/* الإيموجي 🌙🔵🌸☀️ — هو ما يبدو «منفوخاً» على iOS (Apple Color Emoji يُرسَم أكبر
   من حجم الخط المحدّد). نقيّده ليطابق وزن أيقونات FontAwesome المجاورة على iOS/أندرويد. */
.theme-toggle-btn .tt-icon {
  font-size: clamp(0.95rem, 3.4vw, 1.12rem);
  line-height: 1;
}

/* الشعار + العنوان: نمنع الانضغاط ونتدرّج بحجم النص (سقف 1.2rem = الأصل). */
.top-nav .nav-title {
  font-size: clamp(1rem, 4vw, 1.2rem);
  white-space: nowrap;
}

/* رابط الدعم «التواصل مع فريق الدعم» — أنماطه سطرية في index.html:228 و h-upgrade
   يفرض padding بـ!important ⇒ نستعمل !important هنا فقط (محدّد أقوى + محمّل أخيراً).
   النص يبقى ظاهراً افتراضياً؛ تدرّج الخط/الحشوة عبر clamp + nowrap لمنع الالتفاف. */
.top-nav .nav-actions a[target="_blank"] {
  font-size: clamp(0.68rem, 2.6vw, 0.8rem) !important;   /* سقف 0.8rem = الأصل */
  padding: clamp(5px, 1.5vw, 7px) clamp(9px, 3vw, 14px) !important;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.top-nav .nav-actions a[target="_blank"] .fab {
  font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important;   /* سقف 1.1rem = الأصل */
}


/* ─── (3) الشريط السفلي + زر الطلب العائم ─────────────────────────────────────
 * تدرّج لطيف. لا نلمس min-height:56px (هدف لمس h-upgrade) ولا الوهج/الحدود. */
.bottom-nav .nav-item {
  font-size: clamp(0.66rem, 2.8vw, 0.72rem);   /* سقف 0.72rem = الأصل */
}
.nav-icon-wrap {
  width: clamp(34px, 9.5vw, 38px);
  height: clamp(34px, 9.5vw, 38px);
  font-size: clamp(1rem, 3vw, 1.1rem);
}
/* زر الطلب العائم: الأبعاد بـ!important في main.css:733 ⇒ نطابقها. نضبط margin-top
   بنفس النسبة حتى يبقى البروز متناسقاً (عند 54px ⇒ 54/-2+1 = -26px = الأصل بالضبط). */
.nav-icon-request {
  width: clamp(48px, 14vw, 54px) !important;
  height: clamp(48px, 14vw, 54px) !important;
  margin-top: calc(clamp(48px, 14vw, 54px) / -2 + 1px);
}


/* ─── (4) البطاقات والإحصائيات ────────────────────────────────────────────────
 * نضمن أن أرقام الإحصائيات لا تكسر السطر على ≤360px. سقوف = الأصل. لا نلمس بانر
 * الداشبورد ولا صورته/سكريمه (قادمة من 96-cosmic-skin) ولا شبكات البوسترات. */
.stat-mini .stat-num {
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);   /* سقف 1.4rem = الأصل */
  white-space: nowrap;
}
.stat-mini .stat-label {
  font-size: clamp(0.66rem, 2.6vw, 0.72rem);   /* سقف 0.72rem = الأصل */
}


/* ─── (5) صفحتا الدخول والتسجيل ───────────────────────────────────────────────
 * شعارا الدخول/التسجيل أبعادهما سطرية (index.html:255 = 130px، :305 = 90px) ⇒
 * !important. تدرّج للأسفل على الصغير بلا تكبير فوق الأصل. البطاقة/الحقول تستعمل
 * clamp أصلاً في 95-cinematic-auth ⇒ لا نكسرها. خلفية المعبد محصورة بـ:has ⇒ تبقى. */
#page-login .auth-logo {
  width: clamp(96px, 26vw, 130px) !important;    /* سقف 130px = الأصل */
  height: clamp(96px, 26vw, 130px) !important;
}
#page-register .auth-logo {
  width: clamp(72px, 22vw, 90px) !important;     /* سقف 90px = الأصل */
  height: clamp(72px, 22vw, 90px) !important;
}


/* ─── (6) الحواف الآمنة (Safe-area) — مُفعَّلة بعد viewport-fit=cover ──────────
 * env() يرجع 0 على الأجهزة بلا شق/على الكمبيوتر ⇒ كل قيمة أدناه = الأصل بالضبط
 * (16px / 0px) ⇒ صفر تغيير خارج آيفونات الشق، وصفر أثر عمودي بأي حال.
 *
 * ⚠️ قرار هندسي مقصود — لماذا «الجوانب فقط» (landscape) لا القمة العمودية:
 *   حشوة body العلوية مضبوطة **سطرياً عبر JS** بالقيمة calc(var(--navbar-height)+42px)
 *   حيث الـ42px تحجز مكان «بانر الدعم»، وتتغيّر حسب فتح/إغلاق البانر (closeBanner).
 *   لو كبّرنا ارتفاع .top-nav بمقدار env(safe-area-inset-top) فلن تتبعه حشوة body
 *   (ممنوع لمس JS) ⇒ يتسرّب المحتوى أسفل الشريط/البانر على آيفون الشق. لذلك نتجنّب
 *   أي تكبير عمودي للشريط، ونكتفي بحواف الجوانب (آمنة 100٪: أفقية، لا تُحدث إزاحة
 *   عمودية، وتصبح 0 على الوضع الطولي/الكمبيوتر). القاع والجوانب العامة مؤمَّنة أصلاً
 *   (main.css:609 + h-upgrade.css:866) ⇒ viewport-fit=cover يفعّلها كما هي دون تغيير. */
@supports (top: env(safe-area-inset-top)) {
  /* الشريط العلوي ثابت (لا يتأثّر بحشوة body) ⇒ نُبعد محتواه عن شق الجانب في الوضع
     الأفقي، مع الإبقاء على 16px الأصلية عند انعدام الشق. */
  .top-nav {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  /* الشريط السفلي ثابت كذلك ⇒ نؤمّن جوانبه (القاع العمودي مؤمَّن أصلاً main.css:609). */
  .bottom-nav {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * نقاط التوقّف المرحلية — موحّدة مع منظومة اللاندنق. معظم التدرّج تكفّل به clamp
 * أعلاه؛ هذه الكتل لِما لا يُناسبه clamp (فجوات الشريط، فجوة العنوان السطرية، وملاذ
 * أخير لرابط الدعم عند أضيق الشاشات). كلها تنشط على الجوال فقط ⇒ الكمبيوتر سليم.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ≤480px — تخفيف فجوة إجراءات الشريط (الأصل 12px ⇒ يبقى 12px فوق 480). */
@media (max-width: 480px) {
  .top-nav .nav-actions { gap: 10px; }
}

/* ≤390px (آيفون صغير) — إحكام بسيط إضافي لرابط الدعم. */
@media (max-width: 390px) {
  .top-nav .nav-actions a[target="_blank"] { letter-spacing: -0.015em; }
}

/* ≤360px — فجوة أصغر + تقليص فجوة العنوان السطرية (gap:6px سطري ⇒ !important). */
@media (max-width: 360px) {
  .top-nav .nav-actions { gap: 8px; }
  .top-nav .nav-title { gap: 4px !important; }
}

/* ≤340px (الأصغر) — ملاذ أخير: إن ضاق الشريط نُخفي نص الدعم بصرياً ونُبقي الأيقونة.
 * النص يبقى في DOM (قارئ الشاشة يقرؤه) — font-size:0 يطويه بصرياً فقط، فلا نفقد
 * الميزة ولا الوصولية. الأيقونة تُستعاد بحجمها. */
@media (max-width: 340px) {
  .top-nav .nav-actions a[target="_blank"] {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 7px 10px !important;
  }
  .top-nav .nav-actions a[target="_blank"] .fab {
    font-size: 1.05rem !important;
  }
}