@import '_content/Yellax.EngineeringPlatform.UI.Components/Yellax.EngineeringPlatform.UI.Components.y8690uxtdo.bundle.scp.css';
@import '_content/Yellax.UI.Components/Yellax.UI.Components.cvrbtlpupf.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: var(--text-size-large);
    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: var(--text-size-small);
    line-height: 1.25rem;
    white-space: nowrap;
}

.comparison-selection-bar-empty[b-j6a5bb7see] {
    color: var(--grey-700);
    font-size: var(--text-size-small);
    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: var(--text-size-small);
    line-height: 1;
}

.comparison-selection-chip-name[b-j6a5bb7see] {
    color: var(--grey-700);
    font-size: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-medium);
}

/* The checkbox sits inside a holder that carries the disabled-reason tooltip, so the flex sizing the
   card's row needs belongs on the holder - the checkbox itself is no longer a flex item here. */
.consolidated-layer-card-checkbox-holder[b-vt15vm2gl3] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

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

/* Look comes from .yx-inline-action inside YxButtonNavigate; only its place in the card is set here. */
[b-vt15vm2gl3] .consolidated-layer-card-open-link {
    flex: 0 0 auto;
}
/* /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: var(--text-size-small);
    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/RenameComponent.razor.rz.scp.css */
.footer-content[b-zqd9hynuig] {
    display: flex
}

.footer-content-button[b-zqd9hynuig] {
    margin: 0.3125rem
}
/* /PageComponents/Environment/CloneProjectDialogComponent.razor.rz.scp.css */
.footer-content[b-qaxnm3ovr6] {
    display: flex
}

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

/* The popup sizes itself to its content, so the Copied line would stretch it across the screen.
   Capping the body is what keeps the dialog narrow. */
.clone-project-body[b-qaxnm3ovr6] {
    max-width: 26rem;
}

.clone-project-intro[b-qaxnm3ovr6] {
    margin-top: 1rem;
    color: var(--grey-800);
}

.clone-project-info[b-qaxnm3ovr6] {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin-top: 0.875rem;
    padding: 0.75rem 0.875rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-100);
    border-radius: 0.25rem;
}

.clone-project-info-line[b-qaxnm3ovr6] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: var(--text-size-small);
    color: var(--grey-800);
}

.clone-project-info-line i[b-qaxnm3ovr6] {
    margin-top: 0.125rem;
}

.clone-project-icon-copied[b-qaxnm3ovr6] {
    color: var(--green-700);
}

.clone-project-icon-not-copied[b-qaxnm3ovr6] {
    color: var(--red-600);
}
/* /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-025);
        padding: var(--spacing-050) 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;
}

.tile-subtitle[b-72n6mocier] {
    color: var(--grey-500);
    font-size: var(--text-size-small);
    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: var(--text-size-small);
    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;
}

/* The card body's own gap already separates the footer from the bar above it. */
.tile-footer[b-72n6mocier] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-total[b-72n6mocier] {
    color: var(--grey-700);
    font-size: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-medium);
}

.data-type-indicator-medium[b-02cy0zjc4o] {
    gap: 0.375rem;
    padding: 0.0625rem 0.25rem;
    font-size: var(--text-size-small);
}

.data-type-indicator-small[b-02cy0zjc4o] {
    gap: 0.3125rem;
    padding: 0.05rem 0.2rem;
    font-size: var(--text-size-small);
}
/* /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: var(--text-size-small);
    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);
}

/* A fixed lead-in of roughly 3 cm before the first text. */
.audit-line-lead[b-f81umh14ku] {
    flex: 0 0 7rem;
}

/* Takes whatever width the texts leave over, so the rule starts right behind them and runs to the
   right edge. */
.audit-line-tail[b-f81umh14ku] {
    flex: 1 1 auto;
    min-width: 0;
}

.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: var(--text-size-small);
        border-radius: 3px;
        margin: 0.125rem;
        padding: 0.25rem;
    }

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

    /* Large */
    .MessageStyle.message-lg[b-75on2g8iiw] {
        font-size: var(--text-size-large);
        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: var(--text-size-medium);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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/ExcelDataPreviewContent.razor.rz.scp.css */
.preview-body[b-dlqho0bkkr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

    .preview-body[b-dlqho0bkkr]  .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-dlqho0bkkr]  .datapreview-overview .dxbl-grid-header-row th,
    .preview-body[b-dlqho0bkkr]  .datapreview-overview .dxbl-grid-header-row th * {
        cursor: default !important;
    }

.type-count-summary[b-dlqho0bkkr] {
    padding: 0.25rem 0.5rem 0.625rem;
    font-size: var(--text-size-small);
}

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

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

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

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

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

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

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

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

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

.column-role[b-dlqho0bkkr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-size-small);
    font-weight: 400;
    color: #888780;
    margin-bottom: 0.1875rem;
}

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

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

.column-name[b-dlqho0bkkr] {
    display: block;
    font-weight: 500;
}
/* /PageComponents/InputProcess/InputProcessNumberFormatPicker.razor.rz.scp.css */
.number-format-picker[b-hfyms0z2fw] {
    padding: 0.5rem 0 0.75rem 0;
}

.number-format-picker-caption[b-hfyms0z2fw] {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.number-format-picker-choices[b-hfyms0z2fw] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

/* The card surface itself comes from the shared .yx-card class on the button; what stays here is the
   layout and sizing of this particular card. */
.number-format-picker-card[b-hfyms0z2fw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    text-align: left;
}

.number-format-picker-card-selected[b-hfyms0z2fw] {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.number-format-picker-sample[b-hfyms0z2fw] {
    font-size: var(--text-size-large);
    font-weight: 600;
}

.number-format-picker-sample-inline[b-hfyms0z2fw] {
    font-weight: 600;
    margin-right: 0.375rem;
}

.number-format-picker-regions[b-hfyms0z2fw] {
    font-size: var(--text-size-small);
    color: var(--text-tertiary);
}

.number-format-picker-other[b-hfyms0z2fw] {
    align-self: center;
    min-width: 16rem;
}
/* /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 0 0.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* The whole vertical rhythm of the rail: the rows sit close together, a group label carries the
   air instead. Only the gap between two groups is set, so the last group leaves no tail. */
.menu-section + .menu-section[b-9e0nzk0f62] {
    margin-top: 1rem;
}

.menu-section-header[b-9e0nzk0f62] {
    padding: 0 1rem 0.25rem;
    font-size: var(--text-size-small);
    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;
}

/* A fixed row height, so the rail keeps its own rhythm instead of following the page font. The
   height is 36px where the prototype has 44px: a deliberate deviation, because the rows read as
   one group when they sit this close and the air belongs between the groups instead. The label
   size does come from the type scale, through the menu's own role name - the prototype's 13.5px
   sat between two steps of it. */
.menu-item[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.25rem;
    border: none;
    background: none;
    padding: 0 1rem;
    font-size: var(--text-size-menu);
    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: var(--text-size-small);
    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: var(--text-size-extralarge);
    color: var(--yellow-500);
}

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

.leading-banner-star[b-s66jqa1dhq] {
    font-size: var(--text-size-extralarge);
}

.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(--blue-100);
}

/* The star sits inside the StaticTag component, so the rule has to start from an element of this
   component's own markup: ::deep puts the scope id on the selector to its left, and the tag's own
   elements never carry it. */
.schema-tile-badges[b-lmjvurb85q]  .schema-tile-leading-badge-icon {
    color: var(--yellow-500);
}

.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: var(--text-size-small);
    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: var(--text-size-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.schema-identity-name[b-7ty93ms2xu] {
    font-size: var(--text-size-medium);
    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/SystemManagement/DatabaseMigrationActionCellComponent.razor.rz.scp.css */
.database-migration-action-cell[b-fdch09jg57] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-075);
    min-height: 2rem;
}

.database-migration-reason[b-fdch09jg57] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    font-size: var(--text-size-small);
    color: var(--grey-700);
    white-space: nowrap;
}

