/* Shared responsive layout and progress state for every VarioListSearchPanel.
   It intentionally loads after historical directory styles so a configured filter
   never becomes a horizontally growing, module-specific strip again. */

:root {
    --vario-list-search-field-min-width: 180px;
    --vario-list-search-field-column-gap: 8px;
    --vario-list-search-field-row-gap: 6px;
    --vario-list-search-field-label-height: 11px;
    --vario-list-search-field-control-height: 25px;
    --vario-list-search-busy-overlay: color-mix(in srgb, var(--vario-color-surface-card) 76%, var(--vario-color-primary-600));
}

/* The form is the containing block because the component root intentionally uses
   display: contents to preserve the established list shell grid contract. */
html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"]),
html[data-vario-theme] body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"]) {
    container-type: inline-size;
    container-name: vario-list-search-panel;
}

html body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-search"],
html body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-search"],
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-search"],
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-search"] {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* Configure fields once: grow to available width, then wrap vertically. */
html body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-fields"].vario-list-search-panel-grid,
html body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-grid"].vario-list-search-panel-grid,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-fields"].vario-list-search-panel-grid,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-grid"].vario-list-search-panel-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-rows: none !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vario-list-search-field-min-width)), 1fr)) !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: var(--vario-list-search-field-row-gap) var(--vario-list-search-field-column-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 12px 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* The v2 lower panel used to hard-code two columns. Keep its composition, but
   delegate its actual field grid to the responsive standard above. */
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="viewport"],
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="viewport"] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-fields"].vario-list-search-panel-grid,
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-grid"].vario-list-search-panel-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="configured-fields"].vario-list-search-panel-grid,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component="VarioListSearchPanel"] [data-vario-component-part="advanced-grid"].vario-list-search-panel-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vario-list-search-field-min-width)), 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: var(--vario-list-search-field-label-height) var(--vario-list-search-field-control-height) !important;
    row-gap: 1px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(var(--vario-list-search-field-label-height) + var(--vario-list-search-field-control-height) + 1px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.wide,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.wide {
    grid-column: span 2 !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.compact,
html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.range,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.compact,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.range {
    grid-column: span 1 !important;
}

html body [data-vario-component="VarioListSearchPanel"] .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 [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field, .vario-list-search-check, .vario-search-check) {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field).wide,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > :is(.vario-list-search-field, .vario-search-field).wide {
    grid-column: span 2 !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-label,
html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .vario-filter-label-row,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-label,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .vario-filter-label-row {
    min-width: 0 !important;
    height: var(--vario-list-search-field-label-height) !important;
    min-height: var(--vario-list-search-field-label-height) !important;
    max-height: var(--vario-list-search-field-label-height) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-control,
html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-select,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-control,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .form-select {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--vario-list-search-field-control-height) !important;
    min-height: var(--vario-list-search-field-control-height) !important;
    max-height: var(--vario-list-search-field-control-height) !important;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .vario-range-field,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid .vario-range-field {
    min-width: 0 !important;
    width: 100% !important;
}

/* Keep checkboxes compact, but let the grid move them to the next row instead of
   creating a horizontal strip. */
html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > label.vario-shared-filter-checkbox,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > label.vario-shared-filter-checkbox {
    align-self: end !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

@container vario-list-search-panel (max-width: 440px) {
    html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.wide,
    html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > .vario-search-field.wide {
        grid-column: span 1 !important;
    }
}

/* Search feedback is centered over the actual search surface. The fields dim
   individually, so the browser scrollbar stays visible and usable. */
html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-vario-searching="true"]),
html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-client-searching="true"]),
html body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]),
html[data-vario-theme] body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-vario-searching="true"]),
html[data-vario-theme] body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-client-searching="true"]),
html[data-vario-theme] body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) {
    position: relative !important;
    isolation: isolate;
}

html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-vario-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-client-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
html body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
html[data-vario-theme] body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-vario-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
html[data-vario-theme] body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-client-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
html[data-vario-theme] body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > * {
    opacity: .46;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

html body [data-vario-component="VarioListSearchPanel"] .vario-list-search-progress,
html[data-vario-theme] body [data-vario-component="VarioListSearchPanel"] .vario-list-search-progress {
    z-index: 15;
    inset-block-start: 50% !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    inset-block-end: auto !important;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 32px);
    white-space: nowrap;
    background: var(--vario-list-search-busy-overlay);
}

html body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-progress,
html[data-vario-theme] body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-progress {
    display: inline-flex !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-vario-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
    html body .vario-list-search-form:has([data-vario-component="VarioListSearchPanel"][data-client-searching="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > *,
    html body .vario-list-search-form:has([data-vario-search-command="true"][aria-busy="true"]) [data-vario-component="VarioListSearchPanel"] .vario-list-search-panel-grid > * {
        transition: none;
    }
}