/**
 * float-controls.css
 * -----------------------------------------------------------------------------
 * أنماط كل أدوات التحكم العائمة فوق الخريطة: البحث، نوع الخريطة، اللغة،
 * الطبقات (يسار الشاشة، بلا لوحة موحّدة)، التدوير + البوصلة، روابط الفلك/حول.
 *
 * - كل عنصر عائم مستقلّ (لا حاوية/لوحة مشتركة تجمعها) — راجع محادثة الجلسة
 *   ٢٠٢٦-٠٩-١٤: قرار عبدالله الصريح "لا يوجد لوحة يسرى، اجعل كل شيء عائم".
 * - الطراز: زجاجي شفاف مطوَّر (استمرار لهوية المشروع السابقة، بلمسة أنعم
 *   وأدقّ: تعتيم أخفّ + ضبابية أقوى من القيم السابقة في gleason.css).
 * - المواضع مطلقة بالبكسل من حواف الشاشة (لا منطقية RTL/LTR) عمداً — نفس
 *   اتفاقية أدوات الخريطة العائمة السابقة (تبقى في زاويتها بصرف النظر عن
 *   اتجاه اللغة، كخرائط جوجل).
 * -----------------------------------------------------------------------------
 */

/* ─── الرموز (Design Tokens) ──────────────────────────────────────────── */
:root {
  --fc-accent: #3b82f6;
  --fc-accent-dark: #2563eb;
  --fc-text: #1f2937;
  --fc-muted: #6b7280;

  --fc-glass-bg: rgba(255, 255, 255, 0.55);
  --fc-glass-border: rgba(255, 255, 255, 0.6);
  --fc-glass-shadow: 0 8px 30px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.06);
  --fc-blur: blur(20px) saturate(180%);

  --fc-icon-size: 46px;
  --fc-gap: 18px;
  --fc-z: 1000;

  /* عرض محجوز لمفتاح التكبير/التصغير الافتراضي لـ OpenLayers (.ol-zoom،
     أعلى يسار الشاشة بالضبط عند نفس --fc-gap) — قيمة قياسية من ol.css، لا
     نتحكّم بها من عندنا. أي أداة عائمة أخرى في تلك الزاوية يجب أن تبدأ
     بعدها كي لا تتراكب معه (طلب عبدالله ٢٠٢٦-٠٩-١٥). */
  --ol-zoom-reserved: 46px;
}

/* ─── أساس زجاجي مشترك لكل الأدوات العائمة ────────────────────────────── */
.fc-glass {
  background: var(--fc-glass-bg);
  backdrop-filter: var(--fc-blur);
  -webkit-backdrop-filter: var(--fc-blur);
  border: 1px solid var(--fc-glass-border);
  box-shadow: var(--fc-glass-shadow);
  /* ⚠️ **إصلاح حقيقي (٢٠٢٦-٠٩-١٦، بلاغ عبدالله: تراكب عناصر على الموبايل)**:
     بلا هذا، تُحسَب width/height المضبوطة صراحةً (هنا أو في كل عنصر يستعمل
     .fc-glass) على صندوق المحتوى وحده — فيُضاف الـpadding والـborder فوقها،
     فيتجاوز العرض الفعلي المرسوم القيمة المقصودة بمقدار محسوس (مثلاً
     .search-bar: width:320px + padding:18px×2 + border:1px×2 = 358px
     فعلياً، لا 320px). غير ملحوظ على الديسكتوب حيث يفيض حوله فراغ، لكنه
     يُنتج تراكباً حقيقياً بين الأدوات العائمة على شاشات الموبايل الضيّقة
     حيث كل بكسل محسوب (راجع تعديلات @media أسفل الملفّ التي تفترض هذا
     الإصلاح لتُصيب مقاساتها فعلياً).
  */
  box-sizing: border-box;
}

