/* _content/Yellax.UI.Components/Components/Animations/YxLoading.razor.rz.scp.css */
.loadspinner[b-02d6kfrf1d] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    z-index: 9999;
}

/* A ring drawn with borders rather than an image, so the spinner needs no asset and takes its
   colours from the tokens. */
.yx-loadspinner[b-02d6kfrf1d] {
    display: inline-block;
    flex: none;
    border-style: solid;
    border-color: var(--grey-100);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: yx-spin-b-02d6kfrf1d 1s linear infinite;
}

.yx-loadspinner.yx-pagespinner[b-02d6kfrf1d] {
    width: 5rem;
    height: 5rem;
    border-width: 4px;
}

/* Sized in em so it matches the text it sits next to, whatever font size the caller sets. */
.yx-loadspinner.yx-buttonspinner[b-02d6kfrf1d] {
    width: 1em;
    height: 1em;
    border-width: 0.125em;
}

.yx-button-spinner[b-02d6kfrf1d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

@keyframes yx-spin-b-02d6kfrf1d {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .yx-loadspinner[b-02d6kfrf1d] {
        animation-duration: 3s;
    }
}
/* _content/Yellax.UI.Components/Components/Animations/YxLoadingOverlay.razor.rz.scp.css */
/* Covers its nearest positioned ancestor — the page's content region, not the viewport — so the
   surrounding chrome stays usable while the page still rearranges itself as data arrives. A
   consumer whose container is not positioned gets the viewport instead, which is rarely wanted.
   The tint carries the dimming on its own, so a browser without backdrop-filter still hides the
   shifting content instead of showing it sharp. */
.yx-loading-overlay[b-a7sdxen79r] {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
}

/* The spinner inside is sized in em, so the font size set here decides how large it is. */
.yx-loading-overlay-panel[b-a7sdxen79r] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-15) var(--spacing-20);
    min-width: 12rem;
    font-size: 1.125rem;
    color: var(--grey-700);
}
/* _content/Yellax.UI.Components/Components/Buttons/Internals/YxDropdownButton.razor.rz.scp.css */
.yx-button-wrapper[b-3heo2zztzc]{
    margin: 0;
}
/* _content/Yellax.UI.Components/Components/Details/YxCardHeader.razor.rz.scp.css */
.yx-card-header[b-p9shcf4ejt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-050);
    padding-bottom: var(--spacing-075);
    border-bottom: 1px solid var(--grey-100);
}

.yx-card-header-title[b-p9shcf4ejt] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}
/* _content/Yellax.UI.Components/Components/Details/YxDetailCard.razor.rz.scp.css */
.yx-detail-card[b-jkt8mikqhj] {
    max-width: 32rem;
    padding: var(--spacing-075) var(--spacing-10);
}
/* _content/Yellax.UI.Components/Components/Details/YxDetailField.razor.rz.scp.css */
.yx-detail-field[b-pdyujue4hx] {
    padding: var(--spacing-050) 0;
    border-bottom: 1px solid var(--grey-100);
}

.yx-detail-field:last-child[b-pdyujue4hx] {
    padding-bottom: 0;
    border-bottom: none;
}

.yx-detail-field-label[b-pdyujue4hx] {
    margin-bottom: 0.125rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--grey-700);
}

/* A value is free text of unknown shape, so it has to break inside a word as well:
   a long unbroken string (a path, a URL, a pasted key) would otherwise run out of
   the card, which has a max-width and cannot grow with it. */
.yx-detail-field-value[b-pdyujue4hx] {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--grey-900);
    min-width: 0;
    overflow-wrap: anywhere;
}

.yx-detail-field.yx-detail-field-caption[b-pdyujue4hx] {
    padding: 0;
    border-bottom: none;
}

    .yx-detail-field-caption .yx-detail-field-label[b-pdyujue4hx] {
        margin-bottom: var(--spacing-025);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--grey-600);
    }

    .yx-detail-field-caption .yx-detail-field-value[b-pdyujue4hx] {
        font-size: 1rem;
        color: var(--grey-900);
    }
/* _content/Yellax.UI.Components/Components/Details/YxDetailPageHeader.razor.rz.scp.css */
.yx-detail-page-header[b-gqfg22i310] {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--spacing-075);
    border-bottom: 1px solid var(--grey-100);
}

.yx-detail-page-header-bar[b-gqfg22i310] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-15);
}

.yx-detail-page-header-text[b-gqfg22i310] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    min-width: 0;
}

.yx-detail-page-header-title[b-gqfg22i310] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--grey-900);
}

.yx-detail-page-header-subtitle[b-gqfg22i310] {
    font-size: 0.85rem;
    color: var(--grey-600);
}

.yx-detail-page-header-meta[b-gqfg22i310] {
    font-size: 0.8rem;
    color: var(--grey-500);
}

.yx-detail-page-header-actions[b-gqfg22i310] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-075);
}

