/*
Layout primitives.
Use these classes in PHP views when a screen needs predictable alignment.
*/

.erp-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-gap-md, 12px);
    justify-content: space-between;
}

.erp-toolbar-main,
.erp-toolbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-gap-sm, 8px);
}

.erp-toolbar-main {
    min-width: 280px;
}

.erp-toolbar-actions {
    justify-content: flex-end;
    margin-left: auto;
}

.erp-section-stack {
    display: grid;
    gap: var(--erp-gap-lg, 16px);
}

/*
Workable workspace guard.
Keep tab content inside the visible workspace while the detailed redesign is
still in progress.
*/
html[data-ui-theme],
html[data-ui-theme] body:not(.auth-page) {
    max-width: 100%;
    overflow-x: hidden;
}

html[data-ui-theme] body:not(.auth-page) .wrap,
html[data-ui-theme] body:not(.auth-page) .master-layout,
html[data-ui-theme] body:not(.auth-page) .master-content,
html[data-ui-theme] body:not(.auth-page) .workspace-content,
html[data-ui-theme] body:not(.auth-page) .workspace-page,
html[data-ui-theme] body:not(.auth-page) .embedded-module,
html[data-ui-theme] body:not(.auth-page) .module-shell,
html[data-ui-theme] body:not(.auth-page) .panel,
html[data-ui-theme] body:not(.auth-page) .content-card,
html[data-ui-theme] body:not(.auth-page) .table-card,
html[data-ui-theme] body:not(.auth-page) .form-card,
html[data-ui-theme] body:not(.auth-page) form {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

html[data-ui-theme] body:not(.auth-page) .master-content,
html[data-ui-theme] body:not(.auth-page) .workspace-content,
html[data-ui-theme] body:not(.auth-page) .workspace-page,
html[data-ui-theme] body:not(.auth-page) .embedded-module,
html[data-ui-theme] body:not(.auth-page) .module-shell {
    overflow-x: hidden;
}

html[data-ui-theme] body:not(.auth-page) .panel-head,
html[data-ui-theme] body:not(.auth-page) .section-head,
html[data-ui-theme] body:not(.auth-page) .module-topbar,
html[data-ui-theme] body:not(.auth-page) .form-top-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--erp-gap-md, 12px);
    justify-content: space-between;
    min-width: 0;
    max-width: 100%;
}

html[data-ui-theme] body:not(.auth-page) .panel-title,
html[data-ui-theme] body:not(.auth-page) .toolbar-title,
html[data-ui-theme] body:not(.auth-page) .module-title,
html[data-ui-theme] body:not(.auth-page) .erp-toolbar-main {
    min-width: 0;
}

html[data-ui-theme] body:not(.auth-page) .panel-title-copy,
html[data-ui-theme] body:not(.auth-page) .toolbar-title-copy {
    min-width: 0;
}

html[data-ui-theme] body:not(.auth-page) .panel-head .actions,
html[data-ui-theme] body:not(.auth-page) .panel-actions,
html[data-ui-theme] body:not(.auth-page) .toolbar-actions,
html[data-ui-theme] body:not(.auth-page) .module-actions,
html[data-ui-theme] body:not(.auth-page) .erp-toolbar-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--erp-gap-sm, 8px);
    justify-content: flex-end;
    margin-left: auto;
}

html[data-ui-theme] body:not(.auth-page) .list-search-form,
html[data-ui-theme] body:not(.auth-page) .search-form,
html[data-ui-theme] body:not(.auth-page) .erp-toolbar-search {
    align-items: center;
    display: flex;
    flex: 0 1 520px;
    flex-wrap: nowrap;
    gap: var(--erp-gap-sm, 8px);
    min-width: 220px;
    max-width: 520px;
}

html[data-ui-theme] body:not(.auth-page) .list-search,
html[data-ui-theme] body:not(.auth-page) .search-input,
html[data-ui-theme] body:not(.auth-page) .erp-toolbar-search input {
    min-width: 0;
    max-width: 100%;
}

@media screen and (max-width: 900px) {
    html[data-ui-theme] body:not(.auth-page) .panel-head,
    html[data-ui-theme] body:not(.auth-page) .section-head,
    html[data-ui-theme] body:not(.auth-page) .module-topbar,
    html[data-ui-theme] body:not(.auth-page) .form-top-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    html[data-ui-theme] body:not(.auth-page) .panel-head .actions,
    html[data-ui-theme] body:not(.auth-page) .panel-actions,
    html[data-ui-theme] body:not(.auth-page) .toolbar-actions,
    html[data-ui-theme] body:not(.auth-page) .module-actions,
    html[data-ui-theme] body:not(.auth-page) .erp-toolbar-actions,
    html[data-ui-theme] body:not(.auth-page) .list-search-form,
    html[data-ui-theme] body:not(.auth-page) .search-form,
    html[data-ui-theme] body:not(.auth-page) .erp-toolbar-search {
        flex: 1 1 100%;
        margin-left: 0;
        max-width: 100%;
    }
}