.navbar {
  background-color: var(--phs-color-navbar-bg);
  height: var(--navbar-height);
}

/* Container inside navbar - constrain max width and use flexbox for alignment */
.navbar > .container-fluid {
  padding-left: var(--phs-dashboard-padding);
  padding-right: var(--phs-dashboard-padding);
}

/* space between the icon and the text in the navbar */
.navbar svg {
  margin-right: 0.85rem !important;
}

.navbar.scrolled {
  height: var(--navbar-height-scrolled);
}

/* Prevent transparent background when resizing the window */
.navbar-nav {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* behaviur when resizing the window to mobile size (max-width: 998px) */
@media (max-width: 991px) {
  .navbar {
    height: var(--navbar-height-mobile);
  }
  .navbar.scrolled {
    height: var(--navbar-height-mobile-scrolled);
  }

  .navbar-collapse {
    overflow-y: auto !important;
    flex-direction: column;
    align-items: center;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-collapse::-webkit-scrollbar {
    width: 6px;
  }

  .navbar-collapse .nav-underline > .nav-item {
    min-height: auto !important;
    display: flex;
    justify-content: center;
    padding: 1rem 1rem !important;
  }
}

/* 1. The Main Dropdown Container */
.navbar .dropdown-menu {
  border-radius: 4px;
  min-width: 15rem;
  padding: 0.5rem 0; /* Reduced padding: standard for menus */
  right: 0 !important;
  left: auto !important;
}

/* 2. Reset List Items */
.navbar .dropdown-menu > li {
    padding: 1rem 1rem !important; /* Increases vertical thickness */
    min-height: auto !important; /* REMOVED the 3rem trap */
    align-items: center;
}

/* 3. Targeted Divider Fix */
/* This targets the <li> that wraps your hr */
.navbar .dropdown-menu > li:has(div) {
  padding: 1.5rem 1rem !important;
  border-bottom: 4px solid #444;
}

/* 4. Internal Layout (Icon + Text in a row) */
.navbar .dropdown-menu > li > div {
    display: flex;
    flex-direction: column; /* Keeps Label above the content */
    /* padding: 0.75rem 1.5rem; */
    align-items: center;
}

/* 5. Label Styling */
.navbar .dropdown-menu > li > div > span {
    font-size: 0.7rem;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}