/* _content/Yellax.UI.Components/Components/Details/YxSettingsCard.razor.rz.scp.css */
.yx-settings-card[b-b27grg9a5h] {
    padding: var(--spacing-10) var(--spacing-15);
    background-color: var(--white);
    border: 1px solid var(--grey-100);
    border-radius: 8px;
}

.yx-settings-card-header[b-b27grg9a5h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-10);
}

.yx-settings-card-header-text[b-b27grg9a5h] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-075);
    min-width: 0;
}

.yx-settings-card-header-actions[b-b27grg9a5h] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-050);
}

.yx-settings-card-caption[b-b27grg9a5h] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.yx-settings-card-hint[b-b27grg9a5h] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--grey-500);
}

.yx-settings-card-body[b-b27grg9a5h] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}
/* _content/Yellax.UI.Components/Components/Dialogs/Semantics/YxDialogReviewBeforeContinue.razor.rz.scp.css */
.button-container[b-g95fjh8zkw] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* _content/Yellax.UI.Components/Components/Dialogs/Semantics/YxDialogWarnBeforeContinue.razor.rz.scp.css */
.button-container[b-dwh5tosei6] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}

.dialog-warning-icon[b-dwh5tosei6] {
    color: var(--button-color-warning-hover);
}
/* _content/Yellax.UI.Components/Components/Dialogs/Semantics/YxInformationTag.razor.rz.scp.css */
.info-tag-container[b-gjykwh4ffv] {
    display: inline-flex;
    align-items: center;
}

.info-tag[b-gjykwh4ffv] {
    margin: 0.25rem;
    color: var(--grey-800);
}   

.hidden[b-gjykwh4ffv] {
    opacity: 0;
}

.collapsed[b-gjykwh4ffv] {
    display: none;
}
/* _content/Yellax.UI.Components/Components/Display/YxAvatar.razor.rz.scp.css */
.yx-avatar[b-xm8n3wglj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-avatar);
    height: var(--size-avatar);
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
}

.yx-avatar-muted[b-xm8n3wglj3] {
    opacity: 0.5;
    filter: grayscale(60%);
}
/* _content/Yellax.UI.Components/Components/Display/YxBreakdownTable.razor.rz.scp.css */
.yx-breakdown-table[b-wjtuxj1vsr] {
    border-collapse: collapse;
    width: 100%;
}

.yx-breakdown-table-value[b-wjtuxj1vsr],
.yx-breakdown-table-percentage[b-wjtuxj1vsr] {
    text-align: right;
    padding-left: var(--spacing-050);
    font-variant-numeric: tabular-nums;
}

.yx-breakdown-table-total td[b-wjtuxj1vsr] {
    border-top: 1px solid var(--grey-300);
    padding-top: var(--spacing-025);
}
/* _content/Yellax.UI.Components/Components/Display/YxDataQualityBar.razor.rz.scp.css */
.yx-data-quality-bar[b-oqt02nrryf] {
    position: relative;
    margin-top: auto;
    min-height: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-025);
}

