/* Opt-in spacing for list filters and forms; desktop is unchanged. */
/* Address-summary buttons are also used by wide mobile/foldable viewports. */
.wfx-create-dialog > .e-dlg-content .adbut {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Preferred dialog sizes remain intact whenever they fit the viewport. */
.wfx-nested-dialog.e-dialog,
.wfx-nested-editor-dialog.e-dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
}

.wfx-note-dialog .wfx-note-editor {
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* CountBricks Graphite semantic Save paint. Opt in on the actual Save button;
   never recolor e-success globally, since Create/Wait/success actions use it too. */
.wfx-save-action:not(.e-danger) {
    background: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
    color: #fff !important;
}

.wfx-save-action.e-flat:not(.e-danger) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--details-accent, #75b9fa) !important;
}

.wfx-save-action.e-outline:not(.e-danger) {
    background: transparent !important;
    border-color: var(--details-accent, #75b9fa) !important;
    color: var(--details-accent, #75b9fa) !important;
}

.wfx-save-action:is(.e-flat, .e-outline):not(:disabled, .e-disabled, [aria-disabled="true"], .e-danger):hover {
    background: rgba(27, 110, 194, .12) !important;
}

.wfx-save-action:not(.e-danger):focus-visible {
    outline: 2px solid #9dceff;
    outline-offset: 3px;
}

.wfx-save-action:is(:disabled, .e-disabled, [aria-disabled="true"]) {
    opacity: .65;
}

/* Lookup editors opt in on SfDialog itself because modal content targets body. */
.wfx-lookup-edit-dialog.e-dialog {
    border: 1px solid var(--details-border, rgba(255, 255, 255, .14));
    border-radius: 12px;
    overflow: hidden;
    font-family: Roboto, sans-serif;
    color: #f3f4f6;
    background: #1e1d21;
}

/* CountBricks Graphite paint from Details dialogs, without their layout rules. */
.wfx-lookup-edit-dialog.e-dialog > .e-dlg-header-content {
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--details-border, rgba(255, 255, 255, .14));
}

.wfx-lookup-edit-dialog.e-dialog > .e-dlg-header-content > .e-dlg-header,
.wfx-lookup-edit-dialog.e-dialog > .e-dlg-header-content > .e-dlg-header :is(div, h6) {
    font-family: inherit;
    font-size: 18px;
    font-weight: 600 !important;
    color: #f3f4f6;
}

.wfx-lookup-edit-dialog.e-dialog > .e-dlg-content {
    background: transparent;
    color: #f3f4f6;
}

.wfx-lookup-edit-dialog.e-dialog > .e-footer-content {
    background: transparent;
    box-shadow: inset 0 1px 0 var(--details-border, rgba(255, 255, 255, .14));
}

.wfx-lookup-edit-dialog.e-dialog > .e-footer-content .e-primary:not(.e-danger) {
    background: #1b6ec2;
    border-color: #1b6ec2;
    color: #fff;
}

.wfx-lookup-edit-dialog.e-dialog > .e-footer-content .e-primary:not(.e-danger):focus-visible {
    outline: 2px solid #9dceff;
    outline-offset: 3px;
}

.wfx-lookup-edit-dialog.e-dialog > .e-dlg-header-content,
.wfx-lookup-edit-dialog.e-dialog > .e-footer-content {
    flex-shrink: 0;
}

.wfx-lookup-edit-dialog.e-dialog > .e-dlg-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-layout,
.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-layout .content-wrapper {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-grid-region {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: min(420px, 55vh);
    height: min(420px, 55dvh);
}

.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-list-region {
    min-width: 0;
    min-height: 0;
}

.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-message {
    padding: 16px 0;
    overflow-wrap: anywhere;
}

.wfx-lookup-edit-dialog.e-dialog .wfx-lookup-message p {
    margin: 0 0 12px;
}

/* Older lookup editors use CubeLoader, whose default is a viewport overlay. */
.wfx-lookup-edit-dialog.e-dialog .spinner-wrapper {
    position: relative;
    inset: auto;
    width: 100%;
    height: 120px;
    background: transparent;
    z-index: auto;
    pointer-events: none;
}

.wfx-lookup-edit-dialog.e-dialog .spinner-wrapper .sk-folding-cube {
    top: 20px;
}

.wfx-lookup-edit-dialog.e-dialog .e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
    content: '\e7ff';
}

.wfx-lookup-edit-dialog.e-dialog .e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
    content: '\e825';
}

