:root{
  /* Gradient ดำแบบมีมิติ */
  --cui-sidebar-1:#0a0a0a;
  --cui-sidebar-2:#111111;

  /* เผื่อบางจุดอ้างตัวแปรชุด 3/4 */
  --cui-sidebar-3:#0a0a0a;
  --cui-sidebar-4:#111111;

  /* สีตัวอักษร / icon */
  --cui-sidebar-color: #e5e7eb;        /* เทาขาว อ่านสบายตา */
  --cui-sidebar-hover-color: #ffffff;

  /* สีพื้นตอน hover / active */
  --cui-sidebar-hover-bg: #1a1a1a;
  --cui-sidebar-active-bg: #222222;
}

#sidebar.bg-dark-gradient{
  background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%) !important;
}

/* เมนู */
#sidebar .nav-link{
  color: var(--cui-sidebar-color) !important;
  transition: all .15s ease;
}

/* hover */
#sidebar .nav-link:hover{
  background: var(--cui-sidebar-hover-bg) !important;
  color: var(--cui-sidebar-hover-color) !important;
}

/* active (เมนูที่เลือกอยู่) */
#sidebar .nav-link.active{
  background: var(--cui-sidebar-active-bg) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #3b82f6; /* เส้นฟ้าเล็ก ๆ ดูพรีเมียม */
}

/* icon */
#sidebar .nav-icon{
  color: #9ca3af !important;
}
#sidebar .nav-link:hover .nav-icon,
#sidebar .nav-link.active .nav-icon{
  color: #ffffff !important;
}