.yx-data-quality-bar-clickable[b-oqt02nrryf] {
    margin: 0 calc(-1 * var(--spacing-050));
    padding: var(--spacing-025) var(--spacing-050);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .yx-data-quality-bar-clickable:hover[b-oqt02nrryf] {
        background-color: var(--grey-100);
    }

.yx-data-quality-bar-row[b-oqt02nrryf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.yx-data-quality-bar-valid-text[b-oqt02nrryf] {
    font-weight: 600;
}

.yx-data-quality-bar-invalid-text[b-oqt02nrryf] {
    color: var(--grey-500);
}

.yx-data-quality-bar-track[b-oqt02nrryf] {
    display: flex;
    height: 0.375rem;
    border-radius: 3px;
    overflow: hidden;
    background: var(--grey-200);
}

/* The tooltip sizes to its content. Consumers let it reach beyond the bar
   (e.g. up to the full tile width) by setting the inset variables to negative
   values; the max-width spans from the left inset to the right inset. */
.yx-data-quality-bar-tooltip[b-oqt02nrryf] {
    position: absolute;
    bottom: calc(100% + var(--spacing-050));
    left: var(--yx-tooltip-inset-left, 0rem);
    width: max-content;
    max-width: calc(100% - var(--yx-tooltip-inset-left, 0rem) - var(--yx-tooltip-inset-right, 0rem));
    z-index: 20;
    display: none;
    padding: var(--spacing-050) var(--spacing-075);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--grey-700);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.yx-data-quality-bar:hover .yx-data-quality-bar-tooltip[b-oqt02nrryf] {
    display: block;
}

.yx-data-quality-bar-segment[b-oqt02nrryf] {
    height: 100%;
}

.yx-data-quality-bar-segment-valid[b-oqt02nrryf] {
    background: var(--green-500);
}

.yx-data-quality-bar-segment-invalid[b-oqt02nrryf] {
    background: var(--red-500);
}

.yx-data-quality-bar-segment-unassigned[b-oqt02nrryf] {
    background: var(--grey-300);
}

.yx-data-quality-bar-placeholder[b-oqt02nrryf] {
    color: var(--grey-500);
    font-size: 0.85rem;
}
/* _content/Yellax.UI.Components/Components/Display/YxStatusIndicator.razor.rz.scp.css */
.yx-status-indicator[b-rj8131rm0e] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
}

.yx-status-indicator-dot[b-rj8131rm0e] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.yx-status-indicator-dot-success[b-rj8131rm0e] {
    background-color: var(--green-500);
}

.yx-status-indicator-dot-neutral[b-rj8131rm0e] {
    background-color: var(--grey-700);
}

.yx-status-indicator-dot-warning[b-rj8131rm0e] {
    background-color: var(--orange-500);
}

.yx-status-indicator-dot-danger[b-rj8131rm0e] {
    background-color: var(--red-500);
}
/* _content/Yellax.UI.Components/Components/Display/YxTileHeader.razor.rz.scp.css */
.yx-tile-header[b-sg26814ysp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
}

.yx-tile-header-name[b-sg26814ysp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.yx-tile-header-name-muted[b-sg26814ysp] {
    color: var(--grey-500);
}

/* The tooltip sizes to its content. Consumers let it reach beyond the header
   (e.g. up to the full tile width) by setting the inset variables to negative
   values; the max-width spans from the left inset to the right inset. */
.yx-tile-header-tooltip[b-sg26814ysp] {
    position: absolute;
    top: calc(100% + var(--spacing-025));
    left: var(--yx-tooltip-inset-left, 0rem);
    width: max-content;
    max-width: calc(100% - var(--yx-tooltip-inset-left, 0rem) - var(--yx-tooltip-inset-right, 0rem));
    z-index: 20;
    display: none;
    padding: var(--spacing-050) var(--spacing-075);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: break-word;
    color: var(--grey-700);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* The is-truncated class is toggled by the host application (overflowTooltip.js)
   so the tooltip only appears when the name is actually ellipsized. */
.yx-tile-header-name.is-truncated:hover ~ .yx-tile-header-tooltip[b-sg26814ysp] {
    display: block;
}

.yx-tile-header-menu[b-sg26814ysp] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* The ellipsis is the tile's only affordance for its menu, so it gets a comfortable
   square target. The clicked element is the DevExpress button inside
   .dxbl-btn-dropdown, so sizing that box is what grows the hit area; its padding
   comes from --dxbl-btn-padding-* and is replaced rather than fought with !important.
   The icon is fixed at 1rem by yx-icons.css and is grown along with the box. */
.yx-tile-header-menu[b-sg26814ysp]  .dxbl-btn {
    --dxbl-btn-padding-x: 0;
    --dxbl-btn-padding-y: 0;
    width: 2.25rem;
    height: 2.25rem;
}

.yx-tile-header-menu[b-sg26814ysp]  .yx-icon {
    width: 1.5rem;
    height: 1.5rem;
}
/* _content/Yellax.UI.Components/Components/Forms/Internals/YxFormItem.razor.rz.scp.css */
.form-item-value-container[b-kbqx5mio0o] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.info-tag[b-kbqx5mio0o]{
    margin: 0.3125rem;
}
/* _content/Yellax.UI.Components/Components/Forms/YxFormLayoutItemComboBox.razor.rz.scp.css */
[b-74hait3lnc] .version-caption {
    max-width: min-content;
}
/* _content/Yellax.UI.Components/Components/Grids/YxGridMultiLineColumn.razor.rz.scp.css */
.multiline-tip[b-oyr5ox64vv] {
    white-space: pre-line;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/Yellax.UI.Components/Components/Inputs/ExpressionBuilder/YxExpressionBuilder.razor.rz.scp.css */
.yx-expression-builder[b-l9xzewmce4] {
    display: flex;
    flex-direction: column;
}

/* ---- Summary card (closed / applied view) -------------------------------------------------- */

.yx-expression-builder-summary[b-l9xzewmce4] {
    padding: var(--spacing-075) var(--spacing-10);
}

.yx-expression-builder-summary-title[b-l9xzewmce4] {
    font-weight: 600;
    margin-bottom: var(--spacing-050);
}

.yx-expression-builder-readonly-field[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
}

.yx-expression-builder-preview-value[b-l9xzewmce4] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    border: 1px solid var(--grey-100);
    border-radius: 4px;
    padding: var(--spacing-025) var(--spacing-050);
    background-color: var(--grey-50);
    color: var(--grey-700);
}

.yx-expression-builder-open-button[b-l9xzewmce4],
.yx-expression-builder-dialog-close[b-l9xzewmce4],
.yx-expression-builder-category-item[b-l9xzewmce4],
.yx-expression-builder-filters button[b-l9xzewmce4],
.yx-expression-builder-column-item[b-l9xzewmce4],
.yx-expression-builder-operator-item[b-l9xzewmce4],
.yx-expression-builder-test-button[b-l9xzewmce4],
.yx-expression-builder-cancel-button[b-l9xzewmce4],
.yx-expression-builder-apply-button[b-l9xzewmce4] {
    font: inherit;
    color: var(--grey-900);
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    padding: var(--spacing-025) var(--spacing-050);
    cursor: pointer;
}

.yx-expression-builder-open-button:hover[b-l9xzewmce4],
.yx-expression-builder-dialog-close:hover[b-l9xzewmce4],
.yx-expression-builder-category-item:hover[b-l9xzewmce4],
.yx-expression-builder-filters button:hover[b-l9xzewmce4],
.yx-expression-builder-column-item:hover[b-l9xzewmce4],
.yx-expression-builder-operator-item:hover[b-l9xzewmce4],
.yx-expression-builder-test-button:hover[b-l9xzewmce4],
.yx-expression-builder-cancel-button:hover[b-l9xzewmce4],
.yx-expression-builder-apply-button:hover[b-l9xzewmce4] {
    background-color: var(--blue-50);
    border-color: var(--blue-500);
    color: var(--blue-700);
}

.yx-expression-builder-open-button:focus-visible[b-l9xzewmce4],
.yx-expression-builder-dialog-close:focus-visible[b-l9xzewmce4],
.yx-expression-builder-category-item:focus-visible[b-l9xzewmce4],
.yx-expression-builder-filters button:focus-visible[b-l9xzewmce4],
.yx-expression-builder-column-item:focus-visible[b-l9xzewmce4],
.yx-expression-builder-operator-item:focus-visible[b-l9xzewmce4],
.yx-expression-builder-test-button:focus-visible[b-l9xzewmce4],
.yx-expression-builder-cancel-button:focus-visible[b-l9xzewmce4],
.yx-expression-builder-apply-button:focus-visible[b-l9xzewmce4],
.yx-expression-builder-search:focus-visible[b-l9xzewmce4],
.yx-expression-builder-input:focus-visible[b-l9xzewmce4],
.yx-expression-builder-dummy-value:focus-visible[b-l9xzewmce4] {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 1px;
}

.yx-expression-builder-test-button[b-l9xzewmce4],
.yx-expression-builder-apply-button[b-l9xzewmce4] {
    background-color: var(--button-color-primary);
    border-color: var(--button-color-primary);
    color: var(--white);
}

.yx-expression-builder-test-button:hover[b-l9xzewmce4],
.yx-expression-builder-apply-button:hover[b-l9xzewmce4] {
    background-color: var(--button-color-primary-hover);
    border-color: var(--button-color-primary-hover);
    color: var(--white);
}

.yx-expression-builder-apply-button:disabled[b-l9xzewmce4] {
    background-color: var(--grey-300);
    border-color: var(--grey-300);
    color: var(--grey-700);
    cursor: not-allowed;
}

.yx-expression-builder-applied-valid[b-l9xzewmce4],
.yx-expression-builder-valid[b-l9xzewmce4] {
    margin-top: var(--spacing-050);
    font-weight: 500;
    color: var(--green-700);
}

.yx-expression-builder-applied-empty[b-l9xzewmce4],
.yx-expression-builder-empty[b-l9xzewmce4] {
    margin-top: var(--spacing-050);
    color: var(--grey-500);
}

.yx-expression-builder-applied-invalid[b-l9xzewmce4],
.yx-expression-builder-invalid[b-l9xzewmce4],
.yx-expression-builder-insertion-rejected[b-l9xzewmce4] {
    margin-top: var(--spacing-050);
    padding: var(--spacing-050);
    border: 1px solid var(--red-500);
    border-radius: 6px;
    background-color: var(--red-50);
}

.yx-expression-builder-applied-validity-message[b-l9xzewmce4],
.yx-expression-builder-validity-message[b-l9xzewmce4],
.yx-expression-builder-insertion-rejected-message[b-l9xzewmce4] {
    font-weight: 500;
    color: var(--red-700);
}

.yx-expression-builder-applied-chips[b-l9xzewmce4],
.yx-expression-builder-chips[b-l9xzewmce4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-050);
    margin-top: var(--spacing-050);
    padding-top: var(--spacing-050);
    border-top: 1px solid var(--grey-100);
}

.yx-expression-builder-chips-label[b-l9xzewmce4],
.yx-expression-builder-chips-empty[b-l9xzewmce4] {
    color: var(--grey-700);
    font-size: 0.85em;
}

.yx-expression-builder-chip[b-l9xzewmce4] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    border: 1px solid var(--grey-100);
    border-radius: 999px;
    background-color: var(--grey-50);
    padding: 0 var(--spacing-050) 0 var(--spacing-025);
    font-size: 0.85em;
}

.yx-expression-builder-tag[b-l9xzewmce4] {
    font-family: monospace;
    font-size: 0.7em;
    letter-spacing: 0.02em;
    padding: 0 var(--spacing-025);
    border-radius: 4px;
    white-space: nowrap;
}

.yx-expression-builder-tag-number[b-l9xzewmce4] {
    background-color: var(--blue-50);
    color: var(--blue-700);
}

.yx-expression-builder-tag-text[b-l9xzewmce4] {
    background-color: var(--orange-50);
    color: var(--orange-700);
}

.yx-expression-builder-tag-boolean[b-l9xzewmce4] {
    background-color: var(--purple-50);
    color: var(--purple-700);
}

.yx-expression-builder-tag-any[b-l9xzewmce4] {
    background-color: var(--grey-100);
    color: var(--grey-700);
}

/* ---- Dialog ---------------------------------------------------------------------------------- */

.yx-expression-builder-overlay[b-l9xzewmce4] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-15);
    z-index: 1000;
}

