@import '_content/Yellax.EngineeringPlatform.UI.Components/Yellax.EngineeringPlatform.UI.Components.2r4kbmvjny.bundle.scp.css';
@import '_content/Yellax.UI.Components/Yellax.UI.Components.pfla7tkynh.bundle.scp.css';

/* /PageComponents/Authentication/LoginDropdownComponent.razor.rz.scp.css */
/* The user menu is the last trigger in the bar; keep it just off the right edge. */
.login-trigger-cluster[b-0neipfnct5] {
    margin-right: 0.25rem;
}

/* The chevron says a menu opens behind the avatar, so the two icons read as one trigger
   and sit closer together than two separate buttons would. */
.user-menu-trigger[b-0neipfnct5] {
    gap: 0.25rem;
}

/* Smaller than the bar's icon size and dimmed: it is a disclosure marker, not an icon of
   its own. Matches the tenant name's chevron. */
.user-menu-chevron[b-0neipfnct5] {
    font-size: 0.75rem;
    opacity: 0.7;
}
/* /PageComponents/BackgroundJobs/Details/BackgroundJobDetailsPopupComponent.razor.rz.scp.css */
.content[b-03aq3r8qxy] {
    padding: 0.5rem 0;
}

.content-status[b-03aq3r8qxy] {
    display: flex;
    gap: 0.3125rem;
}

.content-status-text[b-03aq3r8qxy] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.content-details[b-03aq3r8qxy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eaf4fb;
    border-radius: 6px;
    padding: 0.625rem 1rem;
}

.details-title[b-03aq3r8qxy] {
    color: #1a73b5;
    font-weight: 500;
}

.details-text[b-03aq3r8qxy] {
    display: flex;
    flex-direction: column;
    width: 9.375rem;
    max-width: 9.375rem;
    text-align: right;
}

.details-text-initiatedby[b-03aq3r8qxy] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /PageComponents/BackgroundJobs/Status/BackgroundJobStatusComponent.razor.rz.scp.css */
/* Own zone in the top bar. No divider on either side: the design separates the zones by
   spacing alone, so the bar stays one uninterrupted surface. */
.status-zone[b-pbthhrvqfk] {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 0.75rem;
}

/* A near-rectangular card in the top bar rather than a boxed input, following the design's
   processing pill. It keeps a light surface on purpose: the state icon carries meaning
   through colour (icon-waiting, icon-completed and friends in app.css use the blue and
   green tokens), which would lose its contrast on the environment-coloured bar. */
.icon-textbox-container[b-pbthhrvqfk] {
    display: flex;
    align-items: center;
    border: none;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 92%);
    height: var(--topbar-chip-height);
    padding: 0 0.75rem;
    width: fit-content;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    font-size: 0.9375rem;
    color: var(--grey-900);
}

/* Sized just under the label next to it, as in the design: the state is read from the
   text, and the icon only tints it. */
.icon-in-textbox[b-pbthhrvqfk] {
    margin-right: 0.5rem;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
}

.icon-textbox[b-pbthhrvqfk] {
    border: none;
    background: transparent;
    font-size: inherit;
    color: inherit;
    flex: 1;
    outline: none;
}

.expand-btn[b-pbthhrvqfk] {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
    font-size: 1.125rem;
    color: var(--grey-700);
    display: flex;
    align-items: center;
}

.expand-btn:hover[b-pbthhrvqfk] {
    color: var(--grey-900);
}

.expand-btn:focus-visible[b-pbthhrvqfk] {
    outline: 2px solid var(--grey-700);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sits directly on the environment-coloured bar rather than in the light pill, so it uses the
   translucent topbar overlays that work on every environment colour. The status itself stays
   readable in its pill; this only says that what it shows may be stale. */
.live-updates-warning[b-pbthhrvqfk],
.live-updates-connecting[b-pbthhrvqfk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.5rem;
    padding: 0 0.625rem;
    height: var(--topbar-chip-height);
    border: 1px solid var(--topbar-chip-border);
    border-radius: 999px;
    background: var(--topbar-chip-bg);
    font-size: var(--topbar-font-size);
    color: white;
    white-space: nowrap;
}

.live-updates-warning i[b-pbthhrvqfk] {
    font-size: var(--topbar-icon-size);
    color: var(--yellow-500);
}

/* Neutral on purpose: connecting is not yet a problem, so it must not read as one. */
.live-updates-connecting i[b-pbthhrvqfk] {
    font-size: var(--topbar-icon-size);
    color: white;
}

/* /PageComponents/DataDimension/ComparisonSelectionBar.razor.rz.scp.css */
.comparison-selection-bar[b-j6a5bb7see] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
}

.comparison-selection-bar-leading[b-j6a5bb7see] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.comparison-selection-bar-label[b-j6a5bb7see] {
    color: var(--grey-700);
    font-size: 0.75rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.comparison-selection-bar-empty[b-j6a5bb7see] {
    color: var(--grey-700);
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-style: italic;
}

/* Reserves room for one chip row regardless of the actual count (zero, one or two), so the grid
   below never shifts as the user ticks or unticks a layer. Chips wrap onto a further line only in
   the rare case they do not all fit on one row - the reservation covers the common single-line
   case, which is the point of moving from stacked rows to chips. */
.comparison-selection-bar-entries[b-j6a5bb7see] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-025);
    min-height: 1.625rem;
}

/* Pill shape from the design system (viewpointdata.jsx quick-switch chip): the hairline border and
   card surface already used for .yx-card, a pill radius, and more padding on the left than the
   right because the remove button sits inside the chip on the right. */
.comparison-selection-chip[b-j6a5bb7see] {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding: 0 var(--spacing-025) 0 var(--spacing-050);
    gap: var(--spacing-025);
    border: 1px solid var(--grey-100);
    border-radius: 999px;
    background-color: var(--white);
}

.comparison-selection-chip-level[b-j6a5bb7see] {
    color: var(--grey-500);
    font-size: 0.75rem;
    line-height: 1;
}

.comparison-selection-chip-name[b-j6a5bb7see] {
    color: var(--grey-700);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

/* The consolidated layer carries a dark marking on the block itself; in this strip it earns the
   same emphasis through weight instead, so it reads as the merged outcome rather than one of the
   ordinary chips listed beside it. */
.comparison-selection-chip-name-consolidated[b-j6a5bb7see] {
    font-weight: 600;
}

.comparison-selection-chip-remove[b-j6a5bb7see] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--grey-500);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.comparison-selection-chip-remove:hover[b-j6a5bb7see] {
    color: var(--grey-900);
}
/* /PageComponents/DataDimension/ConsolidatedLayerCard.razor.rz.scp.css */
.consolidated-layer-card[b-vt15vm2gl3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    margin-bottom: var(--spacing-075);
    border-left: 3px solid var(--black);
}

.consolidated-layer-card-explanation[b-vt15vm2gl3] {
    flex: 1 1 auto;
    color: var(--grey-500);
    font-size: 0.875rem;
}

[b-vt15vm2gl3] .consolidated-layer-card-checkbox {
    flex: 0 0 auto;
}

.consolidated-layer-card-open-link[b-vt15vm2gl3] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    flex: 0 0 auto;
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
/* /PageComponents/Delivery/CreateDeliveryDialogComponent.razor.rz.scp.css */
.footer-content[b-xasmtjxglc] {
    display: flex
}

.footer-content-button[b-xasmtjxglc] {
    margin: 0.3125rem
}

.create-delivery-explanation[b-xasmtjxglc] {
    color: var(--grey-600);
}

.create-delivery-info[b-xasmtjxglc] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.875rem;
    font-size: 0.75rem;
    color: var(--grey-600);
}

.create-delivery-info i[b-xasmtjxglc] {
    margin-top: 0.125rem;
}
/* /PageComponents/Dialogs/ConfirmDataLossDialogComponent.razor.rz.scp.css */
.button-container[b-vap9llg1gq] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/ConfirmDeleteDialogComponent.razor.rz.scp.css */
.button-container[b-599aqze4ky] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/InformationDialogComponent.razor.rz.scp.css */
.button-container[b-927l8t5590] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/QuestionDialogComponent.razor.rz.scp.css */
.button-container[b-lb2lucm3xp] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/RenameComponent.razor.rz.scp.css */
.footer-content[b-zqd9hynuig] {
    display: flex
}

.footer-content-button[b-zqd9hynuig] {
    margin: 0.3125rem
}
/* /PageComponents/Environment/EnvironmentTileComponent.razor.rz.scp.css */
.environment-card[b-72n6mocier] {
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    /* The z-index lifts the hovered card above its (also position:relative) sibling
       cards, so the full-width tooltips are not painted under a neighbouring tile. */
    .environment-card:hover[b-72n6mocier] {
        z-index: 30;
        border-color: var(--grey-300);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    }

    /* Stretch the header/description/validation tooltips to the full card width:
       compensate the card-body padding, and for content next to the avatar also
       the avatar column (avatar + tile-top gap). */
    .environment-card .card-body[b-72n6mocier] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-050);
        padding: var(--spacing-075) var(--spacing-10);
        --yx-tooltip-inset-left: calc(-1 * var(--spacing-10));
        --yx-tooltip-inset-right: calc(-1 * var(--spacing-10));
    }

    .environment-card .tile-main[b-72n6mocier] {
        --yx-tooltip-inset-left: calc(-1 * (var(--spacing-10) + var(--size-avatar) + var(--spacing-075)));
    }

    .environment-card.environment-card-inactive[b-72n6mocier] {
        opacity: 0.7;
    }

.tile-top[b-72n6mocier] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-075);
}

.tile-main[b-72n6mocier] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Cap the overflow-menu box so the dropdown button does not inflate the header row;
   this keeps the name and description tight together and high against the avatar. The
   button is deliberately taller than this cap and overflows it on both sides - that is
   its click target, which stays clickable because the overflow is visible. */
.tile-main[b-72n6mocier]  .yx-tile-header-menu {
    height: 1.5rem;
    overflow: visible;
}

.tile-subtitle-wrap[b-72n6mocier] {
    position: relative;
    margin-bottom: var(--spacing-050);
}

.tile-subtitle[b-72n6mocier] {
    color: var(--grey-500);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-subtitle-tooltip[b-72n6mocier] {
    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;
    line-height: 1.4;
    white-space: pre-wrap;
    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;
}

.tile-subtitle.is-truncated:hover + .tile-subtitle-tooltip[b-72n6mocier] {
    display: block;
}

.tile-footer[b-72n6mocier] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-050);
}

.tile-total[b-72n6mocier] {
    color: var(--grey-700);
    font-size: 0.85rem;
    font-weight: 600;
}
/* /PageComponents/Files/UploadFilePopupComponent.razor.rz.scp.css */
.drop-file-label[b-la3q406oms] {
    font-weight: bold;
}

.custom-drop-zone[b-la3q406oms] {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 14.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

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

.upload-info-text[b-la3q406oms] {
    padding-top: 0.75rem;
    font-style: italic;
    font-size: 0.75rem;
    flex-direction: column;
    align-items: flex-end;
}
/* /PageComponents/General/DataStateIndicator.razor.rz.scp.css */
.data-state-cell[b-4sz84oajs4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.data-state-indicator[b-4sz84oajs4] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.data-state-indicator-active[b-4sz84oajs4] {
    background-color: var(--green-500);
}

.data-state-indicator-inactive[b-4sz84oajs4] {
    background-color: var(--grey-500);
}
/* /PageComponents/General/DataTypeIndicators/DataTypeIndicator.razor.rz.scp.css */
.data-type-indicator[b-02cy0zjc4o] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    font-weight: 550;
    color: black;
    user-select: none;
    border: 1px solid rgba(32, 32, 32, .2);
    background-color: #eeeeee;
}

.data-type-indicator-large[b-02cy0zjc4o] {
    gap: 0.4375rem;
    padding: 0.09375rem 0.3125rem;
    font-size: 0.9rem;
}

.data-type-indicator-medium[b-02cy0zjc4o] {
    gap: 0.375rem;
    padding: 0.0625rem 0.25rem;
    font-size: 0.700rem;
}

.data-type-indicator-small[b-02cy0zjc4o] {
    gap: 0.3125rem;
    padding: 0.05rem 0.2rem;
    font-size: 0.6rem;
}
/* /PageComponents/General/EntityAuditInfoComponent.razor.rz.scp.css */
.audit-rail[b-f81umh14ku] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-075);
    min-height: 1.125rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Drawn as a border rather than a sized box: a hairline is decoration and should stay one pixel
   whatever the browser font-size preference is. */