@media (max-width: 767px) {
    /* Keep each dialog's requested width, but let large forms fit their target.
       e-control keeps this rule above older, component-loaded width caps. */
    .e-dialog.e-control.wfx-nested-dialog,
    .e-dialog.e-control.wfx-nested-editor-dialog,
    .e-dialog.e-control.wfx-details-design,
    .e-dialog.e-control.wfx-details-dialog,
    .e-dialog.e-control.wfx-compact-edit-dialog,
    .e-dialog.e-control.wfx-entity-dialog,
    .e-dialog.e-control.wfx-create-dialog {
        box-sizing: border-box;
        max-width: 100% !important;
        min-width: 0;
    }

    /* Syncfusion copies dialog classes onto the modal container. Do not let
       dialog chrome or width caps shrink that container and its child twice.
       Percentages respect custom targets as well as the safe native WebView. */
    .e-dlg-container.wfx-nested-dialog,
    .e-dlg-container.wfx-nested-editor-dialog,
    .e-dlg-container.wfx-details-design,
    .e-dlg-container.wfx-details-dialog,
    .e-dlg-container.wfx-compact-edit-dialog,
    .e-dlg-container.wfx-entity-dialog,
    .e-dlg-container.wfx-create-dialog {
        box-sizing: border-box;
        max-width: 100% !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
    }

    .filter-bar.wfx-mobile-filter-bar {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .wfx-mobile-filter-bar .wfx-mobile-filter.e-input-group {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
    }

    .wfx-user-assignment-tab .wfx-assignment-toolbar,
    .wfx-user-assignment-tab .wfx-assignment-description {
        min-width: 0;
        margin: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .wfx-user-assignment-tab .wfx-assignment-content {
        min-width: 0;
        margin-top: 8px !important;
        padding-left: 0;
        padding-right: 0;
    }

    .wfx-user-assignment-tab .wfx-assignment-toolbar,
    .wfx-user-assignment-tab .wfx-assignment-selector {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
    }

    .wfx-user-assignment-tab .wfx-assignment-selector {
        min-width: 0;
        margin: 8px 0;
    }

    .wfx-user-assignment-tab .wfx-assignment-selector > .wfx-assignment-field.e-input-group {
        flex: 1 1 180px;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
    }

    .wfx-user-assignment-tab .wfx-assignment-selector > .wfx-assignment-add.e-btn,
    .wfx-user-assignment-tab .wfx-assignment-toolbar > div > .e-btn {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 44px;
        min-height: 44px;
        margin: 0 !important;
    }

    .wfx-compact-edit-dialog.e-dialog {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .wfx-compact-edit-dialog.e-dialog .e-dlg-header-content,
    .wfx-compact-edit-dialog.e-dialog .e-dlg-content,
    .wfx-entity-dialog.e-dialog > .e-dlg-header-content,
    .wfx-entity-dialog.e-dialog > .e-dlg-content,
    .e-bigger .wfx-entity-dialog.e-dialog > .e-dlg-header-content,
    .e-bigger .wfx-entity-dialog.e-dialog > .e-dlg-content,
    .wfx-entity-dialog.e-dialog.e-bigger > .e-dlg-header-content,
    .wfx-entity-dialog.e-dialog.e-bigger > .e-dlg-content,
    .wfx-nested-dialog.e-dialog > .e-dlg-header-content,
    .wfx-nested-dialog.e-dialog > .e-dlg-content,
    .e-bigger .wfx-nested-dialog.e-dialog > .e-dlg-header-content,
    .e-bigger .wfx-nested-dialog.e-dialog > .e-dlg-content,
    .wfx-nested-dialog.e-dialog.e-bigger > .e-dlg-header-content,
    .wfx-nested-dialog.e-dialog.e-bigger > .e-dlg-content {
        padding: 12px !important;
    }

    .wfx-entity-dialog.e-dialog > .e-dlg-header-content > .e-dlg-header {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wfx-nested-dialog.e-dialog,
    .wfx-nested-editor-dialog.e-dialog {
        min-width: 0;
        min-height: 0;
    }

    .wfx-nested-dialog.e-dialog > .e-dlg-content,
    .wfx-nested-editor-dialog.e-dialog > .e-dlg-content {
        min-height: 0;
        overflow: auto;
        overflow-wrap: anywhere;
    }

    .wfx-nested-dialog.e-dialog > .e-dlg-header-content > .e-dlg-header {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wfx-nested-dialog.e-dialog > .e-footer-content,
    .wfx-nested-dialog .wfx-nested-dialog-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wfx-nested-dialog.e-dialog > .e-footer-content {
        flex-shrink: 0;
        padding: 10px 12px !important;
    }

    .wfx-nested-dialog.e-dialog > .e-footer-content .e-btn,
    .wfx-nested-dialog .wfx-nested-dialog-actions .e-btn {
        flex: 1 1 120px;
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
        white-space: normal;
    }

    .wfx-nested-dialog .wfx-dialog-message {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wfx-nested-dialog .wfx-nested-primary-action {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-grid .e-rowcell,
    .wfx-lookup-edit-dialog.e-dialog .e-grid .e-headercell {
        padding: 12px 10px;
        font-size: 15px;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-grid .e-rowcell {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-grid .e-headertext {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-toolbar,
    .wfx-lookup-edit-dialog.e-dialog .e-toolbar-items,
    .wfx-lookup-edit-dialog.e-dialog .e-input-group,
    .wfx-lookup-edit-dialog.e-dialog .e-input-group input.e-input,
    .wfx-lookup-edit-dialog.e-dialog .e-btn {
        min-height: 44px;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-toolbar .e-tbar-btn,
    .wfx-lookup-edit-dialog.e-dialog .e-toolbar .e-hor-nav,
    .wfx-lookup-edit-dialog.e-dialog .e-toolbar .e-scroll-nav,
    .wfx-lookup-edit-dialog.e-dialog .e-input-group .e-input-group-icon,
    .wfx-lookup-edit-dialog.e-dialog .e-dlg-closeicon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .wfx-lookup-edit-dialog.e-dialog > .e-dlg-header-content > .e-dlg-header {
        max-width: calc(100% - 48px);
    }

    .wfx-lookup-edit-dialog.e-dialog .e-input-group input.e-input,
    .wfx-lookup-edit-dialog.e-dialog .e-input-group textarea.e-input {
        font-size: 16px;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-listbox-wrapper {
        max-width: 100%;
        min-width: 0;
        max-height: 55vh;
        max-height: 55dvh;
        overflow: auto;
    }

    .wfx-lookup-edit-dialog.e-dialog .e-listbox-wrapper .e-list-item {
        min-height: 44px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wfx-nested-dialog .wfx-nested-search-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
        max-width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .wfx-nested-dialog .wfx-nested-search-field {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
        padding: 0;
    }

    .wfx-nested-dialog .wfx-nested-search-field .e-input-group {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
    }

    .wfx-nested-dialog .wfx-nested-search-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .wfx-nested-dialog .wfx-nested-search-actions .e-btn {
        min-width: 44px;
        min-height: 44px;
        max-width: 100%;
        margin: 0 !important;
        white-space: normal;
    }

    :is(.wfx-nested-dialog, .wfx-nested-editor-dialog) .wfx-dialog-field-grid.container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    :is(.wfx-nested-dialog, .wfx-nested-editor-dialog) .wfx-dialog-field-grid .row,
    :is(.wfx-nested-dialog, .wfx-nested-editor-dialog) .row.wfx-dialog-field-grid {
        max-width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        row-gap: 8px;
    }

    :is(.wfx-nested-dialog, .wfx-nested-editor-dialog) .wfx-dialog-field-grid :is(.col, .col-md, .col-12) {
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    :is(.wfx-nested-dialog, .wfx-nested-editor-dialog) .wfx-dialog-field-grid .e-input-group,
    .wfx-nested-dialog .e-richtexteditor {
        max-width: 100%;
        min-width: 0;
    }

    .wfx-nested-dialog .wfx-nested-media {
        width: 100%;
        max-width: 300px;
        min-width: 0;
    }

    .wfx-nested-dialog .wfx-nested-media-container {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wfx-tax-breakdown .taxb-styled-table {
        width: 100%;
        min-width: 0;
        margin: 0;
        table-layout: fixed;
    }

    .wfx-tax-breakdown .taxb-styled-table th,
    .wfx-tax-breakdown .taxb-styled-table td {
        padding: 8px;
        overflow-wrap: anywhere;
    }

    /* Keep create forms tall; do not apply compact-dialog dimensions to them. */
    .wfx-create-dialog.e-dialog {
        max-width: calc(100vw - 8px) !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }

    .wfx-create-dialog > .e-dlg-content .row {
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        gap: 8px;
    }

    .wfx-create-dialog > .e-dlg-content .row > :is(.col, .col-3, .col-4, .col-md),
    .wfx-create-dialog > .e-dlg-content .col-md.pl-0,
    .wfx-entity-dialog .wfx-person-name-fields .col-md.pl-0 {
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .wfx-create-dialog > .e-dlg-content form button[type="submit"] {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
    }

    .wfx-entity-dialog .wfx-person-name-fields {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        row-gap: 8px;
    }

    .wfx-entity-dialog .wfx-person-name-fields > :is(.col, .col-3) {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .wfx-compact-edit-dialog .e-dlg-content {
        overflow-y: auto;
    }

    .wfx-compact-edit-dialog .e-dlg-content > .container-fluid,
    .wfx-compact-edit-dialog .e-dlg-content > .container-fluid .col-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .wfx-compact-edit-dialog .e-dlg-content > .container-fluid .row {
        margin-left: 0;
        margin-right: 0;
    }

    .wfx-compact-edit-dialog input[type="file"],
    .wfx-compact-edit-dialog .image-preview img {
        max-width: 100%;
    }

    .wfx-compact-edit-dialog .dialog-buttons,
    .wfx-compact-edit-dialog.e-dialog .e-footer-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .wfx-compact-edit-dialog.e-dialog .e-footer-content {
        padding: 10px 12px !important;
    }

    .wfx-compact-edit-dialog .dialog-buttons .e-btn,
    .wfx-compact-edit-dialog.e-dialog .e-footer-content .e-btn {
        flex: 1 1 120px;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        white-space: normal;
    }
}

/* Centre the standard close glyph without changing the theme's button size. */
@media (max-width: 767px), (pointer: coarse) {
    .e-dialog > .e-dlg-header-content > .e-btn.e-dlg-closeicon-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
    }

    .e-dialog > .e-dlg-header-content > .e-btn.e-dlg-closeicon-btn > .e-icon-dlg-close {
        display: block;
        margin: 0 !important;
        padding: 0;
        line-height: 1;
    }
}