.yx-expression-builder-dialog[b-l9xzewmce4] {
    background-color: var(--white);
    border: 1px solid var(--grey-100);
    border-radius: 12px;
    width: min(64rem, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.yx-expression-builder-dialog-header[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-050) var(--spacing-10);
    border-bottom: 1px solid var(--grey-100);
    flex: 0 0 auto;
}

.yx-expression-builder-dialog-title[b-l9xzewmce4] {
    font-weight: 600;
}

.yx-expression-builder-dialog-close[b-l9xzewmce4] {
    line-height: 1;
}

.yx-expression-builder-dialog-body[b-l9xzewmce4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    background-color: var(--grey-50);
}

.yx-expression-builder-panel[b-l9xzewmce4] {
    padding: var(--spacing-075) var(--spacing-10);
}

.yx-expression-builder-panel-head[b-l9xzewmce4] {
    border-bottom: 1px solid var(--grey-100);
    padding-bottom: var(--spacing-050);
    margin-bottom: var(--spacing-075);
}

.yx-expression-builder-panel-title[b-l9xzewmce4] {
    font-weight: 600;
}

.yx-expression-builder-panel-hint[b-l9xzewmce4] {
    color: var(--grey-700);
    font-size: 0.85em;
}

.yx-expression-builder-input[b-l9xzewmce4] {
    width: 100%;
    min-height: 4rem;
    font-family: monospace;
    line-height: 1.6;
    resize: vertical;
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    padding: var(--spacing-050) var(--spacing-050);
}

.yx-expression-builder-truncation-hint[b-l9xzewmce4] {
    margin-top: var(--spacing-025);
    font-size: 0.7em;
    color: var(--grey-500);
}

/* ---- Building blocks panel -------------------------------------------------------------------- */

.yx-expression-builder-panes[b-l9xzewmce4] {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 14rem);
    gap: var(--spacing-075);
}