/* ─── ١) شريط البحث — أعلى الوسط (محجوز بصرياً فقط) ───────────────────── */
.search-bar {
  position: absolute;
  top: var(--fc-gap);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70vw);
  height: 50px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  z-index: var(--fc-z);
}

.search-bar-icon {
  font-size: 17px;
  opacity: 0.7;
  flex-shrink: 0;
}

.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--fc-text);
  font-family: inherit;
}

/* ─── ١ب) قائمة نتائج البحث — أسفل شريط البحث مباشرة ─────────────────────
   نفس عرض/توسيط .search-bar بالضبط (متتالٍ بصرياً) — z-index أعلى بمقدار
   نقطة واحدة كي تسبق أي أداة عائمة أخرى تتقاطع بصرياً معها عند الفتح. */
.search-results {
  position: absolute;
  top: calc(var(--fc-gap) + 50px + 8px); /* أسفل .search-bar (ارتفاعها ٥٠px) + فراغ ٨px */
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70vw);
  max-height: min(320px, 50vh);
  overflow-y: auto;
  border-radius: 16px;
  z-index: calc(var(--fc-z) + 1);
  box-sizing: border-box;
  padding: 6px;
  display: none; /* يُفعَّل بـsearch.js عند وجود نتائج/تلميح فقط */
}

.search-results.is-open {
  display: block;
}

.search-result-item,
.search-results-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--fc-text);
}

.search-result-item {
  cursor: pointer;
}

.search-result-item:hover,
.search-result-item.is-active {
  background: rgba(0, 0, 0, 0.06);
}

.search-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-context {
  font-size: 11px;
  opacity: 0.6;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results-hint {
  opacity: 0.65;
  font-size: 13px;
  justify-content: center;
}

.search-bar input::placeholder {
  color: var(--fc-muted);
}

/* ─── ٢) نوع الخريطة — أعلى اليسار (بعد مفتاح تكبير OpenLayers) ────────── */
.basemap-switch {
  position: absolute;
  top: var(--fc-gap);
  left: calc(var(--fc-gap) + var(--ol-zoom-reserved));
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  z-index: var(--fc-z);
}

.basemap-switch .seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--fc-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.basemap-switch .seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.basemap-switch .seg.is-checked {
  background: var(--fc-accent);
  color: #fff;
}

/* ─── ٣) تبديل اللغة — أعلى اليمين ─────────────────────────────────────── */
.lang-toggle {
  position: absolute;
  top: var(--fc-gap);
  right: var(--fc-gap);
  height: var(--fc-icon-size);
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-text);
  cursor: pointer;
  z-index: var(--fc-z);
  transition: transform 0.15s ease;
}

.lang-toggle:hover {
  transform: translateY(-1px);
}

/* ─── ٤) الطبقات — أيقونات عائمة مستقلّة على يسار الشاشة ──────────────── */
.layer-rail {
  position: absolute;
  top: 50%;
  left: var(--fc-gap);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: var(--fc-z);
}

