
/* Shared final contracts: system messages, compact numeric fields and document line editing. */
html body .vario-message-dialog.vario-standard-message-modal,
html[data-vario-theme] body .vario-message-dialog.vario-standard-message-modal {
    /* Above document dialogs and nested lookup/quick-edit layers (up to 65130). */
    z-index: 65200 !important;
    background: rgba(8, 25, 54, 0.34) !important;
}

html body .vario-standard-message-modal .vario-document-confirmation-content,
html[data-vario-theme] body .vario-standard-message-modal .vario-document-confirmation-content {
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #134f8c !important;
}

html body .vario-standard-message-modal .vario-document-confirmation-header,
html[data-vario-theme] body .vario-standard-message-modal .vario-document-confirmation-header {
    border-radius: 9px 9px 0 0 !important;
    background: linear-gradient(180deg, #1760a7 0%, #134f8c 100%) !important;
}

html body .vario-standard-message-modal .vario-document-confirmation-body,
html[data-vario-theme] body .vario-standard-message-modal .vario-document-confirmation-body {
    position: relative !important;
    min-height: 72px !important;
    align-content: center !important;
    padding-left: 24px !important;
    background: var(--vario-modal-body-bg) !important;
    color: var(--vario-text) !important;
}

html body .vario-standard-message-modal .vario-standard-message-text,
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-text {
    white-space: pre-line !important;
}

html body .vario-standard-message-modal .vario-document-confirmation-body::before,
html[data-vario-theme] body .vario-standard-message-modal .vario-document-confirmation-body::before {
    position: absolute !important;
    top: 14px !important;
    bottom: 14px !important;
    left: 12px !important;
    width: 4px !important;
    border-radius: 2px !important;
    background: #2f74d0 !important;
    content: "" !important;
}

html body .vario-standard-message-modal.success .vario-document-confirmation-body::before,
html[data-vario-theme] body .vario-standard-message-modal.success .vario-document-confirmation-body::before {
    background: #22a05a !important;
}

html body .vario-standard-message-modal.warning .vario-document-confirmation-body::before,
html[data-vario-theme] body .vario-standard-message-modal.warning .vario-document-confirmation-body::before {
    background: #f59e0b !important;
}

html body .vario-standard-message-modal.danger .vario-document-confirmation-body::before,
html[data-vario-theme] body .vario-standard-message-modal.danger .vario-document-confirmation-body::before {
    background: #dc2626 !important;
}

html body .vario-standard-message-modal .vario-document-confirmation-footer,
html[data-vario-theme] body .vario-standard-message-modal .vario-document-confirmation-footer {
    border-radius: 0 0 9px 9px !important;
    background: var(--vario-surface-muted) !important;
}

/* Destructive document actions live in Workflow overflow and require a reason. */
html body .vario-workflow-operations-dropdown,
html[data-vario-theme] body .vario-workflow-operations-dropdown {
    position: relative !important;
}

html body .vario-workflow-operations-menu,
html[data-vario-theme] body .vario-workflow-operations-menu {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 6px) !important;
    min-width: 270px !important;
}

html body .vario-document-footer-menu button.vario-document-menu-danger,
html[data-vario-theme] body .vario-document-footer-menu button.vario-document-menu-danger {
    gap: 7px !important;
    color: #b4232b !important;
}

html body .vario-document-footer-menu button.vario-document-menu-danger:hover,
html body .vario-document-footer-menu button.vario-document-menu-danger:focus,
html[data-vario-theme] body .vario-document-footer-menu button.vario-document-menu-danger:hover,
html[data-vario-theme] body .vario-document-footer-menu button.vario-document-menu-danger:focus {
    background: #fff0f1 !important;
    color: #951b24 !important;
}

html body .vario-document-cancel-confirmation-modal,
html[data-vario-theme] body .vario-document-cancel-confirmation-modal {
    z-index: 2320 !important;
    background: rgba(8, 25, 54, 0.34) !important;
}

