/* Tab bar — underline style. Consolidates the per-page .sa-tabs/.eform-tabs/.sa-schedule-tabs
   overrides (Phase 2). Unscoped so every .nav-tabs inherits it; the first global tab CSS in
   the app. See docs/css-refactoring.md §5 Phase 2 / §8. */
.nav-tabs {
    border-bottom: 2px solid var(--gray-200);
    gap: 0;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: .6rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    border-bottom-color: var(--gray-300);
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.nav-tabs .nav-link.disabled {
    color: var(--gray-300);
    cursor: not-allowed;
}

.tab-content {
    padding: 1.25rem 0;
}

/* Validation error dot on a tab button (injected by form JS; renamed from .sa-tab-error). */
.nav-tabs .nav-link .w5-tab-error {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: 6px;
    vertical-align: middle;
}

/* Mobile: horizontally scrollable tab strip. */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}