/* Module navigation format has one owner here, across list/create/edit views.
   tokens.css owns sizing; bee-theme.css owns palette and active-state colours.
   The existing class aliases share this component without changing routes. */
html[data-ui-theme] body:not(.auth-page) :is(.tabs, .section-tabs, .subtabs, .role-tabs) {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-self: start;
    gap: var(--erp-subtab-gap);
    margin: var(--erp-subtab-margin-top) 0 var(--erp-subtab-margin-bottom);
    padding: 0;
    border-bottom: 1px solid var(--theme-border);
}

html[data-ui-theme] body:not(.auth-page) :is(.tabs, .section-tabs, .subtabs, .role-tabs) > :is(.tab, .section-tab, .subtab, .role-tab) {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: var(--erp-subtab-min-width);
    max-width: 100%;
    height: auto;
    min-height: var(--erp-subtab-min-height);
    padding: var(--erp-subtab-padding-block) var(--erp-subtab-padding-inline);
    border: 0;
    border-radius: var(--erp-radius-md) var(--erp-radius-md) 0 0;
    background: transparent;
    font-size: var(--ui-tab-font-size, 14px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

html[data-ui-theme] body:not(.auth-page) .section-tabs > .section-tab-actions {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    padding: 0;
}

html[data-ui-theme] body:not(.auth-page) .section-tab-actions > .btn {
    min-height: var(--erp-subtab-min-height);
    padding: 0 14px;
}

@media screen {
    /* Grid rows already provide spacing: count the content gap once. */
    html[data-ui-theme] body:not(.auth-page) .master-content .embedded-module .module-shell:has(> :is(.tabs, .section-tabs, .subtabs, .role-tabs)) {
        row-gap: var(--erp-subtab-margin-bottom);
    }

    html[data-ui-theme] body:not(.auth-page) .master-content .embedded-module .module-shell > :is(.tabs, .section-tabs, .subtabs, .role-tabs) {
        /* Keep menus immediately under workspace tabs, ahead of headings/feedback. */
        order: -1;
        margin-bottom: 0;
    }

    /* The shared canvas scrolls on smaller screens instead of growing tab rows. */
    html[data-ui-theme] body:not(.auth-page) .erp-workspace-canvas :is(.tabs, .section-tabs, .subtabs, .role-tabs) {
        flex-wrap: nowrap;
    }

    @container style(--erp-canvas-compact: 1) {
        .erp-workspace-canvas :is(.tabs, .section-tabs, .subtabs, .role-tabs) {
            --erp-subtab-padding-inline: 6px;
            --erp-subtab-gap: var(--erp-gap-xs);
        }
    }
}