html body .vario-document-cancel-reason-field,
html[data-vario-theme] body .vario-document-cancel-reason-field {
    display: grid !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

html body .vario-document-cancel-reason-field>span,
html[data-vario-theme] body .vario-document-cancel-reason-field>span {
    color: #405a7d !important;
    font: 800 11px/14px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-cancel-reason-field textarea,
html[data-vario-theme] body .vario-document-cancel-reason-field textarea {
    width: 100% !important;
    min-height: 68px !important;
    resize: vertical !important;
    border: 1px solid #bdcce0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #092654 !important;
    padding: 7px 9px !important;
    font: 600 12px/17px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-lookup-quantity-editor input[type="number"],
html[data-vario-theme] body .vario-document-lookup-quantity-editor input[type="number"] {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

html body .vario-document-lookup-quantity-editor input[type="number"]::-webkit-inner-spin-button,
html body .vario-document-lookup-quantity-editor input[type="number"]::-webkit-outer-spin-button,
html[data-vario-theme] body .vario-document-lookup-quantity-editor input[type="number"]::-webkit-inner-spin-button,
html[data-vario-theme] body .vario-document-lookup-quantity-editor input[type="number"]::-webkit-outer-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}

html body .vario-document-line-editor-modal .vario-erp-document-card-dialog,
html body .vario-compact-form-modal .vario-erp-document-card-dialog,
html[data-vario-theme] body .vario-compact-form-modal .vario-erp-document-card-dialog,
html[data-vario-theme] body .vario-document-line-editor-modal .vario-erp-document-card-dialog {
    width: min(780px, calc(100vw - 32px)) !important;
    max-width: 780px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto !important;
}

html body .vario-document-line-editor-modal,
html body .vario-compact-form-modal,
html[data-vario-theme] body .vario-compact-form-modal,
html[data-vario-theme] body .vario-document-line-editor-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

html body .vario-document-line-editor-modal .vario-erp-document-card-dialog,
html body .vario-compact-form-modal .vario-erp-document-card-dialog,
html[data-vario-theme] body .vario-compact-form-modal .vario-erp-document-card-dialog,
html[data-vario-theme] body .vario-document-line-editor-modal .vario-erp-document-card-dialog {
    margin: 0 !important;
}

html body .vario-document-line-editor-modal .vario-erp-document-card,
html body .vario-compact-form-modal .vario-erp-document-card,
html[data-vario-theme] body .vario-compact-form-modal .vario-erp-document-card,
html[data-vario-theme] body .vario-document-line-editor-modal .vario-erp-document-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 40px) !important;
}

html body .vario-document-line-editor-modal .vario-erp-modal-body,
html body .vario-compact-form-modal .vario-erp-modal-body,
html[data-vario-theme] body .vario-compact-form-modal .vario-erp-modal-body,
html[data-vario-theme] body .vario-document-line-editor-modal .vario-erp-modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

html body .vario-workflow-approve-action,
html[data-vario-theme] body .vario-workflow-approve-action {
    display: inline-flex !important;
    align-items: center !important;
}

html body .vario-compact-form-modal,
html[data-vario-theme] body .vario-compact-form-modal {
    z-index: 23000 !important;
}

html body .vario-compact-form-modal .vario-erp-modal-body,
html[data-vario-theme] body .vario-compact-form-modal .vario-erp-modal-body {
    display: block !important;
}

html body .vario-document-line-pending-change,
html[data-vario-theme] body .vario-document-line-pending-change {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    margin-left: 4px !important;
    border: 1px solid #d69700 !important;
    border-radius: 50% !important;
    background: #ffd866 !important;
    color: #6a4200 !important;
    font: 950 10px/13px Inter, "Segoe UI", Arial, sans-serif !important;
    vertical-align: middle !important;
    cursor: help !important;
}

html body .vario-document-line-pending-change::before,
html[data-vario-theme] body .vario-document-line-pending-change::before {
    content: "!" !important;
}

html body .vario-document-email-delivery-table tbody tr.vario-grid-empty-message-row,
html[data-vario-theme] body .vario-document-email-delivery-table tbody tr.vario-grid-empty-message-row,
html body .vario-document-email-delivery-table tbody tr.vario-grid-empty-message-row td,
html[data-vario-theme] body .vario-document-email-delivery-table tbody tr.vario-grid-empty-message-row td {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    background: #ffffff !important;
    color: #526985 !important;
    font: 800 11px/21px Inter, "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
}

/* Shared interaction contracts: document messages, quick numeric editing and line-table personalization. */
html body .vario-standard-message-modal .vario-erp-document-card-footer,
html[data-vario-theme] body .vario-standard-message-modal .vario-erp-document-card-footer {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    align-items: center !important;
    justify-content: end !important;
    min-height: 44px !important;
    gap: 6px !important;
    padding: 7px 14px 9px !important;
    border-top: 1px solid var(--vario-border) !important;
    background: var(--vario-surface-muted) !important;
}

html body .vario-standard-message-modal .vario-erp-document-card-footer .btn,
html[data-vario-theme] body .vario-standard-message-modal .vario-erp-document-card-footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font: 800 11px/26px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-standard-message-modal .vario-standard-message-copy-button,
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-copy-button {
    border-color: var(--vario-border-strong) !important;
    background: var(--vario-surface) !important;
    color: var(--vario-text) !important;
}

html body .vario-standard-message-modal .vario-standard-message-copy-button:hover,
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-copy-button:hover {
    border-color: var(--vario-color-focus-ring) !important;
    background: var(--vario-surface-hover) !important;
    color: var(--vario-color-primary-600) !important;
}

html body .vario-standard-message-modal .vario-standard-message-copy-button[data-vario-copy-state="success"],
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-copy-button[data-vario-copy-state="success"] {
    border-color: var(--vario-status-success-border) !important;
    background: var(--vario-status-success-bg) !important;
    color: var(--vario-status-success-text) !important;
}

html body .vario-standard-message-modal .vario-standard-message-copy-button[data-vario-copy-state="error"],
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-copy-button[data-vario-copy-state="error"] {
    border-color: var(--vario-status-danger-border) !important;
    background: var(--vario-status-danger-bg) !important;
    color: var(--vario-status-danger-text) !important;
}

html body .vario-standard-message-modal .vario-standard-message-confirm-button,
html[data-vario-theme] body .vario-standard-message-modal .vario-standard-message-confirm-button {
    border-color: #075fda !important;
    background: #0b6cff !important;
    color: #ffffff !important;
}

html body .vario-document-lookup-quantity-editor,
html[data-vario-theme] body .vario-document-lookup-quantity-editor {
    grid-template-columns: 24px minmax(65px, 1fr) 24px 30px !important;
    column-gap: 0 !important;
    width: 164px !important;
}

html body .vario-document-lookup-quantity-editor>button:first-child,
html[data-vario-theme] body .vario-document-lookup-quantity-editor>button:first-child {
    border-radius: 4px 0 0 4px !important;
}

html body .vario-document-lookup-quantity-editor>input,
html[data-vario-theme] body .vario-document-lookup-quantity-editor>input {
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    border-radius: 0 !important;
}

html body .vario-document-lookup-quantity-editor>button:nth-of-type(2),
html[data-vario-theme] body .vario-document-lookup-quantity-editor>button:nth-of-type(2) {
    border-radius: 0 4px 4px 0 !important;
}

html body .vario-document-lookup-quantity-editor>button.confirm,
html[data-vario-theme] body .vario-document-lookup-quantity-editor>button.confirm {
    width: calc(100% - 3px) !important;
    margin-left: 3px !important;
    border-radius: 4px !important;
}

html body .vario-document-line-pending-change,
html[data-vario-theme] body .vario-document-line-pending-change {
    align-items: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #d89500 !important;
    clip-path: none !important;
    vertical-align: -3px !important;
}

html body .vario-document-line-pending-change::before,
html[data-vario-theme] body .vario-document-line-pending-change::before {
    content: none !important;
}

html body .vario-document-line-pending-change .nav-icon,
html[data-vario-theme] body .vario-document-line-pending-change .nav-icon {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.15 !important;
    overflow: visible !important;
}

html body .vario-column-hidden,
html[data-vario-theme] body .vario-column-hidden {
    display: none !important;
}

html body .vario-erp-document-details-modal .vario-document-line-quick-edit-cell,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-cell {
    padding: 1px 3px !important;
}

html body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 1px solid #b8cbe4 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: #08224f !important;
    font: 800 10.5px/18px Inter, "Segoe UI", Arial, sans-serif !important;
    line-height: 18px !important;
    text-align: right !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):hover,