.audit-line[b-f81umh14ku] {
    align-self: center;
    border-top: 1px solid var(--grey-100);
}

/* Two equal stubs framing the texts: one before the first text, one against the right edge. */
.audit-line-lead[b-f81umh14ku],
.audit-line-tail[b-f81umh14ku] {
    flex: 0 0 3.375rem;
}

.audit-line-tail[b-f81umh14ku] {
    margin-left: auto;
}

.audit-item[b-f81umh14ku] {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: baseline;
    gap: var(--spacing-050);
    min-width: 0;
    white-space: nowrap;
}

.audit-name[b-f81umh14ku] {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-900);
}

.audit-sep[b-f81umh14ku] {
    flex: 0 0 auto;
    color: var(--grey-300);
}

.audit-date[b-f81umh14ku] {
    flex: 0 0 auto;
    color: var(--grey-700);
}
/* /PageComponents/General/MessagePresenterComponent.razor.rz.scp.css */
.MessageStyle[b-75on2g8iiw] {
    border-color: #888888;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.message-icon[b-75on2g8iiw] {
    margin-right: var(--spacing-025);
}

    /* Small */
    .MessageStyle.message-sm[b-75on2g8iiw] {
        font-size: 0.85rem;
        border-radius: 3px;
        margin: 0.125rem;
        padding: 0.25rem;
    }

    /* Normal */
    .MessageStyle.message-md[b-75on2g8iiw] {
        font-size: 1rem;
        border-radius: 5px;
        margin: 0.25rem;
        padding: 0.375rem;
    }

    /* Large */
    .MessageStyle.message-lg[b-75on2g8iiw] {
        font-size: 1.15rem;
        border-radius: 8px;
        margin: 0.375rem;
        padding: 0.625rem;
    }

/* Base */
.MessageBox[b-75on2g8iiw] {
    display: flex;
    flex-direction: column;
}

    /* Small */
    .MessageBox.message-sm[b-75on2g8iiw] {
        margin: 0.125rem 0.25rem;
    }

    /* Normal */
    .MessageBox.message-md[b-75on2g8iiw] {
        margin: 0.25rem 0.5rem;
    }

    /* Large */
    .MessageBox.message-lg[b-75on2g8iiw] {
        margin: 0.375rem 0.75rem;
    }

/* /PageComponents/General/WaitingComponent.razor.rz.scp.css */
.loadingContainer[b-is6mehpge1] {
    text-align: center;
    font-size: large;
}
/* /PageComponents/General/WorkflowSteps.razor.rz.scp.css */
.workflow-steps[b-nakk4wu13k] {
    display: flex;
    margin: 0 1.875rem;
}

.workflow ol[b-nakk4wu13k] {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0;
}

.workflow-step-active[b-nakk4wu13k] {
    color:      var(--yellax-flowstep-active-color);
    background: var(--yellax-flowstep-active-background);
}

.workflow-step-next[b-nakk4wu13k] {
    color:      var(--yellax-button-color);
    background: var(--yellax-button-background);
}

.workflow-step-lowprio[b-nakk4wu13k] {
    color:      var(--yellax-flowstep-lowprio-color);
    background: var(--yellax-flowstep-lowprio-background);
}

.workflow-step-disabled[b-nakk4wu13k] {
    color: var(--yellax-flowstep-disabled-color);
    background: var(--yellax-flowstep-disabled-background);
}

.workflow-step:hover[b-nakk4wu13k] {
    cursor: default;
}

.workflow-step[b-nakk4wu13k] {
    display: block;
    height: 100%;
    padding: 0.625rem calc(0.625rem + var(--s));
    box-sizing: border-box;
    font-size: 1rem;
    text-align: center;
    min-width: 10.9375rem;
}

.workflow-active:hover[b-nakk4wu13k] {
    cursor: pointer;
}

.workflow[b-nakk4wu13k] {
    --s: 0.9375rem;
}

    .workflow ol li[b-nakk4wu13k] {
        clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }

.workflow ol li:first-child[b-nakk4wu13k] {
    margin-left: 0;
}

.workflow ol li:last-child[b-nakk4wu13k] {
    margin-right: 0;
}
/* /PageComponents/Grid/ColumnChooserComponent.razor.rz.scp.css */
.column-chooser-wrapper[b-yj1zwlhyej] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
}

.column-chooser[b-yj1zwlhyej] {
    display: flex;
    gap: var(--spacing-10);
    height: 26.25rem;
}

.cc-panel[b-yj1zwlhyej] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--grey-100);
    border-radius: 5px;
    overflow: hidden;
    background: var(--grey-50);
}

.cc-panel-header[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    background: var(--white);
    border-bottom: 1px solid var(--grey-100);
    flex-shrink: 0;
}

.cc-panel-title[b-yj1zwlhyej] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    color: var(--grey-800);
    white-space: nowrap;
}

.cc-panel-header[b-yj1zwlhyej]  .yx-search-box {
    flex: 1;
    min-width: 0;
}

.cc-badge[b-yj1zwlhyej] {
    margin-left: auto;
    background: var(--button-color-primary);
    color: var(--white);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.0625rem 0.4375rem;
}

.cc-list[b-yj1zwlhyej] {
    overflow-y: auto;
    flex: 1;
}

.cc-row[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    border-bottom: 1px solid var(--grey-50);
    cursor: pointer;
    background: var(--white);
    user-select: none;
}

.cc-row:hover[b-yj1zwlhyej] {
    background: var(--blue-50);
}

.cc-row-selected[b-yj1zwlhyej] {
    background: var(--blue-50);
}

.cc-check[b-yj1zwlhyej] {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    border: 1.5px solid var(--grey-300);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.625rem;
    color: var(--white);
}

.cc-check-on[b-yj1zwlhyej] {
    border-color: var(--button-color-primary);
    background: var(--button-color-primary);
}

.cc-name[b-yj1zwlhyej] {
    flex: 1;
}

.cc-row-selected .cc-name[b-yj1zwlhyej] {
    color: var(--blue-700);
    font-weight: 500;
}

.cc-selected-row[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    border-bottom: 1px solid var(--grey-50);
    background: var(--white);
    cursor: grab;
}

.cc-dragging[b-yj1zwlhyej] {
    opacity: 0.5;
    background: var(--blue-50);
}

.cc-grip[b-yj1zwlhyej] {
    color: var(--grey-300);
    flex-shrink: 0;
    cursor: grab;
}

.cc-order-num[b-yj1zwlhyej] {
    font-size: 0.6875rem;
    color: var(--grey-400);
    width: 1.125rem;
    text-align: right;
    flex-shrink: 0;
}

.cc-selected-name[b-yj1zwlhyej] {
    flex: 1;
}

.cc-icon-btn[b-yj1zwlhyej] {
    background: none;
    border: none;
    padding: var(--spacing-025);
    cursor: pointer;
    color: var(--grey-500);
    display: flex;
    align-items: center;
    border-radius: 3px;
}

.cc-icon-btn:hover:not(:disabled)[b-yj1zwlhyej] {
    color: var(--grey-800);
    background: var(--grey-100);
}

.cc-icon-btn:disabled[b-yj1zwlhyej] {
    opacity: var(--disabled-opacity);
    cursor: default;
}

.cc-icon-btn-danger:hover:not(:disabled)[b-yj1zwlhyej] {
    color: var(--button-color-danger);
    background: var(--red-50);
}

.cc-empty[b-yj1zwlhyej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--grey-400);
    gap: var(--spacing-050);
    text-align: center;
    padding: var(--spacing-10);
}

.cc-empty-inline[b-yj1zwlhyej] {
    height: auto;
    padding: var(--spacing-075);
}

.cc-empty-icon[b-yj1zwlhyej] {
    font-size: 1.75rem;
}

.cc-hint[b-yj1zwlhyej] {
    font-size: 0.6875rem;
    color: var(--grey-500);
}
/* /PageComponents/Grid/GridDropDownButtonComponent.razor.rz.scp.css */
.dropdown-button-content[b-eb43zpmz38] {
    display: flex;
    align-items: center;
    width: 100%;
}

.dropdown-icon[b-eb43zpmz38] {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}
/* /PageComponents/IdentityCurrentUser/IdentityCurrentUserComponent.razor.rz.scp.css */
.user-info-cards[b-vwmaaswekp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}
/* /PageComponents/InputProcess/ExcelPreviewPopupComponent.razor.rz.scp.css */
.preview-body[b-eevm7w5oxg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

    .preview-body[b-eevm7w5oxg]  .datapreview-overview {
        flex: 1;
        height: 100%;
        overflow: auto;
    }

    /* The preview grid is read-only (AllowSort is off), so its column headers do nothing when
       clicked. DevExpress still renders a clickable hand cursor on the header cells; force the
       default cursor so the header does not look interactive. */
    .preview-body[b-eevm7w5oxg]  .datapreview-overview .dxbl-grid-header-row th,
    .preview-body[b-eevm7w5oxg]  .datapreview-overview .dxbl-grid-header-row th * {
        cursor: default !important;
    }

.type-count-summary[b-eevm7w5oxg] {
    padding: 0.25rem 0.5rem 0.625rem;
    font-size: 0.85rem;
}

    .type-count-summary .type-count-header[b-eevm7w5oxg] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 0.3125rem;
    }

    .type-count-summary .type-count-info[b-eevm7w5oxg] {
        color: #5f5e5a;
    }

    .type-count-summary .type-count-total[b-eevm7w5oxg] {
        color: #888780;
    }

    .type-count-summary .type-count-bar[b-eevm7w5oxg] {
        display: flex;
        gap: 0.0625rem;
        height: 0.5rem;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.3125rem;
    }

    .type-count-summary .type-count-segment[b-eevm7w5oxg] {
        flex-basis: 0;
        min-width: 0.1875rem;
    }

    .type-count-summary .type-counts[b-eevm7w5oxg] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.875rem;
    }

    .type-count-summary .type-count[b-eevm7w5oxg] {
        display: inline-flex;
        align-items: center;
        gap: 0.3125rem;
        white-space: nowrap;
    }

    .type-count-summary .type-count-dot[b-eevm7w5oxg] {
        width: 0.5625rem;
        height: 0.5625rem;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .type-count-summary .type-count-pct[b-eevm7w5oxg] {
        color: #888780;
    }

.column-role[b-eevm7w5oxg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #888780;
    margin-bottom: 0.1875rem;
}

    .column-role.column-role--converted[b-eevm7w5oxg] {
        color: #185fa5;
    }

    .column-role .column-role-label[b-eevm7w5oxg] {
        text-transform: uppercase;
        letter-spacing: .02em;
    }

.column-name[b-eevm7w5oxg] {
    display: block;
    font-weight: 500;
}
/* /PageComponents/Layout/MainLayout.razor.rz.scp.css */
html[b-d7xigin7qb], body[b-d7xigin7qb] {
    margin: 0;
    padding: 0;
    height: 100%;
}

.main-layout[b-d7xigin7qb] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* One flat environment colour, as in the design: no gradient and no inset highlight, so
   the bar reads as a single surface. Its only depth is the hairline shadow it casts down
   over the menu and the page. */
.platform-header[b-d7xigin7qb] {
    background-color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--topbar-height);
    /* Fixed-height chrome: never let a tall scrolling page squeeze the bar. */
    flex-shrink: 0;
    box-shadow: var(--shadow-topbar);
    /* Above the sidebar, so the shadow falls over it instead of behind it. */
    position: relative;
    z-index: 40;
}