.database-migration-reason-warning[b-fdch09jg57] {
    color: var(--orange-700);
}

.database-migration-result[b-fdch09jg57] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: var(--text-size-small);
    white-space: nowrap;
}

.database-migration-result-success[b-fdch09jg57] {
    color: var(--green-700);
    background-color: var(--green-100);
}

.database-migration-result-failure[b-fdch09jg57] {
    color: var(--red-700);
    background-color: var(--red-100);
}
/* /PageComponents/SystemManagement/DatabaseMigrationDetailComponent.razor.rz.scp.css */
.database-migration-detail[b-uuc80kajw6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-10) var(--spacing-20);
    padding: var(--spacing-075) var(--spacing-10);
}

.database-migration-detail-section[b-uuc80kajw6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    min-width: 0;
}

.database-migration-detail-heading[b-uuc80kajw6] {
    margin: 0;
    font-size: var(--text-size-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.database-migration-detail-list[b-uuc80kajw6] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 12rem;
    overflow-y: auto;
    font-size: var(--text-size-small);
    line-height: 1.5;
    color: var(--grey-900);
}

.database-migration-detail-facts[b-uuc80kajw6] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--spacing-025) var(--spacing-10);
    margin: 0;
    font-size: var(--text-size-small);
}

    .database-migration-detail-facts dt[b-uuc80kajw6] {
        color: var(--grey-700);
    }

    .database-migration-detail-facts dd[b-uuc80kajw6] {
        margin: 0;
    }

.database-migration-detail-muted[b-uuc80kajw6] {
    margin: 0;
    font-size: var(--text-size-small);
    color: var(--grey-500);
}

.database-migration-detail-result[b-uuc80kajw6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    margin: 0;
    padding: var(--spacing-050) var(--spacing-075);
    border-radius: 4px;
    font-size: var(--text-size-small);
}

.database-migration-detail-result-success[b-uuc80kajw6] {
    color: var(--green-700);
    background-color: var(--green-100);
}

.database-migration-detail-result-failure[b-uuc80kajw6] {
    color: var(--red-700);
    background-color: var(--red-100);
}
/* /PageComponents/SystemManagement/DatabaseMigrationsTabComponent.razor.rz.scp.css */
.database-migrations-tab[b-g9liq9dr9r] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

.database-migrations-tab-toolbar[b-g9liq9dr9r] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-075);
}

.database-migrations-tab-checked[b-g9liq9dr9r] {
    font-size: var(--text-size-small);
    color: var(--grey-500);
}

.database-migrations-tab-refresh:disabled[b-g9liq9dr9r] {
    opacity: 0.5;
    cursor: default;
}
/* /PageComponents/SystemManagement/DatabaseMigrationTableComponent.razor.rz.scp.css */
.database-migration-table[b-t6w31yubi8] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.database-migration-table-head[b-t6w31yubi8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-10);
    padding: var(--spacing-075) var(--spacing-10);
    border-bottom: 1px solid var(--grey-100);
}

.database-migration-table-caption[b-t6w31yubi8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-075);
    min-width: 0;
}

.database-migration-table-title[b-t6w31yubi8] {
    font-size: var(--text-size-medium);
    font-weight: 600;
    color: var(--grey-900);
}

.database-migration-table-hint[b-t6w31yubi8] {
    font-size: var(--text-size-small);
    color: var(--grey-500);
}

.database-migration-table-summary[b-t6w31yubi8] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-075);
    font-size: var(--text-size-small);
    color: var(--grey-700);
}

.database-migration-table-pending[b-t6w31yubi8] {
    font-variant-numeric: tabular-nums;
    color: var(--grey-700);
}
/* /PageComponents/SystemManagement/DatabaseMigrationTenantSummaryComponent.razor.rz.scp.css */
.database-migration-tenant-summary-count[b-jzlgw8ecf8] {
    font-weight: 600;
    color: var(--grey-900);
}
/* /PageComponents/SystemManagement/SystemManagementPlaceholderComponent.razor.rz.scp.css */
.system-management-placeholder[b-twvgt1w9hd] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    padding: var(--spacing-10) var(--spacing-15);
    max-width: 40rem;
}

.system-management-placeholder-title[b-twvgt1w9hd] {
    margin: 0;
    font-size: var(--text-size-medium);
    font-weight: 600;
    color: var(--grey-900);
}

.system-management-placeholder-description[b-twvgt1w9hd] {
    margin: 0;
    font-size: var(--text-size-small);
    color: var(--grey-700);
}

.system-management-placeholder-status[b-twvgt1w9hd] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    margin: var(--spacing-050) 0 0;
    font-size: var(--text-size-small);
    color: var(--grey-500);
}
/* /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: var(--text-size-medium);
    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: var(--text-size-extralarge);
    font-weight: 700;
}

.stat-label[b-jh5edn0s1a] {
    font-size: var(--text-size-small);
    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: var(--text-size-medium);
}
/* /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: var(--text-size-small);
    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;
    width: 17rem;
    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;
    text-align: start;
}

.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(--blue-600);
}

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

/* Both states are the same glyph in the same size now, so only the colour distinguishes them. */
.viewpoint-picker-pin-active[b-v9k0hze5u2] {
    color: var(--yellow-500);
}

.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);
}

