/* =====================================================================
   PORTFOLIO SIDEBAR — القائمة الجانبية (السلايدر) لملف الإنجاز
   إعادة تنسيق بهوية cmp النحاسية #D46E2A فوق قائمة Vuexy، RTL.
   مقيّدة بـ #layout-menu.ph-menu فقط — لا تؤثر على أي قائمة أخرى.
   بلا تغيير منطق: الروابط والحالات كما هي.
   ===================================================================== */

#layout-menu.ph-menu {
  --phm-brand:      #D46E2A;
  --phm-brand-rgb:  212, 110, 42;
  --phm-brand-hover:#B85B21;
  --phm-brand-light:#E8A05F;
  --phm-soft:       rgba(212, 110, 42, .10);
  --phm-ink:        #2b3a4a;
  --phm-ink-2:      #6b7a89;
  --phm-ease:       cubic-bezier(.4, 0, .2, 1);

  /* الخلفية مُعلَنة صراحةً لا موروثة: ملفات ثيمات Vuexy تُلوّن .bg-menu-theme
     بـ!important، وهذه القائمة تملك حبرها الخاص — فبلا إعلان الخلفية هنا
     يقلبها الثيم وحدها ويصير النصّ داكناً على داكن. القلب المقصود مُعرَّف
     أسفل الملف تحت Semi Dark. */
  background: #fff !important;
  border-inline-start: 1px solid rgba(34, 48, 63, .06);
}

/* ---------- بطاقة صورة المستخدم ---------- */
#layout-menu.ph-menu .user-avatar-section {
  padding: .5rem 0 .75rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid rgba(34, 48, 63, .07);
}
#layout-menu.ph-menu .user-avatar-section img {
  height: 64px !important;
  width: 64px !important;
  object-fit: cover;
  border-radius: 50% !important;
  padding: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--phm-brand-rgb), .55),
              0 6px 16px rgba(var(--phm-brand-rgb), .22);
  transition: transform .22s var(--phm-ease), box-shadow .22s ease;
}
#layout-menu.ph-menu .user-avatar-section img:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 2px var(--phm-brand),
              0 10px 22px rgba(var(--phm-brand-rgb), .34);
}

/* ---------- عناوين/فواصل الأقسام ---------- */
#layout-menu.ph-menu .menu-header {
  color: var(--phm-ink-2) !important;
  letter-spacing: .3px;
}

/* ---------- روابط القائمة ---------- */
#layout-menu.ph-menu .menu-inner > .menu-item {
  margin: 2px .5rem;
}
#layout-menu.ph-menu .menu-link {
  position: relative;
  border-radius: 10px;
  color: var(--phm-ink);
  padding-block: .58rem;
  transition: background .2s var(--phm-ease), color .2s ease, transform .2s var(--phm-ease);
}
#layout-menu.ph-menu .menu-link .menu-icon {
  color: var(--phm-ink-2);
  transition: color .2s ease, transform .2s var(--phm-ease);
}

/* hover */
#layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover {
  background: rgba(var(--phm-brand-rgb), .07);
  color: var(--phm-brand-hover);
}
#layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover .menu-icon {
  color: var(--phm-brand);
  transform: translateX(-2px);
}

/* active */
#layout-menu.ph-menu .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg, rgba(var(--phm-brand-rgb), .16), rgba(var(--phm-brand-rgb), .05)) !important;
  color: var(--phm-brand-hover) !important;
  font-weight: 700;
}
#layout-menu.ph-menu .menu-item.active > .menu-link .menu-icon {
  color: var(--phm-brand) !important;
}
/* مؤشّر نحاسي على حافة العنصر النشط (RTL: يمين) */
#layout-menu.ph-menu .menu-item.active > .menu-link:not(.menu-toggle)::before {
  content: "";
  position: absolute;
  inset-inline-end: -.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--phm-brand), var(--phm-brand-light));
}