.icon-btn {
  position: relative;
  width: var(--fc-icon-size);
  height: var(--fc-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--fc-text);
  cursor: pointer;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.icon-btn.is-checked {
  background: var(--fc-accent);
  color: #fff;
  border-color: var(--fc-accent);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

/* خيار معطّل (مثل «الحدود» فوق أساس OSM الذي يرسم حدوده بنفسه):
   يبقى ظاهراً ليعرف المستخدم بوجوده، لكن بلا تفاعل ولا إيحاء بأنه فعّال. */
.icon-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon-btn.is-disabled input {
  cursor: not-allowed;
}

/* شارة صغيرة بقيمة فاصل الشبكة الحالي (تُملأ من graticule.js، فارغة = مخفية) */
.grid-value {
  position: absolute;
  bottom: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--fc-accent-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.grid-value:empty {
  display: none;
}

.grid-value::after {
  content: "°";
}

/* ─── ٥) شريط التدوير الرفيع + البوصلة — أسفل الوسط ────────────────────── */
.rotation-bar {
  position: absolute;
  bottom: var(--fc-gap);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 80vw);
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  z-index: var(--fc-z);
}

.rotation-bar .compass {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.rotation-bar .compass:hover {
  transform: scale(1.06);
}

.rotation-bar .compass-arrow {
  font-size: 15px;
  color: #ef4444;
  transition: transform 0.2s ease;
}

.rotation-bar input[type="range"] {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--fc-accent), #8b5cf6, #ec4899);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rotation-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fc-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.rotation-bar input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.rotation-bar .rotation-value {
  min-width: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fc-text);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 5px 0;
  flex-shrink: 0;
}

/* ─── ٦/٧/٨) روابط الفلك و«حول» وزر «موقعي» — الزوايا السفلى ────────────── */
.corner-link {
  position: absolute;
  bottom: var(--fc-gap);
  width: var(--fc-icon-size);
  height: var(--fc-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--fc-text);
  text-decoration: none;
  cursor: pointer;
  z-index: var(--fc-z);
  transition: transform 0.15s ease;
  /* إعادة تصفير عناصر <button> (زر «موقعي») كي تطابق مظهر <a> تماماً */
  border: none;
  padding: 0;
  font-family: inherit;
}

.corner-link:hover {
  transform: translateY(-1px);
}

.corner-link.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.corner-link.astronomy {
  left: var(--fc-gap);
  /* مرفوعة عمداً فوق مقياس المسافة الافتراضي لـ OpenLayers (.ol-scale-line،
     bottom:8px يسار) — كانت تتراكب معه. طلب عبدالله ٢٠٢٦-٠٩-١٤. */
  bottom: 56px;
}

.corner-link.about {
  right: var(--fc-gap);
}

/* زر «موقعي» — فوق «حول» في الزاوية نفسها، بفارق (حجم الأيقونة + فجوة). */
.corner-link.locate {
  right: var(--fc-gap);
  bottom: calc(var(--fc-gap) + var(--fc-icon-size) + 10px);
  /* أزرق بلون تمييز التطبيق نفسه (--fc-accent، قريب جداً من أزرق خرائط
     جوجل #4285F4) — لا اللون الرمادي العام لبقية أزرار الزوايا (--fc-text)،
     كي يتميّز كعنصر "حيّ" (يتتبّع موقعي) لا رابطاً ثابتاً كـ«حول»/«الفلك». */
  color: var(--fc-accent);
}

/* ⚠️ **أيقونة "my_location" (بلغ عنها عبدالله ٢٠٢٦-٠٩-١٦: "اجعل شكله مثل
   جوجل") بدل إيموجي 🎯 (لوحة دارت — لا علاقة بصرية بمفهوم "تحديد الموقع"
   أصلاً، وتُرسَم بألوانها الخاصّة الثابتة من خط الإيموجي، بلا اتّباع للون
   الزرّ). المسار أدناه هو أيقونة Material Icons الرسمية "my_location" —
   نفس الأيقونة التي تستعملها خرائط جوجل لزرّ "موقعي" بالضبط (SVG عام
   برخصة Apache 2.0، لا شعاراً/علامة تجارية — استعماله هنا مباشر وآمن).
   ``fill="currentColor"`` يجعلها تتبع ``color`` أعلاه (أزرق) تلقائياً،
   ويُخفَّت مع البقية عبر ``.is-disabled{opacity:.4}`` الموجودة أصلاً بلا
   أي تعديل إضافي هناك. */
.corner-link.locate svg {
  width: 22px;
  height: 22px;
}

/* شارة رقم الزووم — بجانب مقياس المسافة (يُحسَب موضعها الأفقي فعلياً في
   zoom-badge.js). القيمة الأولية هنا احتياطية فقط، قبل أول تحديث JS. */
.zoom-badge {
  position: absolute;
  bottom: 8px;
  left: 150px;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--fc-text);
  z-index: calc(var(--fc-z) - 10);
  pointer-events: none;
}

