/* One sizing and spacing contract for breadcrumbs, actions and saved-view pickers. */
:root { --toolbar-font-size: 12px; --toolbar-control-height: 28px; --toolbar-icon-width: 28px; }
.app-toolbar {
    display: flex;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: var(--toolbar-font-size);
    font-family: var(--default-font-family);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
}
.app-toolbar > .text-center { display: none; }
.app-toolbar:is(#breadcrumb, #globalbreadcrumb) { font-size: var(--toolbar-font-size); }
.app-toolbar-path {
    display: flex;
    font-size: 12px;
    text-transform: none;
    align-items: center;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
    min-height: var(--toolbar-control-height);
}
.app-toolbar-path > :is(.breadcrumb-item, .globalbreadcrumb-item) {
    float: none;
    padding: 0 !important;
    margin: 0;
    font-size: inherit;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-toolbar-path > span:has(> i), .app-toolbar-path > :is(.app-toolbar-page-menu, .breadcrumb-copy-url) { flex: 0 0 auto; overflow: visible; }
.app-toolbar-path > span:has(> i) { display: inline-flex; justify-content: center; width: 12px; }
.app-toolbar-path a { font-size: inherit; }
.app-toolbar-path :is(.breadcrumb-item, .globalbreadcrumb-item) > a { font-family: inherit; }
.app-toolbar-path > .breadcrumb-related-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    overflow: visible;
}
.breadcrumb-related-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toolbar-icon-width);
    height: var(--toolbar-control-height);
    border-radius: 4px;
}
.breadcrumb-related-actions > a i { color: inherit !important; }
.breadcrumb-related-actions > a:hover { background: var(--page-search-hover); text-decoration: none; }
.breadcrumb-related-actions > a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.app-organization-name { text-transform: uppercase; }
.app-toolbar .breadcrumb-copy-url-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 24px;
    height: var(--toolbar-control-height);
    min-width: 24px;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
    border: 0;
    background: transparent;
}
.app-toolbar .breadcrumb-copy-url-button i { position: static; padding: 0; margin: 0; width: 12px; text-align: center; font-size: 13px; line-height: 1; }
.app-toolbar-related { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; border-left: 1px solid var(--page-search-border); padding-left: 8px; }
.app-toolbar:is(.app-toolbar-has-related, .app-toolbar-has-search) .app-toolbar-path { flex: 0 1 auto; }
.app-toolbar-actions { margin-left: auto; }
.app-toolbar-search { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.app-toolbar-search > span { min-width: 0; max-width: 100%; }
.app-toolbar-actions { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; padding: 0 !important; }
.app-toolbar-item { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; padding: 0 !important; margin: 0 !important; }
.app-toolbar :is(.toolbar-button-cls, .app-toolbar-item > .b-button, .app-toolbar-item > a),
.app-toolbar .toolbar-split-action > .b-button,
.app-toolbar-overflow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--toolbar-control-height);
    height: var(--toolbar-control-height);
    min-width: var(--toolbar-icon-width);
    padding: 0 9px !important;
    margin: 0;
    font-size: var(--toolbar-font-size) !important;
    font-family: var(--default-font-family);
    font-weight: 400;
    line-height: 1.25;
    text-transform: none;
    border-radius: 4px;
    white-space: nowrap;
}
.app-toolbar .toolbar-button-cls { border: 1px solid transparent; background: transparent; }
.app-toolbar .b-button.toolbar-primary-action { font-weight: 500; }
/* The toolbar gap replaces legacy span margins and Bryntum label margins. */
.app-toolbar .b-button > :is(span, label) { margin-inline: 0 !important; }
.app-toolbar .toolbar-split-action { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.app-toolbar .toolbar-split-action > .toolbar-primary-action { border-radius: 4px 0 0 4px; }
.app-toolbar .toolbar-split-action > .toolbar-split-menu-toggle {
    width: var(--toolbar-icon-width);
    padding: 0 !important;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .45);
    border-radius: 0 4px 4px 0;
    color: #fff;
}
.app-toolbar .toolbar-split-menu-toggle i { color: inherit; }
.app-toolbar .toolbar-split-action > .b-button:focus-visible { outline: 2px solid var(--fg-color-toolbar); outline-offset: -2px; }
.app-toolbar-overflow .toolbar-split-action { width: 100%; }
.app-toolbar-overflow .toolbar-split-action > .toolbar-primary-action { flex: 1; justify-content: flex-start; min-height: 44px; }
.app-toolbar-overflow .toolbar-split-action > .toolbar-split-menu-toggle { flex: 0 0 44px; height: auto; }
.toolbar-action-menu .b-menuitem { min-height: 32px; text-transform: none; }
@media (pointer: coarse) { .toolbar-action-menu .b-menuitem { min-height: 44px; } }
.app-toolbar :is(.toolbar-button-cls, .b-button) i { font-size: 13px; margin: 0; }
.app-toolbar .toolbar-related-link { background: transparent !important; color: var(--fg-color-toolbar) !important; border: 1px solid transparent; box-shadow: none; text-transform: none; }
.app-toolbar .toolbar-related-link i { color: inherit !important; }
.app-toolbar .toolbar-related-link > span { order: 1; }
.app-toolbar .toolbar-related-link .toolbar-navigation-cue { order: 2 !important; }
.app-toolbar .toolbar-related-link:hover { background: var(--page-search-hover) !important; text-decoration: underline; }
.app-toolbar .toolbar-related-link:focus-visible { outline: 2px solid var(--fg-color-toolbar); outline-offset: -2px; }
.app-toolbar .toolbar-button-cls:hover, .app-toolbar-overflow-toggle:hover { background: var(--page-search-hover); }
.app-toolbar .toolbar-button-cls:focus-visible, .app-toolbar-overflow-toggle:focus-visible { outline: 2px solid var(--fg-color-toolbar); outline-offset: -2px; }
.toolbar-overflow-label { display: none; }
.app-toolbar-overflow-toggle { color: var(--fg-color-toolbar); background: transparent; border: 1px solid var(--page-search-border); flex: 0 0 auto; }
.app-toolbar-overflow-toggle i { color: inherit; }
.app-toolbar [hidden] { display: none !important; }
.app-toolbar :is(.search-toolbar, #searchToolbar) { height: var(--toolbar-control-height); min-height: 0; width: 230px; max-width: 100%; font-size: inherit; padding: 0 6px; margin: 0; }
.app-toolbar :is(.search-toolbar, #searchToolbar) :is(input, button) { font-size: inherit; min-height: 0; height: 100%; }
.app-toolbar :is(.search-toolbar, #searchToolbar) input { min-width: 0; padding: 0 4px; font-size: var(--toolbar-font-size); font-weight: 400; }
.app-toolbar-search .page-search-wrapper { width: 314.5px; max-width: 100%; }
.app-toolbar :is(.search-toolbar, #searchToolbar).page-search-control { width: 100%; gap: 4px; }
.app-toolbar :is(.search-toolbar, #searchToolbar) .page-search-input { flex: 1 1 220px; width: 220px; }
.app-toolbar .page-search-control :is(.page-search-submit, .page-search-clear) { min-width: 20px; width: 20px; }
.app-toolbar .page-search-clear[hidden] { display: inline-flex !important; visibility: hidden; }
.app-toolbar .page-search-scope-button { flex: 0 0 auto; }
.app-toolbar .page-search-entity-label { font-size: inherit; min-height: 0; }
.app-toolbar-overflow {
    position: fixed;
    z-index: 10020;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 310px;
    max-width: calc(100vw - 16px);
    overflow: auto;
    padding: 6px;
    background: var(--page-search-surface);
    color: var(--page-search-text);
    border: 1px solid var(--page-search-border);
    border-radius: 6px;
    box-shadow: var(--page-search-shadow);
}
.app-toolbar-overflow .app-toolbar-item { display: flex; width: 100%; }
.app-toolbar-overflow :is(.toolbar-button-cls, .app-toolbar-item > .b-button, .app-toolbar-item > a) { width: 100%; justify-content: flex-start; min-height: 44px; height: auto; white-space: normal; text-align: left; }
.app-toolbar-overflow .toolbar-overflow-label { display: inline; }
.app-toolbar-overflow .toolbar-button-cls:not(.avatar-btn) i { width: 24px; text-align: center; }
.app-toolbar-overflow .toolbar-button-cls:not(.avatar-btn) i { color: var(--page-search-text) !important; }
.app-toolbar-overflow .toolbar-button-cls { color: var(--page-search-text); }
.app-toolbar.app-toolbar-stacked { flex-wrap: wrap; }
.app-toolbar.app-toolbar-stacked .app-toolbar-path { flex-basis: 100%; }
.app-toolbar-stacked .app-toolbar-path:has(> .breadcrumb-related-actions) { flex-wrap: wrap; }
.app-toolbar-stacked .app-toolbar-path:has(> .breadcrumb-related-actions) > span { max-width: 100%; }
.app-toolbar-stacked .app-toolbar-search { flex-basis: 100%; }
.app-toolbar-stacked .app-toolbar-actions { flex: 1 1 0; }
@media (max-width: 700px) {
    .app-toolbar-actions .toolbar-primary-action { width: var(--toolbar-icon-width); padding: 0 !important; }
    .app-toolbar-actions .toolbar-primary-action > span { display: none; }
}
@media (pointer: coarse) {
    :root { --toolbar-control-height: 44px; --toolbar-icon-width: 44px; }
    .app-toolbar-path { min-height: 34px; }
    .app-toolbar .breadcrumb-copy-url-button { height: 34px; width: 34px; min-width: 34px; }
    .app-toolbar-search :is(.search-toolbar, #searchToolbar) input:focus { font-size: 16px; }
}
@media print { .app-toolbar, .app-toolbar-overflow { display: none !important; } }
