/* ==========================================================================
   Nav Badge - Pill-shaped count indicator
   ========================================================================== */

.nav-badge {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Sizing */
  height: 22px;
  min-width: 22px; /* Circle when small */
  padding-inline: var(--space-1);
  box-sizing: border-box;

  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: 1;

  /* Appearance */
  border: 1px solid var(--np-color-on-surface-variant);
  border-radius: 9999px; /* Pill shape - always semicircular ends */
  color: var(--np-color-on-surface-variant);
  background: transparent;

  /* Flex behavior */
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* Desktop nav-list items: badge at row end with right padding */
.nav-list .nav-item .nav-badge {
  margin-inline-end: var(--space-3);
}

/* Desktop nav-item--lg: badge before action button */
.nav-item--lg__content .nav-badge {
  margin-inline-end: var(--space-2);
}

/* Centered nav items (Admin/My Recs): no auto-margin, no end margin */
.nav-item--lg__content--centered .nav-badge {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* Active state - adjust colors for visibility on tertiary background */
.nav-item.active .nav-badge,
.nav-item--lg__content.active .nav-badge {
  border-color: var(--np-color-on-tertiary);
  color: var(--np-color-on-tertiary);
}

/* Mobile bottom bar badge */
.mobile-nav__page-info .nav-badge {
  margin-inline-end: 0;
}

/* Mobile menu items: badge at row end */
.mobile-menu-item .nav-badge {
  margin-inline-end: 0;
}

/* ==========================================================================
   Label truncation support
   ========================================================================== */

/* Ensure nav-item labels can truncate */
.nav-list .nav-item {
  min-width: 0; /* Allow flex item to shrink below content size */
}

/* Label text truncation */
.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Large nav item label truncation */
.nav-item--lg__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile page info title truncation */
.mobile-nav__section-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile menu item text truncation */
.mobile-menu-item__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}