/* Highlight ONLY the top-level active item */
.profile-sidebar .profile-menu > li.active > a {
    background-color: #333a4d;
    color: #fff;
    font-weight: 600;
    border-left: 6px solid #138f7d;
}

/* Ensure submenu links are NOT highlighted even when parent is active */
.profile-sidebar .profile-menu > li.active ul a {
    background-color: transparent !important;
    color: #333 !important;
    font-weight: 400 !important;
    border-left: none !important;
}

/* Submenu active item */
.profile-sidebar .profile-menu li ul li.active > a {
    background-color: #e5e5e5 !important; /* light teal highlight */    
    font-weight: 600 !important;
    border-left: 1px solid #138f7d !important;
    border-radius: 4px;
}

/* Optional: base styles for links and spacing */
.profile-sidebar .profile-menu a {
    display: block;
    padding: .5rem .75rem;
    text-decoration: none;
}
.profile-sidebar .profile-menu > li > ul { /* space between parent and submenu */
    margin-top: .5rem;
}
.profile-sidebar .profile-menu > li > ul a { /* indent submenu links */
    padding-left: 1.75rem;
}

/* ------------------------------
   Mobile Specific Tweaks
--------------------------------*/
@media (max-width: 767.98px) {
  /* Make submenu background lighter in mobile */
  .offcanvas .profile-menu > li > ul {
      background: #f8f9fa;
      padding: .25rem 0;
      border-radius: .25rem;
  }

  /* Submenu links in mobile more compact */
  .offcanvas .profile-menu > li > ul a {
      padding: .5rem 1rem;
  }

  /* Prevent ALL submenu items from looking active */
  .offcanvas .profile-menu > li.active > ul a {
      background: transparent !important;
      color: #333 !important;
  }

  /* Only highlight the correct submenu active item */
  .offcanvas .profile-menu li ul li.active > a {
      background-color: #dfe1e7 !important;
      color: #138f7d !important;
      font-weight: 600;
      border-left: 4px solid #138f7d;
  }
}

/* Custom tab styles */
.protocol-tabs .nav-pills .nav-link {
  border-radius: 30px;
  padding: 0.6rem 1.2rem;
  font-weight: 500;
  color: #333;
  background: #f1f3f5;
  transition: all 0.3s ease;
}

.protocol-tabs .nav-pills .nav-link:hover {
  background: #e0e4ea;
  color: #138f7d;
}

.protocol-tabs .nav-pills .nav-link.active {
  background: #138f7d;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  .protocol-tabs .nav-pills {
    flex-direction: column;
    align-items: stretch;
  }

  .protocol-tabs .nav-pills .nav-link {
    width: 100%;
    text-align: left;
    border-radius: 8px;
  }
}