:root {
  --bs-primary: #309144;
  --bs-primary-rgb: 48, 145, 68;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.btn-primary {
  background-color: #309144;
  border-color: #309144;
}

.btn-primary:hover {
  background-color: #297c3b; /* versi lebih gelap */
  border-color: #297c3b;
}

.dropdown-notifications-list {
  max-height: 320px;
  overflow-y: auto;
}

.dropdown-notifications-item a {
  align-items: flex-start;
}

.notification-title {
  margin-bottom: 0.25rem;
}

.notification-message {
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-badge {
  align-self: flex-start;
  height: auto;
  padding: 0.25rem 0.5rem;
}

.dropdown-notifications .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-notifications .badge-notifications {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(45%, -45%);
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  border: 2px solid #fff;
}

/* Dark mode specific titles */
.theme-dark .section-title-app,
.theme-dark .section-title-spp {
  color: #ffffff !important;
}

.theme-dark .home-app-card .home-app-name,
.theme-dark .home-app-add,
.theme-dark .spp-recent-number {
  color: #ffffff !important;
}

.theme-dark .home-app-card .text-dark,
.theme-dark .home-app-add,
.theme-dark .spp-recent-list .text-dark {
  color: #ffffff !important;
}

.theme-dark .dsp-app-name {
  color: #ffffff !important;
}

.dsp-app-name {
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Sidebar active + hover */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.active > .menu-link div {
  color: #ffffff !important;
}

.menu-vertical .menu-item.active > .menu-link {
  background-color: #309144 !important;
}

.menu-vertical .menu-item:not(.active):hover > .menu-link,
.menu-vertical .menu-item:not(.active):focus-within > .menu-link {
  background-color: #deede1 !important;
  color: #384551 !important;
}

.menu-vertical .menu-item:not(.active):hover > .menu-link .menu-icon,
.menu-vertical .menu-item:not(.active):focus-within > .menu-link .menu-icon {
  color: #384551 !important;
}