/*
 * Tabs (ТЗ ч.3, разд. 112): тонкое активное подчёркивание или мягкая зелёная
 * подсветка. Массивных табов нет. На мобилке — горизонтальный скролл (разд. 536).
 */

.tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: var(--border-w) solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding-inline: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-color);
}

.tab::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: -1px;
    height: 2px;
    background: transparent;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.tab:hover {
    color: var(--text-primary);
}

.tab[aria-selected='true'],
.tab.is-active {
    color: var(--primary);
}

.tab[aria-selected='true']::after,
.tab.is-active::after {
    background: var(--primary);
}

.tab:disabled,
.tab[aria-disabled='true'] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.tab__count {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}

.tab[aria-selected='true'] .tab__count {
    color: var(--primary);
}

/* Вариант с мягкой подложкой — внутри карточек и панелей */
.tabs--soft {
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-soft);
    border-bottom: 0;
    border-radius: var(--radius-control);
}

.tabs--soft .tab {
    height: var(--control-h-sm);
    border-radius: var(--radius-sm);
}

.tabs--soft .tab::after {
    display: none;
}

.tabs--soft .tab[aria-selected='true'],
.tabs--soft .tab.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

.tab-panel[hidden] {
    display: none;
}

.tab-panel {
    padding-top: var(--space-5);
}

.tab-panel:focus-visible {
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .tabs {
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
    }
}