/* ═══════════════════════════════════════════════════════════════════════════
   NavTabs — навігаційні таби (перемикання між сторінками/маршрутами)
   НЕ WAI-ARIA Tabs: це звичайна навігація.
     Розмітка:  <nav aria-label> > <ul> > <li> > <a href>  (без role tab/tablist,
                без tabpanel, без roving tabindex, без стрілкової активації).
     Активний:  aria-current="page"  (НЕ aria-selected).
     Клавіатура: природна — Tab переходить між посиланнями, Enter активує.
   Візуально успадковує мову Tabs (#21):
     Варіанти: підкреслений (default) · пілюлі (nav-tabs--pill [+ nav-tabs--sm]).
     Стани:    default · hover · focus-visible · active (aria-current) · disabled.
   Опційно: іконка зліва (.nav-tab__icon) і лічильник (Badge у .nav-tab).
   Токени: перевикористано component.tabs.{indicator-height, pill-height,
           pill-height-sm} — спільна геометрія з Tabs (нових токенів нема).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Контейнер ──────────────────────────────────────────────────────────── */
.nav-tabs {
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Список (ul) ────────────────────────────────────────────────────────── */
.nav-tabs__list {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--uris-color-semantic-border);
  overflow-x: auto;
  /* hidden, не дефолтне auto (overflow-x:auto без явного overflow-y робить
     і вертикаль скрольною): індикатор-підкреслення таба (::after,
     inset-block-end:-1px) додає 1px вертикального переповнення — список
     «стрибав» на цей піксель угору-вниз при наведенні (запит користувача
     2026-07-23). Вертикально тут скролити нема чого — ховаємо. */
  overflow-y: hidden;
  scrollbar-width: none;
}
.nav-tabs__list::-webkit-scrollbar { display: none; }

/* ── Пункт (li) ─────────────────────────────────────────────────────────── */
.nav-tabs__item {
  display: flex;
}

/* ── Посилання-таб (базове) ─────────────────────────────────────────────── */
.nav-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  padding-block: var(--uris-spacing-3);
  padding-inline: var(--uris-spacing-4);
  font-family: inherit;
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--uris-duration-fast) var(--uris-ease-default),
    font-weight var(--uris-duration-fast) var(--uris-ease-default);
}

/* Іконка зліва (inline-SVG currentColor). 1.25em — масштабується з font-size,
   тому окремого правила для sm не потрібно. */
.nav-tab__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}
.nav-tab__icon svg {
  width: 1.25em;
  height: 1.25em;
}

/* Мітка з ghost anti-shift (як у .tab Tabs, але локалізовано на мітці —
   щоб резерв ширини bold-тексту не залежав від іконки/лічильника).
   data-text = видимий текст; ghost ::after резервує ширину bold-версії →
   нульовий layout-shift при hover/active, навіть з іконкою чи бейджем. */
.nav-tab__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.nav-tab__label::after {
  content: attr(data-text);
  font-weight: var(--uris-font-weight-bold);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Підкреслений індикатор (перекриває border списку на 1px) */
.nav-tab::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: var(--uris-component-tabs-indicator-height);
  background: transparent;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── Стан: hover (не активний, не disabled) ─────────────────────────────── */
.nav-tab:not([aria-disabled="true"]):not([aria-current="page"]):hover {
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-bold);
}
.nav-tab:not([aria-disabled="true"]):not([aria-current="page"]):hover::after {
  background: var(--uris-color-semantic-primary);
}

/* ── Стан: active (aria-current="page") ─────────────────────────────────── */
.nav-tab[aria-current="page"] {
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-bold);
  cursor: default;
}
.nav-tab[aria-current="page"]::after {
  background: var(--uris-color-semantic-primary);
}

/* ── Стан: focus-visible ────────────────────────────────────────────────── */
.nav-tab:focus { outline: none; }
.nav-tab:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
  border-radius: var(--uris-radius-sm);
}

/* ── Стан: disabled (aria-disabled="true") ──────────────────────────────────
   Радимо <span class="nav-tab" aria-disabled="true"> — природно поза таб-порядком.
   Для <a aria-disabled="true"> pointer-events:none гасить мишу; JS додає
   tabindex="-1" (CSS не прибирає з Tab-порядку). */
.nav-tab[aria-disabled="true"] {
  color: var(--uris-color-semantic-text-muted);
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Варіант: nav-tabs--pill (пілюля-чіпи) — як tabs--pill
   Активний: білий фон + 1px рамка primary; неактивний: surface-muted заливка
   ══════════════════════════════════════════════════════════════════════════ */

.nav-tabs--pill .nav-tabs__list {
  border-block-end: none;
  gap: var(--uris-spacing-2);
  flex-wrap: wrap;
  align-items: center;
}

.nav-tabs--pill .nav-tab {
  height: var(--uris-component-tabs-pill-height);
  padding-block: 0; /* висота керується через height */
  padding-inline: var(--uris-spacing-4);
  border-radius: var(--uris-radius-full);
  border: 1px solid transparent;
  background: var(--uris-color-semantic-surface-muted);
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-regular);
  transition:
    background-color var(--uris-duration-fast) var(--uris-ease-default),
    border-color var(--uris-duration-fast) var(--uris-ease-default),
    font-weight var(--uris-duration-fast) var(--uris-ease-default);
}

/* Без ghost і без підкресленого індикатора в пілюлях */
.nav-tabs--pill .nav-tab__label::after { content: none; }
.nav-tabs--pill .nav-tab::after { display: none; }

/* Pill: hover */
.nav-tabs--pill .nav-tab:not([aria-disabled="true"]):not([aria-current="page"]):hover {
  background: var(--uris-color-semantic-surface-hover);
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-regular);
}

/* Pill: active */
.nav-tabs--pill .nav-tab[aria-current="page"] {
  background: var(--uris-color-semantic-surface);
  border-color: var(--uris-color-semantic-primary);
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-medium);
}

/* Pill: focus-visible */
.nav-tabs--pill .nav-tab:focus-visible {
  outline-offset: 1px;
  border-radius: var(--uris-radius-full);
}

/* Pill: disabled */
.nav-tabs--pill .nav-tab[aria-disabled="true"] {
  background: var(--uris-color-semantic-surface-muted);
}

/* ── Розмір sm (тільки разом із nav-tabs--pill) ─────────────────────────── */
.nav-tabs--sm.nav-tabs--pill .nav-tab {
  height: var(--uris-component-tabs-pill-height-sm);
  padding-inline: var(--uris-spacing-3);
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-tab,
  .nav-tab::after {
    transition: none;
  }
}