/* The bar itself stays black in every environment. The environment is named by its tag
   instead, which carries the hue at 70% so the white label on it stays readable. Only the
   background is faded: fading the whole tag would take the label with it. Production shows
   no tag at all, so it has no rule here. */
.platform-header-local .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, var(--blue-500) 70%, transparent);
}

.platform-header-dev .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, cadetblue 70%, transparent);
}

.platform-header-test .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, forestgreen 70%, transparent);
}

.platform-header-qa .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, rebeccapurple 70%, transparent);
}

.platform-header-unknown .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, deeppink 70%, transparent);
}

/* Leftmost block of the bar. The logo is yellow-on-black artwork, so it needs a light
   surface of its own: on the environment-coloured header its black parts would be
   invisible. On a page with a menu the block lines up with the sidebar below it and
   narrows with it; on a page without a menu it always reads the fixed expanded token,
   because there is no sidebar edge to line up with. The block's own height follows the
   bar, so a taller logo does not make the bar taller. */
.platform-brand[b-d7xigin7qb] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 var(--sidebar-width-expanded);
    width: var(--sidebar-width-expanded);
    padding: 0 calc((var(--topbar-height) - var(--topbar-logo-height)) / 2);
    background-color: white;
    text-decoration: none;
    transition: width 0.2s ease, flex-basis 0.2s ease;
}

.main-layout.has-sidebar .platform-brand[b-d7xigin7qb] {
    flex-basis: var(--sidebar-width);
    width: var(--sidebar-width);
}

/* Every visible consequence of the collapse click comes from this selector — the layout
   itself never re-renders after the click, only after a navigation, so a C# condition
   here would lag a full page behind what the user just did. */
:root[data-sidebar-collapsed="true"] .main-layout.has-sidebar .platform-brand[b-d7xigin7qb] {
    display: none;
}

.platform-logo[b-d7xigin7qb] {
    height: var(--topbar-logo-height);
    width: auto;
}

.platform-text[b-d7xigin7qb] {
    color: rgb(255, 219, 41); /* Yellax Yellow */
}

/* A light card surface that casts a shadow onto the page, as in the design. No padding of
   its own: a selected menu row is a full-width band and has to reach both edges of the
   rail. The z-index puts the shadow over the page instead of under it. */
.sidebar[b-d7xigin7qb] {
    width: var(--sidebar-width);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-sidebar);
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    z-index: 20;
    transition: width 0.2s ease;
}

/* Positioned so a page overlay (YxLoadingOverlay) anchors to the content region instead of
   the viewport, keeping the header bar and the sidebar reachable while a page loads. */
.content[b-d7xigin7qb] {
    position: relative;
    margin-left: var(--sidebar-width);
    padding: 0;
    /* The application background (BUG#25375): the canvas colour with a faint network
       pattern along the flanks, drawn in the same tone family (#f3f3f3 base). It is a
       plain background on the scroll container, so the content scrolls over it while the
       pattern stays put. The colour stays declared as well, for the time before the SVG
       has arrived and for surfaces taller than it. */
    background: var(--surface-canvas) url('images/background-plexus.svg') center / cover no-repeat;
    overflow-y: auto;
    /* Reserve the scrollbar gutter so switching between a scrolling and a
       non-scrolling view does not shift the page horizontally. */
    scrollbar-gutter: stable;
    flex-grow: 1;
    transition: margin-left 0.2s ease;
}

.content.content-full[b-d7xigin7qb] {
    margin-left: 0;
}

.home-link[b-d7xigin7qb]{
    color: black;
    text-decoration: none;
    margin-left: 0.625rem;
}

/* Tenant and project name, in that order, in the space left between the logo and
   the buttons. No padding on the left: the tenant name is a .topbar-trigger button
   that carries its own 0.75rem, so a padding here would sit in front of that and
   leave a gap twice as wide as everywhere else in the bar. */
.platform-header-context[b-d7xigin7qb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-right: 0.75rem;
}

/* The only flexible item in the bar: it shrinks (min-width: 0 lets it go below
   its text width) so a long project name is truncated instead of pushing the
   tenant name and the buttons out of the way.
   No padding of its own: both names are .topbar-trigger buttons that already carry
   0.75rem, so the divider sits directly between the two hit areas with the same
   breathing room on each side. Adding padding here would push the project name a
   further 0.75rem away and put the divider off-centre between the two names. */
.platform-header-project[b-d7xigin7qb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    border-left: var(--topbar-divider-width) solid var(--topbar-divider);
}

.platform-environment[b-d7xigin7qb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1.625rem;
    font-size: var(--topbar-font-size);
    line-height: 1;
    padding: 0 0.5rem;
    border: 1px solid var(--topbar-chip-border);
    border-radius: var(--radius-xs);
    background-color: var(--topbar-chip-bg);
    color: var(--white);
}

/* No divider on the left: the design separates the zones by spacing alone, so the bar
   stays one uninterrupted surface. */