/* Look comes from .yx-inline-action inside YxButtonNavigate; only the padding inside the footer is
   set here. */
[b-v9k0hze5u2] .viewpoint-picker-manage {
    padding: 0.4rem 0.5rem;
}
/* /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: var(--text-size-small);
    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(--blue-500);
    background: var(--surface-selected);
}

.viewpoint-quick-switch-chip-label[b-8bj819nw4u] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: var(--text-size-small);
    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(--blue-600);
}

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

/* Both states are the same glyph in the same size now, so only the colour distinguishes them. */
.viewpoint-quick-switch-pin-active[b-8bj819nw4u] {
    color: var(--yellow-500);
}

.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: var(--text-size-medium);
}

.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: var(--text-size-small);
    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: var(--text-size-large);
}

.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: var(--text-size-small);
    margin-top: 0.5rem;
}
/* /PageComponents/Views/LayerHistoryDockedPanel.razor.rz.scp.css */
/* Docked beside the grid, not below it - flex:0 0 <width> keeps its own basis independent of the
   grid's width, and align-items:stretch on the parent .views-content-row (the default) gives it
   the same full height as the grid area without an explicit height here. min-height:0 lets
   .layer-history-panel-rows scroll internally instead of pushing this taller than the space the
   row container has. The width itself is a single CSS custom property, not a hardcoded
   flex-basis: layerHistoryPanelResize.js updates the same property directly on this element while
   dragging, so there is exactly one place a width ever gets set, and the property's own fallback
   (30.8rem, 22rem widened 40%) covers the brief moment before OnAfterRenderAsync applies the
   remembered or default width. position:relative anchors the resize handle to this element's own
   left edge instead of the row container's. */
.layer-history-panel[b-bu5t73kdzx] {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 var(--layer-history-panel-width, 30.8rem);
    width: var(--layer-history-panel-width, 30.8rem);
    min-height: 0;
    border-left: 1px solid var(--border-strong);
    background: var(--surface-card);
}

/* Straddles the panel's own 1px left border so the grab target is wider than the border itself,
   and stays above the header/content (z-index) so it is reachable along the panel's full height.
   touch-action:none stops a touch-drag from also scrolling the page underneath it. */
.layer-history-panel-resize-handle[b-bu5t73kdzx] {
    position: absolute;
    top: 0;
    left: -0.1875rem;
    width: 0.375rem;
    height: 100%;
    z-index: 1;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
}

.layer-history-panel-resize-handle:hover[b-bu5t73kdzx],
.layer-history-panel-resize-handle:focus-visible[b-bu5t73kdzx] {
    background: var(--blue-500);
    outline: none;
}

.layer-history-panel-header[b-bu5t73kdzx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-size-small);
}

.layer-history-panel-icon[b-bu5t73kdzx] {
    flex: 0 0 auto;
    color: var(--blue-600);
}

.layer-history-panel-title[b-bu5t73kdzx] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Extra breathing space between the tool name and the details of the clicked cell. Applied as a
   margin rather than literal spaces, so the gap survives whitespace collapsing and translation. */
.layer-history-panel-reference[b-bu5t73kdzx] {
    margin-left: 1.5rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 600;
}

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

.layer-history-panel-counts[b-bu5t73kdzx],
.layer-history-panel-changes[b-bu5t73kdzx] {
    color: var(--text-tertiary);
}

.layer-history-panel-spacer[b-bu5t73kdzx] {
    flex: 1 1 auto;
}

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

.layer-history-panel-content[b-bu5t73kdzx] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.layer-history-panel-message[b-bu5t73kdzx] {
    padding: 0.625rem 0.75rem;
    color: var(--text-tertiary);
}

.layer-history-panel-loading[b-bu5t73kdzx] {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
}

/* Own scrollbar for the row list - the panel's height is bounded by the grid area (see
   .layer-history-panel above), so this is where the extra rows go instead of growing the panel
   past that height.

   It is also the owner of the row layout: one grid for the whole list, with every row a subgrid on
   these tracks, so a column is as wide as the widest cell in it across all rows and every row's
   cells start on the same line. A per-row flex flow cannot do that - there each row sizes its own
   cells, which is what made the creator and the moment jump from row to row.
   `fit-content(<limit>)` is "as wide as the content, capped at <limit>" - max(minimum, min(limit,
   max-content)), where the track's max-content is the widest contribution of all its cells
   [GEVERIFIEERD: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns] - and
   `grid-template-columns: subgrid` makes a row use the tracks of this parent instead of defining
   its own, with the content inside those rows still sizing the parent's tracks
   [GEVERIFIEERD: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid,
   available across browsers since September 2023].

   Each marker has its own track rather than sharing one, so the columns behind them line up
   whether or not a row carries that marker; a marker no row carries costs its column gap and
   nothing more.

   Track order and sizing follow the columns the panel is asked to show, left to right: the two
   markers, then the cell value, then the layer name and the creation details. The markers and the
   trailing details are content-sized (`auto`), which is exactly "as wide as the word Effective" and
   "as wide as the icon" without hardcoding either - a translated label sizes its own column. The
   cell value is the one flexible track (`1fr`), so every bit of slack in the panel lands there
   instead of between the columns.

   Its `minmax` floor is the 7.5rem the value column used to be capped at, and it is what keeps the
   value the last thing to give way: an `auto` or `fit-content` track is grown to its content before
   a flexible track gets anything, so without a floor the layer name filled its full 7.5rem while
   the value collapsed [GEMETEN: value 5.8px next to a 120px layer name in a 30.8rem panel, 0px at
   22rem]. With the floor the value holds 7.5rem and the layer name is the one that shrinks
   [GEMETEN: value 120px / name 57px at 30.8rem, 120px / 15px at 22rem], and it still grows past
   the floor whenever there is room [GEMETEN: 182px with short values in a 30.8rem panel]. */
.layer-history-panel-rows[b-bu5t73kdzx] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Dragged to its minimum width, a long layer name can still want more room than the row has,
       even after the name and the moment have given up all their width. Clipping that is better
       than a horizontal scrollbar under the rows, and the moment carries the exact date in its own
       tooltip anyway. */
    overflow-x: hidden;
    display: grid;
    grid-template-columns:
        auto                  /* effective marker */
        auto                  /* change marker */
        minmax(7.5rem, 1fr)   /* cell value - fills the panel's slack */
        fit-content(7.5rem)   /* layer name */
        auto;                 /* moment */
    column-gap: 0.5rem;
    align-content: start;
}

/* Spans every track and subgrids them, which keeps the row itself an element that can carry the
   hover target, the separator and the effective accent while its cells belong to the list's
   columns. The gap is repeated here because a subgrid may set its own in the subgridded axis; both
   places name the same 0.5rem, so the rows keep the list's spacing either way. */
