/* ============================================================
   🌈 CUSTOM SIDEBAR THEME - Light & Dark Mode Compatible
   ============================================================ */

/* 🧩 Sidebar Base Styling */
.app-sidebar {
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: var(--bs-app-sidebar-light-bg-color);
}

[data-bs-theme="dark"] .app-sidebar {
  background-color: var(--bs-app-sidebar-dark-bg-color);
}

/* ============================================================
   🌞 LIGHT MODE
   ============================================================ */
[data-bs-theme="light"] {
  /* Warna dasar sidebar */
  --bs-app-sidebar-light-bg-color: var(--bs-info);

  /* Warna teks dan ikon agar kontras di atas background info */
  --bs-app-sidebar-light-menu-heading-color: #ffffff;
  --bs-app-sidebar-light-menu-link-color: #ffffff;
  --bs-app-sidebar-light-menu-link-icon-color: #ffffff;

  /* Warna saat aktif dan hover */
  --bs-app-sidebar-light-menu-link-bg-color-hover: rgba(255, 255, 255, 0.15);
  --bs-app-sidebar-light-menu-link-bg-color-active: rgba(255, 255, 255, 0.25);

  /* Warna pemisah dan scroll */
  --bs-app-sidebar-light-separator-color: rgba(255, 255, 255, 0.2);
  --bs-app-sidebar-light-scrollbar-color-hover: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   🧭 Sidebar Menu Behavior (Hover, Active, Heading)
   ============================================================ */
.app-sidebar .menu .menu-heading {
  color: var(--bs-app-sidebar-light-menu-heading-color);
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-heading {
  color: var(--bs-app-sidebar-dark-menu-heading-color);
}

/* Link warna dasar */
.app-sidebar .menu .menu-link {
  color: var(--bs-app-sidebar-light-menu-link-color);
  transition: all 0.2s ease-in-out;
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-link {
  color: var(--bs-app-sidebar-dark-menu-link-color);
}

/* Ikon link */
.app-sidebar .menu .menu-link .menu-icon {
  color: var(--bs-app-sidebar-light-menu-link-icon-color);
  transition: color 0.2s ease-in-out;
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-link .menu-icon {
  color: var(--bs-app-sidebar-dark-menu-link-icon-color);
}

/* Hover efek */
.app-sidebar .menu .menu-link:hover {
  background-color: var(--bs-app-sidebar-light-menu-link-bg-color-hover);
  color: #fff;
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-link:hover {
  background-color: var(--bs-app-sidebar-dark-menu-link-bg-color-hover);
  color: #fff;
}

/* Active state */
.app-sidebar .menu .menu-link.active {
  background-color: var(--bs-app-sidebar-light-menu-link-bg-color-active);
  color: #fff;
  font-weight: 600;
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-link.active {
  background-color: var(--bs-app-sidebar-dark-menu-link-bg-color-active);
  color: #fff;
  font-weight: 600;
}

/* Scrollbar sidebar */
.app-sidebar .scroll-y::-webkit-scrollbar-thumb {
  background-color: var(--bs-app-sidebar-light-scrollbar-color-hover);
  border-radius: 10px;
}

[data-bs-theme="dark"] .app-sidebar .scroll-y::-webkit-scrollbar-thumb {
  background-color: var(--bs-app-sidebar-dark-scrollbar-color-hover);
}

/* Separator warna */
.app-sidebar .menu .menu-item > .menu-content {
  border-bottom: 1px solid var(--bs-app-sidebar-light-separator-color);
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-item > .menu-content {
  border-bottom: 1px solid var(--bs-app-sidebar-dark-separator-color);
}

/* Smooth transition untuk perubahan tema */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
  transition: background-color 0.4s ease, color 0.3s ease;
}