html body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):focus-visible,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):hover,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):focus-visible {
    border-color: #8eb3e3 !important;
    background: #edf5ff !important;
    color: #075fda !important;
}

html body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):active,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:not(:disabled):active {
    border-color: #5f91d0 !important;
    background: #dcecff !important;
}

html body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:disabled,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-line-quick-edit-trigger:disabled {
    border-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    opacity: 1 !important;
    cursor: default !important;
}

html body .vario-document-line-quick-editor,
html[data-vario-theme] body .vario-document-line-quick-editor {
    z-index: 65130 !important;
}

html body .vario-column-chooser-modal,
html[data-vario-theme] body .vario-column-chooser-modal {
    z-index: 65120 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

html body .vario-column-chooser-modal .vario-erp-document-card-dialog,
html[data-vario-theme] body .vario-column-chooser-modal .vario-erp-document-card-dialog {
    width: min(470px, calc(100vw - 32px)) !important;
    max-width: 470px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

html body .vario-column-chooser-modal .vario-erp-document-card,
html[data-vario-theme] body .vario-column-chooser-modal .vario-erp-document-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(520px, calc(100dvh - 32px)) !important;
}

html body .vario-column-chooser-modal .vario-column-chooser-body,
html[data-vario-theme] body .vario-column-chooser-modal .vario-column-chooser-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: 326px !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
}

