/* =====================================================================
   أيقونات الشريط العلوي (الخدمات + الإشعارات + مبدّل الثيم) — فاتح/داكن
   ---------------------------------------------------------------------
   ▸ تصميم بسيط بلا مربّعات: أيقونة عارية، والدور هنا لون وحجم موحّدان.
   ▸ الفاتح: أسود واضح — الداكن: فاتح مقروء. الثلاثة بلون واحد دائماً.
   ▸ مبدّل الثيم يُلتقط بمُحدِّده الجاهز (.dropdown-style-switcher /
     .style-switcher-toggle) لأنه متكرّر في ١٠ قوائم فلا يُعدَّل ترميزها.
   ▸ يُحمَّل مرة واحدة عبر @once('navico-css') من
     partials/services-menu.blade.php أو partials/notification-bell.blade.php.
   ▸ التكرار مع .navbar-nav مقصود: يرفع الأولوية فوق `.navbar-nav .nav-link`
     في core.css بلا !important.
   ===================================================================== */

/* ---- الوضع الفاتح: أسود ----
   ⚠️ اللون يُكتب على عنصر الأيقونة <i> نفسه لا على الرابط فقط: اللون الموروث
   يخسر أمام أي قاعدة تصيب الأيقونة مباشرةً مهما كانت خصوصيتها، وقواعد القالب
   تُلوّن أيقونات الجرس والقوائم مباشرةً — فبإعلانه على الرابط وحده يبقى
   الجرس والخدمات رماديَّين بينما يسودّ مبدّل الثيم (لا قاعدة مباشرة عليه). */
.navbar-nav .nav-ico-btn.nav-link,
.navbar-nav .nav-ico-btn.nav-link .ti,
.navbar-nav .dropdown-style-switcher > .nav-link,
.navbar-nav .dropdown-style-switcher > .nav-link .ti,
.navbar-nav .nav-link.style-switcher-toggle,
.navbar-nav .nav-link.style-switcher-toggle .ti {
  color: #000;
  transition: color var(--pt-dur, 220ms) var(--pt-ease, cubic-bezier(.4, 0, .2, 1));
}

/* حجم موحّد للأيقونات الثلاث (يتغلّب على .ti-sm و .ti-md) */
.navbar-nav .nav-ico-btn.nav-link .ti,
.navbar-nav .dropdown-style-switcher > .nav-link .ti,
.navbar-nav .nav-link.style-switcher-toggle .ti {
  font-size: 1.375rem;
  line-height: 1;
}

/* تمرير / تركيز / قائمة مفتوحة — لمسة هوية موحّدة.
   الأيقونة مكرّرة في كل حالة للسبب نفسه: صار لها لون مباشر أعلاه فلن يصلها
   لون الرابط بالوراثة. */