.header-buttons-row[b-d7xigin7qb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    /* Never squeezed: the project name gives way instead. */
    flex: 0 0 auto;
    align-self: stretch;
    padding-left: 0.75rem;
}
/* /PageComponents/Layout/MenuHeaderButtons.razor.rz.scp.css */
.button-container[b-x0u3d7405v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* The environment indicator is not a trigger, so it is sized here rather than by the
   shared .topbar-trigger rule. It used to be styled from MainLayout.razor.css, which
   never matched it: scoped css does not cross a component boundary. */
.platform-icon[b-x0u3d7405v] {
    font-size: var(--topbar-icon-size);
    padding: 0 0.5rem;
}
/* /PageComponents/Layout/ProjectNameComponent.razor.rz.scp.css */
/* Clicking the name opens the dashboard, so it is a button and carries the same hover
   and sizing as the other triggers in the bar (.topbar-trigger). A native button would
   otherwise draw its text in the browser's own font, hence font: inherit.
   The name itself is white (.topbar-trigger-name); only its icon stays brand yellow. */
.project-name[b-owpe3hsalb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font: inherit;
    min-width: 0;
    text-align: left;
}

.project-name > i[b-owpe3hsalb] {
    flex: 0 0 auto;
}

/* The text is the only clipping box, so a shortened name ends in an ellipsis
   instead of being cut off by an enclosing overflow. */
.project-name-text[b-owpe3hsalb] {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /PageComponents/Layout/TenantNameComponent.razor.rz.scp.css */
/* The name and its menu chevron are two hit areas of one segment, so they sit flush together. */
.tenant-trigger-cluster[b-5ajwwxpi5w] {
    display: flex;
    align-items: center;
    /* Keeps its full width in the header bar; the project name next to it is the
       part that gives way. */
    flex-shrink: 0;
}

.tenant-item[b-5ajwwxpi5w] {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* The one deliberate exception to the bar's single icon size: a disclosure chevron reads
   as a sub-element of the name next to it and looks oversized at the icon size. It follows
   the name in white rather than the brand yellow of the tenant icon — it belongs to the
   name, not to the workspace context that yellow marks. */
.tenant-name-chevron[b-5ajwwxpi5w] {
    font-size: 0.75rem;
    color: var(--white);
    opacity: 0.7;
}
/* /PageComponents/NavMenu/NavMenuComponent.razor.rz.scp.css */
/* The rail fills the sidebar, which is already positioned between the top bar and the
   bottom of the window. It used to subtract a hard-coded 3.5rem for a top bar that is
   3.125rem tall, which left the rail six pixels short of the sidebar it sits in.

   It does not scroll itself: the menu sections inside it do. Two nested scroll containers
   each reserve their own scrollbar, and an `overflow-y` also switches the horizontal axis
   from visible to auto — which is what chopped a menu label mid-letter instead of letting
   it end in an ellipsis. */
.nav-scrollable[b-lp1cri84dw] {
    display: block;
    height: 100%;
}
/* /PageComponents/NavMenu/NavMenuEnvironmentComponent.razor.rz.scp.css */
.nav-menu-environment[b-9e0nzk0f62] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The one scrolling box in the rail. The gutter is reserved whether or not a scrollbar is
   showing, so a menu that grows past the window height does not narrow every label the
   moment the scrollbar appears. */
.menu-sections[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.menu-section[b-9e0nzk0f62] {
    margin-bottom: 0.5rem;
}

.menu-section-header[b-9e0nzk0f62] {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.menu-items[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-subitems[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fixed row height and label size come from the prototype (44px / 13.5px); they keep the rail
   aligned with the top bar's chrome instead of following the page font. */
.menu-item[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.75rem;
    border: none;
    background: none;
    padding: 0 1rem;
    font-size: 0.84375rem;
    text-align: left;
    cursor: pointer;
    color: var(--text-secondary);
}

.menu-item:hover:not(:disabled)[b-9e0nzk0f62] {
    background-color: var(--surface-hover);
}

.menu-item:disabled[b-9e0nzk0f62] {
    cursor: default;
    opacity: 0.5;
}

.menu-item.active[b-9e0nzk0f62] {
    background-color: var(--accent-color);
    color: #fff;
}

.menu-item.active:hover:not(:disabled)[b-9e0nzk0f62] {
    background-color: var(--accent-color);
    color: #fff;
    filter: brightness(0.92);
}

.menu-item.sub-item[b-9e0nzk0f62] {
    padding-left: 2.5rem;
}

.icon-text[b-9e0nzk0f62] {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.icon[b-9e0nzk0f62] {
    width: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 0.75rem;
    font-size: 1.125rem;
}

/* min-width is what makes the ellipsis work at all: a flex item defaults to min-width:auto
   and then refuses to shrink below its text, so the label overflowed the rail and was cut
   off mid-letter by the first ancestor that clipped. The full name stays in the row's
   title attribute. */
.text[b-9e0nzk0f62] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-menu-environment.collapsed .menu-item[b-9e0nzk0f62] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.nav-menu-environment.collapsed .icon-text[b-9e0nzk0f62] {
    justify-content: center;
}

.nav-menu-environment.collapsed .icon[b-9e0nzk0f62] {
    margin-right: 0;
}

/* Collapsed, a section is a short rule instead of a name; the name stays reachable as the
   header's tooltip, so the empty header still needs a hoverable height. */
.nav-menu-environment.collapsed .menu-section-header[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0;
}

/* The rule is drawn as a border rather than as a one-pixel-high box: a hairline is decoration and
   should stay crisp instead of thickening with the browser font-size preference, and a height in
   pixels is the one way of expressing it that the scaling guard rejects. */
.nav-menu-environment.collapsed .menu-section-header[b-9e0nzk0f62]::after {
    content: "";
    width: 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

/* Sunken surface, one step darker than the rail above it, so the collapse row reads as the
   rail's footer rather than as another menu item. */
.menu-collapse-toggle[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 2.75rem;
    border: none;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--surface-sunken);
    padding: 0 1rem;
    font-size: 0.84375rem;
    cursor: pointer;
    color: var(--text-secondary);
    flex: 0 0 auto;
}

.menu-collapse-toggle:hover[b-9e0nzk0f62] {
    background-color: var(--neutral-200);
}
/* /PageComponents/OutputTarget/LeadingSchemaBanner.razor.rz.scp.css */
.leading-banner[b-s66jqa1dhq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.leading-banner-left[b-s66jqa1dhq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.leading-banner-icon[b-s66jqa1dhq] {
    font-size: 1.25rem;
    color: var(--yellow-500);
}

.leading-banner-icon-empty[b-s66jqa1dhq] {
    color: var(--grey-300);
}

/* The filled star is the Unicode character, not a FontAwesome glyph: the kit only
   serves the regular styles, so a solid fa-star still draws as an outline. The
   character renders smaller than a FontAwesome glyph at the same font size, hence the
   step up from the 1.25rem the icons above use. */
.leading-banner-star[b-s66jqa1dhq] {
    font-size: 1.625rem;
    line-height: 1;
}

.leading-banner-content[b-s66jqa1dhq] {
    display: flex;
    flex-direction: column;
}

.leading-banner-label[b-s66jqa1dhq] {
    font-weight: 700;
}

.leading-banner-description[b-s66jqa1dhq] {
    color: var(--grey-700);
}
/* /PageComponents/OutputTarget/SchemaTileComponent.razor.rz.scp.css */
.schema-tile[b-lmjvurb85q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 30rem;
    padding: 1rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
}

.schema-tile-inactive[b-lmjvurb85q] {
    opacity: 0.5;
}

.schema-tile-leading[b-lmjvurb85q] {
    border-color: var(--yellow-500);
    border-width: 2px;
}

/* The tile's own badge look: a softer tint than the shared tag colours and a wider gap between
   icon and label. Scoped here, so the tags elsewhere in the app keep the palette they have. */
.schema-tile-badges[b-lmjvurb85q]  .static-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.schema-tile-badges[b-lmjvurb85q]  .schema-tile-leading-badge {
    background-color: var(--green-50);
}

.schema-tile-badges[b-lmjvurb85q]  .schema-tile-customized-badge {
    background-color: var(--teal-100);
}

/* The badge's star carries the same filled yellow shape as the leading-schema star in the banner
   and on the dashboard, so the chosen leading schema reads the same everywhere. */
.schema-tile-badges[b-lmjvurb85q]  .schema-tile-leading-badge .static-tag-icon-character {
    color: var(--yellow-500);
    font-size: 1.5em;
}

.schema-tile-badges[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    min-height: 1.5rem;
}

.schema-tile-info[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 90%;
    color: var(--grey-700);
}

.schema-tile-counts[b-lmjvurb85q],
.schema-tile-mapped[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    font-size: 90%;
}

.schema-tile-counts .tile-label[b-lmjvurb85q],
.schema-tile-mapped .tile-label[b-lmjvurb85q] {
    color: var(--grey-700);
}

.schema-tile-quality[b-lmjvurb85q] {
    margin-top: var(--spacing-025);
    padding-top: var(--spacing-050);
    border-top: 1px solid var(--grey-100);
    font-size: 90%;
}

    .schema-tile-quality .tile-label[b-lmjvurb85q] {
        color: var(--grey-700);
    }

.schema-tile-actions[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
}
/* /PageComponents/ParseRules/ParseRuleFileActionsComponent.razor.rz.scp.css */
.parse-rule-file-actions[b-a94ma6iwyg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-button-inbetween);
}
/* /PageComponents/ParseRules/ParseRuleFileCardComponent.razor.rz.scp.css */
.parse-rule-file-card-identity[b-ehb2lxv8py] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-075);
    min-width: 0;
}

.parse-rule-file-card-name[b-ehb2lxv8py] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parse-rule-file-card-meta[b-ehb2lxv8py] {
    color: var(--grey-500);
}

.parse-rule-file-card-session-notice[b-ehb2lxv8py] {
    font-size: 0.8rem;
    color: var(--grey-500);
}
/* /PageComponents/Schema/ChangeSchemaEnvironmentImpactPopupComponent.razor.rz.scp.css */
.button-container[b-44z7dod741] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Schema/SchemaField/SchemaFieldDefinePredefinedNumberValues.razor.rz.scp.css */
.component-caption[b-tkvjb64ucn] {
    background-color: #EEEEEE;
    border: 1px #AAAAAA solid;
    border-radius: 6px;
    padding: 0.3125rem 0.75rem;
    overflow-wrap: anywhere;
}
/* /PageComponents/Schema/SchemaField/SchemaFieldDefinePredefinedTextValues.razor.rz.scp.css */
.component-caption[b-3535kns2zu] {
    background-color: #EEEEEE;
    border: 1px #AAAAAA solid;
    border-radius: 6px;
    padding: 0.3125rem 0.75rem;
    overflow-wrap: anywhere;
}
/* /PageComponents/SchemaDefinitionInstances/Step1/SchemaDefinitionInstanceImportStep1.razor.rz.scp.css */
.schema-file-card[b-auyi1qa1oc] {
    padding: var(--spacing-075) var(--spacing-10);
}
/* /PageComponents/SchemaDefinitionInstances/Step2/SchemaDefinitionInstanceImportStep2.razor.rz.scp.css */
.schema-information[b-7ty93ms2xu] {
    padding: var(--spacing-075) var(--spacing-10);
}

.schema-identity[b-7ty93ms2xu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    max-width: 44rem;
    padding: var(--spacing-075) var(--spacing-10);
    border: 1px solid var(--grey-100);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
}

.schema-identity-icon[b-7ty93ms2xu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    background-color: var(--accent-color-subtle);
    color: var(--accent-color);
}

.schema-identity-caption[b-7ty93ms2xu] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.schema-identity-name[b-7ty93ms2xu] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.schema-identity-tags[b-7ty93ms2xu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-050);
    margin-left: auto;
}

/* Scoped to these chips on purpose — elsewhere the tag keeps its own weight and colour. */
.schema-identity-tags[b-7ty93ms2xu]  .static-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    font-weight: 500;
    color: var(--grey-700);
}

.schema-information-messages[b-7ty93ms2xu] {
    margin-top: var(--spacing-075);
    max-width: 44rem;
}

/* Its own .MessageBox is a column flex container, which stretches every message to the full
   width — hence the explicit row direction and flex-start. Layout only; severity stays theirs. */
.schema-information-messages[b-7ty93ms2xu]  .MessageBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-050);
}

.schema-information-messages[b-7ty93ms2xu]  .MessageStyle {
    margin: 0;
    /* Transparent rather than none, so the box keeps its size. */
    border-color: transparent;
}

.schema-descriptions[b-7ty93ms2xu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacing-10);
    max-width: 44rem;
    margin-top: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    border: 1px solid var(--grey-100);
    border-radius: 6px;
}
/* /PageComponents/SchemaDefinitionInstances/Step3/SchemaDefinitionInstanceImportStep3.razor.rz.scp.css */
.schema-content[b-0aeflg5xwp] {
    padding: var(--spacing-075) var(--spacing-10);
}

.schema-content-kind[b-0aeflg5xwp] {
    color: var(--grey-600);
}

.schema-content-count[b-0aeflg5xwp] {
    color: var(--grey-700);
}

/* Two fixed slots, so the value type and the key tag start at the same offset on every row.
   The widths follow the longest member of each closed label set, not a round guess:

     requiredness  "Required" | "Optional"        — both 8 characters
     value type    "Text" | "Number" | "Boolean"   — longest 7 characters, plus its icon

   Both tags render at font-size 0.7rem; the slot adds the tag's own padding and border. Add a
   longer label to either set — or translate these — and these two widths need rechecking. */
.schema-content-field[b-0aeflg5xwp] {
    display: grid;
    grid-template-columns: 4.75rem 5.75rem auto;
    align-items: center;
    /* Without this a grid item stretches, widening the pill instead of leaving white space. */
    justify-items: start;
    gap: var(--spacing-025);
}
/* /PageComponents/SystemHealth/SystemHealthComponent.razor.rz.scp.css */
.system-health-cards[b-6y90k7brf3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}
/* /PageComponents/UserInvitations/UserManagementComponent.razor.rz.scp.css */
.user-management[b-jh5edn0s1a] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
}

.user-management-section + .user-management-section[b-jh5edn0s1a] {
    padding-top: var(--spacing-075);
    border-top: 1px solid var(--grey-100);
}

.section-header[b-jh5edn0s1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-050);
}

    .section-header .section-title[b-jh5edn0s1a] {
        margin-bottom: 0;
    }

.section-title[b-jh5edn0s1a] {
    margin-bottom: var(--spacing-050);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.invite-form[b-jh5edn0s1a] {
    max-width: 32rem;
}

.stat-row[b-jh5edn0s1a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-075);
}

.stat-box[b-jh5edn0s1a] {
    min-width: 8.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    background-color: var(--white);
}

.stat-value[b-jh5edn0s1a] {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-label[b-jh5edn0s1a] {
    font-size: 0.8rem;
    color: var(--grey-700);
}
/* /PageComponents/Viewpoint/DataStateBulkActions.razor.rz.scp.css */
.data-state-bulk-actions[b-9b8gnm5gcy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.data-state-bulk-actions-footer[b-9b8gnm5gcy] {
    display: flex;
    gap: 0.75rem;
}
/* /PageComponents/Viewpoint/GridRowCountSummary.razor.rz.scp.css */
.grid-row-count-summary[b-m6hfs5yes5] {
    display: flex;
    justify-content: flex-end;
    font-size: 0.875rem;
}
/* /PageComponents/Viewpoint/NoSchemasComponent.razor.rz.scp.css */
.no-schemas-container[b-egf14pjsab] {
    text-align: center;
    padding: 1rem;
    background-color: var(--grey-100);
    border-radius: 6px;
}

.no-schemas-icon[b-egf14pjsab] {
    font-size: 2rem;
    color: var(--orange-500);
}

.no-schemas-description[b-egf14pjsab] {
    color: var(--grey-500);
}
/* /PageComponents/Viewpoint/SelectSchemaEnvironmentComponent.razor.rz.scp.css */
/* Compact, inline variant: this component sits in the Views control row next to the Data/Classify
   tabs, not in a wide detail-form layout. */
.checkbox-row[b-usqjdtnjlw] {
    display: flex;
}

.combobox-caption[b-usqjdtnjlw] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.combobox-container[b-usqjdtnjlw] {
    flex: 0 0 auto;
    width: 17.5rem;
}

.flex-container[b-usqjdtnjlw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /PageComponents/Viewpoint/ViewpointPickerComponent.razor.rz.scp.css */
.viewpoint-picker[b-v9k0hze5u2] {
    position: relative;
    display: inline-flex;
}

.viewpoint-picker-toggle[b-v9k0hze5u2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    max-width: 24rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    cursor: pointer;
}

.viewpoint-picker-toggle-label[b-v9k0hze5u2] {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.viewpoint-picker-toggle-chevron[b-v9k0hze5u2] {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.viewpoint-picker-panel[b-v9k0hze5u2] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 26rem;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
}

.viewpoint-picker-list[b-v9k0hze5u2] {
    max-height: 20rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.viewpoint-picker-item[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-sm);
}

.viewpoint-picker-item:hover[b-v9k0hze5u2] {
    background-color: var(--surface-hover);
}

.viewpoint-picker-item-selected[b-v9k0hze5u2] {
    background-color: var(--neutral-150);
}

.viewpoint-picker-item-select[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

.viewpoint-picker-item-selected-icon[b-v9k0hze5u2] {
    flex: 0 0 auto;
    color: var(--teal-600);
}

.viewpoint-picker-item-pin[b-v9k0hze5u2] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
}

/* A pinned viewpoint reads as unmistakably different from an unpinned one - the same glyph in
   two FontAwesome weights alone is too subtle to notice (US#25313 v16 review). A filled yellow
   star against an outlined grey one carries the distinction instead. The filled shape is the
   Unicode character, not a FontAwesome glyph: the kit only serves the regular styles, so a solid
   fa-star still draws as an outline. */
.viewpoint-picker-pin-active[b-v9k0hze5u2] {
    color: var(--yellow-500);
    font-size: 1.125rem;
    line-height: 1;
}

.viewpoint-picker-pin-inactive[b-v9k0hze5u2] {
    color: var(--text-tertiary);
}

.viewpoint-picker-empty[b-v9k0hze5u2] {
    padding: 0.5rem;
    color: var(--text-tertiary);
}

.viewpoint-picker-footer[b-v9k0hze5u2] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

.viewpoint-picker-manage[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    color: var(--text-secondary);
}

.viewpoint-picker-manage:hover[b-v9k0hze5u2] {
    background-color: var(--surface-hover);
}
/* /PageComponents/Viewpoint/ViewpointQuickSwitchComponent.razor.rz.scp.css */
.viewpoint-quick-switch[b-8bj819nw4u] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.viewpoint-quick-switch-caption[b-8bj819nw4u] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-right: 0.125rem;
}

.viewpoint-quick-switch-chip[b-8bj819nw4u] {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding: 0 0.25rem 0 0.5625rem;
    gap: 0.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.viewpoint-quick-switch-chip-active[b-8bj819nw4u] {
    border-color: var(--teal-500);
    background: var(--surface-selected);
}

.viewpoint-quick-switch-chip-label[b-8bj819nw4u] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--text-secondary);
    max-width: 11.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewpoint-quick-switch-chip-active .viewpoint-quick-switch-chip-label[b-8bj819nw4u] {
    font-weight: 600;
    color: var(--teal-600);
}

.viewpoint-quick-switch-chip-pin[b-8bj819nw4u] {
    display: inline-flex;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.125rem;
    font-size: 0.6875rem;
}

.viewpoint-quick-switch-pin-active[b-8bj819nw4u] {
    color: var(--yellow-500);
    font-size: 1.125rem;
    line-height: 1;
}

.viewpoint-quick-switch-pin-inactive[b-8bj819nw4u] {
    color: var(--text-tertiary);
}
/* /PageComponents/Viewpoint/WorkEfficiencyPopup.razor.rz.scp.css */
.work-efficiency-content[b-csrchwquda] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
    box-sizing: border-box;
}

.work-efficiency-chart-card[b-csrchwquda] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-sizing: border-box;
}

.work-efficiency-chart-title[b-csrchwquda] {
    font-weight: 600;
    font-size: 0.9rem;
}

.work-efficiency-chart-container[b-csrchwquda] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.work-efficiency-summary[b-csrchwquda] {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.work-efficiency-summary-label[b-csrchwquda] {
    font-size: 0.85rem;
    font-weight: 600;
}

.work-efficiency-summary-value[b-csrchwquda] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
/* /PageComponents/Views/BlockedOnDataMessage.razor.rz.scp.css */
.views-empty-state[b-kekyewzuor] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-kekyewzuor] {
    font-size: 1.75rem;
    color: var(--amber-600);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-kekyewzuor] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-kekyewzuor] {
    color: var(--text-secondary);
}

