/*
 * Optional list layout with navigation above the grid and a shared bottom dock.
 * The contract is opt-in through data-vario-layout-mode="bottom-panel".
 */

html body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"],
html[data-vario-theme] body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"] {
    --vario-directory-bottom-panel-height: var(--vario-size-list-bottom-panel-height);
    --vario-directory-bottom-panel-min-height: 150px;
    --vario-list-bottom-panel-tabs-height: var(--vario-size-list-bottom-panel-tabs-height);
    --vario-list-bottom-panel-metric-height: var(--vario-size-list-bottom-panel-metric-height);
    --vario-list-bottom-panel-filter-rail-width: var(--vario-size-list-bottom-panel-filter-rail-width);
    --vario-list-preview-rail-width: var(--vario-size-list-preview-rail-width);
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-areas:
        "navigation"
        "list"
        "bottom-panel-resizer"
        "bottom-panel" !important;
    grid-template-rows:
        auto
        minmax(0, 1fr)
        var(--vario-size-list-bottom-panel-separator-height)
        var(--vario-directory-bottom-panel-height) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px var(--vario-module-shell-x) 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: var(--vario-module-shell-bg) !important;
}

html body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]::before,
html body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]::after,
html[data-vario-theme] body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]::before,
html[data-vario-theme] body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]::after {
    display: none !important;
    content: none !important;
}

/* BeforeListContent is a named shared shell slot.  Its row is opt-in so
   bottom-panel registers without list actions preserve their established
   vertical budget.  Keeping the grid area on the slot (rather than on a
   caller's action bar) prevents CSS Grid from creating an implicit row. */