/* ---------- الشارات (العدّادات) ---------- */
#layout-menu.ph-menu .badge.bg-label-primary {
  background: var(--phm-soft) !important;
  color: var(--phm-brand-hover) !important;
  font-weight: 700;
}

/* ---------- القائمة الفرعية (مساعدة وشرح) ---------- */
#layout-menu.ph-menu .menu-sub .menu-link {
  padding-block: .45rem;
  font-size: 13.5px;
}
#layout-menu.ph-menu .menu-item.open > .menu-toggle,
#layout-menu.ph-menu .menu-sub .menu-item.active > .menu-link {
  color: var(--phm-brand-hover) !important;
}
/* لون سهم القائمة القابلة للطي */
#layout-menu.ph-menu .menu-toggle::after {
  transition: transform .2s var(--phm-ease);
}

/* ---------- الرابط المعطّل (ملف غير متاح) ---------- */
#layout-menu.ph-menu .menu-link.disabled,
#layout-menu.ph-menu .menu-link.disabled .menu-icon { color: var(--phm-ink-2) !important; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  #layout-menu.ph-menu * { transition: none !important; }
}

/* =====================================================================
   Semi Dark — رَيل داكن على صفحة فاتحة
   ---------------------------------------------------------------------
   القلب محصور بالقائمة لا بـ:root، لأن الثيم يُدكّن الشريط الجانبي وحده
   والصفحة تبقى فاتحة — والتوكنات ترث للأبناء فيكفي إعلانها على العنصر.
   سمة data-theme يكتبها front-config.js.

   --phm-brand و--phm-brand-rgb لا تُقلبان عمداً: الهوية النحاسية تُقرأ على
   الداكن (أيقونات وشريط العنصر النشط)، وتفتيحها يُضعف العنصر النشط.
   ===================================================================== */
html[data-theme="theme-semi-dark"] #layout-menu.ph-menu {
  --phm-ink:         rgba(255, 255, 255, .86);
  --phm-ink-2:       rgba(255, 255, 255, .55);
  --phm-brand-hover: var(--phm-brand-light);
  --phm-soft:        rgba(var(--phm-brand-rgb), .22);

  background: rgba(36, 39, 69, .92) !important;
  border-inline-start-color: rgba(255, 255, 255, .10);
}

/* تمرير محايد: تلوين الهوية بـ.07 يذوب على الداكن */
html[data-theme="theme-semi-dark"] #layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover {
  background: rgba(255, 255, 255, .06);
}

/* حدود بطاقة المستخدم وفواصل الأقسام كانت محسوبة على خلفية بيضاء */
html[data-theme="theme-semi-dark"] #layout-menu.ph-menu .user-avatar-section {
  border-bottom-color: rgba(255, 255, 255, .10);
}

/* =====================================================================
   الوضع الداكن الكامل (dark-style) — نفس منطق Semi Dark
   ---------------------------------------------------------------------
   ضروري لأن `background: #fff !important` أعلاه يمنع core-dark من تلوين
   القائمة، فتبقى بيضاء وسط صفحة داكنة. الخلفية هنا #2F3349 لتطابق
   .bg-menu-theme في ثيم Vuexy الداكن فتتّسق مع بقية هيكل الصفحة.
   ===================================================================== */
html.dark-style #layout-menu.ph-menu {
  --phm-ink:         rgba(255, 255, 255, .86);
  --phm-ink-2:       rgba(255, 255, 255, .55);
  --phm-brand-hover: var(--phm-brand-light);
  --phm-soft:        rgba(var(--phm-brand-rgb), .22);

  background: #2F3349 !important;
  border-inline-start-color: rgba(255, 255, 255, .10);
}

html.dark-style #layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover {
  background: rgba(255, 255, 255, .06);
}

html.dark-style #layout-menu.ph-menu .user-avatar-section {
  border-bottom-color: rgba(255, 255, 255, .10);
}

/* إطار صورة المستخدم كان أبيض ليندمج مع خلفية بيضاء */
html.dark-style #layout-menu.ph-menu .user-avatar-section img {
  background: #2F3349;
}