.views-blocked-on-data-actions[b-kekyewzuor] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.views-empty-state-hint[b-kekyewzuor] {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}
/* /PageComponents/Views/LayerHistoryDockedPanel.razor.rz.scp.css */
.layer-history-panel[b-bu5t73kdzx] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: 14rem;
    margin-top: 0.625rem;
    border-top: 1px solid var(--border-strong);
    background: var(--surface-card);
}

.layer-history-panel-header[b-bu5t73kdzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.layer-history-panel-title[b-bu5t73kdzx] {
    font-weight: 600;
    color: var(--text-primary);
}

.layer-history-panel-close[b-bu5t73kdzx] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
}

.layer-history-panel[b-bu5t73kdzx]  .layer-history-panel-grid {
    flex: 1 1 auto;
    min-height: 0;
}
/* /PageComponents/Views/NoSchemaMessage.razor.rz.scp.css */
.views-empty-state[b-rqa1mdpz2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-rqa1mdpz2i] {
    font-size: 1.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-rqa1mdpz2i] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-rqa1mdpz2i] {
    color: var(--text-secondary);
}
/* /PageComponents/Views/NoViewpointsMessage.razor.rz.scp.css */
.views-empty-state[b-18ojep62k8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-18ojep62k8] {
    font-size: 1.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-18ojep62k8] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-18ojep62k8] {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
/* /PageComponents/Views/ViewsToolbarComponent.razor.rz.scp.css */
.views-toolbar[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.views-toolbar-left[b-ptx30jxcaf],
.views-toolbar-right[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.views-toolbar-row-count[b-ptx30jxcaf] {
    display: inline-flex;
}

.views-toolbar-row-count[b-ptx30jxcaf]  .grid-row-count-summary {
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.views-toolbar-caption[b-ptx30jxcaf] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.views-toolbar-divider[b-ptx30jxcaf] {
    width: 0.0625rem;
    height: 1.25rem;
    background: var(--border-subtle);
}

.views-active-rows-only-chip[b-ptx30jxcaf] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.views-toolbar[b-ptx30jxcaf]  .views-tool-active {
    background: var(--neutral-150);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.views-legend-anchor[b-ptx30jxcaf] {
    position: relative;
    display: inline-flex;
}

.views-legend-popover[b-ptx30jxcaf] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    width: 18.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.views-legend-heading[b-ptx30jxcaf] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-tertiary);
}

.views-legend-row[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
}

.views-legend-text[b-ptx30jxcaf] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.views-legend-mark[b-ptx30jxcaf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    flex: 0 0 auto;
}

.views-legend-mark-invalid-value[b-ptx30jxcaf] {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    background: var(--status-invalid-bg);
    border: 1px solid var(--status-invalid-fg);
}

.views-legend-mark-invalid-count[b-ptx30jxcaf] {
    min-width: 1.125rem;
    height: 1.0625rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--status-invalid-bg);
    color: var(--status-invalid-fg);
    font-size: 0.6875rem;
    font-weight: 700;
}

.views-legend-icon[b-ptx30jxcaf] {
    width: 1.25rem;
    flex: 0 0 auto;
    text-align: center;
    font-size: 0.875rem;
}

.views-legend-icon-valid[b-ptx30jxcaf] {
    color: var(--status-valid-fg);
}

.views-legend-icon-unassigned[b-ptx30jxcaf] {
    color: var(--neutral-400);
}
/* /Pages/DataDimension/Columns/Edit/DataColumnEditPage.razor.rz.scp.css */
.container[b-m7kjld8bpy] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
    max-width: auto;
}

.button-icon[b-m7kjld8bpy] {
    margin-right: 0.3125rem;
}

.button-group-container[b-m7kjld8bpy]{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.dxbl-modal-footer[b-m7kjld8bpy]{
    gap: 0.625rem;
}

/* Matches the "Details" panel width on the ParseRuleBooleanEdit page (YxSettingsCard in a column
   capped at 60rem): the expression builder renders its own card, so it is sized here rather than
   wrapped in a second card. Its own heading is suppressed (ShowSummaryTitle="false" in the .razor)
   because the surrounding YxFormItem already shows the same label above it. */
[b-m7kjld8bpy] .data-column-edit-derived-expression-builder {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60rem;
}
/* /Pages/DataDimension/Columns/Overview/DataColumnOverviewPage.razor.rz.scp.css */
/* This toolbar holds only the row count, which sits on the right. Layout and margins come from
   the shared .grid-toolbar in app.css. */
.grid-toolbar[b-yq5bpuho3a] {
    justify-content: flex-end;
}

.btn-header-group[b-yq5bpuho3a] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}
/* /Pages/DataDimension/Layers/Compare/CompareLayersPage.razor.rz.scp.css */
.compare-layers-header[b-4t2ug7l9g9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.data-grid-header[b-4t2ug7l9g9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}


.compare-layer-container[b-4t2ug7l9g9] {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-right: auto;
    width: fit-content;
}

.compare-layer-names[b-4t2ug7l9g9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.compare-option-container[b-4t2ug7l9g9] {
    display: grid;
    grid-template-columns: auto auto auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-right: 1rem;
    margin-left: auto;
    width: fit-content;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.compare-option[b-4t2ug7l9g9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    line-height: 0.0625rem;
    height: 1.375rem;
}

.compare-option-color-box[b-4t2ug7l9g9] {
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid black;
}

    .compare-option-color-box.compare-option-color-box-unchanged[b-4t2ug7l9g9] {
        background-color: var(--white);
    }

    .compare-option-color-box.compare-option-color-box-changed[b-4t2ug7l9g9] {
        background-color: var(--blue-100);
    }

    .compare-option-color-box.compare-option-color-box-only-in-upper-layer[b-4t2ug7l9g9] {
        background-color: var(--green-300);
    }

    .compare-option-color-box.compare-option-color-box-only-in-lower-layer[b-4t2ug7l9g9] {
        background-color: var(--orange-300);
    }

.compare-option-text[b-4t2ug7l9g9] {
    font-size: 0.9rem
}

.value-cell[b-4t2ug7l9g9] {
    width: 100%
}

.transparent-cell[b-4t2ug7l9g9] {
    min-height: 1.25rem;
    opacity: 0.5;
    /* Background pattern */
    background-image: repeating-linear-gradient(45deg, #b1b1b1 25%, transparent 25%, transparent 75%, #b1b1b1 75%, #b1b1b1), repeating-linear-gradient(45deg, #b1b1b1 25%, #ffffff 25%, #ffffff 75%, #b1b1b1 75%, #b1b1b1);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}
/* /Pages/DataDimension/Layers/Compare/Support/CompareLayersLayerNameComponent.razor.rz.scp.css */
.compare-a-layer[b-806e8wtibl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-layername[b-806e8wtibl] {
    width: 10rem;
}

.layer-text[b-806e8wtibl] {
    display: inline-block;
    width: 21.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-806e8wtibl] .represendstopview-tag {
    font-size: 0.875rem;
}

[b-806e8wtibl] .layer-number-orange {
    background-color: var(--orange-300) !important;
}

[b-806e8wtibl] .layer-number-green {
    background-color: var(--green-300) !important;
}
/* /Pages/DataDimension/Layers/Edit/ManageLayers.razor.rz.scp.css */
.container[b-3qx7hgoobu] {
    margin-top: 0.625rem;
    margin-left: 1.25rem;
    max-width: auto;
}

.btn-header-group[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.card[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    background-color: white;
    width: 100%;
}

.card-content[b-3qx7hgoobu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.card-header[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
    color: black;
    background-color: white;
    padding: .3rem;
}

.card-level[b-3qx7hgoobu] {
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
    background-color: lightgray;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0.125rem 0.25rem;
    border-radius: 10%;
    width: 2.5rem
}

.card-header.ismoved[b-3qx7hgoobu] {
    background-color: #fff3cd; /* alert-warning */
}

.card-header.inactive .card-level[b-3qx7hgoobu],
.card-header.inactive .card-name[b-3qx7hgoobu],
.card-header.inactive .card-source[b-3qx7hgoobu],
.card-header.inactive .card-create[b-3qx7hgoobu] {
    color: var(--grey-500);
}

.card-icon[b-3qx7hgoobu] {
    width: 1.25rem;
}

.card-name[b-3qx7hgoobu] {
    font-size: 0.875rem;
    font-weight: bold;
    text-align: left;

    vertical-align: middle;
    display: inline-block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1; /* Neem alle beschikbare ruimte in */
    min-width: 12.5rem; /* Zorg dat text-overflow: ellipsis werkt */
    margin-right: 0.3125rem;
    margin-left: 0.3125rem;
}

.card-create[b-3qx7hgoobu] {
    text-align: left;
    width: 7.5rem;
}

.card-source[b-3qx7hgoobu] {
    text-align: left;
    width: 25rem;
}

.checkbox-name[b-3qx7hgoobu] {
    font-size: 0.625rem;
    line-height: 2;
    vertical-align: middle;
    display: inline-block;
}

.legend-bar[b-3qx7hgoobu] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.legend-container[b-3qx7hgoobu] {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-left: auto;
    margin-right: 1rem;
    width: fit-content;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.legend-item[b-3qx7hgoobu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    height: 1.375rem;
}

.legend-color-box[b-3qx7hgoobu] {
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid black;
}

.legend-color-box-moved[b-3qx7hgoobu] {
    background-color: #fff3cd; /* alert-warning, matches .card-header.ismoved */
}

.legend-text[b-3qx7hgoobu] {
    font-size: 0.9rem;
}
/* /Pages/DataDimension/Layers/Overview/DataLayerOverviewPage.razor.rz.scp.css */
/* Keeps the row's height stable whether or not anything is ticked, so the list below does not
   jump the moment the first tick appears. Layout and margins otherwise come from the shared
   .grid-toolbar in app.css. */
.grid-toolbar[b-ynv7vtv3ht] {
    min-height: var(--size-button-height);
}

.grid-toolbar[b-ynv7vtv3ht]  .grid-row-count-summary {
    margin-left: auto;
}

/* Same link treatment as "Open in View" on the consolidated layer card, so the two read as the
   same kind of action rather than as a button next to a link. */
.layer-overview-action[b-ynv7vtv3ht] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    flex: 0 0 auto;
    margin-right: var(--spacing-10);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

/* /Pages/DataDimension/Layers/View/DataLayerViewPage.razor.rz.scp.css */
.data-layer-view-header[b-w23z1vq6na] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

/* Description and Source are two short facts, so they sit on one wrapping line as label/value
   pairs instead of two bare lines under the title. */
.data-layer-view-facts[b-w23z1vq6na] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.data-layer-view-fact[b-w23z1vq6na] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.data-layer-view-fact-label[b-w23z1vq6na] {
    flex: 0 0 auto;
    color: var(--grey-700);
}

.data-layer-view-fact-value[b-w23z1vq6na] {
    color: var(--text-primary);
}

.container[b-w23z1vq6na] {
    margin-top: var(--spacing-050);
}

.transparent-cell[b-w23z1vq6na] {
    min-height: 1.25rem;
    opacity: 0.5;
    /* Background pattern */
    background-image: repeating-linear-gradient(45deg, #b1b1b1 25%, transparent 25%, transparent 75%, #b1b1b1 75%, #b1b1b1), repeating-linear-gradient(45deg, #b1b1b1 25%, #ffffff 25%, #ffffff 75%, #b1b1b1 75%, #b1b1b1);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}

.column_data[b-w23z1vq6na] {
    background: transparent;
}
/* /Pages/Delivery/Detail/DeliveryDetailPage.razor.rz.scp.css */
.delivery-detail-header[b-144tocikml] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.delivery-running-block[b-144tocikml] {
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.delivery-running-title[b-144tocikml] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.delivery-running-hint[b-144tocikml] {
    font-size: 0.8125rem;
    color: var(--grey-600);
}

.delivery-failure-block[b-144tocikml] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
    background-color: var(--danger-color-subtle);
    border: 1px solid var(--button-color-danger);
    border-radius: 8px;
}

.delivery-failure-icon[b-144tocikml] {
    margin-top: 0.125rem;
    color: var(--button-color-danger);
}

.delivery-failure-title[b-144tocikml] {
    font-weight: 600;
    color: var(--button-color-danger);
}

.delivery-failure-reason[b-144tocikml] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--grey-600);
}

.delivery-details[b-144tocikml] {
    padding: 0.75rem;
    margin-bottom: 0.875rem;
}

.delivery-details-header[b-144tocikml] {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    padding: 0.25rem 0.25rem 0.75rem;
}

.delivery-details-header h3[b-144tocikml] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.delivery-facts[b-144tocikml] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    padding: 0 0.25rem 0.25rem;
}

.delivery-fact[b-144tocikml] {
    display: flex;
    flex-direction: column;
}

.delivery-fact-label[b-144tocikml] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--grey-700);
}

.delivery-fact-value[b-144tocikml] {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: normal;
}

.delivery-file-available[b-144tocikml] {
    color: var(--green-700);
}

.delivery-file-expired[b-144tocikml] {
    color: var(--grey-600);
}

.delivery-component-breakdown[b-144tocikml] {
    padding: 0.75rem;
}

.delivery-component-breakdown h3[b-144tocikml] {
    padding: 0.25rem 0.25rem 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.delivery-component-count[b-144tocikml] {
    display: block;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.delivery-component-count-valid[b-144tocikml] {
    color: var(--green-700);
}

.delivery-component-count-invalid[b-144tocikml] {
    color: var(--button-color-danger);
}

.delivery-component-count-muted[b-144tocikml] {
    color: var(--grey-600);
}

/* The right padding lines the totals up with the grid values above them: the grid right-aligns each
   value at its own cell padding, which this row has to match. Nudge this one value if it sits a
   hair off - the grid's padding comes from the DevExpress stylesheet, not from ours. */
.delivery-total-row[b-144tocikml] {
    display: flex;
    align-items: center;
    font-weight: 600;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    margin-top: 0.25rem;
    background-color: var(--grey-50);
    border-top: 2px solid var(--grey-300);
}

.delivery-total-label[b-144tocikml] {
    flex: 1 1 auto;
}

.delivery-total-value-rows[b-144tocikml] {
    flex: 0 0 8.75rem;
}

.delivery-total-value-valid[b-144tocikml],
.delivery-total-value-invalid[b-144tocikml] {
    flex: 0 0 7.5rem;
}

.delivery-unknown-validation[b-144tocikml] {
    color: var(--grey-600);
    font-size: 0.8125rem;
}
/* /Pages/Delivery/Overview/DeliveryOverviewPage.razor.rz.scp.css */
    .grid-toolbar[b-9r3yq7esca]  .grid-row-count-summary {
        margin-left: auto;
    }


/* /Pages/Environment/Edit/DashboardPage.razor.rz.scp.css */
[b-5ylll35p4p] .environment-first-item {
    margin-top: 1.875rem;
}


.btn-header-group[b-5ylll35p4p] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

/* The description is entered in a multi-line box, so its line breaks are kept. */
.detail-multiline[b-5ylll35p4p] {
    white-space: pre-wrap;
}

.header-meta[b-5ylll35p4p] {
    margin-bottom: var(--spacing-10);
}

.dashboard-cards[b-5ylll35p4p] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-10);
}

    .dashboard-cards[b-5ylll35p4p]  .yx-detail-card {
        flex: 1 1 24rem;
    }

.quality-empty[b-5ylll35p4p] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    padding: var(--spacing-050) 0;
    color: var(--grey-500);
    font-size: 0.85rem;
}

.quality-empty-reason[b-5ylll35p4p] {
    font-size: 0.8rem;
    color: var(--grey-500);
}

/* The quality always belongs to the leading schema, so the same star that marks the
   leading schema elsewhere marks this line; the tooltip on the line spells it out. */
.quality-context[b-5ylll35p4p] {
    display: flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: var(--spacing-050) 0;
    font-size: 0.8rem;
    color: var(--grey-500);
}

.quality-context-leading[b-5ylll35p4p] {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--yellow-500);
}

.quality-metric[b-5ylll35p4p] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    margin: 0 calc(-1 * var(--spacing-050));
    padding: 0 var(--spacing-050);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .quality-metric:hover[b-5ylll35p4p] {
        background-color: var(--grey-100);
    }

    .quality-metric[b-5ylll35p4p]  .yx-data-quality-bar {
        flex: 1 1 auto;
    }

.quality-metric-chevron[b-5ylll35p4p] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--grey-500);
}
/* /Pages/Environment/Overview/EnvironmentOverviewPage.razor.rz.scp.css */
.container[b-puhpe1b48q] {
    margin: 0;
    max-width: none;
    padding: 0 var(--spacing-10);
}

/* The row itself carries the distance to the filter row below. On the subtitle it sits
   inside the flex row, where the taller action buttons swallow it. */
.project-overview-controls[b-puhpe1b48q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-10);
}

    .project-overview-controls[b-puhpe1b48q]  .yx-search-box {
        flex: 0 0 auto;
    }

    .project-overview-controls[b-puhpe1b48q]  .yx-tab-strip {
        margin-left: auto;
        flex: 0 0 auto;
    }

.project-overview-empty[b-puhpe1b48q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-075);
    margin: var(--spacing-10) 0;
    color: var(--grey-500);
}

.skeleton-tile[b-puhpe1b48q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    background-color: var(--white);
    border: 1px solid var(--grey-100);
    border-radius: 0.25rem;
}

.skeleton-tile-top[b-puhpe1b48q] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-075);
}