.yx-expression-builder-categories[b-l9xzewmce4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    min-width: 0;
}

.yx-expression-builder-category-item[b-l9xzewmce4] {
    text-align: left;
    background-color: transparent;
    border: none;
}

.yx-expression-builder-category-item-sub[b-l9xzewmce4] {
    padding-left: var(--spacing-15);
}

.yx-expression-builder-category-item[aria-current="true"][b-l9xzewmce4] {
    background-color: var(--blue-50);
    color: var(--blue-700);
}

.yx-expression-builder-category-group[b-l9xzewmce4] {
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-500);
    padding: var(--spacing-050) var(--spacing-050) 0;
}

.yx-expression-builder-list-pane[b-l9xzewmce4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    min-width: 0;
    border-left: 1px solid var(--grey-100);
    padding-left: var(--spacing-075);
}

.yx-expression-builder-search[b-l9xzewmce4] {
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    padding: var(--spacing-025) var(--spacing-050);
    width: 100%;
}

.yx-expression-builder-filters[b-l9xzewmce4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-025);
}

.yx-expression-builder-filters button[b-l9xzewmce4] {
    font-size: 0.85em;
    padding: 0.1em var(--spacing-050);
}

.yx-expression-builder-filters button[aria-pressed="true"][b-l9xzewmce4] {
    background-color: var(--blue-50);
    border-color: var(--blue-500);
    color: var(--blue-700);
}

/* The filter row only exists for the column category, so without a floor the dialog would
   resize every time the user switches category in the menu next to it. */
.yx-expression-builder-list-toolbar[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-050);
    min-height: 1.75rem;
}

.yx-expression-builder-count[b-l9xzewmce4] {
    margin-left: auto;
    font-size: 0.78em;
    color: var(--grey-500);
}

/* Fixed rather than max-height so the dialog never resizes as the user switches between a long and
   a short list — a short list simply leaves empty space below it. overflow-y keeps a longer list
   scrollable within that fixed height. */
.yx-expression-builder-list[b-l9xzewmce4] {
    height: 11rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.yx-expression-builder-column-item[b-l9xzewmce4],
.yx-expression-builder-operator-item[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-050);
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
}