.layer-history-row[b-bu5t73kdzx] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 0.5rem;
    align-items: center;
    /* A row is one line, always. It sits here rather than on the individual cells so a cell added
       later cannot reintroduce a second line: "Inactive layer" broke over two lines in a narrow
       panel and made its row half again as tall [GEMETEN: label 32px instead of 16px, row 41px
       instead of 26px, at every panel width from 18rem down]. Cells that can outgrow their column
       clip with an ellipsis; the two markers deliberately do not, so their track keeps a
       content-based minimum and they are never the ones cut off. */
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    font-size: var(--text-size-small);
}

.layer-history-row-effective[b-bu5t73kdzx] {
    border-left-color: var(--blue-500);
    background: var(--surface-selected);
}

/* Dimmed per cell rather than on the row: opacity applies to the whole subtree, and the row also
   holds its tooltip - which has to stay fully readable. */
.layer-history-row-inactive > :not(.yx-tooltip-panel)[b-bu5t73kdzx] {
    opacity: 0.55;
}

/* Each cell is pinned to its own track, so a row without a marker leaves that column empty
   instead of pulling the columns behind it one place to the left. Track and look stay in one rule
   per cell: a second rule for the same class is a duplicate selector (css:S4666). */
.layer-history-row-effective-label[b-bu5t73kdzx] {
    grid-column: 1;
    font-size: var(--text-size-small);
    color: var(--blue-600);
    font-weight: 600;
}

.layer-history-row-changed[b-bu5t73kdzx] {
    grid-column: 2;
    color: var(--text-tertiary);
}

/* No width of its own: the track decides how wide the value column is, and a value longer than
   that ends in an ellipsis with the full text in the row's tooltip. */
.layer-history-row-value[b-bu5t73kdzx] {
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-history-row-value-match[b-bu5t73kdzx] {
    font-weight: 700;
}

/* Capped at 7.5rem by its track, and the first column to give way when the panel is too narrow -
   the full name stays readable in the row's tooltip. */
.layer-history-row-name[b-bu5t73kdzx] {
    grid-column: 4;
    min-width: 0;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The state of the layer and its creator are not cells: a row is one line in a narrow panel, and
   both of them pushed the value and the layer name aside on every row while saying nothing for the
   active majority. Both sit in the row's tooltip, and an inactive layer still reads as one through
   the dimmed row. */
.layer-history-row-createdon[b-bu5t73kdzx] {
    grid-column: 5;
    font-size: var(--text-size-small);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /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: var(--text-size-large);
}

.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;
}

/* The icon reads as part of the heading, so it sits on the same line as the title rather than
   stacked above it - which is why it carries no bottom margin of its own. */
.views-empty-state-heading[b-18ojep62k8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.views-empty-state-title[b-18ojep62k8] {
    font-weight: 600;
    font-size: var(--text-size-large);
}

.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: var(--text-size-small);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.views-toolbar-caption[b-ptx30jxcaf] {
    font-size: var(--text-size-small);
    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],
.views-inactive-row-count-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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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 */
.data-column-edit-cards[b-m7kjld8bpy] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
    max-width: 60rem;
}

.container[b-m7kjld8bpy] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
    max-width: auto;
}

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

.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: var(--text-size-medium)
}

.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: var(--text-size-medium);
}

[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 */
.marker-legend[b-3qx7hgoobu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.marker-legend-item[b-3qx7hgoobu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.marker-legend-label[b-3qx7hgoobu] {
    font-size: var(--text-size-small);
    font-weight: 600;
}

.marker-legend-text[b-3qx7hgoobu] {
    font-size: var(--text-size-small);
    color: var(--text-secondary);
}

.marker-icon[b-3qx7hgoobu] {
    font-size: 0.875rem;
}

.marker-icon-moved[b-3qx7hgoobu] {
    color: var(--status-valid-fg);
}

.marker-icon-out-of-order[b-3qx7hgoobu] {
    color: var(--button-color-warning);
}

.layer-list[b-3qx7hgoobu] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Every cell shares one wrapper so a value that is too long is trimmed inside its own column
   instead of widening the row. The wrapper stays a block: text-overflow has no effect on a flex
   container, so only the cells that hold something other than text turn into one. */
.layer-cell[b-3qx7hgoobu] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.layer-cell-level[b-3qx7hgoobu],
.layer-cell-marker[b-3qx7hgoobu],
.layer-cell-state[b-3qx7hgoobu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.layer-cell-level[b-3qx7hgoobu] {
    justify-content: center;
}

.layer-cell-name[b-3qx7hgoobu] {
    font-weight: 600;
}

.layer-cell-description[b-3qx7hgoobu],
.layer-cell-source[b-3qx7hgoobu],
.layer-cell-age[b-3qx7hgoobu] {
    color: var(--text-secondary);
}

.layer-level[b-3qx7hgoobu] {
    font-size: var(--text-size-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background-color: var(--grey-100);
    border-radius: 0.1875rem;
    padding: 0.0625rem 0.375rem;
}

.layer-state-text[b-3qx7hgoobu] {
    font-size: var(--text-size-small);
    color: var(--text-secondary);
}

/* The drop line is a DevExpress element inside the grid. Its colour comes from this variable,
   which by default resolves to the Bootstrap primary instead of the app's accent. */
.layer-list[b-3qx7hgoobu]  .dxbl-grid-drop-target-indicator {
    --dxbl-grid-drop-indicator-color: var(--accent-color);
}
/* /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;
}

/* Look comes from .yx-inline-action inside YxButtonNavigate; only its place in the action row is
   set here. */
[b-ynv7vtv3ht] .layer-overview-action {
    flex: 0 0 auto;
    margin-right: var(--spacing-10);
}

/* /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 is a short fact under the title; Source moved to the toolbar row above the grid
   (below), so it reads next to the data it describes instead of competing with the audit info. */
.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);
}

/* Not Bootstrap's .container: that class caps the width at the breakpoint max-width and centres
   what is inside it, which left the grid narrower than the page it sits on. */
.data-layer-view-body[b-w23z1vq6na] {
    margin-top: var(--spacing-050);
}

/* .grid-toolbar only sets gap/margin (shared across every page's toolbar row) - this page's own
   spread pushes Source to the right of the Show-states switch instead of stacking under it. */
.data-layer-view-toolbar[b-w23z1vq6na] {
    justify-content: space-between;
}

.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: var(--text-size-small);
    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: var(--text-size-small);
    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;
    border-bottom: 1px solid var(--grey-100);
}

/* Pushes the download action to the right-hand edge of the section header, away from the title
   and its status tag. */
.delivery-details-action[b-144tocikml] {
    margin-left: auto;
}

.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: var(--text-size-small);
    font-weight: 400;
    color: var(--grey-700);
}

.delivery-fact-value[b-144tocikml] {
    margin-top: 0.125rem;
    font-size: var(--text-size-medium);
    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;
}

/* The title doubles as this card's header row, so it carries the header's own spacing and rule. */
.delivery-component-breakdown h3[b-144tocikml] {
    padding: 0.25rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--grey-100);
}