html body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]:has(> [data-vario-component-slot="list-actions"]),
html[data-vario-theme] body .vario-list-standard.vario-list-shell[data-vario-list-kind][data-vario-layout-mode="bottom-panel"]:has(> [data-vario-component-slot="list-actions"]) {
    grid-template-areas:
        "navigation"
        "list-actions"
        "list"
        "bottom-panel-resizer"
        "bottom-panel" !important;
    grid-template-rows:
        auto
        28px
        minmax(0, 1fr)
        var(--vario-size-list-bottom-panel-separator-height)
        var(--vario-directory-bottom-panel-height) !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] > [data-vario-component-slot="list-actions"],
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] > [data-vario-component-slot="list-actions"] {
    grid-area: list-actions !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    overflow: visible !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-slot,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-slot {
    grid-area: navigation !important;
    z-index: 5 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    overflow: visible !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-tab-stack-search,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-tab-stack-search {
    display: grid !important;
    grid-template-rows: var(--vario-document-tabs-main-row-height) var(--vario-document-tabs-sub-row-height) !important;
    min-height: calc(var(--vario-document-tabs-main-row-height) + var(--vario-document-tabs-sub-row-height)) !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tabs,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tabs {
    display: flex !important;
    grid-area: auto !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--vario-document-tabs-main-row-height) !important;
    padding: 1px 6px !important;
    overflow: visible !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tab-list,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tab-list {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tab-list::-webkit-scrollbar,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-type-tab-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-navigation-slot .vario-sales-document-type-tab,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-navigation-slot .vario-sales-document-type-tab {
    gap: 9px !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-navigation-slot .vario-sales-document-type-tab .nav-icon,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-navigation-slot .vario-sales-document-type-tab .nav-icon {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    stroke-width: 2 !important;
}

html body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-create-actions,
html[data-vario-theme] body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-create-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 8 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-button-compact-height) !important;
    padding: 0 !important;
    margin-left: 8px !important;
    overflow: visible !important;
}

html body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-create-actions .vario-list-create-actions,
html[data-vario-theme] body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-navigation-create-actions .vario-list-create-actions {
    display: block !important;
    width: auto !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-subtype-tabs,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-document-subtype-tabs {
    grid-area: auto !important;
    height: var(--vario-document-tabs-sub-row-height) !important;
    min-height: var(--vario-document-tabs-sub-row-height) !important;
    max-height: var(--vario-document-tabs-sub-row-height) !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-table-card,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-sales-table-card,
html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-document-grid-pane,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-document-grid-pane,
html .vario-list-standard[data-vario-layout-mode="bottom-panel"] > .vario-list-grid-pane,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] > .vario-list-grid-pane,
html .vario-list-standard[data-vario-layout-mode="bottom-panel"] > .vario-list-body-layout > .vario-list-grid-pane,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] > .vario-list-body-layout > .vario-list-grid-pane {
    grid-area: list !important;
    z-index: 1 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-form,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-form {
    display: contents !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] [data-vario-component="VarioListGrid"] > [data-vario-component-part="table-wrapper"],
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] [data-vario-component="VarioListGrid"] > [data-vario-component-part="table-wrapper"] {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] [data-vario-component="VarioListGrid"] [data-vario-component-part="table"] thead,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] [data-vario-component="VarioListGrid"] [data-vario-component-part="table"] thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-resizer,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-resizer {
    grid-area: bottom-panel-resizer !important;
    z-index: 4 !important;
    align-self: center !important;
    width: 100% !important;
    height: var(--vario-size-list-bottom-panel-separator-height) !important;
    min-height: var(--vario-size-list-bottom-panel-separator-height) !important;
    cursor: ns-resize !important;
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-slot,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-slot {
    grid-area: bottom-panel !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html .vario-list-bottom-panel,
html[data-vario-theme] .vario-list-bottom-panel {
    display: grid !important;
    grid-template-rows: var(--vario-list-bottom-panel-tabs-height) minmax(0, 1fr) var(--vario-list-bottom-panel-metric-height) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-list-border-soft) !important;
    border-radius: var(--vario-radius-md) !important;
    background: var(--vario-color-surface-card) !important;
    box-shadow: var(--vario-shadow-panel-compact) !important;
    box-sizing: border-box !important;
}

html .vario-list-bottom-panel-header,
html[data-vario-theme] .vario-list-bottom-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    border-bottom: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
}

html .vario-list-bottom-panel-tabs,
html[data-vario-theme] .vario-list-bottom-panel-tabs {
    display: flex !important;
    align-self: stretch !important;
    min-width: 0 !important;
}

html .vario-list-bottom-panel-tab,
html[data-vario-theme] .vario-list-bottom-panel-tab {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--vario-color-text-muted) !important;
    font: var(--vario-font-tab) !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

html .vario-list-bottom-panel-tab::after,
html[data-vario-theme] .vario-list-bottom-panel-tab::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 2px !important;
    background: transparent !important;
}

html .vario-list-bottom-panel-tab.active,
html[data-vario-theme] .vario-list-bottom-panel-tab.active {
    color: var(--vario-list-accent) !important;
}

html .vario-list-bottom-panel-tab.active::after,
html[data-vario-theme] .vario-list-bottom-panel-tab.active::after {
    background: var(--vario-list-accent) !important;
}

html .vario-list-bottom-panel-tab .nav-icon,
html[data-vario-theme] .vario-list-bottom-panel-tab .nav-icon {
    width: 15px !important;
    height: 15px !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"],
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] {
    --vario-list-bottom-panel-tabs-height: var(--vario-size-list-bottom-panel-icon-field-tabs-height) !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"][data-vario-tab-density="compact"],
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"][data-vario-tab-density="compact"] {
    --vario-list-bottom-panel-tabs-height: var(--vario-size-list-bottom-panel-icon-field-compact-tabs-height) !important;
    --vario-size-list-bottom-panel-icon-field-tab-height: var(--vario-size-list-bottom-panel-icon-field-compact-tab-height);
    --vario-size-list-bottom-panel-icon-field-icon-height: var(--vario-size-list-bottom-panel-icon-field-compact-icon-height);
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tabs,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tabs {
    align-self: auto !important;
    align-items: center !important;
    gap: 7px !important;
    height: 100% !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab {
    justify-content: flex-start !important;
    gap: 10px !important;
    height: var(--vario-size-list-bottom-panel-icon-field-tab-height) !important;
    min-width: 158px !important;
    padding: 0 12px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: 5px !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-muted) !important;
    box-shadow: var(--vario-component-icon-tab-shadow) !important;
    font: 600 12px/18px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:nth-child(2),
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:nth-child(2) {
    min-width: 198px !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab::after,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab::after {
    content: none !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 var(--vario-size-list-bottom-panel-icon-field-icon-width) !important;
    width: var(--vario-size-list-bottom-panel-icon-field-icon-width) !important;
    height: var(--vario-size-list-bottom-panel-icon-field-icon-height) !important;
    border-right: 1px solid var(--vario-color-border-field) !important;
    border-radius: 4px 0 0 4px !important;
    background: var(--vario-color-surface-subtle) !important;
    color: var(--vario-color-text-muted) !important;
    box-sizing: border-box !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon .nav-icon,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon .nav-icon {
    width: 14px !important;
    height: 14px !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-label,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-label {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab.active,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab.active {
    border-color: color-mix(in srgb, var(--vario-list-accent) 45%, var(--vario-color-border-field)) !important;
    background: var(--vario-color-info-50) !important;
    color: var(--vario-list-accent) !important;
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab.active .vario-list-bottom-panel-tab-icon,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab.active .vario-list-bottom-panel-tab-icon {
    border-right-color: var(--vario-list-accent) !important;
    background: var(--vario-list-accent) !important;
    color: var(--vario-color-text-on-primary) !important;
}

@media (hover: hover) {
    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:hover,
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:hover {
        border-color: color-mix(in srgb, var(--vario-list-accent) 45%, var(--vario-color-border-field)) !important;
        box-shadow: var(--vario-shadow-button-hover) !important;
    }

    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:active:hover,
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:active:hover {
        box-shadow: var(--vario-shadow-button-pressed) !important;
        transition-duration: var(--vario-motion-button-press-duration) !important;
    }
}

html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:focus-visible,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: 1px !important;
}

@media (max-width: 980px) {
    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab,
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab {
        min-width: 136px !important;
    }

    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:nth-child(2),
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab:nth-child(2) {
        min-width: 168px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab,
    html .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon,
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab,
    html[data-vario-theme] .vario-list-bottom-panel[data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-tab-icon {
        transition-duration: 0.01ms !important;
    }
}

html .vario-list-bottom-panel-header-actions,
html[data-vario-theme] .vario-list-bottom-panel-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

html body .vario-list-bottom-panel-header-actions .vario-list-bottom-panel-actions,
html[data-vario-theme] body .vario-list-bottom-panel-header-actions .vario-list-bottom-panel-actions {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    grid-template: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-button-compact-height) !important;
    padding: 0 !important;
    overflow: visible !important;
}

html .vario-list-bottom-panel-body,
html[data-vario-theme] .vario-list-bottom-panel-body {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: clip !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-list-bottom-panel-body.is-search,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search {
    display: grid !important;
    grid-template-columns: var(--vario-list-bottom-panel-filter-rail-width) minmax(0, 1fr) !important;
}

html .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-tabs-row,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-tabs-row,
html .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-tabs-row,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-tabs-row {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    padding: 8px 6px !important;
    align-items: initial !important;
    justify-content: initial !important;
    overflow: hidden !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-muted) !important;
    box-sizing: border-box !important;
}

html .vario-list-search-settings-slot,
html[data-vario-theme] .vario-list-search-settings-slot {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: auto !important;
}

html .vario-list-search-settings-slot.is-standalone,
html[data-vario-theme] .vario-list-search-settings-slot.is-standalone {
    width: min(166px, 100%) !important;
    padding: 0 6px 8px !important;
}

html .vario-list-search-settings-separator,
html[data-vario-theme] .vario-list-search-settings-separator {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    flex: 0 0 1px !important;
    background: var(--vario-color-border-soft) !important;
}

html body .vario-list-search-settings-button,
html[data-vario-theme] body .vario-list-search-settings-button {
    display: grid !important;
    grid-template-columns: var(--vario-size-search-settings-icon) minmax(0, 1fr) var(--vario-size-search-settings-chevron) !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: var(--vario-size-search-settings-button-height) !important;
    min-height: var(--vario-size-search-settings-button-height) !important;
    padding: 0 8px !important;
    border: 1px solid var(--vario-component-search-settings-button-border) !important;
    border-radius: var(--vario-size-search-settings-button-radius) !important;
    background: var(--vario-component-search-settings-button-bg) !important;
    color: var(--vario-component-search-settings-button-text) !important;
    box-shadow: var(--vario-shadow-button-secondary) !important;
    font: 600 11px/16px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body .vario-list-search-settings-button > .nav-icon,
html[data-vario-theme] body .vario-list-search-settings-button > .nav-icon {
    width: var(--vario-size-search-settings-icon) !important;
    height: var(--vario-size-search-settings-icon) !important;
}

html body .vario-list-search-settings-button > .nav-icon:last-child,
html[data-vario-theme] body .vario-list-search-settings-button > .nav-icon:last-child {
    width: var(--vario-size-search-settings-chevron) !important;
    height: var(--vario-size-search-settings-chevron) !important;
    justify-self: end !important;
}

html body .vario-list-search-settings-button:hover:not(:disabled),
html body .vario-list-search-settings-button.is-open,
html[data-vario-theme] body .vario-list-search-settings-button:hover:not(:disabled),
html[data-vario-theme] body .vario-list-search-settings-button.is-open {
    border-color: var(--vario-color-border-field) !important;
    background: color-mix(in srgb, var(--vario-component-search-settings-button-bg) 90%, var(--vario-color-primary-500)) !important;
}

html body .vario-list-search-settings-button:focus-visible,
html[data-vario-theme] body .vario-list-search-settings-button:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: 1px !important;
}

html body .vario-list-search-settings-menu,
html[data-vario-theme] body .vario-list-search-settings-menu {
    position: fixed !important;
    inset: auto;
    z-index: 65250 !important;
    width: min(var(--vario-size-search-settings-menu-width), calc(100vw - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow: auto !important;
    border: 1px solid var(--vario-component-search-settings-menu-border) !important;
    border-radius: var(--vario-radius-xs) !important;
    background: var(--vario-component-search-settings-menu-bg) !important;
    color: var(--vario-color-text-default) !important;
    box-shadow: var(--vario-shadow-menu) !important;
}

html body .vario-list-search-settings-menu button,
html[data-vario-theme] body .vario-list-search-settings-menu button {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: var(--vario-size-search-settings-menu-item-height) !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: inherit !important;
    font: 600 11px/16px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body .vario-list-search-settings-menu button:hover:not(:disabled),
html body .vario-list-search-settings-menu button:focus-visible,
html[data-vario-theme] body .vario-list-search-settings-menu button:hover:not(:disabled),
html[data-vario-theme] body .vario-list-search-settings-menu button:focus-visible {
    background: var(--vario-component-search-settings-menu-hover-bg) !important;
    color: var(--vario-color-primary-600) !important;
    outline: none !important;
}

html body .vario-list-search-settings-menu .nav-icon,
html[data-vario-theme] body .vario-list-search-settings-menu .nav-icon {
    width: 14px !important;
    height: 14px !important;
}

html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    height: auto !important;
}

html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: var(--vario-radius-xs) !important;
    background: transparent !important;
    color: var(--vario-color-text-muted) !important;
    font: var(--vario-font-tab) !important;
    text-align: left !important;
}

/* The historical horizontal tab separator becomes a stray vertical mark when
   the same tabs are composed as the shared vertical search rail. */
html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button::before,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button::before {
    display: none !important;
    content: none !important;
}

html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button .nav-icon,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button .nav-icon {
    flex: 0 0 14px !important;
    width: 13px !important;
    height: 13px !important;
    opacity: 0.72 !important;
}

html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button.active,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-tabs button.active {
    border-color: var(--vario-color-border-field) !important;
    background: var(--vario-color-info-50) !important;
    color: var(--vario-list-accent) !important;
}

html .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-grid,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-grid,
html .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-grid,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
    grid-auto-rows: 39px !important;
    align-content: start !important;
    gap: 5px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 8px 10px !important;
    overflow: auto !important;
    background: var(--vario-color-surface-card) !important;
    box-sizing: border-box !important;
}

html .vario-list-bottom-panel-body.is-search .vario-list-search-panel-grid > label.span-2,
html[data-vario-theme] .vario-list-bottom-panel-body.is-search .vario-list-search-panel-grid > label.span-2 {
    grid-column: span 2 !important;
}

html .vario-list-bottom-panel-body.is-preview .vario-sales-preview-card,
html[data-vario-theme] .vario-list-bottom-panel-body.is-preview .vario-sales-preview-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 28px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html .vario-list-bottom-panel-body.is-preview .vario-sales-preview-tabs,
html[data-vario-theme] .vario-list-bottom-panel-body.is-preview .vario-sales-preview-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

html .vario-list-bottom-panel-body.is-preview .vario-sales-preview-content,
html[data-vario-theme] .vario-list-bottom-panel-body.is-preview .vario-sales-preview-content {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"][data-vario-preview-has-summary="false"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"][data-vario-preview-has-summary="false"] {
    display: grid !important;
    grid-template-columns: var(--vario-list-preview-rail-width, var(--vario-size-list-preview-rail-width)) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"] {
    display: grid !important;
    grid-template-columns: var(--vario-list-preview-rail-width, var(--vario-size-list-preview-rail-width)) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"],
html .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"] > [data-vario-component-part="tabs"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"] > [data-vario-component-part="tabs"] {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-content: initial !important;
    gap: var(--vario-size-list-preview-nav-gap) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-muted) !important;
    box-sizing: border-box !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button {
    position: relative !important;
    display: flex !important;
    flex: 0 0 var(--vario-size-list-preview-nav-item-height) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: var(--vario-size-list-preview-nav-item-height) !important;
    min-height: var(--vario-size-list-preview-nav-item-height) !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: var(--vario-radius-xs) !important;
    background: transparent !important;
    color: var(--vario-color-text-muted) !important;
    font: 650 11px/15px Inter, "Segoe UI", Arial, sans-serif !important;
    text-align: left !important;
    white-space: nowrap !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button::after,
html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button + button::before,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button::after,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button + button::before {
    display: none !important;
    content: none !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button:hover,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button:hover {
    background: var(--vario-color-surface-selected) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button.active,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button.active {
    border-color: var(--vario-color-border-field) !important;
    background: var(--vario-color-info-50) !important;
    color: var(--vario-list-accent) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button .nav-icon,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button .nav-icon {
    flex: 0 0 13px !important;
    width: 13px !important;
    height: 13px !important;
    opacity: 0.76 !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button > span,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="body"],
html .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"] > [data-vario-component-part="body"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="body"],
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="details"] > [data-vario-component-part="body"] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 9px 0 !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section {
    display: block !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-right: 1px solid var(--vario-list-border-subtle) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section:last-child,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section:last-child {
    border-right: 0 !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section h3,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section h3 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 0 7px !important;
    color: var(--vario-color-text-heading) !important;
    font: 700 11px/15px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section h3 .nav-icon,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section h3 .nav-icon {
    flex: 0 0 13px !important;
    width: 13px !important;
    height: 13px !important;
    color: var(--vario-color-text-muted) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dl,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dl {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dl > div,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dl > div {
    display: grid !important;
    grid-template-columns: minmax(83px, 0.8fr) minmax(0, 1.2fr) !important;
    align-items: start !important;
    gap: 8px !important;
    min-height: 21px !important;
    padding: 2px 0 !important;
    font-size: 11px !important;
    line-height: 16px !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dt,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dt {
    color: var(--vario-color-text-muted) !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dd,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section dd {
    margin: 0 !important;
    color: var(--vario-color-text-strong) !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-emphasis,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-emphasis {
    margin: 0 0 7px !important;
    color: var(--vario-color-text-strong) !important;
    font: 700 12px/17px Inter, "Segoe UI", Arial, sans-serif !important;
    overflow-wrap: anywhere !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dd,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dd {
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dd.total,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dd.total {
    color: var(--vario-list-accent) !important;
    font-weight: 750 !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dl > div:nth-last-child(2),
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-financial dl > div:nth-last-child(2) {
    margin-top: 2px !important;
    padding-top: 5px !important;
    border-top: 1px solid var(--vario-list-border-subtle) !important;
}

html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-detail-section,
html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-detail-section {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 9px 14px !important;
    border: 0 !important;
}

/*
 * Integration lock for document registers. The historical register contract has
 * more-specific horizontal preview rules, so the explicit left-navigation opt-in
 * must win inside the shared bottom-panel host without changing legacy previews.
 */
html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"][data-vario-preview-has-summary="false"],
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"][data-vario-preview-has-summary="false"] {
    display: grid !important;
    grid-template-columns: var(--vario-list-preview-rail-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    max-height: none !important;
}

html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"],
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 6px !important;
}

html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button,
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button,
html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button:first-child,
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button:first-child {
    flex: 0 0 var(--vario-size-list-preview-nav-item-height) !important;
    width: 100% !important;
    height: var(--vario-size-list-preview-nav-item-height) !important;
    min-height: var(--vario-size-list-preview-nav-item-height) !important;
    max-height: var(--vario-size-list-preview-nav-item-height) !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: var(--vario-radius-xs) !important;
    line-height: 15px !important;
}

html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button.active,
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="tabs"] > button.active {
    border-color: var(--vario-color-border-field) !important;
    border-bottom-color: var(--vario-color-border-field) !important;
    background: var(--vario-color-info-50) !important;
    color: var(--vario-list-accent) !important;
}

html body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="body"],
html[data-vario-theme] body .vario-list-bottom-panel-body.is-preview > .vario-list-preview-pane[data-vario-preview-navigation="left"] > [data-vario-component-part="body"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html .vario-list-bottom-panel-empty,
html[data-vario-theme] .vario-list-bottom-panel-empty {
    display: grid !important;
    place-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    color: var(--vario-color-text-muted) !important;
    font: var(--vario-font-field-value) !important;
}

html .vario-list-bottom-panel-footer,
html[data-vario-theme] .vario-list-bottom-panel-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    border-top: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
}

html .vario-list-bottom-panel-selection,
html[data-vario-theme] .vario-list-bottom-panel-selection {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--vario-color-text-muted) !important;
    font: var(--vario-font-field-value-compact) !important;
    white-space: nowrap !important;
}

html .vario-list-bottom-panel-selection::before,
html[data-vario-theme] .vario-list-bottom-panel-selection::before {
    content: "" !important;
    flex: 0 0 3px !important;
    align-self: stretch !important;
    margin: 6px 0 !important;
    border-radius: 2px !important;
    background: var(--vario-list-accent) !important;
}

html .vario-list-bottom-panel-selection strong,
html[data-vario-theme] .vario-list-bottom-panel-selection strong {
    overflow: hidden !important;
    color: var(--vario-color-text-strong) !important;
    text-overflow: ellipsis !important;
}

html .vario-list-bottom-panel-open,
html[data-vario-theme] .vario-list-bottom-panel-open {
    flex: 0 0 auto !important;
    height: var(--vario-size-button-compact-height) !important;
    border-color: var(--vario-color-border-field) !important;
    background: var(--vario-color-surface-card) !important;
    background-image: none !important;
    color: var(--vario-color-text-strong) !important;
    box-shadow: var(--vario-shadow-button-secondary) !important;
}

@media (hover: hover) {
    html .vario-list-bottom-panel-open:hover:not(:disabled),
    html[data-vario-theme] .vario-list-bottom-panel-open:hover:not(:disabled) {
        border-color: var(--vario-color-focus-ring) !important;
        background: var(--vario-color-surface-selected) !important;
        color: var(--vario-color-primary-600) !important;
    }
}

html .vario-list-standard[data-vario-layout-mode="bottom-panel"].is-directory-resizing,
html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"].is-directory-resizing {
    user-select: none !important;
}

@media (max-width: 1450px) {
    html body .vario-list-standard.vario-document-register-shell[data-vario-list-kind="document-register"][data-vario-layout-mode="bottom-panel"],
    html[data-vario-theme] body .vario-list-standard.vario-document-register-shell[data-vario-list-kind="document-register"][data-vario-layout-mode="bottom-panel"] {
        --vario-list-bottom-panel-filter-rail-width: var(--vario-size-list-bottom-panel-filter-rail-compact-width);
        --vario-list-preview-rail-width: var(--vario-size-list-preview-rail-compact-width);
    }

    html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-grid,
    html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-panel-grid,
    html .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-grid,
    html[data-vario-theme] .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-body.is-search > .vario-list-search-form > .vario-list-search-panel-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    }
}

@media (max-width: 1150px) {
    html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid,
    html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 14px !important;
    }

    html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section:nth-child(2n),
    html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section:nth-child(2n) {
        border-right: 0 !important;
    }
}

/*
 * Shared filter-field configuration dialog. It deliberately owns semantic
 * classes instead of inheriting the historical Sales-only popover palette.
 */
html .vario-search-filter-config-backdrop,
html[data-vario-theme] .vario-search-filter-config-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--vario-layer-filter-config-backdrop) !important;
    background: transparent !important;
}

html .vario-search-filter-config-dialog,
html[data-vario-theme] .vario-search-filter-config-dialog {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: var(--vario-layer-filter-config-dialog) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: min(600px, calc(100dvw - 16px)) !important;
    max-height: calc(100dvh - 112px) !important;
    overflow: hidden !important;
    padding: 10px !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: var(--vario-radius-lg) !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-default) !important;
    box-shadow: var(--vario-menu-shadow, var(--vario-shadow-popover)) !important;
}

html .vario-search-filter-config-dialog > header,
html[data-vario-theme] .vario-search-filter-config-dialog > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

html .vario-search-filter-config-dialog > header > div,
html[data-vario-theme] .vario-search-filter-config-dialog > header > div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html .vario-search-filter-config-dialog > header strong,
html[data-vario-theme] .vario-search-filter-config-dialog > header strong {
    color: var(--vario-color-text-strong) !important;
    font: 900 12px/15px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-search-filter-config-dialog > header span,
html[data-vario-theme] .vario-search-filter-config-dialog > header span {
    color: var(--vario-color-text-muted) !important;
    font: 700 10.5px/14px Inter, "Segoe UI", Arial, sans-serif !important;
    white-space: normal !important;
}

html .vario-search-filter-config-fields,
html[data-vario-theme] .vario-search-filter-config-fields {
    display: grid !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
}

html .vario-search-filter-config-field,
html[data-vario-theme] .vario-search-filter-config-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 8px !important;
    border: 1px solid var(--vario-color-border-soft) !important;
    border-radius: var(--vario-radius-md) !important;
    background: var(--vario-color-surface-subtle) !important;
}

html .vario-search-filter-config-field > div:first-child,
html[data-vario-theme] .vario-search-filter-config-field > div:first-child {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
}

html .vario-search-filter-config-field strong,
html[data-vario-theme] .vario-search-filter-config-field strong {
    overflow: hidden !important;
    color: var(--vario-color-text-strong) !important;
    font: 900 11px/14px Inter, "Segoe UI", Arial, sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .vario-search-filter-config-field span,
html[data-vario-theme] .vario-search-filter-config-field span {
    overflow: hidden !important;
    color: var(--vario-color-text-muted) !important;
    font: 700 10px/13px Inter, "Segoe UI", Arial, sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .vario-search-filter-config-field-actions,
html[data-vario-theme] .vario-search-filter-config-field-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr 0.9fr !important;
    gap: 5px !important;
}

html .vario-search-filter-config-field-actions.is-complex,
html[data-vario-theme] .vario-search-filter-config-field-actions.is-complex {
    grid-template-columns: minmax(88px, 112px) !important;
    justify-content: end !important;
}

html .vario-search-filter-config-field-actions.is-complex > button,
html[data-vario-theme] .vario-search-filter-config-field-actions.is-complex > button {
    width: 100% !important;
}

html .vario-search-filter-config-field-actions > button,
html[data-vario-theme] .vario-search-filter-config-field-actions > button {
    height: 24px !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: var(--vario-radius-xs) !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-muted) !important;
    font: 900 10px/20px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-search-filter-config-field-actions > button.active,
html[data-vario-theme] .vario-search-filter-config-field-actions > button.active {
    border-color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    color: var(--vario-color-primary-600) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vario-color-primary-600) 12%, transparent) !important;
}

html .vario-search-filter-config-field-actions > button:nth-child(3).active,
html[data-vario-theme] .vario-search-filter-config-field-actions > button:nth-child(3).active {
    border-color: var(--vario-status-danger-border) !important;
    background: var(--vario-status-danger-bg) !important;
    color: var(--vario-status-danger-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vario-status-danger-text) 10%, transparent) !important;
}

html .vario-search-filter-config-dialog > footer,
html[data-vario-theme] .vario-search-filter-config-dialog > footer {
    display: grid !important;
    grid-template-columns: max-content 1fr max-content max-content !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--vario-color-border-subtle) !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-search-filter-config-footer-spacer,
html[data-vario-theme] .vario-search-filter-config-footer-spacer {
    min-width: 12px !important;
}

html .vario-search-filter-config-dialog > footer button,
html[data-vario-theme] .vario-search-filter-config-dialog > footer button {
    height: var(--vario-size-button-compact-height) !important;
    padding: 0 10px !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: var(--vario-radius-sm) !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-muted) !important;
    font: 800 10.5px/24px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-search-filter-config-dialog > footer button.primary,
html[data-vario-theme] .vario-search-filter-config-dialog > footer button.primary {
    border-color: var(--vario-component-primary-action-border) !important;
    background: var(--vario-component-primary-action-bg) !important;
    color: var(--vario-color-text-on-primary) !important;
}

html .vario-search-filter-config-dialog > footer button.danger,
html[data-vario-theme] .vario-search-filter-config-dialog > footer button.danger {
    border-color: var(--vario-status-danger-border) !important;
    background: var(--vario-status-danger-bg) !important;
    color: var(--vario-status-danger-text) !important;
}

html .vario-search-filter-config-dialog > footer button:disabled,
html[data-vario-theme] .vario-search-filter-config-dialog > footer button:disabled {
    cursor: not-allowed !important;
    opacity: 0.52 !important;
    box-shadow: none !important;
}

@media (max-width: 720px) {
    html .vario-search-filter-config-dialog,
    html[data-vario-theme] .vario-search-filter-config-dialog {
        max-height: calc(100dvh - 24px) !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    html .vario-search-filter-config-field,
    html[data-vario-theme] .vario-search-filter-config-field {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    html .vario-search-filter-config-dialog > footer,
    html[data-vario-theme] .vario-search-filter-config-dialog > footer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    html .vario-search-filter-config-footer-spacer,
    html[data-vario-theme] .vario-search-filter-config-footer-spacer {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 740px) {
    html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid,
    html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section,
    html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section {
        padding: 0 10px !important;
        border-right: 0 !important;
    }
}

/*
 * Register workspace v2 — approved layout 4: title and tabs share one row,
 * search and preview remain visible together. This contract is selected by the
 * shared shell whenever a real register supplies both fragments. Lookup-only
 * dialogs keep their independent bottom-panel contract.
 */
.vario-warehouse-page:has(.vario-warehouse-location-register) {
    --vario-size-register-bottom-panel-height: 254px;
    --vario-size-register-bottom-panel-min-height: 210px;
    --vario-size-register-bottom-panel-max-height: min(360px, 48dvh);
    --vario-size-register-panel-stacked-min-height: min(340px, 54dvh);
    --vario-directory-bottom-panel-height: 254px;
    --vario-directory-bottom-panel-min-height: 210px;
    --vario-directory-bottom-panel-max-height: min(360px, 48dvh);
    --vario-directory-bottom-panel-reserved-height: 300px;
}

html body .vario-list-standard[data-vario-layout-mode="bottom-panel"]:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]),
html[data-vario-theme] body .vario-list-standard[data-vario-layout-mode="bottom-panel"]:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]) {
    --vario-directory-bottom-panel-height: var(--vario-size-register-bottom-panel-height);
    --vario-directory-bottom-panel-min-height: var(--vario-size-register-bottom-panel-min-height);
    --vario-directory-bottom-panel-max-height: var(--vario-size-register-bottom-panel-max-height);
    --vario-directory-search-panel-percent: var(--vario-ratio-register-search-panel);
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] {
    display: grid !important;
    grid-template-columns: minmax(0, var(--vario-directory-search-panel-percent)) var(--vario-size-list-bottom-panel-separator-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="search-only"],
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="preview-only"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="search-only"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="preview-only"] {
    grid-template-columns: minmax(0, 1fr) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-pane,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-pane {
    position: relative !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: var(--vario-size-register-panel-header-height) minmax(0, 1fr) var(--vario-size-register-panel-footer-height) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-list-border-soft) !important;
    border-radius: var(--vario-radius-md) !important;
    background: var(--vario-color-surface-card) !important;
    box-shadow: var(--vario-shadow-panel-compact) !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-search-pane,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-search-pane {
    container-name: vario-list-search-pane !important;
    container-type: inline-size !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-pane::before,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-pane::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 0 !important;
    height: var(--vario-size-register-panel-header-height) !important;
    border-bottom: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
    pointer-events: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: var(--vario-size-register-panel-header-height) !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border-right: 1px solid var(--vario-list-border-soft) !important;
    background: transparent !important;
    color: var(--vario-color-text-heading) !important;
    white-space: nowrap !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading strong,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading strong {
    font: 750 11px/16px var(--vario-font-family-ui) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-icon {
    display: grid !important;
    place-items: center !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--vario-list-accent) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-icon .nav-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-icon .nav-icon {
    width: 15px !important;
    height: 15px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-content,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-content > .vario-list-search-form,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-ui-catalog-render-host,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-content .vario-list-search-panel-root,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-content,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-content > .vario-list-search-form,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-ui-catalog-render-host,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-content .vario-list-search-panel-root {
    display: contents !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs-row,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs-row {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    height: var(--vario-size-register-panel-header-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: var(--vario-size-register-panel-header-height) !important;
    padding: 0 var(--vario-size-register-panel-settings-edge-gap) 0 8px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs,
#vario-app-root[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-register-panel-tab-height) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-root > .vario-list-search-panel-tabs,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-root > .vario-list-search-panel-tabs,
#vario-app-root[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-root > .vario-list-search-panel-tabs {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    padding: 0 var(--vario-size-register-panel-settings-slot-width) 0 8px !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-root > .vario-list-search-settings-slot.is-standalone,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-root > .vario-list-search-settings-slot.is-standalone {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    margin-right: var(--vario-size-register-panel-settings-edge-gap) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--vario-size-document-window-tab-content-gap) !important;
    width: auto !important;
    min-width: max-content !important;
    height: var(--vario-size-register-panel-tab-height) !important;
    min-height: var(--vario-size-register-panel-tab-height) !important;
    max-height: var(--vario-size-register-panel-tab-height) !important;
    margin: 0 !important;
    padding: 0 var(--vario-size-document-window-tab-padding-right) !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-component-document-window-tab-border) !important;
    border-radius: var(--vario-size-document-window-tab-radius) !important;
    background: var(--vario-component-document-window-tab-bg) !important;
    color: var(--vario-component-document-window-tab-text) !important;
    box-shadow: var(--vario-component-icon-tab-shadow) !important;
    box-sizing: border-box !important;
    font: 600 11px/16px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        filter var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:has(> .nav-icon),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:has(> .nav-icon) {
    padding: 0 var(--vario-size-document-window-tab-padding-right) 0 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button::before,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button::after,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button::before,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button::after {
    display: none !important;
    content: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button > .nav-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button > .nav-icon {
    display: block !important;
    flex: 0 0 var(--vario-size-document-window-tab-icon-width) !important;
    width: var(--vario-size-document-window-tab-icon-width) !important;
    min-width: var(--vario-size-document-window-tab-icon-width) !important;
    height: var(--vario-size-register-panel-tab-icon-height) !important;
    margin: 0 !important;
    padding: 3px 6px 4px !important;
    border: 0 !important;
    border-right: 1px solid var(--vario-component-document-window-tab-border) !important;
    border-radius: calc(var(--vario-size-document-window-tab-radius) - 1px) 0 0 calc(var(--vario-size-document-window-tab-radius) - 1px) !important;
    background: var(--vario-component-document-window-tab-icon-bg) !important;
    color: currentColor !important;
    stroke-width: 2.3 !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button > span,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button > span {
    display: block !important;
    min-width: 0 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button.active,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button.active {
    border-color: var(--vario-component-document-window-tab-active-border) !important;
    background: var(--vario-component-document-window-tab-active-bg) !important;
    color: var(--vario-component-document-window-tab-active-text) !important;
    box-shadow: var(--vario-component-icon-tab-active-shadow) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button.active > .nav-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button.active > .nav-icon {
    border-right-color: var(--vario-component-document-window-tab-active-icon-bg) !important;
    background: var(--vario-component-document-window-tab-active-icon-bg) !important;
    color: var(--vario-color-text-on-primary) !important;
}

@media (hover: hover) {
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:not(:disabled):hover,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-tab-appearance="icon-field"] .vario-list-bottom-panel-pane :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:not(:disabled):hover {
        border-color: var(--vario-component-document-window-tab-active-border) !important;
        filter: var(--vario-filter-button-hover) !important;
        box-shadow: var(--vario-shadow-button-hover) !important;
    }
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-slot,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-slot {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    height: var(--vario-size-register-panel-header-height) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 var(--vario-size-register-panel-settings-edge-gap) !important;
    border-left: 1px solid var(--vario-list-border-soft) !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-separator,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-separator {
    display: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button {
    display: grid !important;
    place-items: center !important;
    grid-template-columns: 1fr !important;
    flex: 0 0 var(--vario-size-register-panel-settings) !important;
    width: var(--vario-size-register-panel-settings) !important;
    height: var(--vario-size-register-panel-settings) !important;
    min-height: var(--vario-size-register-panel-settings) !important;
    padding: 0 !important;
    border-radius: var(--vario-radius-sm) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > span,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > .nav-icon:last-child,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > span,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > .nav-icon:last-child {
    display: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > .nav-icon:first-child,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-settings-button > .nav-icon:first-child {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    background: var(--vario-color-surface-card) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: var(--vario-size-register-panel-field-row-gap) var(--vario-size-register-panel-field-column-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    padding: var(--vario-size-register-panel-content-padding) !important;
    overflow: visible !important;
    background: var(--vario-color-surface-card) !important;
    box-sizing: border-box !important;
}

/* Legacy directory width classes used six-column spans. Inside the shared
   two-column bottom panel those spans created implicit columns outside the
   viewport. Keep ordinary controls in one column; explicit span-2 fields
   below remain full-width. */
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field):not(.span-2),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field):not(.span-2),
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-check, .vario-search-check),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-check, .vario-search-check) {
    grid-column: auto !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > label.span-2,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > label.span-2 {
    grid-column: 1 / -1 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-tabs-actions,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-tabs-actions {
    position: absolute !important;
    right: 8px !important;
    bottom: 5px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-footer,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-footer {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--vario-size-register-panel-footer-height) !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border-top: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-metric,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-metric {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--vario-color-text-muted) !important;
    font: 600 10.5px/15px var(--vario-font-family-ui) !important;
    white-space: nowrap !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-metric > * + *::before,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-metric > * + *::before {
    content: "·" !important;
    margin-right: 8px !important;
    color: var(--vario-color-border-field) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions .vario-list-bottom-panel-actions,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions [data-vario-component="VarioListActionBar"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions .vario-list-bottom-panel-actions,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions [data-vario-component="VarioListActionBar"] {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    height: 26px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* The search footer has a reserved middle slot for functional filters shared
   by document-line lookups.  Keep the summary left and actions right while
   the scope selector remains centred independently of both. */
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center) .vario-list-bottom-panel-search-metric,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center) .vario-list-bottom-panel-search-metric {
    grid-column: 1 !important;
    justify-self: start !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-center,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-center {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center) .vario-list-bottom-panel-search-actions,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-footer:has(> .vario-list-bottom-panel-search-center) .vario-list-bottom-panel-search-actions {
    grid-column: 3 !important;
    justify-self: end !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter {
    display: inline-grid !important;
    grid-template-columns: 13px auto minmax(132px, 220px) !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--vario-color-text-muted) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-icon {
    display: grid !important;
    width: 13px !important;
    height: 13px !important;
    place-items: center !important;
    color: var(--vario-color-primary-600) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-icon .nav-icon,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-icon .nav-icon {
    width: 13px !important;
    height: 13px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-label,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter-label {
    overflow: hidden !important;
    color: var(--vario-color-text-muted) !important;
    font: 800 10px/14px var(--vario-font-family-ui) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter .form-select,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-lookup-warehouse-filter .form-select {
    width: 100% !important;
    min-width: 0 !important;
}

html .vario-list-split-bottom-panel,
html[data-vario-theme] .vario-list-split-bottom-panel {
    --vario-list-split-search-width: 1.12fr;
    --vario-list-split-preview-width: 1fr;
    display: grid !important;
    grid-template-columns: minmax(0, var(--vario-list-split-search-width)) minmax(0, var(--vario-list-split-preview-width)) !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html .vario-list-split-bottom-panel-section,
html[data-vario-theme] .vario-list-split-bottom-panel-section {
    display: grid !important;
    grid-template-rows: var(--vario-size-list-bottom-panel-tabs-height) minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-list-border-soft) !important;
    border-radius: var(--vario-radius-md) !important;
    background: var(--vario-color-surface-card) !important;
    box-shadow: var(--vario-shadow-panel-compact) !important;
}

html .vario-list-split-bottom-panel-section > header,
html[data-vario-theme] .vario-list-split-bottom-panel-section > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border-bottom: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
}

.vario-list-split-bottom-panel-title,
.vario-list-split-bottom-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

html body .vario-list-split-bottom-panel-actions .vario-list-filter-actions,
html[data-vario-theme] body .vario-list-split-bottom-panel-actions .vario-list-filter-actions {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    grid-template: none !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-button-compact-height) !important;
    padding: 0 !important;
    overflow: visible !important;
}

.vario-list-split-bottom-panel-title { color: var(--vario-color-text-strong); font: var(--vario-font-tab); }
.vario-list-split-bottom-panel-title .nav-icon { width: 13px; height: 13px; }
.vario-list-split-bottom-panel-content { min-width: 0; min-height: 0; overflow: auto; }
.vario-list-split-bottom-panel-section > footer {
    min-height: var(--vario-size-list-bottom-panel-metric-height);
    border-top: 1px solid var(--vario-list-border-soft);
    background: var(--vario-color-surface-subtle);
}

@media (max-width: 760px) {
    html .vario-list-split-bottom-panel,
    html[data-vario-theme] .vario-list-split-bottom-panel {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr) !important;
        overflow: auto !important;
    }
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions button,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-tabs-actions button,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-search-actions button,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-tabs-actions button {
    height: 26px !important;
    min-height: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    width: var(--vario-size-list-bottom-panel-separator-width) !important;
    min-width: var(--vario-size-list-bottom-panel-separator-width) !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: ew-resize !important;
    touch-action: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter::before,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 3px !important;
    background: var(--vario-list-border-subtle) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter > span,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter > span {
    position: relative !important;
    z-index: 1 !important;
    width: 3px !important;
    height: 36px !important;
    border-radius: 2px !important;
    background: var(--vario-color-border-field) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter:focus-visible,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-splitter:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: -1px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-content .vario-list-preview-pane,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-content .vario-list-preview-pane {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-pane .vario-list-preview-tabs,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-pane .vario-list-preview-tabs {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: var(--vario-size-register-panel-header-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: var(--vario-size-register-panel-header-height) !important;
    padding: var(--vario-size-register-panel-tab-edge-gap) 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    background: transparent !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs)::-webkit-scrollbar,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs)::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:focus-visible,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: -2px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-viewport,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-viewport {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* The legacy document preview class still defines a 28px tab row. In v2
       tabs live in the shared panel header, so the viewport has one content
       row and must give it all available height. */
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--vario-color-surface-card) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-pane[data-vario-preview-has-summary="true"] > .vario-list-preview-viewport,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-pane[data-vario-preview-has-summary="true"] > .vario-list-preview-viewport {
    grid-template-columns: minmax(150px, 33%) minmax(0, 1fr) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-summary,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-summary {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    border-right: 1px solid var(--vario-list-border-subtle) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-body,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: var(--vario-size-register-panel-content-padding) !important;
    overflow: auto !important;
    background: var(--vario-color-surface-card) !important;
    box-sizing: border-box !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-empty,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-content > [data-vario-component="VarioDocumentEmptyState"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-empty,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-preview-content > [data-vario-component="VarioDocumentEmptyState"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    padding: var(--vario-size-register-panel-content-padding) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: var(--vario-size-register-preview-row-gap) var(--vario-size-register-preview-column-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section:nth-child(2n),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section:nth-child(2n) {
    padding-left: var(--vario-size-register-preview-column-gap) !important;
    border-left: 1px solid var(--vario-list-border-subtle) !important;
}

html body.vario-directory-resizing-horizontal *,
html[data-vario-theme] body.vario-directory-resizing-horizontal * {
    cursor: ew-resize !important;
}

html body.vario-directory-resizing-vertical *,
html[data-vario-theme] body.vario-directory-resizing-vertical * {
    cursor: ns-resize !important;
}

html .vario-list-bottom-panel-resizer,
html .vario-list-bottom-panel-splitter,
html[data-vario-theme] .vario-list-bottom-panel-resizer,
html[data-vario-theme] .vario-list-bottom-panel-splitter {
    touch-action: none !important;
}

html .vario-list-bottom-panel-resizer:focus-visible,
html[data-vario-theme] .vario-list-bottom-panel-resizer:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: -2px !important;
}

/* A user can narrow the search pane independently of the browser viewport.
   Keep both 24 px tabs available without changing their typography. */
@container vario-list-search-pane (max-width: 384px) {
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-search-pane > .vario-list-bottom-panel-pane-heading > strong,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-search-pane > .vario-list-bottom-panel-pane-heading > strong {
        display: none !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field, .vario-list-search-check, .vario-search-check),
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field, .vario-list-search-check, .vario-search-check) {
        grid-column: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(140px, 1fr) minmax(180px, 1.2fr) !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-search-pane,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-search-pane {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-preview-pane,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-preview-pane {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-splitter,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-responsive-layout="stacked"] > .vario-list-bottom-panel-splitter {
    display: none !important;
    pointer-events: none !important;
}

@media (max-width: 1150px) {
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]:not([data-vario-responsive-layout="stacked"]),
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]:not([data-vario-responsive-layout="stacked"]) {
        grid-template-columns: minmax(0, var(--vario-directory-search-panel-percent)) var(--vario-size-list-bottom-panel-separator-width) minmax(0, 1fr) !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 18px !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section:nth-child(2n),
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-section:nth-child(2n) {
        padding-left: 0 !important;
        border-left: 0 !important;
    }
}

@media (max-width: 760px) {
    html body .vario-list-standard.vario-list-shell[data-vario-layout-mode="bottom-panel"]:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]),
    html[data-vario-theme] body .vario-list-standard.vario-list-shell[data-vario-layout-mode="bottom-panel"]:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]) {
        grid-template-rows:
            auto
            minmax(265px, 1fr)
            var(--vario-size-list-bottom-panel-separator-height)
            var(--vario-directory-bottom-panel-height) !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-slot:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]),
    html[data-vario-theme] body .vario-list-standard[data-vario-layout-mode="bottom-panel"] .vario-list-bottom-panel-slot:has(.vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]) {
        height: auto !important;
        overflow: visible !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]:not([data-vario-responsive-layout="stacked"]),
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"]:not([data-vario-responsive-layout="stacked"]) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(140px, 1fr) minmax(180px, 1.2fr) !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"] > .vario-list-bottom-panel-search-pane,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"] > .vario-list-bottom-panel-search-pane {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"] > .vario-list-bottom-panel-preview-pane,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"][data-vario-bottom-panel-layout="split"] > .vario-list-bottom-panel-preview-pane {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-splitter,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] > .vario-list-bottom-panel-splitter {
        display: none !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-bottom-panel-pane-heading {
        gap: 0 !important;
        padding: 0 5px !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs-row,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-tabs-row {
        gap: 0 !important;
        padding-right: var(--vario-size-register-panel-settings-edge-gap) !important;
        padding-left: 5px !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-pane[data-vario-preview-has-summary="true"] > .vario-list-preview-viewport,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-pane[data-vario-preview-has-summary="true"] > .vario-list-preview-viewport {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(92px, auto) minmax(0, 1fr) !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-summary,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-preview-summary {
        display: block !important;
        max-height: 150px !important;
        overflow: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--vario-list-border-subtle) !important;
    }

    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > [data-vario-component-part="top-search"] > .vario-list-search-panel-grid,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-list-search-panel-viewport > .vario-list-advanced-search > .vario-list-search-panel-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] *,
    html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}