/*
 * Source-of-truth geometry for shared VARIO action components.
 * Component metrics live here so a shared action keeps the same shape outside
 * a document footer, in popovers, registers and future modules.
 */

html body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action,
html[data-vario-theme] body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-document-footer-action-height) !important;
    min-height: var(--vario-size-document-footer-action-height) !important;
    max-height: var(--vario-size-document-footer-action-height) !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    border-radius: var(--vario-size-document-footer-action-radius) !important;
    font: 800 11px/26px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

html body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action > span:not(.vario-action-icon),
html[data-vario-theme] body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action > span:not(.vario-action-icon) {
    margin: 0 !important;
    font: inherit !important;
    line-height: 26px !important;
}

html body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action :is(.nav-icon, .vario-action-icon, svg),
html[data-vario-theme] body button[data-vario-component="VarioDocumentFooterAction"].vario-document-footer-action :is(.nav-icon, .vario-action-icon, svg) {
    width: var(--vario-size-document-footer-action-icon) !important;
    height: var(--vario-size-document-footer-action-icon) !important;
    flex: 0 0 var(--vario-size-document-footer-action-icon) !important;
    margin: 0 !important;
}

html body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action,
html[data-vario-theme] body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-size-list-toolbar-action-height) !important;
    min-height: var(--vario-size-list-toolbar-action-height) !important;
    max-height: var(--vario-size-list-toolbar-action-height) !important;
    padding: 0 10px !important;
    border-width: 1px !important;
    border-radius: var(--vario-size-list-toolbar-action-radius) !important;
    font: var(--vario-font-button-compact) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

html body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action > span,
html[data-vario-theme] body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action > span {
    margin: 0 !important;
    font: inherit !important;
    line-height: 24px !important;
}

html body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action .nav-icon,
html[data-vario-theme] body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action .nav-icon {
    width: var(--vario-size-list-toolbar-action-icon) !important;
    height: var(--vario-size-list-toolbar-action-icon) !important;
    flex: 0 0 var(--vario-size-list-toolbar-action-icon) !important;
    margin: 0 !important;
}

html body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action.is-icon-only,
html[data-vario-theme] body button[data-vario-component="VarioListToolbarAction"].vario-list-toolbar-action.is-icon-only {
    width: var(--vario-size-list-toolbar-action-height) !important;
    min-width: var(--vario-size-list-toolbar-action-height) !important;
    padding: 0 !important;
    gap: 0 !important;
}

/*
 * Small actions rendered by shared JavaScript popovers cannot use a Razor
 * component, but they must retain the same neutral VARIO contract instead of
 * inheriting Bootstrap's .btn geometry.  Contexts may raise the height for
 * touch targets through --vario-compact-action-height.
 */
html body button[data-vario-component="VarioCompactAction"].vario-compact-action,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"].vario-compact-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--vario-compact-action-height, var(--vario-size-form-control-height)) !important;
    min-height: var(--vario-compact-action-height, var(--vario-size-form-control-height)) !important;
    max-height: var(--vario-compact-action-height, var(--vario-size-form-control-height)) !important;
    padding: 0 var(--vario-compact-action-padding-x, var(--vario-space-8)) !important;
    box-sizing: border-box !important;
    appearance: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--vario-compact-action-radius, var(--vario-size-form-control-radius)) !important;
    font: var(--vario-compact-action-font, var(--vario-font-button-compact)) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    border-color: var(--vario-border-strong) !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action {
    color: var(--vario-color-text-on-primary) !important;
    background: var(--vario-component-primary-action-bg) !important;
    border-color: var(--vario-component-primary-action-border) !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="danger"].vario-compact-action,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="danger"].vario-compact-action {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    border-color: var(--vario-status-danger-border) !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action:hover:not(:disabled),
html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action:focus-visible,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action:hover:not(:disabled),
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="secondary"].vario-compact-action:focus-visible {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-surface-hover) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:hover:not(:disabled),
html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:focus-visible,
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:hover:not(:disabled),
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:focus-visible {
    color: var(--vario-color-text-on-primary) !important;
    background: var(--vario-component-primary-action-hover-bg) !important;
    border-color: var(--vario-component-primary-action-hover-border) !important;
}

html body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:active:not(:disabled),
html[data-vario-theme] body button[data-vario-component="VarioCompactAction"][data-vario-action-tone="primary"].vario-compact-action:active:not(:disabled) {
    background: var(--vario-component-primary-action-active-bg) !important;
    border-color: var(--vario-component-primary-action-active-border) !important;
}

html body .vario-list-clear-button .nav-icon[data-vario-icon="filter-x"],
html[data-vario-theme] body .vario-list-clear-button .nav-icon[data-vario-icon="filter-x"] {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    stroke-width: 2 !important;
}

.vario-action-progress-spinner,
.vario-search-progress-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    animation: vario-search-progress-spin 720ms linear infinite;
}

.vario-action-progress-spinner .nav-icon,
.vario-search-progress-spinner .nav-icon {
    width: 12px !important;
    height: 12px !important;
}

.vario-list-search-panel-root {
    position: relative;
}

.vario-list-search-progress {
    position: absolute;
    z-index: 8;
    inset-block-start: 34px;
    inset-inline-end: 8px;
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--vario-color-border-soft);
    border-radius: 6px;
    background: var(--vario-color-surface-card);
    color: var(--vario-color-text-strong);
    box-shadow: var(--vario-shadow-button-secondary);
    font: 700 10.5px/22px var(--vario-font-family-ui);
    pointer-events: none;
}

.vario-list-search-progress.is-server-active,
.vario-list-search-progress[data-client-searching="true"] {
    display: inline-flex;
}

@keyframes vario-search-progress-spin {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .vario-action-progress-spinner,
    .vario-search-progress-spinner {
        animation: none;
    }
}

@media (max-width: 620px) {
    .vario-list-search-progress {
        inset-block-start: auto;
        inset-block-end: 6px;
        inset-inline-end: 6px;
    }
}