.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: var(--text-size-small);
}
/* /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: var(--text-size-small);
}

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

/* Look comes from .yx-inline-action; only its spacing under the reason line is set here. */
[b-5ylll35p4p] .quality-empty-action {
    margin-top: var(--spacing-025);
}

/* 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: var(--text-size-small);
    color: var(--grey-500);
}

.quality-context-leading[b-5ylll35p4p] {
    flex: 0 0 auto;
    font-size: var(--text-size-medium);
    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 */
/* Neutralises Bootstrap's .container (auto margins, max-width, gutter padding) so the body sits on
   the shared page margin from .page-content instead of on an indent of its own. */
.container[b-puhpe1b48q] {
    margin: 0;
    max-width: none;
    padding: 0;
}

/* Distance to the filter row below - PageHeader itself carries no bottom margin. */
[b-puhpe1b48q] .page-header {
    margin-bottom: 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;
}

.input-compare-cards[b-8ab0ao1o3z] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

    .input-compare-cards[b-8ab0ao1o3z]  .yx-detail-card {
        max-width: none;
        width: 100%;
    }
/* /Pages/InputCompare/Edit/InputComparePdfEditPage.razor.rz.scp.css */
.btn-header-group[b-x8f3tauy8f] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.input-compare-cards[b-x8f3tauy8f] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

    .input-compare-cards[b-x8f3tauy8f]  .yx-detail-card {
        max-width: none;
        width: 100%;
    }
/* /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);
}

/* The six reference slots, as pills rather than a two-column grid: there are always six, each holds
   one short value, and the pair "slot + what is in it" reads in one glance where a table spent a
   header row and half the section's width on the same six lines. */
.reference-key-pills[b-lnoaw3uk8x] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050);
}

.reference-key-pill[b-lnoaw3uk8x] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-050);
    padding: 0.1875rem var(--spacing-075);
    border-radius: 999px;
    background-color: var(--grey-100);
    font-size: var(--text-size-small);
    color: var(--grey-500);
}

/* A slot that carries a header is the one that says something; an empty slot stays in the row as
   the placeholder it is. */
.reference-key-pill-used[b-lnoaw3uk8x] {
    background-color: var(--accent-color-subtle);
    color: var(--accent-color);
}

.reference-key-pill-header[b-lnoaw3uk8x] {
    color: var(--grey-700);
}

.reference-key-pill-used .reference-key-pill-header[b-lnoaw3uk8x] {
    color: var(--grey-900);
}

/* A cell whose value is a state rather than a name - <ignore>, <unchanged> - is set back in grey, so
   a column of real values still reads as the column's content and the empty ones as the exception. */
.grid-cell-placeholder[b-lnoaw3uk8x] {
    color: var(--grey-500);
}
/* /Pages/InputProcess/Flow/Completed/InputProcessImportFlowCompleted.razor.rz.scp.css */
/* Mirrors the sizing the flow page's own .page-content applies (InputProcessImportFlowPage.razor.css)
   - this component replaces that markup wholesale while the flow is in the completion state (H), so
   it has to fill the same area itself instead of inheriting a rule scoped to the page. */
.import-flow-completed[b-zi3d16mnta] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height));
    max-height: calc(100vh - var(--topbar-height));
    /* The same side margin every other page gets from the shared .page-content rule in app.css.
       This component replaces that markup wholesale, so without it the page sits against the edge
       of the window while every screen around it breathes. */
    margin-inline: 1.25rem;
}

.import-flow-completed-header[b-zi3d16mnta] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.import-flow-completed-body[b-zi3d16mnta] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    width: 100%;
}

/* Both cards stop at a readable line length instead of running the width of the screen: what they
   hold is a few sentences and three facts, and a card that wide makes them hard to scan. */
.import-flow-completed-message-card[b-zi3d16mnta],
.import-flow-completed-facts-card[b-zi3d16mnta] {
    max-width: 38.75rem;
    padding: var(--spacing-075) var(--spacing-10);
}

/* The three ways on from here, in the card that says the import has started rather than in a bar at
   the bottom of the screen: they belong with that message. */
/* The three ways on stand apart from the sentences around them: they are what the page is for, and
   crowding them against the text makes them read as part of it. */
.import-flow-completed-navigations[b-zi3d16mnta] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-10);
    margin-block: var(--spacing-15);
}

.import-flow-completed-message[b-zi3d16mnta] {
    margin: 0 0 var(--spacing-050) 0;
}

/* /Pages/InputProcess/Flow/InputProcessImportFlowPage.razor.rz.scp.css */
/* The flow 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-1kbn8wy0yj] {
    /* 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-1kbn8wy0yj] {
    width: 100%;
    padding-bottom: 0.625rem;
}

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

/* Previous shows on every step except the first, Next on steps 1-5 — so one of the two is
   missing on the outer steps. The reason for a blocked step and the primary action are pushed
   right as one group, which keeps the reason against the button it explains. */
.footer-end[b-1kbn8wy0yj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    margin-left: auto;
}

.footer-blocked-reason[b-1kbn8wy0yj] {
    color: var(--grey-500);
}

.footer-missing-input[b-1kbn8wy0yj] {
    color: var(--red-700);
    font-size: var(--text-size-medium);
}

.footer-missing-input-title[b-1kbn8wy0yj] {
    font-weight: 500;
}

.footer-missing-input ul[b-1kbn8wy0yj] {
    margin: var(--spacing-025) 0 0;
    padding-left: var(--spacing-125);
}

.page-footer[b-1kbn8wy0yj] {
    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;
}

