/* Shared tab-bar component
 *
 * Visual treatment used by the alerts inbox and the records list.
 * Targets `.tab-bar` / `.tab-bar__tab` / `.tab-bar__count`. Designed to
 * be element-agnostic — the tab itself can be a <button> or <a>; the
 * count pill is a child <span>.
 *
 * Anchor neutralisation: `static/css/base.css` ships a global rule that
 * matches `a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link)`
 * and zeroes the horizontal padding, repaints the text green, and adds
 * an underline on hover. Any anchor styled as `.tab-bar__tab` would
 * inherit those defaults, so the rules below repeat the same `:not()`
 * chain to match its specificity (0,4,1) and win without `!important`.
 *
 * If `.btn-rec` on the records page hit the same trap, the equivalent
 * fix lives in `records_stream.css`. The two are independent — keep
 * them in sync if either selector list is ever extended.
 */

.tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e0e3e5;
}

.tab-bar__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  /* Pull the underline down so it sits on top of the container's
   * 1px hairline rather than 1px above it. */
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.tab-bar__tab:hover:not(.active) { color: var(--ui-dark); }
.tab-bar__tab.active {
  color: var(--brand-primary);
  font-weight: 600;
  border-bottom-color: var(--brand-primary);
}
.tab-bar__tab i { color: inherit; font-size: 14px; }

/* Anchor variants — match base.css's not-chain to keep our padding /
 * colour / text-decoration rules from being overridden. */
a.tab-bar__tab:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  padding: 10px 14px;
  color: #666;
  text-decoration: none;
}
a.tab-bar__tab:hover:not(.active):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
a.tab-bar__tab:focus:not(.active):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  color: var(--ui-dark);
  text-decoration: none;
}
a.tab-bar__tab.active:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
a.tab-bar__tab.active:hover:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
a.tab-bar__tab.active:focus:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  color: var(--brand-primary);
  text-decoration: none;
}

/* Count pill — neutral by default, brand-filled when its tab is active. */
.tab-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #e7eaec;
  color: #666;
  font-size: 11px;
  font-weight: 600;
}
.tab-bar__tab.active .tab-bar__count {
  background: var(--brand-primary);
  color: #fff;
}