.skeleton-tile-lines[b-puhpe1b48q] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-050);
}

.skeleton-block[b-puhpe1b48q] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--grey-100) 25%, var(--grey-200) 50%, var(--grey-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-puhpe1b48q 1.4s ease-in-out infinite;
}

.skeleton-avatar[b-puhpe1b48q] {
    width: var(--size-avatar);
    height: var(--size-avatar);
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-line-wide[b-puhpe1b48q] {
    height: 1.1rem;
    width: 70%;
}

.skeleton-line-narrow[b-puhpe1b48q] {
    height: 0.85rem;
    width: 45%;
}

.skeleton-bar[b-puhpe1b48q] {
    height: 0.375rem;
    width: 100%;
    border-radius: 3px;
}

@keyframes skeleton-shimmer-b-puhpe1b48q {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.project-tile-grid[b-puhpe1b48q] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--spacing-10);
}

/* Tiles keep a fixed width and wrap to fewer columns on a narrow screen,
   rather than shrinking (which would overflow their text). */
.project-tile[b-puhpe1b48q] {
    flex: 0 0 23.75rem;
    width: 23.75rem;
}
/* /Pages/InputCompare/CompareProcess/CompareProcessFlowPage.razor.rz.scp.css */
.page-header[b-kmrsx0bx37] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-kmrsx0bx37] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.header-row:last-child[b-kmrsx0bx37] {
    margin-bottom: 0;
}
/* /Pages/InputCompare/CompareProcess/CompareProcessStep1Configuration.razor.rz.scp.css */
.page-container[b-d59nqkbmln] {
    padding: 0;
    margin: 0.625rem 1.875rem;
    display: flex;
    flex-direction: column;
}

.content-top[b-d59nqkbmln] {
    padding: 0.625rem;
}

.content-tabels[b-d59nqkbmln] {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

/* /Pages/InputCompare/CompareProcess/CompareProcessStep2ShowComparison.razor.rz.scp.css */
.page-container[b-cjxwwko8ks] {
    padding: 0;
    margin: 0.625rem 1.875rem;
}

.content-tabels[b-cjxwwko8ks] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.checkbox-row[b-cjxwwko8ks] {
    display: flex;
    gap: 3rem;
}

[b-cjxwwko8ks] .dimension-column-header {
    background: var(--yellow-200) !important;
}
/* /Pages/InputCompare/Edit/InputCompareExcelEditPage.razor.rz.scp.css */
.btn-header-group[b-8ab0ao1o3z]{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputCompare/Edit/InputComparePdfEditPage.razor.rz.scp.css */
.btn-header-group[b-x8f3tauy8f] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputCompare/InputCompareOverviewPage.razor.rz.scp.css */
/* This toolbar holds only the row count, which sits on the right. Layout and margins come from
   the shared .grid-toolbar in app.css. */
.grid-toolbar[b-xqf63a9k0q] {
    justify-content: flex-end;
}

.button-div[b-xqf63a9k0q] {
    margin-top: 0.625rem;
}

.button-container[b-xqf63a9k0q] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
    align-items: center;
}

.form-container[b-xqf63a9k0q] {
    display: flex;
    margin: 0.625rem 0;
    list-style-type: none;
    align-items: center;
    justify-content: flex-start;
}

.btn-header-group[b-xqf63a9k0q] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputProcess/Edit/InputProcessExcelEditPage.razor.rz.scp.css */
.input-process-container[b-lnoaw3uk8x] {
    padding: 0.625rem 1.25rem;
    overflow: auto;
}

.btn-header-group[b-lnoaw3uk8x] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}
/* /Pages/InputProcess/Execute/Dialog/ImportImpactDialogComponent.razor.rz.scp.css */
.button-container[b-dv4hmxlwqa] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}