html body .vario-column-chooser-modal .vario-column-chooser-grid,
html[data-vario-theme] body .vario-column-chooser-modal .vario-column-chooser-grid {
    display: grid !important;
    align-content: start !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 12px !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html body .vario-column-chooser-modal .vario-column-chooser-row,
html[data-vario-theme] body .vario-column-chooser-modal .vario-column-chooser-row {
    display: flex !important;
    align-items: center !important;
    min-height: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ebf5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0d2f5f !important;
    font: 800 10.5px/22px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-column-chooser-modal .vario-column-chooser-row:has(input:checked),
html[data-vario-theme] body .vario-column-chooser-modal .vario-column-chooser-row:has(input:checked) {
    background: #edf4ff !important;
    color: #0b4fa8 !important;
}

html body .vario-column-chooser-modal .form-check-input,
html[data-vario-theme] body .vario-column-chooser-modal .form-check-input {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    margin: 0 6px 0 0 !important;
    accent-color: #0b6cff !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table-wrap,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table-wrap {
    overflow-x: hidden !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(1),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(1) {
    width: 15% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(2),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(2) {
    width: 7% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(3),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(3) {
    width: 9% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(4),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(4) {
    width: 11% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(5),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(5) {
    width: 8% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(6),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(6) {
    width: 18% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(7),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(7) {
    width: 26% !important;
}

html body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(8),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-email-delivery-table th:nth-child(8) {
    width: 6% !important;
}

/* Document audit identity and financial statistics use the canonical document-card geometry. */
html body .vario-erp-document-details-modal .vario-document-identity-grid,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid {
    grid-template-columns: minmax(210px, 332px) 128px minmax(180px, 240px) !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-grid-offer,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid-offer {
    grid-template-columns: minmax(210px, 332px) 128px 128px minmax(180px, 240px) !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-type,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-type {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-issue-date,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-issue-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-number,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-number {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-sale-date,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-sale-date {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-valid-until,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-valid-until {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-grid-offer .vario-document-draft-author,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid-offer .vario-document-draft-author {
    grid-column: 4 !important;
}

html body .vario-erp-document-details-modal .vario-document-identity-grid-offer .vario-document-issued-author,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid-offer .vario-document-issued-author {
    grid-column: 4 !important;
}

html body .vario-erp-document-details-modal .vario-document-draft-author,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-draft-author {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

html body .vario-erp-document-details-modal .vario-document-issued-author,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-issued-author {
    grid-column: 3 !important;
    grid-row: 2 !important;
}

html body .vario-erp-document-details-modal .vario-document-audit-field input,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-audit-field input {
    width: 100% !important;
    min-width: 0 !important;
    color: #334b68 !important;
    background: #f5f8fc !important;
}

html body .vario-document-statistics-modal,
html[data-vario-theme] body .vario-document-statistics-modal {
    z-index: 1092 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-dialog,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-dialog {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: 840px !important;
    margin: 16px auto !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-content,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
}

html body .vario-document-statistics-modal .vario-erp-document-card-header,
html[data-vario-theme] body .vario-document-statistics-modal .vario-erp-document-card-header {
    border-bottom: 1px solid #0b3868 !important;
    background: linear-gradient(180deg, #185c9f 0%, #134f8c 58%, #0d3d70 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(6, 34, 76, 0.18) !important;
    color: #ffffff !important;
}

html body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-icon,
html[data-vario-theme] body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-icon {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

html body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-title h5,
html[data-vario-theme] body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-title h5 {
    color: #ffffff !important;
}

html body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-title small,
html[data-vario-theme] body .vario-document-statistics-modal .vario-erp-document-card-header .vario-erp-document-card-title small {
    color: rgba(255, 255, 255, 0.78) !important;
}

html body .vario-document-statistics-modal .vario-erp-document-card-header>span,
html[data-vario-theme] body .vario-document-statistics-modal .vario-erp-document-card-header>span {
    padding: 4px 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font: 800 10px/14px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-body,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-body {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow-y: auto !important;
    background: #eef3f9 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border: 1px solid #c4d3e6 !important;
    border-left: 4px solid #6f8198 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero.positive,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero.positive {
    border-left-color: #16835e !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero.negative,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero.negative {
    border-left-color: #c63845 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero>span,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero>span {
    color: #344d69 !important;
    font: 800 11px/15px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero>strong,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero>strong {
    color: #082b63 !important;
    font: 900 18px/22px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-hero>small,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero>small {
    color: #60738b !important;
    font: 700 10px/14px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border: 1px solid #c8d5e5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid article,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid article {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-right: 1px solid #d9e3ef !important;
    border-bottom: 1px solid #d9e3ef !important;
    background: #ffffff !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid article:nth-child(2n),
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid article:nth-child(2n) {
    border-right: 0 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid article:nth-last-child(-n + 2),
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid article:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid header,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
    color: #0b376f !important;
    font: 900 11px/15px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid dl,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid dl {
    display: grid !important;
    gap: 3px !important;
    margin: 0 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid dl>div,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid dl>div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 20px !important;
    border-bottom: 1px solid #edf1f6 !important;
    font: 700 10px/19px Inter, "Segoe UI", Arial, sans-serif !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid dl>div:last-child,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid dl>div:last-child {
    border-bottom: 0 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid dt,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid dt {
    color: #647890 !important;
    font-weight: 700 !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-grid dd,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid dd {
    margin: 0 !important;
    color: #112f58 !important;
    font-weight: 900 !important;
    text-align: right !important;
}

html body .vario-document-statistics-modal .vario-document-statistics-warning,
html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-warning {
    padding: 7px 9px !important;
    border: 1px solid #e5c26e !important;
    border-radius: 5px !important;
    color: #72530a !important;
    background: #fff8e5 !important;
    font: 800 10px/14px Inter, "Segoe UI", Arial, sans-serif !important;
}

@media (max-width: 900px) {

    html body .vario-erp-document-details-modal .vario-document-identity-grid,
    html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid {
        grid-template-columns: 1fr !important;
    }

    html body .vario-erp-document-details-modal .vario-document-identity-grid>label,
    html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-identity-grid>label {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    html body .vario-document-statistics-modal .vario-document-statistics-grid,
    html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid {
        grid-template-columns: 1fr !important;
    }

    html body .vario-document-statistics-modal .vario-document-statistics-grid article,
    html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid article {
        border-right: 0 !important;
        border-bottom: 1px solid #d9e3ef !important;
    }

    html body .vario-document-statistics-modal .vario-document-statistics-grid article:last-child,
    html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-grid article:last-child {
        border-bottom: 0 !important;
    }

    html body .vario-document-statistics-modal .vario-document-statistics-hero,
    html[data-vario-theme] body .vario-document-statistics-modal .vario-document-statistics-hero {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
}

/* Full document cards keep every footer action inside narrow viewports. */
@media (max-width: 600px) {

    html body .vario-erp-document-details-modal:not(.vario-document-line-lookup-modal):not(.vario-document-quick-create-modal) .vario-erp-document-card-footer,
    html[data-vario-theme] body .vario-erp-document-details-modal:not(.vario-document-line-lookup-modal):not(.vario-document-quick-create-modal) .vario-erp-document-card-footer {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: end !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 76px !important;
    }

    html body .vario-erp-document-details-modal:not(.vario-document-line-lookup-modal):not(.vario-document-quick-create-modal) .vario-erp-document-card-footer .vario-erp-modal-footer-actions,
    html[data-vario-theme] body .vario-erp-document-details-modal:not(.vario-document-line-lookup-modal):not(.vario-document-quick-create-modal) .vario-erp-document-card-footer .vario-erp-modal-footer-actions {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        align-content: end !important;
        justify-content: flex-end !important;
        row-gap: 4px !important;
    }
}
