/**
 * Unified "folder" tab style.
 *
 * Used everywhere tabs appear: Settings (.osat-tab-nav-item), Edit Client
 * (.osat-tab-nav-item), and Edit Location (its media + section tabs, which also
 * carry .osat-tab-nav-item). Enqueued SEPARATELY (cache-busted) in
 * osat_enqueue_assets() — NOT @import'd — and after tool-tracker.css, so it wins
 * over the older underline-style rules still present in 11-settings-layout.css /
 * 13-client-layout.css (kept for backwards compatibility).
 *
 * Each tab is drawn as a card-like box: flat bottom, top corners curved to match the
 * site's cards. The active tab gets a thin red (accent) outline and a white body that
 * merges into the content below; inactive tabs use a subtle grey fill with dark text
 * (kept high-contrast for accessibility).
 */
.osat-tab-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--osat-border-color);
    margin-bottom: var(--osat-spacing-lg);
}

.osat-tab-nav-item {
    padding: 8px 16px;
    color: var(--osat-primary-text-color);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    background: var(--osat-super-light-gray-bg);
    border: 1px solid var(--osat-border-color);
    border-radius: var(--osat-border-radius) var(--osat-border-radius) 0 0;
    margin-bottom: -1px; /* sit the tab on top of the navigation's bottom border */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.osat-tab-nav-item:hover {
    background: var(--osat-body-bg);
}

.osat-tab-nav-item.is-active {
    color: var(--osat-primary-text-color);
    background: var(--osat-card-bg);
    border-color: var(--osat-accent-color);        /* thin red outline */
    border-bottom-color: var(--osat-card-bg);      /* merge the active tab into the content */
}