.footer-flex[b-dv4hmxlwqa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-left[b-dv4hmxlwqa] {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.footer-right[b-dv4hmxlwqa] {
    display: flex;
    justify-content: flex-end;
}

.sysmsg-header[b-dv4hmxlwqa] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .3rem;
    box-sizing: border-box;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid #888888;
}

    .sysmsg-header.accordion-error[b-dv4hmxlwqa] {
        background: #f8d7da;
        color: #842029;
    }

    .sysmsg-header.accordion-warning[b-dv4hmxlwqa] {
        background: #fff3cd;
        color: #664d03;
    }

    .sysmsg-header.accordion-info[b-dv4hmxlwqa] {
        background: #cff4fc;
        color: #055160;
    }

/* /Pages/InputProcess/Execute/InputProcessExcelFlowPage.razor.rz.scp.css */
.page-header[b-hjf2rq549o] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-hjf2rq549o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.header-row:last-child[b-hjf2rq549o] {
    margin-bottom: 0;
}
/* /Pages/InputProcess/Execute/Step1/InputProcessExcelStep1PreviewAndConvert.razor.rz.scp.css */
.page-container[b-x0obl55o8c] {
    padding: 0;
    margin: 0.625rem 1.875rem;
    display: flex;
    flex-direction: column;
}

.content-top[b-x0obl55o8c] {
    padding: 0.625rem;
    border-bottom: 1px solid #ccc; 
}

.content-tabels[b-x0obl55o8c] {
    display: flex;
    flex-direction: column;
}
/* /Pages/InputProcess/Execute/Step2/InputProcessExcelStep2MappingAndImport.razor.rz.scp.css */
.page-container[b-ugdzs0zxpa] {
    padding: 0;
    margin: 0.625rem 1.875rem;
}

.content-tabels[b-ugdzs0zxpa] {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

[b-ugdzs0zxpa] .new-column {
    background: var(--orange-100);
}

[b-ugdzs0zxpa] .ignore-column {
    background: var(--yellow-100);
}

[b-ugdzs0zxpa] .mapped-column {
    background: var(--blue-100);
}

[b-ugdzs0zxpa] .error-column {
    background: var(--red-600);
}

[b-ugdzs0zxpa] .field-type-mismatch .data-type-indicator {
    color: var(--red-600);
    border-color: var(--red-600);
}
/* /Pages/InputProcess/Overview/InputProcessOverviewPage.razor.rz.scp.css */
.button-container[b-0sv58tcb8m] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
    align-items: center;
}

.form-container[b-0sv58tcb8m] {
    display: flex;
    margin: 0.625rem 0;
    list-style-type: none;
    align-items: center;
    justify-content: flex-start;
}
/* /Pages/OutputTarget/OutputTargetPage.razor.rz.scp.css */
.body-content[b-9t5o6sauda] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Align the body with the page title, which sits at the shared title indent (.title-font). */
    margin-left: var(--spacing-page-title-indent);
}

.schema-section-heading[b-9t5o6sauda] {
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}

.schema-section-count[b-9t5o6sauda] {
    font-weight: 400;
    color: var(--grey-700);
}

.schema-tile-grid[b-9t5o6sauda] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* /Pages/ParseRule/Detail/Excel/ParseRuleExcelDetailPage.razor.rz.scp.css */
.parse-rule-excel-page[b-xyd36g2i7h] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
    height: 100%;
    padding: var(--spacing-15) var(--spacing-20);
    overflow: auto;
}

/* The container scrolls, so its scrollbar sits on the right edge; the padding keeps the cards
   off it instead of ending flush against it. */
.parse-rule-excel-container[b-xyd36g2i7h] {
    padding-right: var(--spacing-075);
    overflow: auto;
}

.parse-rule-excel-cards[b-xyd36g2i7h] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
}

[b-xyd36g2i7h] .form-item {
    margin-top: 0;
}

[b-xyd36g2i7h] .form-item-left {
    margin-top: 0;
    margin-left: 0;
}

[b-xyd36g2i7h] .required-caption:after {
    content: ' *';
    color: red;
}

[b-xyd36g2i7h] .inline-button {
    margin-left: 0;
    padding-left: 0;
}

/* Data Range two-column layout */
[b-xyd36g2i7h] .data-range-item {
    padding-left: 1.25rem;
}

[b-xyd36g2i7h] .data-range-two-col {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

[b-xyd36g2i7h] .data-range-col {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-xyd36g2i7h] .data-range-col-title {
    font-weight: bold;
    margin-bottom: 0.1rem;
}

[b-xyd36g2i7h] .data-range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-xyd36g2i7h] .data-range-label {
    min-width: 9rem;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #555;
}

[b-xyd36g2i7h] .data-range-to {
    padding: 0 0.15rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #555;
}

[b-xyd36g2i7h] .data-range-row > .dxbl-masked-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* The data-range column already spaces its children, so the hint drops its own top margin. */
[b-xyd36g2i7h] .data-range-hint {
    margin-top: 0;
}

/* Subheader grouping column layout */
[b-xyd36g2i7h] .subheader-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

[b-xyd36g2i7h] .subheader-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

[b-xyd36g2i7h] .subheader-row > .dxbl-masked-input,
[b-xyd36g2i7h] .subheader-row > .dxbl-text-edit {
    flex: 1 1 auto;
    min-width: 0;
}

[b-xyd36g2i7h] .subheader-add-btn {
    flex-shrink: 0;
}

.icon-height[b-xyd36g2i7h] {
    line-height: 1.375rem;
}

[b-xyd36g2i7h] .result-table {
    padding: 0.3125rem;
}

/* Result table header caption: content is authored here (as a HeaderCaptionTemplate), even
   though DxGrid renders the surrounding header cell chrome itself - DxGridDataColumn exposes no
   CssClass hook for that cell, so an "added" column gets its different background on this
   caption wrapper instead. */
[b-xyd36g2i7h] .result-column-caption {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
}

[b-xyd36g2i7h] .result-column-caption--added {
    background-color: var(--grey-100);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

[b-xyd36g2i7h] .result-column-added-marker {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grey-600);
}
/* /Pages/ParseRule/Edit/Boolean/ParseRuleBooleanEditPage.razor.rz.scp.css */
.parse-rule-boolean-page[b-l3vcya296o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
    height: 100%;
    padding: var(--spacing-15) var(--spacing-20);
    overflow: auto;
    background-color: var(--grey-50);
}

.parse-rule-boolean-columns[b-l3vcya296o] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-10);
}

.parse-rule-boolean-cards[b-l3vcya296o] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
    max-width: 60rem;
}

.parse-rule-boolean-test[b-l3vcya296o] {
    flex: 0 0 24rem;
    min-width: 0;
}

/* Below this width the two columns no longer fit side by side, so the test panel
   returns to the bottom of the page, after the settings it operates on. */
@media (max-width: 1200px) {
    .parse-rule-boolean-columns[b-l3vcya296o] {
        flex-direction: column;
    }

    .parse-rule-boolean-test[b-l3vcya296o] {
        flex: 1 1 auto;
        width: 100%;
        max-width: 60rem;
    }
}

.card-title[b-l3vcya296o] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grey-900);
}

.fallback-options[b-l3vcya296o] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-075);
}

[b-l3vcya296o] .test-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-075);
}

[b-l3vcya296o] .test-result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
}

[b-l3vcya296o] .test-result-row {
    display: flex;
    gap: var(--spacing-050);
    align-items: center;
}

[b-l3vcya296o] .remove-false-condition {
    margin-top: var(--spacing-075);
}

[b-l3vcya296o] .test-result-label {
    font-weight: 600;
    color: var(--grey-700);
}

[b-l3vcya296o] .test-result-outcome {
    font-size: 1rem;
    line-height: 1;
}
/* /Pages/ParseRule/Edit/Pdf/ParseRulePdfEditPage.razor.rz.scp.css */
.parse-rule-pdf-page-content[b-algaopcg8z] {
    position: relative;
    visibility: hidden;
}

.parse-rule-pdf-container[b-algaopcg8z] {
    padding: 1.25rem;
    overflow-x: hidden;
}

.preview-filename[b-algaopcg8z] {
    margin: 0.625rem 1.875rem;
}

[b-algaopcg8z] .form-header {
    font-weight: bold !important;
    background-color: lightgray;
    padding-left: 0.3125rem !important;
}

[b-algaopcg8z] .form-item {
    margin-top: 0;
}

[b-algaopcg8z] .form-item-left {
    margin-top: 0;
    margin-left: 1.25rem;
}

[b-algaopcg8z] .parse-rule-first-item {
    margin-top: 1.875rem;
}

[b-algaopcg8z] .required-caption:after {
    content: ' *';
    color: red;
}

[b-algaopcg8z] .result-table {
    padding: 0.3125rem;
}

[b-algaopcg8z] .tab {
    background-color: white;
}
/* /Pages/ParseRule/Overview/SourceRuleOverviewPage.razor.rz.scp.css */
/* This toolbar holds only the row count, which sits on the right. Layout and margins come from
   the shared .grid-toolbar in app.css. */
.grid-toolbar[b-n527bg1vpz] {
    justify-content: flex-end;
}

.dropdown-button[b-n527bg1vpz] {
    margin-right: 0.3125rem;
}

