/* 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-300);
    gap: 0.25rem;
}

/* Inactive tabs carry resting tab chrome — a fill a tone darker than the page,
   a border and rounded top corners — so they read as clickable without hovering
   them first (issue #5182). They were flat text before, and a first pass that
   filled them with --gray-100 was still nearly invisible: that is the page's own
   background colour, so only the hairline border separated them. --gray-200 sits
   a step above the page and actually reads as a raised tab.

   The active tab shares its white fill with the .tab-content panel below, so the
   pair reads as one folder rather than a label floating over the form. It keeps
   the teal bottom edge that has always marked the active tab here — so the two
   surfaces are joined by colour, not seamlessly fused. */
.nav-tabs .nav-link {
    border: 1px solid var(--gray-300);
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    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, background-color .15s ease;
    white-space: nowrap;
    background: var(--gray-200);
}

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

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

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

/* The panel the active tab opens into. Borderless on top so the active tab and
   the panel share one continuous white surface; pages whose tabs are plain links
   with no .tab-content (absences stats) simply keep the bare tab strip. */
.tab-content {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-top: none;
    border-radius: 0 6px 6px 6px;
    padding: 1.25rem;
}

/* 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;
    }
}