/* Soft Pills Common Styles */
.custom-pills .nav-link,
.custom-pills > li > a {
  border-radius: 10px;
  color: var(--app-text-muted);
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 8px 15px;
  margin-inline-start: 5px;
  display: block; /* Ensure it behaves like a block for padding */
  text-decoration: none; /* Remove underline */
}

/* Hover State */
.custom-pills .nav-link:hover,
.custom-pills > li > a:hover {
  background-color: var(--app-surface-3);
  color: var(--app-text);
}

/* Active State */
.custom-pills .nav-link.active,
.custom-pills > li.active > a {
  background-color: var(--app-brand);
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(var(--app-brand-rgb), 0.4);
}