.tab-header {
    display: flex;
    align-items: stretch;
    background-color: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    overflow-x: auto;
    flex-shrink: 0;
}

.tab-header button {
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--clr-border);
    border-bottom: 0.15rem solid transparent;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--clr-text-dim);
    transition: color 0.15s, background-color 0.15s, border-bottom-color 0.15s;
    border-radius: 0;
    white-space: nowrap;
    line-height: 1.4;
}

.tab-header button:hover:not(.active) {
    background-color: var(--clr-surface-alt);
    color: var(--clr-text);
    border-bottom-color: transparent;
}

.tab-header button.active {
    background-color: var(--clr-bg);
    border-bottom-color: var(--clr-accent);
    color: var(--clr-accent);
    font-weight: 600;
}

.tab-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.65rem;
}

/* Nested tab container — fills remaining height inside a parent tab */
.tab-view-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Wrapper div that holds a nested TabView inside a view with its own toolbar */
.tab-inner-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}