/* Shared modal host and drag behavior. Dialogs dim the workspace without blurring it. */
.vario-workspace-window-backdrop {
    position: fixed;
    inset: 0 0 0 var(--vario-active-sidebar-width, 232px);
    z-index: 29999;
    background: var(--vario-window-overlay);
    pointer-events: auto;
}

html body .modal[data-vario-workspace-root-window="true"],
html[data-vario-theme] body .modal[data-vario-workspace-root-window="true"],
#vario-app-root[data-vario-theme] body .modal[data-vario-workspace-root-window="true"] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

html body .modal[data-vario-workspace-root-window="true"] > .modal-dialog,
html[data-vario-theme] body .modal[data-vario-workspace-root-window="true"] > .modal-dialog,
#vario-app-root[data-vario-theme] body .modal[data-vario-workspace-root-window="true"] > .modal-dialog {
    pointer-events: auto !important;
}

@media (max-width: 860px) {
    .vario-workspace-window-backdrop {
        left: 0;
    }
}

#vario-app-root[data-vario-theme] body :where(
    .modal.show[role="dialog"],
    .vario-modal-layer,
    .vario-erp-document-details-modal) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#vario-app-root[data-vario-theme] body .modal.show[role="dialog"] > .modal-dialog {
    left: var(--vario-dialog-drag-x, 0px);
    top: var(--vario-dialog-drag-y, 0px);
}

#vario-app-root[data-vario-theme] body .modal.show[role="dialog"] :where(
    [data-vario-component="VarioDocumentDialogHeader"],
    .vario-document-confirmation-header,
    .vario-erp-document-card-header,
    .modal-header) {
    cursor: grab;
}

#vario-app-root[data-vario-theme] body .modal.show[role="dialog"] > .modal-dialog[data-vario-dragging="true"] :where(
    [data-vario-component="VarioDocumentDialogHeader"],
    .vario-document-confirmation-header,
    .vario-erp-document-card-header,
    .modal-header) {
    cursor: grabbing;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    #vario-app-root[data-vario-theme] body .modal.show[role="dialog"] > .modal-dialog {
        transition: none !important;
    }
}

#vario-app-root[data-vario-theme] body .vario-admin-contractor-settings-dialog {
    width: min(520px, calc(100vw - 24px));
    max-width: 520px;
}

#vario-app-root[data-vario-theme] body .vario-admin-contractor-settings-dialog .modal-body {
    display: grid;
    gap: 7px;
    padding: 12px;
}

#vario-app-root[data-vario-theme] body .vario-admin-contractor-settings-dialog .modal-body > label {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--vario-text-muted);
    font: var(--vario-font-form-label);
}

#vario-app-root[data-vario-theme] body .vario-admin-contractor-settings-dialog .modal-body > small {
    color: var(--vario-text-muted);
    font: 500 10px/14px var(--vario-font-family-ui);
}