.step-area[b-1kbn8wy0yj] {
    display: grid;
    /* Flex/grid items default to min-height: auto, i.e. "at least as tall as my content." That
       let long step content 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 is itself a flex item of .page-body. Without flex-grow it only takes the height
       its content needs, so a step with a bounded-height grid (.page-fill/.fill-region chain)
       never gets a defined height to size against. Growing to fill .page-body's remaining space
       is what makes that chain resolve to something other than 0. */
    flex: 1 1 auto;
}

    /* A step whose content is taller than the area - the Convert step once its preview panel is
       open - scrolls here, rather than being cut off at the footer or squeezing its own grid. */
    .step-area > .step-content[b-1kbn8wy0yj] {
        grid-area: 1 / 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

/* The step bar and the step content take the full page width, the same as the header above them,
   so a wide window is used instead of leaving the right-hand side empty. */
.wizard-column[b-1kbn8wy0yj] {
    width: 100%;
}

/* Takes the space between the step bar and the footer, which is what pushes the footer down. */
.page-body[b-1kbn8wy0yj] {
    flex: 1 1 auto;
    /* Same min-height: auto problem as .step-area, one level up. 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/InputProcess/Flow/Step1/InputProcessImportFlowStepImportProfile.razor.rz.scp.css */
/* The list and the details of the chosen profile each take half the width, side by side. Once both
   no longer fit their minimum, auto-fit falls back to one column and the details land under the
   list. */
.import-profile-step[b-ccx02y29ew] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--spacing-10);
    align-items: start;
}

.import-profile-card[b-ccx02y29ew],
.import-profile-details-card[b-ccx02y29ew] {
    padding: var(--spacing-075) var(--spacing-10);
}

/* One radio group: the profiles are alternatives, and picking one drops the previous pick. */
.import-profile-list[b-ccx02y29ew] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
}

/* Tighter than the standard radio card: this list can run to a dozen profiles and has to be
   scannable in one look, so a card is no taller than the two lines it carries. */
.import-profile-list[b-ccx02y29ew]  .yx-radio-card {
    padding: var(--spacing-025) var(--spacing-075);
}

.import-profile-list[b-ccx02y29ew]  .yx-radio-card-text {
    gap: 0;
}

/* A long profile name ends in an ellipsis rather than wrapping the card onto a third line. */
.import-profile-list[b-ccx02y29ew]  .yx-radio-card-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.import-profile-details-description[b-ccx02y29ew] {
    font-size: var(--text-size-small);
    color: var(--grey-700);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.import-profile-details-section[b-ccx02y29ew] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    margin-top: var(--spacing-075);
}

.import-profile-details-section-title[b-ccx02y29ew] {
    font-size: var(--text-size-small);
    font-weight: 600;
    color: var(--grey-500);
}

/* The facts of a section sit next to each other while there is room, and wrap to their own line in
   a narrow panel - each keeps a readable minimum rather than a fixed column count. */
.import-profile-details-facts[b-ccx02y29ew] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--spacing-050) var(--spacing-10);
}

.import-profile-details-note[b-ccx02y29ew] {
    margin-top: var(--spacing-075);
    font-size: var(--text-size-small);
    color: var(--grey-500);
}

.import-profile-empty[b-ccx02y29ew],
.import-profile-details-hint[b-ccx02y29ew] {
    color: var(--grey-500);
}
/* /Pages/InputProcess/Flow/Step2/InputProcessImportFlowStepSourceFile.razor.rz.scp.css */
.source-file-card[b-k7iohs8qz1] {
    padding: var(--spacing-075) var(--spacing-10);
}

/* The waiting indicator sits on top of the content it is replacing instead of taking its place,
   the same overlay arrangement the schema-import flow uses on its own step area - it keeps the
   card from collapsing to the height of a spinner while the check-and-read is in flight. */
.source-file-area[b-k7iohs8qz1] {
    display: grid;
}

    .source-file-area > .source-file-content[b-k7iohs8qz1] {
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-075);
    }

        .source-file-area > .source-file-content.is-loading[b-k7iohs8qz1] {
            opacity: 0.4;
            pointer-events: none;
        }

    .source-file-area > .source-file-loading[b-k7iohs8qz1] {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* The facts stand next to each other rather than under each other, so the separator line a detail
   field draws under itself would cut the row in half. */
.source-file-facts[b-k7iohs8qz1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050) var(--spacing-20);
}

    .source-file-facts[b-k7iohs8qz1]  .yx-detail-field {
        padding: 0;
        border-bottom: none;
    }

.source-file-summary[b-k7iohs8qz1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    color: var(--grey-500);
    font-size: var(--text-size-small);
}
/* /Pages/InputProcess/Flow/Step3/InputProcessImportFlowStepConvert.razor.rz.scp.css */
/* Deliberately outside the .page-fill / .fill-region chain: in that chain the grid takes the height
   left over, so opening the preview panel below it made the grid shrink. Here the grid carries its
   own height and the step grows past the step area instead, which the area scrolls. */
.convert-step[b-1p1qqivq0x] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    /* Both this step and the block holding the grid keep their own height: as flex children they
       would otherwise shrink to fit the area, which is the squeeze this arrangement removes. */
    flex-shrink: 0;
}

.convert-grid-area[b-1p1qqivq0x] {
    flex-shrink: 0;
}

/* The grid stops at eleven rows and scrolls inside itself from there, so a wide file no longer
   decides how tall this step is. A data row is the 2.025rem every grid in the app uses (app.css);
   the allowance on top covers the two rows of the banded header. */
.convert-step[b-1p1qqivq0x]  .convert-grid {
    max-height: calc(11 * 2.025rem + 5rem);
}

/* A height, not a maximum: the panel keeps the same size whichever column is previewed and however
   many rows its sample has, so opening or switching it moves nothing above it. */
.convert-step[b-1p1qqivq0x]  .yx-grid-detail-panel {
    height: 22rem;
}

/* The cell is a button so it can be clicked and reached by keyboard; it has to read as the header
   name it replaces, not as a control. */
.convert-step-header-name[b-1p1qqivq0x] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .convert-step-header-name:hover[b-1p1qqivq0x] {
        text-decoration: underline;
    }

.convert-step-parse-rule-empty[b-1p1qqivq0x] {
    color: var(--grey-500);
}

.convert-step-origin-plain[b-1p1qqivq0x] {
    color: var(--grey-500);
}
/* /Pages/InputProcess/Flow/Step4/InputProcessImportFlowStepMapping.razor.rz.scp.css */
.mapping-step[b-u95mirmz26] {
    gap: var(--spacing-050);
}

.mapping-origin-plain[b-u95mirmz26] {
    color: var(--grey-500);
}

.mapping-remarks-cell[b-u95mirmz26] {
    display: flex;
    align-items: center;
    gap: var(--spacing-025);
}

[b-u95mirmz26] .mapping-field-type-mismatch .data-type-indicator {
    color: var(--red-600);
    border-color: var(--red-600);
}

[b-u95mirmz26] .mapping-action-new {
    background: var(--orange-100);
}

[b-u95mirmz26] .mapping-action-ignore {
    background: var(--yellow-100);
}

