/**
 * gleason.css
 * -----------------------------------------------------------------------------
 * الأنماط الأساسية لتطبيق خريطة غليسون.
 * - الخريطة تأخذ الشاشة كاملة (100vh).
 * - أنماط أدوات التحكم العائمة (بحث/طبقات/تدوير/روابط) في float-controls.css.
 * -----------------------------------------------------------------------------
 */

html,
body {
  height: 100%;
  margin: 0;
  background: #e5e7eb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans Arabic", Tahoma, sans-serif;
}

/* ─── حاوية الخريطة (Full Screen) ──────────────────────────────────── */
#map {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ⚠️ اتجاه LTR صريح — خلل حقيقي اكتُشف بالاستخدام الفعلي ٢٠٢٦-٠٩-١٥: بلا
   هذا، توارَث dir="rtl" من <html> (الواجهة عربية افتراضياً) إلى داخل عنصر
   الخريطة، فانحرفت حسابات موضع الـ Overlay الداخلية في OpenLayers (تفترض
   LTR داخلياً بصرف النظر عن لغة الصفحة) — النقطة الزرقاء (ونافذة تحديد
   المعالم في feature-select.js) كانت تظهر بموضع خاطئ خارج الشاشة تماماً في
   الوضع العربي فقط، وتعمل بشكل طبيعي في الإنجليزي. عزل .ol-viewport عن
   اتجاه الصفحة كاملاً يُصلحه — لا علاقة له بأدواتنا العائمة (خارج
   .ol-viewport، تستخدم left/right فعليّين لا منطقيّين، فغير متأثّرة أصلاً). */
#map .ol-viewport {
  position: relative !important;
  direction: ltr !important;
}

/* ─── تحسينات على الـ Canvas ───────────────────────────────────────── */
.ol-layer canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.ol-viewport {
  font-family: "Segoe UI", Tahoma, "Arial", sans-serif;
}

/* ─── إخفاء أدوات OpenLayers الافتراضية إذا لزم ───────────────────── */
.ol-attribution {
  font-size: 11px;
}

/* ─── حاويات Overlay فوق كل الطبقات دائماً ──────────────────────────
   ⚠️ خلل حقيقي اكتُشف بالاستخدام الفعلي ٢٠٢٦-٠٩-١٥: طبقة التسميات
   الديناميكية تحمل zIndex:3000 (أعلى بكثير من أي طبقة أخرى، عمداً — راجع
   gleason.js). حاويات OpenLayers للـ Overlays (النقطة الزرقاء، ونافذة
   تحديد المعالم في feature-select.js) بلا z-index مُصرَّح به من طرفنا،
   فتُصنَّف افتراضياً تحت أي طبقة برقم موجب — أي تُخفى خلف تلك الطبقة
   بالذات.
   ⚠️ **!important هنا مقصود، لا كسل** — بعد إعادة ترتيب <link> (ol.css
   أولاً) **و**رفع التخصيص (بادئة #map، ID+كلاس)، بقيت قاعدة ol.css الداخلية
   غالبة فعلياً (تحقّق مباشر بـ getComputedStyle، جلسة ٢٠٢٦-٠٩-١٥) — أي أن
   OpenLayers تستخدم على الأرجح !important أو انتقائياً أعلى تخصيصاً مما
   نراه من مصدرها المبنيّ (لا وصول لمصدرها الأصلي من هنا للتأكّد الحاسم).
   !important يُحسم الأمر بصرف النظر عن الآلية الداخلية الدقيقة — وهو
   الاستخدام المشروع الوحيد المتعارف عليه لـ!important: تجاوز تعريفات
   افتراضية لمكتبة طرف ثالث لا نتحكّم بمصدرها، لا حرب تخصيص داخل كودنا. */
#map .ol-overlaycontainer,
#map .ol-overlaycontainer-stopevent {
  z-index: 3500 !important;
}

/* ─── نقطة موقع المستخدم (Overlay حقيقي على الخريطة، لا واجهة ثابتة) ──
   راجع core/geolocation.js — تتحدَّث لحظياً مع كل تحديد GPS جديد. ألوان
   العلامة الزرقاء نفسها (--fc-accent) من float-controls.css للاتّساق،
   لكن التصريح هنا مباشرةً (لا رابط بين الملفين) لأن هذا الملف لا يفترض
   تحميل float-controls.css قبله بالضرورة. */
.user-location-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.user-location-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.25);
  animation: user-location-pulse 2.2s ease-out infinite;
}

@keyframes user-location-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ─── نصّ SEO/الوصولية ────────────────────────────────────────────────────
   نُقلت من كتلة <style> مضمَّنة في index.html (٢٠٢٦-٠٩-٢٧) كي لا تحتاج
   سياسة CSP إلى style-src 'unsafe-inline' — لا أثر على مظهر الخريطة. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript-seo {
  max-width: 42rem;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  color: #e6edf7;
  line-height: 1.8;
  font-family: system-ui, "Segoe UI", Tahoma, sans-serif;
}

.noscript-seo a {
  color: #7cc4ff;
}