/* =============================================================================
   شكل الرابط النشيط في القائمة الجانبية — لمسة Premium مثل شاشات المعلم
   -----------------------------------------------------------------------------
   يستبدل تعبئة Vuexy البرتقالية الصلبة الافتراضية بخلفية بلون العلامة خفيفة،
   نصّ/أيقونة بلون العلامة، وشريط جانبي مميّز على حافة البداية (يمين في RTL).
   ملف مستقل خاص بتخطيط front-cv.portfolio — لا يمسّ لوحة التحكم.
   ============================================================================= */
:root {
  --cvnav-brand:       #D46E2A;
  --cvnav-brand-hover: #B85B21;
  --cvnav-brand-light: #E8A05F;
  --cvnav-brand-soft:  rgba(212, 110, 42, .12);
}

/* الرابط النشيط */
#layout-menu .menu-inner > .menu-item.active > .menu-link {
  position: relative;
  background: var(--cvnav-brand-soft) !important;
  color: var(--cvnav-brand-hover) !important;
  box-shadow: none !important;
}
#layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon,
#layout-menu .menu-inner > .menu-item.active > .menu-link .fw-bolder {
  color: var(--cvnav-brand-hover) !important;
}

/* شريط جانبي مميّز — ::after حتى لا يصطدم بنقطة القوائم الفرعية (::before) */
#layout-menu .menu-inner > .menu-item.active > .menu-link::after {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cvnav-brand-light), var(--cvnav-brand));
}

/* تحويم الروابط غير النشِطة — تلميح بلون العلامة */
#layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  color: var(--cvnav-brand-hover) !important;
}
#layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {
  color: var(--cvnav-brand) !important;
}

/* الوضع الداكن — لون أفتح ليقرأ فوق الخلفية الداكنة */
html.dark-style #layout-menu .menu-inner > .menu-item.active > .menu-link {
  background: rgba(212, 110, 42, .16) !important;
  color: var(--cvnav-brand-light) !important;
}
html.dark-style #layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon,
html.dark-style #layout-menu .menu-inner > .menu-item.active > .menu-link .fw-bolder {
  color: var(--cvnav-brand-light) !important;
}