/* ─── استجابة للشاشات الضيّقة (موبايل + أجهزة لوحية) ───────────────────── */
/* ⚠️ **الحدّ 1100px، لا 640px (إصلاح ٢٠٢٦-٠٩-١٦ الثاني، بلاغ عبدالله: "لِمَ
   بقي الآيباد بمختلف الأحجام؟" — بعد اختبار فعليّ شامل لكل نطاق الأحجام
   وليس الموبايل وحده)**: عرض .search-bar الديسكتوب ثابت 420px (بما أن
   ``min(420px, 70vw)`` يستقرّ عند 420 فور تجاوز عرض الشاشة ~600px) و.search-bar
   مُمركزة (``left:50%``+``transform``) — فحافتها اليسرى تقع عند
   ``vw/2 − 210``. .basemap-switch (يسار، نصّ القسمين ظاهر فوق 640px قديماً)
   تمتدّ فعلياً حتى ~328px من الحافة (قِسناها فعلياً: 264px عرضاً بعد بداية
   46px+18px المحجوزة لمفتاح التكبير). التصادم إذن قائم رياضياً طالما
   ``vw/2 − 210 < 328`` — أي لكل عرض **أقلّ من ~1076px**، لا آيفون/أندرويد
   وحدها: يشمل هذا كل آيباد تقريباً بوضعية عموديّة (٧٤٤ حتى ٨٣٤px) بل
   وبعضها أفقياً (آيباد قياسي ١٠٢٤px) — تأكَّد فعلياً بالقياس المباشر عند
   1024px (تراكب فعليّ: حافة البحث اليسرى 302px مقابل حافة نوع الخريطة
   اليمنى 328px). رفع الحدّ هنا إلى 1100px (هامش أمان ~24px فوق الحدّ
   الحسابيّ 1076px) يُعيد استعمال كل تعديلات هذا القسم (نزول البحث لصفّه
   الخاص، رفع شريط التدوير، تضييق حيّز .layer-rail…) على كامل هذا النطاق
   الأوسع بدل حصرها بالهواتف وحدها — أُعيد اختبار كل شيء تجريبياً على عدّة
   عروض/ارتفاعات فعلية ضمن هذا المدى بعد الرفع (راجع محادثة الجلسة)، لا
   اعتماداً على الحساب الرياضي وحده. */