.yx-expression-builder-column-item:hover[b-l9xzewmce4],
.yx-expression-builder-operator-item:hover[b-l9xzewmce4] {
    background-color: var(--blue-50);
}

.yx-expression-builder-item-name[b-l9xzewmce4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}

.yx-expression-builder-column-picker-empty-state[b-l9xzewmce4] {
    font-size: 0.85em;
    color: var(--grey-700);
}

.yx-expression-builder-detail[b-l9xzewmce4] {
    background-color: var(--grey-50);
    border: 1px solid var(--grey-100);
    border-radius: 8px;
    padding: var(--spacing-050) var(--spacing-075);
    align-self: start;
    min-width: 0;
}

.yx-expression-builder-detail-kind[b-l9xzewmce4] {
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-500);
}

.yx-expression-builder-detail-name[b-l9xzewmce4] {
    font-family: monospace;
    margin-bottom: var(--spacing-025);
}

.yx-expression-builder-detail-return[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-025);
    color: var(--grey-700);
    font-size: 0.85em;
    margin-bottom: var(--spacing-050);
}

.yx-expression-builder-detail-description[b-l9xzewmce4] {
    color: var(--grey-700);
    font-size: 0.85em;
    margin-bottom: var(--spacing-050);
}

.yx-expression-builder-detail-example-label[b-l9xzewmce4] {
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-500);
}

.yx-expression-builder-detail-example[b-l9xzewmce4] {
    font-family: monospace;
    font-size: 0.85em;
}

/* ---- Test panel -------------------------------------------------------------------------------- */

.yx-expression-builder-test-empty[b-l9xzewmce4] {
    color: var(--grey-700);
    font-size: 0.85em;
}

.yx-expression-builder-test-rows[b-l9xzewmce4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-050);
}

.yx-expression-builder-test-row[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
}

.yx-expression-builder-test-row label[b-l9xzewmce4] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85em;
}

.yx-expression-builder-dummy-value[b-l9xzewmce4] {
    flex: 0 0 8.5rem;
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    padding: 0.125rem var(--spacing-050);
}

.yx-expression-builder-evaluation-result[b-l9xzewmce4] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-050);
    margin-top: var(--spacing-050);
    padding-top: var(--spacing-050);
    border-top: 1px solid var(--grey-100);
    font-family: monospace;
}

.yx-expression-builder-evaluation-result-label[b-l9xzewmce4] {
    font-family: initial;
    color: var(--grey-700);
    font-size: 0.85em;
}

.yx-expression-builder-evaluation-message[b-l9xzewmce4] {
    margin-top: var(--spacing-050);
    font-weight: 500;
    color: var(--red-700);
}

/* ---- Footer -------------------------------------------------------------------------------- */

.yx-expression-builder-dialog-footer[b-l9xzewmce4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-075);
    padding: var(--spacing-050) var(--spacing-10);
    border-top: 1px solid var(--grey-100);
    background-color: var(--white);
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.yx-expression-builder-dialog-footer .yx-expression-builder-valid[b-l9xzewmce4],
.yx-expression-builder-dialog-footer .yx-expression-builder-empty[b-l9xzewmce4],
.yx-expression-builder-dialog-footer .yx-expression-builder-invalid[b-l9xzewmce4] {
    margin-top: 0;
}

.yx-expression-builder-dialog-actions[b-l9xzewmce4] {
    display: flex;
    gap: var(--spacing-050);
}

/* ---- Responsive: three panes -> two -> one, dialog fills the screen -------------------------- */

@media (max-width: 60rem) {
    .yx-expression-builder-panes[b-l9xzewmce4] {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }

    .yx-expression-builder-detail[b-l9xzewmce4] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .yx-expression-builder-overlay[b-l9xzewmce4] {
        padding: 0;
        align-items: stretch;
    }

    .yx-expression-builder-dialog[b-l9xzewmce4] {
        border-radius: 0;
        border: none;
        width: 100%;
    }

    .yx-expression-builder-panes[b-l9xzewmce4] {
        grid-template-columns: minmax(0, 1fr);
    }

    .yx-expression-builder-categories[b-l9xzewmce4] {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--spacing-025);
        border-bottom: 1px solid var(--grey-100);
        padding-bottom: var(--spacing-075);
    }

    .yx-expression-builder-list-pane[b-l9xzewmce4] {
        border-left: none;
        padding-left: 0;
    }

    .yx-expression-builder-category-group[b-l9xzewmce4] {
        display: none;
    }

    .yx-expression-builder-category-item[b-l9xzewmce4] {
        white-space: nowrap;
        border: 1px solid var(--grey-100);
        border-radius: 999px;
    }

    .yx-expression-builder-category-item-sub[b-l9xzewmce4] {
        padding-left: var(--spacing-050);
    }
}

