/* ============================================================
   V2 — Horizontal Tabs (Pattern 02)
   ============================================================
   Горизонтальні таби з нижньою accent-смугою на активному.
   Підтримують лічильники через .v2-badge-count, іконки через .v2-i.

   Структура:
     <nav class="v2-tabs" role="tablist">
       <button class="v2-tab is-active" type="button" role="tab">
         Картка
       </button>
       <button class="v2-tab" type="button" role="tab">
         Сімейні зв'язки
         <span class="v2-badge v2-badge-count">3</span>
       </button>
       ...
     </nav>

   Або як <a> для router-based реалізацій.
   ============================================================ */

/* box-sizing reset */
.v2-tabs,
.v2-tabs *,
.v2-tabs *::before,
.v2-tabs *::after {
    box-sizing: border-box;
}

/* === Container === */
.v2-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--s-7);
    border-bottom: 0;
    /* Дозволяємо горизонтальний скрол на вузьких екранах,
       тренди — нижня рамка не "гасне" завдяки sticky? Ні, простий overflow-x. */
    overflow-x: auto;
    overflow-y: hidden;
    /* Не показуємо scrollbar постійно, але дозволяємо скрол — Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
    /* Сумісність із Chrome — дрібний scrollbar тільки коли зʼявляється */
}
.v2-tabs::-webkit-scrollbar { height: 6px; }
.v2-tabs::-webkit-scrollbar-track { background: transparent; }
.v2-tabs::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--r-pill); }

/* === Tab === */
.v2-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) 0;
    margin-bottom: -1px; /* щоб accent-border перекривав родинну рамку */
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.v2-tab:hover:not(:disabled):not(.is-disabled) {
    color: var(--text-primary);
}

.v2-tab:focus { outline: none; }
.v2-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-xs);
}

.v2-tab.is-active {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.v2-tab:disabled,
.v2-tab.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Іконка зліва від тексту */
.v2-tab .v2-i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}
.v2-tab.is-active .v2-i {
    opacity: 1;
    color: var(--accent);
}

/* Лічильник усередині табу — м'якший за рядовий .v2-badge-count */
.v2-tab .v2-badge-count {
    background: var(--bg-muted);
    color: var(--text-tertiary);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
}
.v2-tab.is-active .v2-badge-count {
    background: var(--accent-bg-strong);
    color: var(--accent-text);
}
.v2-tab:hover:not(.is-active):not(:disabled) .v2-badge-count {
    color: var(--text-secondary);
}

/* Помилковий індикатор — крапка справа від тексту, для unsaved/error */
.v2-tab-marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
    display: inline-block;
    flex-shrink: 0;
}
.v2-tab-marker.is-danger { background: var(--danger); }
.v2-tab-marker.is-success { background: var(--success); }

/* === Density variants === */
[data-v2-density="compact"] .v2-tabs {
    gap: var(--s-6);
}
[data-v2-density="compact"] .v2-tab {
    padding: var(--s-3) 0;
    font-size: var(--text-sm);
}

[data-v2-density="spacious"] .v2-tabs {
    gap: var(--s-9);
}
[data-v2-density="spacious"] .v2-tab {
    padding: var(--s-5) 0;
    font-size: var(--text-base);
}

/* === Variant: sticky (приліплюється до верху скрол-контейнера) ===
   Використовується на довгих картках (Pattern 02), щоб таби лишалися видимими
   при прокрутці вниз. Якщо є sticky-топбар — встанови
   --v2-tabs-sticky-top на висоту топбара (default 0).

   Підказка: батьки sticky-елемента не мають мати overflow:hidden, інакше sticky
   "не приліпиться". Зазвичай sticky ставлять на корінь скрол-area.
*/
.v2-tabs-sticky {
    position: sticky;
    top: var(--v2-tabs-sticky-top, 0);
    z-index: 4; /* нижче за stickybar (5) */
    background: var(--bg-card);
    /* Маскуємо контент, що від'їжджає під табами — заливка по сторонах */
    margin-left: calc(-1 * var(--s-3));
    margin-right: calc(-1 * var(--s-3));
    padding-left: var(--s-3);
    padding-right: var(--s-3);
}

/* === Variant: pills (для inline-перемикачів, не основний шаблон) === */
.v2-tabs-pills {
    border-bottom: none;
    gap: var(--s-2);
}
.v2-tabs-pills .v2-tab {
    padding: 5px var(--s-5);
    border-radius: var(--r-pill);
    border-bottom: 0;
    margin-bottom: 0;
}
.v2-tabs-pills .v2-tab:hover:not(:disabled):not(.is-disabled) {
    background: var(--bg-hover);
}
.v2-tabs-pills .v2-tab.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-bottom-color: transparent;
}

/* Налаштування-іконка праворуч у смузі вкладок */
.v2-tabs .v2-tab-icon { margin-left: auto; display: inline-flex; align-items: center; }
.v2-tabs .v2-tab-icon .v2-i { width: 16px; height: 16px; }