/* Opt-in command bars. All component overrides stay inside .page-toolbar. */
.page-toolbar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ui-surface);
    color: var(--ui-text);
    border-bottom: 1px solid var(--ui-divider);
    font-size: 12px;
    line-height: 1.4;
    min-width: 0;
    overflow: visible;
    scrollbar-color: var(--ui-control-border-hover) var(--ui-surface-sunken);
}
.page-toolbar [hidden] { display: none !important; }
.page-toolbar ::selection { background: var(--ui-accent-soft-bg); color: var(--ui-text-strong); }
.page-toolbar :is(input, select) { caret-color: var(--ui-accent); accent-color: var(--ui-accent); }
.page-toolbar :is(button, select, input, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    box-shadow: none;
}
.page-toolbar .page-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}
.page-toolbar .page-toolbar-row--actions {
    border-top: 1px solid var(--ui-divider);
    padding-top: 8px;
    gap: 8px 18px;
}
.page-toolbar :is(.btn, .toggle-btn, .multi-select-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ui-control-border);
    border-radius: 6px;
    background: var(--ui-control-bg);
    color: var(--ui-text);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}
.page-toolbar :is(.btn, .toggle-btn, .multi-select-btn):hover:not(:disabled) {
    border-color: var(--ui-control-border-hover);
    background: var(--ui-control-bg-hover);
    color: var(--ui-text-strong);
    transform: none;
    box-shadow: none;
}
.page-toolbar .btn-primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-on-accent);
    font-weight: 600;
}
.page-toolbar .btn-primary:hover:not(:disabled) {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--ui-on-accent);
}
.page-toolbar :is(button, input):disabled { opacity: .55; cursor: not-allowed; }
.page-toolbar .btn i { font-size: 12px; }
.page-toolbar .filter-field {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 32px;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--ui-control-border);
    border-radius: 6px;
    background: var(--ui-control-bg);
}
.page-toolbar .filter-field > :is(label, .filter-field-label) {
    padding: 0 4px 0 10px;
    color: var(--ui-text-muted);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
}
.page-toolbar .filter-field.is-active {
    border-color: var(--ui-accent-soft-border);
    background: var(--ui-accent-soft-bg);
}
.page-toolbar .filter-field:focus-within { border-color: var(--ui-focus); }
.page-toolbar .filter-field :is(input, select) {
    height: 30px;
    min-width: 0;
    max-width: 100%;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-strong);
    font: inherit;
    font-weight: 600;
    box-shadow: none;
}
.page-toolbar .filter-field select { appearance: auto; }
.page-toolbar input::placeholder { color: var(--ui-text-muted); opacity: 1; }
.page-toolbar .page-toolbar-search { flex: 0 1 400px; }
.page-toolbar .page-toolbar-search select { width: 124px; flex: 0 1 124px; }
.page-toolbar .page-toolbar-search :is(.unified-search-wrap, #searchInput) {
    flex: 1 1 160px;
    width: 0;
    min-width: 0;
    max-width: none;
}
.page-toolbar .page-toolbar-search .unified-search-wrap { display: inline-flex; }
.page-toolbar .page-toolbar-search #searchInput { font-weight: 400; padding-right: 25px; cursor: text; }
/* The shared search decoration uses !important; opt out inside this joined field. */
.page-toolbar .page-toolbar-search .unified-search {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none;
    padding-left: 6px !important;
}
.page-toolbar .unified-search-clear { color: var(--ui-text-muted); }
.page-toolbar .unified-search-clear:hover { background: var(--ui-control-bg-hover); color: var(--ui-text); }
.page-toolbar .page-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.page-toolbar .page-toolbar-group + .page-toolbar-group {
    padding-left: 18px;
    border-left: 1px solid var(--ui-divider);
}
.page-toolbar .page-toolbar-label { color: var(--ui-text-muted); font-weight: 600; margin-right: 2px; }
.page-toolbar .page-toolbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.page-toolbar .integration-connection-notice {
    color: var(--ui-text-muted);
    background: transparent;
    border: 0;
    padding: 0;
    gap: 6px;
    max-width: 320px;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.page-toolbar .integration-connection-notice a { color: var(--ui-accent-soft-text); }
.page-toolbar .page-toolbar-seg {
    display: inline-flex;
    align-items: center;
    height: 32px;
    max-width: 100%;
    border: 1px solid var(--ui-control-border);
    border-radius: 6px;
    background: var(--ui-control-bg);
}
.page-toolbar .page-toolbar-seg input {
    width: 58px;
    min-width: 0;
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px 0 0 6px;
    background: transparent;
    color: var(--ui-text-strong);
    font: inherit;
}
.page-toolbar .page-toolbar-seg .btn {
    height: 30px;
    border: 0;
    border-left: 1px solid var(--ui-divider);
    border-radius: 0;
}
.page-toolbar .page-toolbar-seg .btn:last-child { border-radius: 0 6px 6px 0; }
.page-toolbar .page-filter-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 -16px;
    padding: 10px 16px;
    background: var(--ui-surface-sunken);
    border-top: 1px solid var(--ui-divider);
    min-width: 0;
}
.page-toolbar .page-filter-more input { width: 76px; }
.page-toolbar .page-filter-more .toggle-btn { height: 30px; border: 0; border-radius: 0; padding: 0 6px; }
.page-toolbar .page-filter-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    font-size: 12px;
    text-align: center;
}
.page-toolbar .page-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.page-toolbar .page-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    min-width: 0;
    max-width: 260px;
    padding: 0 4px 0 9px;
    border-radius: 13px;
    border: 1px solid var(--ui-accent-soft-border);
    background: var(--ui-accent-soft-bg);
    color: var(--ui-accent-soft-text);
    font: inherit;
}
.page-toolbar .page-filter-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-toolbar .page-filter-chip.is-default {
    border-style: dashed;
    border-color: var(--ui-control-border);
    background: transparent;
    color: var(--ui-text-muted);
    padding-right: 9px;
    cursor: pointer;
}
.page-toolbar .page-filter-chip button {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.page-toolbar .page-filter-chip button:hover { background: var(--ui-control-bg-hover); }
.page-toolbar .page-filter-apply-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.page-toolbar :is(.page-toolbar-menu, .page-toolbar-send) { position: relative; display: inline-flex; min-width: 0; }
.page-toolbar .page-toolbar-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-index-dropdown);
    min-width: 250px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border: 1px solid var(--ui-divider);
    border-radius: 8px;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-popover);
    transform: translateX(var(--page-menu-shift, 0px));
}
.page-toolbar .page-toolbar-end .page-toolbar-menu-panel { left: auto; right: 0; }
.page-toolbar .page-toolbar-menu-panel .btn {
    width: 100%;
    height: auto;
    min-height: 32px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
}
.page-toolbar .page-toolbar-menu-panel small { display: block; color: var(--ui-text-muted); font: inherit; margin-top: 2px; }
.page-toolbar .page-toolbar-menu-panel hr { border: 0; border-top: 1px solid var(--ui-divider); margin: 4px 2px; }
.page-toolbar .page-toolbar-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-index-tooltip);
    width: max-content;
    max-width: min(500px, calc(100vw - 24px));
    padding: 6px 10px;
    border: 1px solid var(--ui-divider);
    border-radius: 6px;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-popover);
    color: var(--ui-text);
    visibility: hidden;
    pointer-events: none;
    overflow-wrap: anywhere;
    transform: translateX(var(--page-menu-shift, 0px));
}
.page-toolbar:not(.is-suspended) .page-toolbar-send:not(.is-tip-dismissed):has(button:hover, button:focus) .page-toolbar-tip { visibility: visible; }
.page-toolbar .badge {
    margin-left: 2px;
    padding: 1px 5px;
    background: var(--ui-accent-soft-bg);
    color: var(--ui-accent-soft-text);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
}
.page-toolbar .btn-primary .badge { background: var(--ui-surface); color: var(--ui-accent-soft-text); }
.page-toolbar .multi-select-container { max-width: 150px; }
.page-toolbar .multi-select-trigger {
    min-height: 30px;
    height: 30px;
    padding: 0 8px 0 4px;
    background: transparent;
    border: 0;
    color: var(--ui-text-strong);
    box-shadow: none;
}
.page-toolbar .multi-select-trigger :is(span, i) { color: inherit; font-size: 12px; }
.page-toolbar .multi-select-trigger span { font-weight: 600; }
.page-toolbar .multi-select-dropdown {
    width: 280px;
    min-width: min(240px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border-color: var(--ui-divider);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-popover);
}
.page-toolbar .multi-select-header { background: var(--ui-surface-sunken); border-color: var(--ui-divider); }
.page-toolbar .multi-select-search {
    width: 100%;
    height: 30px;
    border: 1px solid var(--ui-control-border);
    background: var(--ui-control-bg);
    color: var(--ui-text);
    font-weight: 400;
}
.page-toolbar .multi-select-btn { height: 28px; padding: 0 8px; }
.page-toolbar .multi-select-list { max-height: min(250px, 40vh); }
.page-toolbar .multi-select-option { color: var(--ui-text); font-size: 12px; }
.page-toolbar .multi-select-option[style] { color: var(--ui-text-muted) !important; }
.page-toolbar .multi-select-option:hover { background: var(--ui-control-bg-hover); }
.page-toolbar .multi-select-option :is(input, label) { height: auto; font: inherit; color: inherit; }
.page-toolbar .multi-select-option input { width: auto; accent-color: var(--ui-accent); }
@media (max-width: 600px) {
    .page-toolbar { padding: 10px; }
    .page-toolbar .page-toolbar-search { flex: 1 1 100%; }
    .page-toolbar .page-toolbar-group + .page-toolbar-group { padding-left: 0; border-left: 0; }
    .page-toolbar .page-toolbar-end { margin-left: 0; }
    .page-toolbar .page-filter-more { margin: 0 -10px; padding: 10px; }
    .page-toolbar .page-toolbar-menu-panel {
        position: fixed;
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
        transform: none;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
    .page-toolbar .page-toolbar-end .page-toolbar-menu-panel { left: 12px; right: 12px; }
    .page-toolbar .page-toolbar-menu-panel .btn { min-height: 44px; }
    .page-toolbar .page-filter-chip { max-width: 100%; }
}