/* Tabs — project-wide SSoT. See docs/UI_ARCHITECTURE.md. */
:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) {
  align-items: stretch;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ne-border, #dee2e6) !important;
  border-radius: 0 !important;
  display: flex;
  flex-wrap: nowrap !important;
  gap: .2rem;
  margin: 0;
  overflow-x: auto;
  padding: 0 !important;
  scrollbar-width: thin;
}

:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > :is(.nav-item, .nav-link) {
  display: flex;
  flex: 0 0 auto;
  margin: 0 !important;
  min-width: max-content;
}

:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-item > .nav-link,
:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-link {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: .45rem .45rem 0 0 !important;
  color: var(--ne-ink-muted, #60646c) !important;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  gap: .35rem;
  justify-content: flex-start;
  line-height: 1.2;
  min-height: 2rem;
  padding: .48rem .65rem .42rem !important;
  text-align: left;
  white-space: nowrap;
}

:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-item > .nav-link:hover,
:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-link:hover {
  background: var(--ne-surface-2, #f6f7fb) !important;
  color: var(--ne-brand-hover, #2946b6) !important;
}

:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-item > .nav-link.active,
:is(.ui-tabs, .nav-tabs, .nav-pills:has([data-bs-toggle="tab"]), [role="tablist"]:has([data-bs-toggle="tab"])) > .nav-link.active {
  background: var(--ne-brand-soft, rgba(52, 84, 209, .1)) !important;
  border-bottom-color: var(--ne-brand, #3454d1) !important;
  box-shadow: none !important;
  color: var(--ne-brand-hover, #2946b6) !important;
}

.ui-tab-content,
.ui-tabs + .tab-content { padding-top: .55rem; }