[b-u95mirmz26] .mapping-action-map {
    background: var(--blue-100);
}
/* /Pages/InputProcess/Flow/Step5/InputProcessImportFlowStepReference.razor.rz.scp.css */
.reference-step[b-mpp46ry9a7] {
    gap: var(--spacing-050);
}

.reference-step-auto-generate-note[b-mpp46ry9a7] {
    color: var(--grey-500);
    padding: var(--spacing-050);
}
/* /Pages/InputProcess/Flow/Step6/InputProcessImportFlowStepImport.razor.rz.scp.css */
/* Two columns while there is room for two cards of readable width, one column below that - the
   right column then lands under the left one instead of squeezing both. */
.import-step[b-qttxwoalbt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21.25rem, 1fr));
    gap: var(--spacing-10);
    align-items: start;
    height: 100%;
    overflow-y: auto;
}

.import-step-column[b-qttxwoalbt] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
}

.import-card[b-qttxwoalbt] {
    padding: var(--spacing-075) var(--spacing-10);
}

/* The left border keeps its width in both states; only its colour follows the checkbox, so turning
   the setting on or off moves nothing. */
.save-settings-card[b-qttxwoalbt] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    border-left: 3px solid var(--grey-300);
}

.save-settings-card-on[b-qttxwoalbt] {
    border-color: var(--accent-color);
    background-color: var(--accent-color-subtle);
}

.save-settings-icon[b-qttxwoalbt] {
    margin-top: 0.125rem;
    color: var(--grey-500);
}

.save-settings-card-on .save-settings-icon[b-qttxwoalbt] {
    color: var(--accent-color);
}

.save-settings-body[b-qttxwoalbt] {
    flex: 1 1 auto;
    min-width: 0;
}

.save-settings-description[b-qttxwoalbt] {
    margin-top: var(--spacing-050);
    color: var(--grey-500);
    font-size: var(--text-size-small);
    line-height: 1.5;
}

.import-field-hint[b-qttxwoalbt] {
    margin-top: var(--spacing-025);
    color: var(--grey-500);
    font-size: var(--text-size-small);
}

.import-card-option[b-qttxwoalbt] {
    padding-top: var(--spacing-050);
}

/* Reserved height: the text arrives with the impact, the slot is there from the start. One line is
   what the sentence takes at this card's width; it may wrap on a narrow one and then simply grows. */
.row-state-intro[b-qttxwoalbt] {
    min-height: 1.25rem;
    margin-bottom: var(--spacing-075);
    color: var(--grey-600);
    font-size: var(--text-size-small);
    line-height: 1.55;
}

.row-state-options[b-qttxwoalbt] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
    padding-top: var(--spacing-075);
}

/* Reserved height: the explanation of the chosen scope and the deactivation warning take turns here. */
.row-state-note[b-qttxwoalbt] {
    min-height: 2.5rem;
    margin-top: var(--spacing-050);
    color: var(--grey-500);
    font-size: var(--text-size-small);
    line-height: 1.5;
}

.row-state-warning[b-qttxwoalbt] {
    color: var(--orange-700);
}

.row-state-summary[b-qttxwoalbt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-075);
    min-height: 2.25rem;
    margin-top: var(--spacing-075);
    padding-top: var(--spacing-075);
    border-top: 1px solid var(--grey-100);
}

.row-state-counts[b-qttxwoalbt] {
    flex: 1 1 auto;
    min-width: 11rem;
    color: var(--grey-600);
    font-size: var(--text-size-small);
}

.row-state-footnote[b-qttxwoalbt] {
    margin-top: var(--spacing-050);
    color: var(--grey-500);
    font-size: var(--text-size-small);
    line-height: 1.5;
}

.impact-table[b-qttxwoalbt] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-medium);
}

    .impact-table th[b-qttxwoalbt],
    .impact-table td[b-qttxwoalbt] {
        padding: 0.375rem 0.625rem;
        border-bottom: 1px solid var(--grey-100);
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .impact-table th[b-qttxwoalbt] {
        color: var(--grey-600);
        font-size: var(--text-size-small);
        font-weight: 600;
    }

    .impact-table th:first-child[b-qttxwoalbt],
    .impact-table td:first-child[b-qttxwoalbt] {
        text-align: left;
    }

.impact-table-note[b-qttxwoalbt] {
    margin-left: var(--spacing-050);
    color: var(--grey-500);
    font-size: var(--text-size-small);
}

.impact-table-muted[b-qttxwoalbt] {
    color: var(--grey-500);
}

.impact-table-total td[b-qttxwoalbt] {
    font-weight: 600;
}

.checks-summary[b-qttxwoalbt] {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    margin-bottom: var(--spacing-075);
}

.checks-count[b-qttxwoalbt] {
    flex: 1 1 auto;
    color: var(--grey-500);
    font-size: var(--text-size-small);
}

/* Reused from the old impact dialog (ImportImpactDialogComponent.razor.css) - the accordion header
   takes the colour of the most severe message inside its group. */
.sysmsg-header[b-qttxwoalbt] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.3rem;
    box-sizing: border-box;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid var(--grey-200);
}

    .sysmsg-header.alert-danger[b-qttxwoalbt] {
        background: #f8d7da;
        color: #842029;
    }

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

    .sysmsg-header.alert-info[b-qttxwoalbt] {
        background: #cff4fc;
        color: #055160;
    }
/* /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;
}

.import-rule-empty[b-0sv58tcb8m] {
    color: var(--text-tertiary);
}
/* /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] {
    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: 0 var(--spacing-20) var(--spacing-15);
    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;
}

/* The result-preview blocks are stacked without a shared gap, so the reading-highlights card keeps
   itself off the file card above it. */
[b-xyd36g2i7h] .reading-highlights {
    margin-top: var(--spacing-10);
}

.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 {
    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: var(--text-size-medium);
    color: #555;
}

[b-xyd36g2i7h] .data-range-to {
    padding: 0 0.15rem;
    flex-shrink: 0;
    font-size: var(--text-size-medium);
    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;
}

.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;
    }
}

.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: var(--text-size-medium);
    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;
}

/* Same stacked settings cards as the Excel rule page, so both rule editors read alike. */
.parse-rule-pdf-cards[b-algaopcg8z] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
}

.parse-rule-pdf-anchor-preview[b-algaopcg8z] {
    display: flex;
}

    .parse-rule-pdf-anchor-preview svg[b-algaopcg8z] {
        border: 2px solid #dddddd;
    }

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

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

[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;
}

.quality-chart-explanation[b-rlfrcgk3hx] {
    color: var(--grey-500);
    font-size: var(--text-size-medium);
    margin: 0 0 var(--spacing-075) var(--spacing-page-title-indent);
}