.btn-header-group[b-n527bg1vpz] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/Quality/QualityPage.razor.rz.scp.css */
.chart-controls[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.radio-container[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.radio-left[b-rlfrcgk3hx] {
    position: absolute;
    left: 0;
}

.radio-right[b-rlfrcgk3hx] {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.radio-center[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
}

.page-content[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
}

.body-content[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.values-chart[b-rlfrcgk3hx] {
    width: 100%;
    flex: 1;
    min-height: 0;
}

[b-rlfrcgk3hx] .legend-no-pointer .dxbl-chart-legend-item {
    cursor: default;
}

.chart-legend[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-075);
}

.chart-legend-item[b-rlfrcgk3hx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: 0.125rem 0.625rem;
    font-size: 0.85rem;
    color: var(--grey-700);
    background-color: var(--grey-100);
    border-radius: 999px;
}

.chart-legend-color[b-rlfrcgk3hx] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}
/* /Pages/Schema/SchemaFieldMappingPage.razor.rz.scp.css */
.btn-header-group[b-wuvfa1owxd] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.tags[b-wuvfa1owxd] {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
}
/* /Pages/Schema/SchemaValidationPage.razor.rz.scp.css */
.btn-header-group[b-azfgzzymtj] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.buttons-container[b-azfgzzymtj] {
    display: flex;
    gap: 1.5625rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.tags[b-azfgzzymtj] {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
}
/* /Pages/SchemaDefinitionInstances/Import/SchemaDefinitionInstanceImportPage.razor.rz.scp.css */
/* The wizard fills the area below the top bar and pins its footer to the bottom edge, so the
   Previous/Next buttons sit in a fixed place no matter how tall a step's content is. Scoped to
   this page: the shared .page-content rule in app.css is untouched. */
.page-content[b-2a5mqnek2s] {
    /* border-box keeps the bottom padding inside the min-height, so reserving breathing room
       below the footer does not push the page past the viewport and add a scrollbar. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height));
    /* Caps the page at the viewport instead of just using it as a floor, so .page-body's
       min-height: 0 below actually has a limited space to size against and can hand off
       overflow to internal scrolling instead of growing the whole page. */
    max-height: calc(100vh - var(--topbar-height));
}

.page-header[b-2a5mqnek2s] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-2a5mqnek2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.btn-header-group[b-2a5mqnek2s] {
    display: flex;
    flex-direction: row;
}

/* Previous shows on steps 2 and 3, Next on steps 1 and 2 — so one of the two is missing on the
   outer steps. Next is pushed right on its own instead of relying on space-between. */
.footer-primary[b-2a5mqnek2s] {
    margin-left: auto;
}

.page-footer[b-2a5mqnek2s] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-10) 0;
    border-top: 1px solid var(--grey-100);
    /* Without this the footer is just the last item in flow and gets pushed off-screen once
       .page-body's content overflows its allotted space; this keeps it from shrinking away. */
    flex-shrink: 0;
}

/* The waiting indicator sits on top of the step it is replacing instead of taking its place.
   Rendering it standalone made the body collapse to the height of a spinner, which dropped the
   footer buttons up and then back down again once the schema information arrived. */
.step-area[b-2a5mqnek2s] {
    display: grid;
    /* Flex/grid items default to min-height: auto, i.e. "at least as tall as my content."
       That let long step content (e.g. the Step3 tree) grow this area — and everything above
       it, all the way up to .page-content — past the viewport, shoving the footer out of view
       instead of scrolling internally. This lets it shrink to the space .page-body gives it. */
    min-height: 0;
}

    .step-area > .step-content[b-2a5mqnek2s] {
        grid-area: 1 / 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .step-area > .step-content.is-loading[b-2a5mqnek2s] {
            opacity: 0.4;
            pointer-events: none;
        }

    .step-area > .step-loading[b-2a5mqnek2s] {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* The wizard reads as a centred column: the step bar and the step content share one width. */
.wizard-column[b-2a5mqnek2s] {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
}

/* Takes the space between the step bar and the footer, which is what pushes the footer down. */
.page-body[b-2a5mqnek2s] {
    flex: 1 1 auto;
    /* Same min-height: auto problem as .step-area, one level up — this is the flex item whose
       content (the whole step-area/tree) was dictating .page-content's height. Setting it to 0
       lets .page-body actually respect the space left over after header + footer, instead of
       growing to fit its tallest possible child. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Pages/SchemaEnvironments/SchemaEnvironmentEditPage.razor.rz.scp.css */
.multiline-tip[b-js8knk8ayr] {
    white-space: pre-line;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12.5rem;
}

.schema-edit-status[b-js8knk8ayr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Responsive card grid: groups sit side by side when there is room and
   collapse to a single column as the window narrows. */
.schema-edit-layout[b-js8knk8ayr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.schema-card[b-js8knk8ayr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    min-width: 0;
    max-width: 50rem;
}

.schema-card-header[b-js8knk8ayr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.schema-card-title[b-js8knk8ayr] {
    font-weight: 700;
    font-size: 1.05rem;
}

.schema-card-info[b-js8knk8ayr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    font-size: 90%;
    color: var(--grey-700);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--grey-200);
}

.schema-card-info i[b-js8knk8ayr] {
    margin-right: 0.35rem;
}

/* Read-only fields shown as static label + value pairs, packed responsively. */
.schema-card-details[b-js8knk8ayr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1.25rem;
}

.detail-field[b-js8knk8ayr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.detail-field-wide[b-js8knk8ayr] {
    grid-column: 1 / -1;
}

.detail-label[b-js8knk8ayr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-value[b-js8knk8ayr] {
    font-size: 0.95rem;
    color: var(--grey-900);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Caption left, switch right: right-align the control within the widened item
   so its right edge lines up with the dropdowns above it. */
[b-js8knk8ayr] .schema-copy-switch > .dxbl-fl-ctrl {
    display: flex;
    justify-content: flex-end;
}

/* Vertical form items (Name/Language) reserve a 1.59375rem tooltip slot at the right of
   their editor; horizontal items (Copy from Project, Version) have no such slot and
   run to the item edge. Mirror the slot so all editors share one right edge. */
[b-js8knk8ayr] .schema-card .dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
    padding-right: 1.59375rem;
}
/* /Pages/SignedOutPage.razor.rz.scp.css */
.signed-out-page[b-th79wm0vsa] {
    max-width: 32rem;
    margin: 6rem auto;
    text-align: center;
}

.signed-out-title[b-th79wm0vsa] {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.signed-out-message[b-th79wm0vsa] {
    margin-bottom: 1.5rem;
}
/* /Pages/StatusCodePage.razor.rz.scp.css */
.status-code-page[b-7x41dxjsik] {
    text-align: center;
    margin: 3.125rem auto;
    max-width: 37.5rem;
    font-family: var(--font-ui);
}

.status-code-header h1[b-7x41dxjsik] {
    font-size: 5rem;
    color: #dc3545;
}

.status-code-header h2[b-7x41dxjsik] {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.status-code-actions .btn[b-7x41dxjsik] {
    margin: 0.625rem;
    padding: 0.625rem 1.25rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

.btn-primary[b-7x41dxjsik] {
    background-color: #007bff;
    color: white;
}

.btn-secondary[b-7x41dxjsik] {
    background-color: #6c757d;
    color: white;
}

.btn:hover[b-7x41dxjsik] {
    opacity: 0.9;
}
/* /Pages/View/ViewsPage.razor.rz.scp.css */
/* Without this, the card's white background runs flush to the viewport's bottom edge, making the
   grid (or the docked layer-history panel below it) look like it keeps going past the page. */
.views-page-root:not(.views-page-expanded)[b-3uoogneeca] {
    padding-bottom: 0.75rem;
}

.views-card[b-3uoogneeca] {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 0.75rem;
}

.views-control-row[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

.views-controls-spacer[b-3uoogneeca] {
    flex: 1 1 auto;
}

.views-viewpoint-row[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

/* The picker's own panel anchors right:0, which reads fine at its usual spot at the far right of
   the header row - here it sits at the left of the expanded view instead, so right:0 would push
   the 26rem panel off the left edge of the viewport. Anchor it to the left edge here instead. */
.views-viewpoint-row[b-3uoogneeca]  .viewpoint-picker-panel {
    right: auto;
    left: 0;
}

.views-expand-control[b-3uoogneeca] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.views-expand-toggle[b-3uoogneeca] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}

.views-expand-hint[b-3uoogneeca] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ViewpointQuickSwitchComponent's own bottom margin is meant for its original placement as a
   standalone row below the header - here it sits inline in this row instead, which already
   carries the same bottom spacing itself. */
.views-viewpoint-row[b-3uoogneeca]  .viewpoint-quick-switch {
    margin-bottom: 0;
}

.views-assign-component-bar[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
}

.views-component-option[b-3uoogneeca] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.views-component-option-name[b-3uoogneeca] {
    color: var(--text-primary);
}

.views-component-option-description[b-3uoogneeca] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.views-unassigned-cell[b-3uoogneeca] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-tertiary);
}

.views-invalid-count[b-3uoogneeca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.0625rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--status-invalid-bg);
    color: var(--status-invalid-fg);
    font-size: 0.6875rem;
    font-weight: 700;
}

.views-valid-icon[b-3uoogneeca] {
    color: var(--status-valid-fg);
}

/* The Views page's own segmented look for the shared tab strip - kept here rather than in
   YxTabStrip's own stylesheet because YxTabStrip is also used by the Environment overview page,
   and that page's look must not change (frontend-conventions.md SS D: a shared look is a class,
   but this particular treatment is not yet shared beyond this page). */
.views-control-row[b-3uoogneeca]  .yx-tab-strip {
    background: var(--neutral-150);
    padding: 0.125rem;
    gap: 0.125rem;
    border-radius: var(--radius-sm);
}

.views-control-row[b-3uoogneeca]  .yx-tab-strip-item {
    height: 1.875rem;
    border-radius: var(--radius-xs);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.views-control-row[b-3uoogneeca]  .yx-tab-strip-item.yx-tab-strip-item-active {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

/* Fixed to the viewport rather than left in the .content flow, and given an explicit height
   instead of relying on .page-fill's height:100% resolving through position:fixed - the grid's
   own height cap (.scrollable-grid, max-height:100%) only holds while every ancestor in the
   chain has a definite height, and this is the one link in that chain the Expand toggle changes. */
/* box-sizing keeps the padding inside the 100vh box: without it the panel is taller than the
   viewport and the card is pushed past the bottom edge. The flex column is what lets the card
   take the remaining height instead of only as much as its content needs. */
.views-page-expanded[b-3uoogneeca] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-sizing: border-box;
    /* .page-content carries a horizontal margin that keeps applying while fixed, which pulls both
       edges inward - the expanded panel has to span the viewport, so the margin goes. */
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-canvas);
    padding: 0.75rem 1rem;
}

/* Anchored on .views-grid-wrapper rather than the grid's own CssClass - DxGrid is a Razor
   component, not an HTML element, so scoped CSS never carries its scope attribute and a
   selector anchored there matches nothing (frontend-conventions.md SS D /
   https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation). The wrapper is
   a real element in this component's own markup, which ::deep can reach through. */
.views-grid-wrapper[b-3uoogneeca]  .views-grid-header-row {
    height: 2.25rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-strong);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-header-cell {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Row height is fixed at 2rem (32px) - AC16 depends on every row having the same height. */
.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row {
    height: 2rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row-selected {
    background: var(--surface-selected);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row-inactive {
    opacity: .55;
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-cell {
    font-size: 0.8125rem;
    padding: 0 0.625rem;
}
/* /Pages/ViewPoint/DataEdit/ViewpointDataEditPage.razor.rz.scp.css */
.vp-data-edit-header[b-ckkt21vjd0] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.btn-header-group[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.body-content[b-ckkt21vjd0]  .scrollable-grid {
    user-select: none;
}

.body-content[b-ckkt21vjd0]  .vp-cell-selected {
    outline: 2px solid #1d6fb8;
    outline-offset: -2px;
    background-color: rgba(29, 111, 184, 0.10);
}

.body-content[b-ckkt21vjd0]  .vp-changed-cell,
.vp-legend-color-box-changed[b-ckkt21vjd0] {
    background-color: #fff3b0 !important;
}

.body-content[b-ckkt21vjd0]  .vp-error-cell,
.vp-legend-color-box-invalid[b-ckkt21vjd0] {
    background-color: #f8d7da !important;
}

.body-content[b-ckkt21vjd0]  .vp-error-changed-cell,
.vp-legend-color-box-invalid-changed[b-ckkt21vjd0] {
    background-color: transparent !important;
    background-image: repeating-linear-gradient(45deg, #f8d7da 25%, transparent 25%, transparent 75%, #f8d7da 75%, #f8d7da), repeating-linear-gradient(45deg, #f8d7da 25%, #fff3b0 25%, #fff3b0 75%, #f8d7da 75%, #f8d7da) !important;
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}

.body-content[b-ckkt21vjd0]  .vp-readonly-cell {
    background-color: var(--grey-100) !important;
}

.vp-blocked-on-data[b-ckkt21vjd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
}

.vp-blocked-on-data-body[b-ckkt21vjd0] {
    color: var(--text-secondary, #666);
}

.vp-grid-header-row[b-ckkt21vjd0] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.vp-active-rows-note[b-ckkt21vjd0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-style: italic;
}

.vp-legend[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-050);
    margin-left: auto;
}

.vp-legend-item[b-ckkt21vjd0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: 0.125rem 0.625rem;
    background-color: var(--grey-100);
    border-radius: 999px;
}

.vp-legend-color-box[b-ckkt21vjd0] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.vp-legend-text[b-ckkt21vjd0] {
    font-size: 0.85rem;
    color: var(--grey-700);
}

.save-popup[b-ckkt21vjd0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.save-popup-label[b-ckkt21vjd0] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.save-popup-actions[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--spacing-button-inbetween);
    margin: 0.5rem 0;
}
/* /Pages/ViewPoint/Edit/Support/ViewPointFilterBuilderComponent.razor.rz.scp.css */
.viewpoint-filterbuilder-container[b-2df9tddabf] {
    padding: 0.625rem;
    background: #fff;
    border-radius: 5px;
}

/* 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. */
.viewpoint-filterbuilder-invalid[b-2df9tddabf] {
    padding: var(--spacing-050);
    border: 1px solid var(--red-500);
    border-radius: 6px;
    background-color: var(--red-50);
}

.viewpoint-filterbuilder-violation[b-2df9tddabf] {
    margin-top: var(--spacing-050);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--red-700);
}
/* /Pages/ViewPoint/Edit/ViewPointEditPage.razor.rz.scp.css */
.container[b-vg41hdzntf] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
}

.button-icon[b-vg41hdzntf] {
    margin-right: 0.3125rem;
}

.viewpoint-delivery-hint[b-vg41hdzntf] {
    margin-top: var(--spacing-025);
    color: var(--grey-500);
}

.viewpoint-component-condition-hint[b-vg41hdzntf] {
    margin-top: var(--spacing-025);
    color: var(--grey-500);
}


[b-vg41hdzntf] .tabs {
    margin-top: 1.25rem;
}
/* /Pages/ViewPoint/Overview/ViewpointOverviewPage.razor.rz.scp.css */
.button-icon[b-st8x0wtjpo] {
    margin-right: 0.3125rem;
}

/* This toolbar holds only the row count, which sits on the right. Layout and margins come from
   the shared .grid-toolbar in app.css. */
.grid-toolbar[b-st8x0wtjpo] {
    justify-content: flex-end;
}

[b-st8x0wtjpo] .custom-icon-button {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}