@media (prefers-reduced-motion: reduce) {
    .yx-expression-builder *[b-l9xzewmce4] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Yellax.UI.Components/Components/Inputs/Internals/YxToggle.razor.rz.scp.css */
[b-axidxmk6od] .dxbl-checkbox.toggle-isChecked {
    background-color: var(--green-500);
}
/* _content/Yellax.UI.Components/Components/Inputs/StringConditionBuilder/YxStringConditionBuilder.razor.rz.scp.css */
.yx-string-condition-builder-hint[b-tid9osvq7l] {
    margin-top: var(--spacing-025);
    font-size: 0.75rem;
    color: var(--grey-700);
}

/* The filter builder draws its own rows and borders, so the rejected state is framed around the
   whole editor rather than on the input that caused it: the offending edit has already been rolled
   back, so there is no longer a field to point at. */
.yx-string-condition-builder-invalid[b-tid9osvq7l] {
    padding: var(--spacing-050);
    border: 1px solid var(--red-500);
    border-radius: 6px;
    background-color: var(--red-50);
}

.yx-string-condition-builder-violation[b-tid9osvq7l] {
    margin-top: var(--spacing-050);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--red-700);
}
/* _content/Yellax.UI.Components/Components/Inputs/YxFileDropZone.razor.rz.scp.css */
.yx-file-drop[b-otgl68rrr7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
}

.yx-file-drop-label[b-otgl68rrr7] {
    font-weight: 600;
}

.yx-file-drop-required[b-otgl68rrr7] {
    margin-left: 0.125rem;
    color: var(--red-500);
}

.yx-file-drop-slot[b-otgl68rrr7] {
    display: grid;
}

    .yx-file-drop-slot > .yx-file-drop-state[b-otgl68rrr7] {
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-050);
    }

    /* Hidden but still occupying its cell — visibility, not display, is what keeps the height. */
    .yx-file-drop-slot > .yx-file-drop-state.is-inactive[b-otgl68rrr7] {
        visibility: hidden;
    }

.yx-file-drop-zone[b-otgl68rrr7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-15);
    border: 2px dashed var(--grey-300);
    border-radius: 8px;
    background-color: rgba(183, 183, 183, 0.1);
    text-align: center;
}

    .yx-file-drop-zone.yx-file-drop-zone-hover[b-otgl68rrr7] {
        border-style: solid;
        background-color: rgba(183, 183, 183, 0.3);
    }

.yx-file-drop-icon[b-otgl68rrr7] {
    margin-bottom: var(--spacing-050);
    font-size: 2rem;
    color: var(--grey-500);
}

.yx-file-drop-or[b-otgl68rrr7] {
    margin: var(--spacing-025) 0;
    color: var(--grey-600);
}

.yx-file-drop-hint[b-otgl68rrr7] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--grey-600);
}

.yx-file-drop-validation[b-otgl68rrr7] {
    font-size: 0.85rem;
    color: var(--red-500);
}

.yx-file-drop-chosen[b-otgl68rrr7] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-075);
    border: 1px solid var(--grey-100);
    border-radius: 8px;
}

.yx-file-drop-chosen-name[b-otgl68rrr7] {
    font-weight: 600;
}

.yx-file-drop-chosen-size[b-otgl68rrr7] {
    color: var(--grey-600);
}

.yx-file-drop-remove[b-otgl68rrr7] {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--grey-600);
    cursor: pointer;
}

.yx-file-drop-input-host[b-otgl68rrr7] {
    height: 0;
    overflow: hidden;
}
/* _content/Yellax.UI.Components/Components/Inputs/YxRadioCard.razor.rz.scp.css */
.yx-radio-card[b-2pq6d7kf2j] {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    cursor: pointer;
}

.yx-radio-card-selected[b-2pq6d7kf2j] {
    background-color: var(--grey-50);
    border-color: var(--grey-900);
}

.yx-radio-card-input[b-2pq6d7kf2j] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--grey-900);
    cursor: pointer;
}

.yx-radio-card-label[b-2pq6d7kf2j] {
    font-size: 0.9rem;
    color: var(--grey-900);
}

.yx-radio-card-input:disabled[b-2pq6d7kf2j],
.yx-radio-card-input:disabled + .yx-radio-card-label[b-2pq6d7kf2j] {
    cursor: not-allowed;
    opacity: 0.6;
}
/* _content/Yellax.UI.Components/Components/Inputs/YxSearchBox.razor.rz.scp.css */
.yx-search-box[b-nhoo7epzny] {
    position: relative;
    display: inline-block;
    width: 17.5rem;
}

.yx-search-box-icon[b-nhoo7epzny] {
    position: absolute;
    left: var(--spacing-075);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-500);
    pointer-events: none;
    z-index: 1;
}

.yx-search-box-input[b-nhoo7epzny] {
    width: 100%;
}

/* The scope attribute lands on .yx-search-box (markup in this component), not on the
   DxTextBox root, so ::deep must hang off the wrapper to reach the rendered input. */
.yx-search-box[b-nhoo7epzny]  input {
    padding-left: var(--spacing-25);
}