@media (max-width: 1100px) {
  :root {
    --fc-icon-size: 42px;
    --fc-gap: 12px;
  }

  /* ⚠️ **إعادة ترتيب حقيقية، لا مجرّد تصغير (٢٠٢٦-٠٩-١٦، بلاغ عبدالله: عناصر
     تتراكب على الموبايل)**: على الديسكتوب تتّسع ٣٧٥+px بسهولة لصفّ واحد
     يجمع «نوع الخريطة» (يسار) + «البحث» (وسط) + «اللغة» (يمين) معاً. على
     عرض هاتف نموذجي (٣٧٥px) لا يكفي هذا مطلقاً: «نوع الخريطة» يشغل من حافة
     مفتاح تكبير OpenLayers حتى ~166px، و«اللغة» من ~308px حتى الحافة — لا
     يتبقّى للبحث في المنتصف سوى ~140px، أضيق من أن يحمل أيقونة + نصّاً
     مقروءاً. حتى بعد إصلاح box-sizing أعلاه (الذي وحده لا يكفي هنا) يبقى
     التصادم قائماً لأن المشكلة مساحة لا حساب مقاسات. الحلّ: البحث ينزل
     لصفّه المستقلّ تحت صفّ «نوع الخريطة/اللغة»، بعرض يقارب عرض الشاشة كاملاً. */
  .search-bar {
    top: calc(var(--fc-gap) + var(--fc-icon-size) + 10px);
    width: calc(100vw - (2 * var(--fc-gap)) - 4px);
    max-width: 420px;
    height: 46px;
  }

  .basemap-switch .seg span:last-child {
    display: none; /* الأيقونة فقط على الموبايل، بلا نص القسم */
  }

  /* ⚠️ **إخفاء كامل، لا رفع فقط (إصلاح ٢٠٢٦-٠٩-١٦ الثالث، طلب عبدالله:
     "مزلاق تدوير الخريطة على أجهزة الموبايل والآيباد لا معنى له")** —
     الأداة الأصلية كانت "ترتفع" فوق الزحام السفلي فقط (راجع الإصدار
     السابق من هذا التعليق)؛ الطلب الآن أوضح: لا معنى لمزلاق سحب رفيع
     (``input[type=range]``) مصمَّم أصلاً للماوس على شاشة لمس، يزاحم مساحة
     ثمينة على أداة نادرة الاستخدام هناك. **لا تُفقَد وظيفة الدوران نفسها
     بإخفائه** — ``PinchRotate`` (تدوير بإصبعين، إيماءة اللمس الطبيعية)
     يبقى مفعَّلاً افتراضياً ضمن تفاعلات OpenLayers (``buildInteractions``
     في gleason.js لا يُعطِّله صراحةً، خلافاً لـ``altShiftDragRotate``
     و``dragPan``) — فمستخدم اللمس يدور الخريطة بإيماءته المعتادة بلا أي
     حاجة لمزلاق مرئي. البوصلة (زرّ إعادة التعيين لأعلى) كانت ضمن نفس
     الشريط فتختفي معه؛ وسيلة لمسيّة صريحة بديلة للتصفير (زرّ بوصلة صغير
     يظهر فقط عند دوران فعلي، كخرائط جوجل) خارج نطاق هذا الإصلاح — تُضاف
     إن طُلبت صراحةً لاحقاً. */
  .rotation-bar {
    display: none;
  }

  /* ⚠️ **مبسَّطة بعد إخفاء .rotation-bar أعلاه** — لم يعُد الحيّز الآمن
     يحتاج تصفية شريط تدوير غير موجود؛ يكفي الآن تصفية أعلى نقطة يحتلّها
     أعلى عنصر في عمود الزوايا السفلى (زرّ «موقعي» — أعلى من «حول» بمقدار
     ارتفاع أيقونة كاملة). يستفيد .layer-rail بمساحة إضافية محسوسة (كانت
     محجوزة سابقاً لشريط التدوير المُخفى الآن). */
  .layer-rail {
    top: calc(var(--fc-gap) + var(--fc-icon-size) + 10px + 46px + var(--fc-gap));
    bottom: calc((2 * var(--fc-gap)) + (2 * var(--fc-icon-size)) + 10px);
    transform: none;
    justify-content: center;
  }
}

/* ⚠️ **شاشات موبايل قصيرة أيضاً (لا عريضة فقط) — طرازات أقدم/أصغر
   (٥٦٨-٦٦٧px ارتفاعاً، كآيفون SE الجيل الأول)**: ٦ أيقونات .layer-rail
   بحجمها/فجواتها المعتادة (٣٠٢px ارتفاعاً إجمالاً) لا تعود تتّسع بارتياح
   داخل الحيّز الآمن بين صفّي البحث والتدوير على هذه الشاشات القصيرة (أضيق
   من ٢٧٤px هناك) — فتفيض فوق حدوده وتعاود التراكب رغم تضييق الحيّز
   بمقياسه أعلاه. الحلّ: تصغير الأيقونات والفجوة بينها إضافياً هنا فقط، لا
   لأجل العرض (٦٤٠px) بل لأجل الارتفاع أيضاً — راجع محادثة الجلسة
   ٢٠٢٦-٠٩-١٦ للقياس الفعليّ الذي كشف هذا (تراكب متبقٍّ عند ٣٢٠×٥٦٨ رغم
   إصلاح شاشات ٣٧٥×٨١٢ الأطول). */
@media (max-width: 1100px) and (max-height: 700px) {
  :root {
    --fc-icon-size: 38px;
  }

  .layer-rail {
    gap: 6px;
  }
}