/* Sits under the tiles inside the control block: centred, with 4 cm kept free on either side. */
.quality-chart-explanation-selection[b-rlfrcgk3hx] {
    align-self: stretch;
    margin: 0 4cm;
    text-align: center;
}

.quality-toggle-group[b-rlfrcgk3hx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0.1875rem;
    background-color: var(--grey-50);
    border-radius: 999px;
}

.quality-toggle-tile[b-rlfrcgk3hx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: var(--grey-500);
    font-size: var(--text-size-small);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.quality-toggle-tile i[b-rlfrcgk3hx] {
    font-size: var(--text-size-small);
}

.quality-toggle-tile-selected[b-rlfrcgk3hx] {
    background-color: var(--white);
    color: var(--grey-900);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.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;
}

/* Look comes from YxLegend; only its place above the chart is set here. */
[b-rlfrcgk3hx] .chart-legend {
    justify-content: flex-end;
    margin-bottom: var(--spacing-075);
}
/* /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 step bar and the step content take the full page width, the same as the header above them,
   so a wide window is used instead of leaving the right-hand side empty. */
.wizard-column[b-2a5mqnek2s] {
    width: 100%;
}

/* 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/SchemaDefinitionInstances/SchemaDefinitionInstancesOverviewPage.razor.rz.scp.css */
/* Back link above the page header, same stack as the delivery detail page: the header row is a
   flex row, so the link and the header need a column wrapper of their own to sit above it. */
.schema-store-header[b-64hbk6mpvc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}
/* /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] {
    gap: 0.5rem;
}

.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: var(--text-size-small);
    font-weight: 600;
    color: var(--grey-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-value[b-js8knk8ayr] {
    font-size: var(--text-size-medium);
    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: var(--text-size-button);
}

.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/SystemManagement/Overview/SystemManagementPage.razor.rz.scp.css */
/* Back link above the page header, same stack as the schema store page: the header row is a flex
   row, so the link and the header need a column wrapper of their own to sit above it. */
.system-management-header[b-vbdnw4k91q] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.system-management-body[b-vbdnw4k91q] {
    display: flex;
    flex-direction: column;
}

.system-management-tabs[b-vbdnw4k91q] {
    display: flex;
    margin: var(--spacing-10) 0 var(--spacing-15);
}
/* /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 beside 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;
}

/* The gap is wider than a normal control spacing on purpose: the picker button and the quick
   switch are two separate ways to pick a viewpoint, and they should not read as one control. */
.views-viewpoint-row[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: var(--spacing-15);
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

/* The picker's own panel anchors right:0, which reads fine for a button at the far right of a
   header row - in this row the picker is the leftmost control instead, so right:0 would push the
   26rem panel off the left edge. Anchor it to the left edge here. */
.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: var(--text-size-small);
    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;
}

/* A DevExpress editor stretches to its container, which pushed the two buttons to the far right
   of the bar. A fixed width keeps the picker readable for a component name and leaves the buttons
   directly beside it. */
.views-assign-component-bar[b-3uoogneeca]  .views-assign-component-picker {
    width: 20rem;
    flex: 0 0 auto;
}

.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: var(--text-size-small);
    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: var(--text-size-small);
    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: var(--text-size-small);
    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;
}

/* Row container for the grid and the docked layer-history panel: the panel sits beside the
   grid instead of below it, sharing the same fill-region chain so the pair together still
   stops at one bounded height and never grows a second, page-level scrollbar. Row-direction
   instead of .fill-region's own column direction - the flex sizing properties (flex, min-height)
   still apply to how this element behaves as a child of .views-card, regardless of the
   direction it lays out its own children in. */
.views-content-row[b-3uoogneeca] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

/* min-width:0 is the row-layout counterpart of .fill-region's min-height:0 - without it the
   grid's intrinsic content width keeps the wrapper from shrinking to make room for the panel. */
.views-grid-wrapper[b-3uoogneeca] {
    min-width: 0;
}

/* 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: var(--text-size-gridheader);
    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;
}

/* Cell text is a step larger than the header on purpose: the header labels a column once, the
   cell content is what gets read all day. tabular-nums is what makes a right-aligned number
   column line up digit under digit - without it every row shifts by the width of its own
   figures, which is what made the numbers look ragged even though they were aligned. */
.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-cell {
    font-size: var(--text-size-gridcontent);
    padding: 0 0.625rem;
    font-variant-numeric: tabular-nums;
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-reference-cell {
    font-family: var(--font-mono);
}
/* /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 {
    background-color: var(--status-modified-bg) !important;
}

.body-content[b-ckkt21vjd0]  .vp-error-cell {
    background-color: var(--status-invalid-bg) !important;
    color: var(--status-invalid-fg) !important;
}

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

.body-content[b-ckkt21vjd0]  .vp-invalid-count {
    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: var(--text-size-small);
    font-weight: 700;
}

.body-content[b-ckkt21vjd0]  .vp-valid-icon {
    color: var(--status-valid-fg);
}

.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;
    /* The legend's own margin-left: auto absorbs the free space, so the row count and the
       active-rows note end up adjacent on the left and this gap is what separates them. */
    gap: var(--spacing-075);
    margin-bottom: 0.5rem;
}

.vp-active-rows-note[b-ckkt21vjd0] {
    font-size: var(--text-size-medium);
    font-style: italic;
}

/* Look comes from YxLegend; only its place on the header row is set here. */
[b-ckkt21vjd0] .vp-legend {
    margin-left: auto;
}

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

.save-popup-label[b-ckkt21vjd0] {
    font-size: var(--text-size-small);
    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: var(--text-size-small);
    font-weight: 500;
    color: var(--red-700);
}
/* /Pages/ViewPoint/Edit/ViewPointEditPage.razor.rz.scp.css */
/* Only the top gap is this page's own; the left distance comes from .page-content, so Bootstrap's
   .container left gutter is removed rather than added to. */
.container[b-vg41hdzntf] {
    margin-top: 1.25rem;
    margin-left: 0;
    padding-left: 0;
}

.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;
}

.viewpoint-cards[b-vg41hdzntf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

    .viewpoint-cards[b-vg41hdzntf]  .yx-detail-card {
        max-width: none;
        width: 100%;
    }
/* /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;
}

/* Same link treatment as "Open View" on the layer overview, so the two read as the same kind of
   action rather than as a link next to a button. */
/* Look comes from .yx-inline-action inside YxButtonNavigate; only its place in the action row is
   set here. */
[b-st8x0wtjpo] .viewpoint-overview-action {
    flex: 0 0 auto;
    margin-right: var(--spacing-10);
}