/* dlg-tabs.css — shared underline tab row.
 *
 * Matches the Tab and Navigation menu components in the admin design
 * (Figma 4BZF8qe4gsk4RUdITt43rc, e.g. nodes 10818:17767 and 10831:21680):
 * plain text tabs, the active one in semibold with a 3px underline
 * directly beneath its label. No boxes, no backgrounds.
 *
 * Markup:
 *   <nav class="dlg-tabs">
 *     <button class="dlg-tab dlg-tab--active">Label</button>
 *     <button class="dlg-tab">Label</button>
 *   </nav>
 *
 * Pages keep their own class on each element as a JS hook and add these
 * for styling. `dlg-tab--active` is the single active-state class across
 * every tab row — page scripts toggle it directly.
 */

.dlg-tabs {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    padding: 0;
}

/* .dlg-page prefix on the tab itself: the blanket `.dlg-page button` rule
 * in dialogue.css is more specific than a lone class and would otherwise
 * restore the border, radius and background this style exists to remove. */
.dlg-page .dlg-tab,
.dlg-tab {
    padding: 5px 0;
    height: 32px;
    box-sizing: border-box;
    border: none;
    /* 3px per the Tab component in the design (border-b-3, #212121). */
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--app-text-secondary, #878787);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dlg-page .dlg-tab:hover,
.dlg-tab:hover {
    border-bottom-color: var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    background: none;
    color: var(--app-text-primary, #111827);
}

.dlg-page .dlg-tab--active,
.dlg-tab--active {
    color: var(--app-text-primary, #111827);
    font-weight: 600;
}

.dlg-page .dlg-tab--active,
.dlg-page .dlg-tab--active:hover,
.dlg-tab--active,
.dlg-tab--active:hover {
    border-bottom-color: var(--app-action-primary, #212121);
}