.navbar-nav .nav-ico-btn.nav-link:hover,
.navbar-nav .nav-ico-btn.nav-link:hover .ti,
.navbar-nav .nav-ico-btn.nav-link:focus-visible,
.navbar-nav .nav-ico-btn.nav-link:focus-visible .ti,
.navbar-nav .nav-ico-btn.nav-link.show,
.navbar-nav .nav-ico-btn.nav-link.show .ti,
.navbar-nav .nav-item.show > .nav-ico-btn.nav-link,
.navbar-nav .nav-item.show > .nav-ico-btn.nav-link .ti,
.navbar-nav .dropdown-style-switcher > .nav-link:hover,
.navbar-nav .dropdown-style-switcher > .nav-link:hover .ti,
.navbar-nav .dropdown-style-switcher.show > .nav-link,
.navbar-nav .dropdown-style-switcher.show > .nav-link .ti,
.navbar-nav .nav-link.style-switcher-toggle:hover,
.navbar-nav .nav-link.style-switcher-toggle:hover .ti {
  color: var(--brand, #D46E2A);
}

/* ---- الوضع الداكن: فاتح ---- */
html.dark-style .navbar-nav .nav-ico-btn.nav-link,
html.dark-style .navbar-nav .nav-ico-btn.nav-link .ti,
html.dark-style .navbar-nav .dropdown-style-switcher > .nav-link,
html.dark-style .navbar-nav .dropdown-style-switcher > .nav-link .ti,
html.dark-style .navbar-nav .nav-link.style-switcher-toggle,
html.dark-style .navbar-nav .nav-link.style-switcher-toggle .ti {
  color: #E6E8EC;
}

/* برتقالي أفتح على الداكن ليحقق تبايناً كافياً */
html.dark-style .navbar-nav .nav-ico-btn.nav-link:hover,
html.dark-style .navbar-nav .nav-ico-btn.nav-link:hover .ti,
html.dark-style .navbar-nav .nav-ico-btn.nav-link:focus-visible,
html.dark-style .navbar-nav .nav-ico-btn.nav-link:focus-visible .ti,
html.dark-style .navbar-nav .nav-ico-btn.nav-link.show,
html.dark-style .navbar-nav .nav-ico-btn.nav-link.show .ti,
html.dark-style .navbar-nav .nav-item.show > .nav-ico-btn.nav-link,
html.dark-style .navbar-nav .nav-item.show > .nav-ico-btn.nav-link .ti,
html.dark-style .navbar-nav .dropdown-style-switcher > .nav-link:hover,
html.dark-style .navbar-nav .dropdown-style-switcher > .nav-link:hover .ti,
html.dark-style .navbar-nav .dropdown-style-switcher.show > .nav-link,
html.dark-style .navbar-nav .dropdown-style-switcher.show > .nav-link .ti,
html.dark-style .navbar-nav .nav-link.style-switcher-toggle:hover,
html.dark-style .navbar-nav .nav-link.style-switcher-toggle:hover .ti {
  color: #F0A874;
}

/* شارة العدّاد فوق الجرس — حلقة بلون سطح الشريط لتفصلها عن الأيقونة */
.nav-ico-btn .nh-badge,
.nav-ico-btn .notif-badge {
  box-shadow: 0 0 0 2px #fff;
  border: 0;
}
html.dark-style .nav-ico-btn .nh-badge,
html.dark-style .nav-ico-btn .notif-badge {
  box-shadow: 0 0 0 2px #1C1F26;
}

/* =====================================================================
   تباعد أيقونات الأدوات على الجوال — كل شرائط الخدمات (#layout-navbar)
   ---------------------------------------------------------------------
   ▸ الهوامش في الترميز غير متجانسة (الجرس me-3، المبدّل me-xl-0، الأفتار
     بلا هامش) فتبدو الأيقونات متفاوتة التباعد على الشاشة الضيقة. نوحّدها:
     الهامش صفر والتباعد من حشوة الرابط وحدها ⇒ فواصل متساوية ~18px.
   ▸ صفّ واحد بلا التفاف: اسم الخدمة/الشعار يمتصّ الضيق لا شريط الأدوات.
   ▸ شريط الرئيسية (.landing-navbar) له قواعده في premium-theme.css لأنه
     ترميز مختلف (لا يحمل id).
   ===================================================================== */
@media (max-width: 991.98px) {
  #layout-navbar.navbar { flex-wrap: nowrap; }
  #layout-navbar .app-brand-link { min-width: 0; overflow: hidden; }
  #layout-navbar .navbar-nav.flex-row { flex: 0 0 auto; }
  #layout-navbar .navbar-nav.flex-row > li { margin-inline: 0 !important; }
  #layout-navbar .navbar-nav.flex-row > li > .nav-link { padding-inline: .55rem; }
}

/* --------------------------- تقليل الحركة ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-ico-btn.nav-link,
  .navbar-nav .dropdown-style-switcher > .nav-link,
  .navbar-nav .nav-link.style-switcher-toggle { transition: none; }
}