/* DevExpress builds its focus glow from CSS variables, so override those (not the
   box-shadow rule): drop the blue shadow, keep a neutral focus border for accessibility. */
.yx-search-box[b-nhoo7epzny]  .dxbl-text-edit {
    --dxbl-text-edit-focus-shadow-color: transparent;
    --dxbl-text-edit-focus-shadow-spread: 0;
    --dxbl-text-edit-focus-border-color: var(--grey-500);
}
/* _content/Yellax.UI.Components/Components/Navigation/YxBackLink.razor.rz.scp.css */
.yx-back-link[b-uh5nxxw6s5] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    cursor: pointer;
}
/* _content/Yellax.UI.Components/Components/Navigation/YxSidePanel.razor.rz.scp.css */
/* Stays below the DevExpress popup layer so dialogs opened from panel content
   (e.g. DxPopup) render on top of the panel. */
.yx-side-panel-backdrop[b-itan71djgn] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.35);
    animation: yx-side-panel-fade-in-b-itan71djgn 0.2s ease-out;
}

@keyframes yx-side-panel-fade-in-b-itan71djgn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes yx-side-panel-slide-in-b-itan71djgn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.yx-side-panel[b-itan71djgn] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--white);
    /* Explicit text color: the panel can be rendered inside a host element (e.g. a
       header bar) whose inherited text color would otherwise bleed into the content. */
    color: var(--grey-900);
    animation: yx-side-panel-slide-in-b-itan71djgn 0.2s ease-out;
    outline: none;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
}

.yx-side-panel-header[b-itan71djgn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-075) var(--spacing-10);
    border-bottom: 1px solid var(--grey-100);
}

.yx-side-panel-title[b-itan71djgn] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--grey-900);
}

.yx-side-panel-close[b-itan71djgn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--grey-700);
    font-size: 1rem;
    cursor: pointer;
}

    .yx-side-panel-close:hover[b-itan71djgn] {
        background: var(--grey-100);
    }

.yx-side-panel-body[b-itan71djgn] {
    flex: 1 1 auto;
    padding: var(--spacing-075) var(--spacing-10);
    overflow-y: auto;
}
/* _content/Yellax.UI.Components/Components/Navigation/YxStepper.razor.rz.scp.css */
.yx-stepper[b-fa8gmw2k8x] {
    padding: var(--spacing-10) var(--spacing-15);
}

.yx-stepper-list[b-fa8gmw2k8x] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.yx-stepper-step[b-fa8gmw2k8x] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .yx-stepper-step:not(:last-child)[b-fa8gmw2k8x]::after {
        content: "";
        position: absolute;
        top: 1rem;
        left: calc(50% + 1.25rem);
        right: calc(-50% + 1.25rem);
        height: 0.125rem;
        background: var(--stepper-color-inactive);
    }

    .yx-stepper-step.yx-stepper-step-completed:not(:last-child)[b-fa8gmw2k8x]::after {
        background: var(--stepper-color-active);
    }

.yx-stepper-circle[b-fa8gmw2k8x] {
    position: relative;
    z-index: 1;
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--stepper-color-inactive);
    border-radius: 50%;
    color: var(--stepper-label-color-inactive);
    font-weight: 600;
}

.yx-stepper-step-completed .yx-stepper-circle[b-fa8gmw2k8x] {
    background: var(--stepper-color-active);
    border-color: var(--stepper-color-active);
    color: var(--white);
}

.yx-stepper-step-active .yx-stepper-circle[b-fa8gmw2k8x] {
    border-color: var(--stepper-color-active);
    color: var(--stepper-color-active);
}

.yx-stepper-label[b-fa8gmw2k8x] {
    /* Constrained so a long step name wraps under its own circle instead of stretching
       towards the neighbouring steps. */
    max-width: 10rem;
    margin-top: var(--spacing-025);
    color: var(--stepper-label-color-inactive);
    font-size: 0.85rem;
}

.yx-stepper-step-active .yx-stepper-label[b-fa8gmw2k8x],
.yx-stepper-step-completed .yx-stepper-label[b-fa8gmw2k8x] {
    color: var(--black);
}
/* _content/Yellax.UI.Components/Components/Navigation/YxTabStrip.razor.rz.scp.css */
.yx-tab-strip[b-r0m66zlal4] {
    display: inline-flex;
    gap: var(--spacing-025);
    background: var(--grey-100);
    border-radius: 8px;
    padding: var(--spacing-025);
}

.yx-tab-strip-item[b-r0m66zlal4] {
    background: none;
    border: none;
    padding: var(--spacing-025) var(--spacing-075);
    border-radius: 6px;
    font-size: 0.95rem;
    white-space: nowrap;
    color: var(--grey-500);
    cursor: pointer;
}

    .yx-tab-strip-item:hover[b-r0m66zlal4] {
        color: var(--black);
    }

    .yx-tab-strip-item.yx-tab-strip-item-active[b-r0m66zlal4] {
        background: var(--white);
        color: var(--black);
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }