/* public/css/components/view-tabs.css
 * Top-level tab switcher for pages that host several related views —
 * Channels (Traders | Distributors | Affiliates) and Sales (Sales | Returns).
 *
 * Visually identical to the Trade Inbox's tabs, which came first and are
 * scoped to that view. This is the unscoped version; trade-inbox.css keeps
 * its own copy so that view is untouched.
 *
 * Deliberately NOT named .tab / .tab-content — those already exist in
 * styles.css for the in-card tabs on Account Settings and Profile, where
 * .tab-content is display:none unless .active. Reusing them here would make
 * a panel invisible for reasons three files away.
 */

.view-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.view-tab {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--border-radius-lg);
    background: var(--white);
    color: var(--ink-dim);
    cursor: pointer;
    transition: var(--transition-fast);
}

.view-tab:hover {
    border-color: var(--rule-2);
    color: var(--ink);
}

.view-tab.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

/* Keyboard focus has to stay visible against the filled active state. */
.view-tab:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.view-tab-panel {
    min-height: 200px;
}

.view-tab-panel .section-header {
    /* The page title lives above the tabs, so a panel's own header only
       carries its subtitle and action buttons — tighten the gap it leaves. */
    margin-top: 0;
}