@import '_content/Yellax.EngineeringPlatform.UI.Components/Yellax.EngineeringPlatform.UI.Components.utlqkrliol.bundle.scp.css';
@import '_content/Yellax.UI.Components/Yellax.UI.Components.x2gbpc69dz.bundle.scp.css';

/* /PageComponents/ActivityLog/ActivityActionTagComponent.razor.rz.scp.css */
/* Calm status colours: a pale fill with a darker text of the same family. Deleted is the only red,
   and it stays at the same weight as the others so a log full of deletions does not read as an alarm. */
.activity-action-tag[b-f1yg1dqhev] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0 var(--spacing-050);
    border-radius: 999px;
    font-size: var(--text-size-tag);
    line-height: var(--text-size-small-lh);
    white-space: nowrap;
}

.activity-action-tag-positive[b-f1yg1dqhev] {
    background-color: var(--green-50);
    color: var(--green-700);
}

.activity-action-tag-informative[b-f1yg1dqhev] {
    background-color: var(--blue-50);
    color: var(--blue-700);
}

.activity-action-tag-neutral[b-f1yg1dqhev] {
    background-color: var(--neutral-150);
    color: var(--grey-700);
}

.activity-action-tag-negative[b-f1yg1dqhev] {
    background-color: var(--red-50);
    color: var(--red-700);
}
/* /PageComponents/ActivityLog/ActivityLogLinkComponent.razor.rz.scp.css */
.activity-log-link[b-ido1b3so37] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-025);
    padding: 0;
    border: none;
    background: none;
    color: var(--text-link);
    font: inherit;
    font-size: var(--text-size-small);
    white-space: nowrap;
    cursor: pointer;
}

    .activity-log-link:hover[b-ido1b3so37] {
        text-decoration: underline;
    }

/* Every placement puts the link at the end of its line: margin-left: auto pushes it there in a flex row and
   is harmless elsewhere. */
.activity-log-link-audit-line[b-ido1b3so37],
.activity-log-link-facts-line[b-ido1b3so37] {
    margin-left: auto;
}

.activity-log-link-audit-line[b-ido1b3so37] {
    padding-left: var(--spacing-075);
}

/* Same step as the row counter it stands next to. No auto margin here: each overview already pushes the
   counter to the right (justify-content or an auto margin on the counter), and an auto margin on the link
   would take that free space for itself and pull the counter away from the link. */
.activity-log-link-row-count-line[b-ido1b3so37] {
    font-size: var(--text-size-medium);
}

/* On a line of its own (above the schema tiles) the link becomes a box of its own width, pushed to the right;
   inside a section header row it is a trailing flex item and lands on the right the same way. */
.activity-log-link-standalone[b-ido1b3so37] {
    display: flex;
    width: fit-content;
    margin-left: auto;
}
/* /PageComponents/ActivityLog/ActivityLogPanelComponent.razor.rz.scp.css */
/* The side panel's body is the scroll container; the footer sticks to its bottom edge so the count
   and Close stay in view while the list scrolls. */
.activity-log-panel[b-51ysecwj5y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    min-height: 100%;
}

.activity-log-intro[b-51ysecwj5y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    color: var(--text-secondary);
}

.activity-log-filters[b-51ysecwj5y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-050);
}

.activity-log-search[b-51ysecwj5y] {
    grid-column: 1 / -1;
}

.activity-log-list[b-51ysecwj5y] {
    flex: 1 1 auto;
}

/* The text that carries a line rather than names it: the day above a group, what a record used to be
   called, that it is gone, who did it, and the count under the list. */
.activity-log-day-header[b-51ysecwj5y],
.activity-log-previous-name[b-51ysecwj5y],
.activity-log-deleted[b-51ysecwj5y],
.activity-log-row-meta[b-51ysecwj5y],
.activity-log-footer-summary[b-51ysecwj5y] {
    color: var(--text-tertiary);
    font-size: var(--text-size-small);
    line-height: var(--text-size-small-lh);
}

.activity-log-day-header[b-51ysecwj5y] {
    padding: var(--spacing-050) 0 var(--spacing-025);
}

.activity-log-row[b-51ysecwj5y] {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--spacing-050);
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.activity-log-time[b-51ysecwj5y] {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.activity-log-row-main[b-51ysecwj5y] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.activity-log-row-line[b-51ysecwj5y] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.activity-log-empty[b-51ysecwj5y],
.activity-log-error[b-51ysecwj5y] {
    padding: var(--spacing-10) 0;
    color: var(--text-secondary);
}

.activity-log-error-state[b-51ysecwj5y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-050);
}

.activity-log-more[b-51ysecwj5y] {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-075);
}

.activity-log-footer[b-51ysecwj5y] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-050);
    padding: var(--spacing-050) 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
}
/* /PageComponents/ActivityLog/ActivityRecordLinkComponent.razor.rz.scp.css */
.activity-record-link[b-vctd3xxsje] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    text-align: start;
    overflow-wrap: anywhere;
}

    .activity-record-link i[b-vctd3xxsje] {
        color: var(--text-tertiary);
        font-weight: normal;
    }

button.activity-record-link[b-vctd3xxsje] {
    cursor: pointer;
}

    button.activity-record-link:hover[b-vctd3xxsje] {
        color: var(--text-link);
        text-decoration: underline;
    }

/* A deleted record is recognisable by its look alone: the dashboard section has no room for a
   "deleted" marker, so the grey and the plain cursor have to say it. */
.activity-record-link-deleted[b-vctd3xxsje] {
    color: var(--text-tertiary);
    cursor: default;
}
/* /PageComponents/ActivityLog/RecentActivityComponent.razor.rz.scp.css */
/* One line per entry: day and time, the action tag, the record and "{kind} · {user}". The record name may wrap;
   the other parts keep their width, and the kind and user give way first when the card is narrow. */
.recent-activity-row[b-r0p8mv08jr] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-075);
    min-width: 0;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

    .recent-activity-row:last-child[b-r0p8mv08jr] {
        border-bottom: none;
    }

    .recent-activity-row[b-r0p8mv08jr]  .activity-action-tag {
        flex: 0 0 auto;
    }

/* The moment and the "{kind} · {user}" tail are the quiet parts of a line; neither ever wraps. */
.recent-activity-when[b-r0p8mv08jr],
.recent-activity-meta[b-r0p8mv08jr] {
    color: var(--text-tertiary);
    font-size: var(--text-size-small);
    line-height: var(--text-size-small-lh);
    white-space: nowrap;
}

.recent-activity-when[b-r0p8mv08jr] {
    flex: 0 0 auto;
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
}

.recent-activity-meta[b-r0p8mv08jr] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-activity-message[b-r0p8mv08jr] {
    padding: var(--spacing-10) 0;
    color: var(--text-secondary);
}
/* /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: var(--blue-50);
    border-radius: 6px;
    padding: 0.625rem 1rem;
}

.details-title[b-03aq3r8qxy] {
    color: var(--blue-700);
    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/BackgroundJobs/Status/CalculationErrorIndicator.razor.rz.scp.css */
/* Same height as the status chip next to it, so the two read as one row in the top bar. The colour is
   the warning colour of the message icons; it stays readable on the dark environment bar. */
.calculation-error-indicator[b-1arou87r92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--topbar-chip-height);
    margin-right: 0.75rem;
    font-size: var(--text-size-large);
    color: var(--orange-500);
    cursor: default;
}

.calculation-error-affected[b-1arou87r92] {
    margin-top: var(--spacing-050);
}

.calculation-error-columns[b-1arou87r92] {
    margin: var(--spacing-025) 0 0;
    padding-left: 1.25rem;
}

.calculation-error-column[b-1arou87r92] {
    display: flex;
    gap: var(--spacing-075);
    justify-content: space-between;
}

.calculation-error-column-count[b-1arou87r92] {
    font-variant-numeric: tabular-nums;
}

.calculation-error-hint[b-1arou87r92] {
    margin-top: var(--spacing-050);
    font-style: italic;
    color: var(--grey-600);
}
/* /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;
}

/* DevExpress lays the caption out as a flex item aligned to the start; stretch it so the counter can sit
   at the right edge of the field instead of directly behind the caption text. */
.create-delivery-form[b-xasmtjxglc]  .create-delivery-caption-row {
    align-self: stretch;
}

.create-delivery-caption[b-xasmtjxglc] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.create-delivery-counter[b-xasmtjxglc] {
    font-size: var(--text-size-small);
    font-weight: normal;
    color: var(--grey-500);
    font-variant-numeric: tabular-nums;
}
/* /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);
}

.data-state-indicator-processing[b-4sz84oajs4] {
    background-color: var(--orange-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.25rem;
    padding: 0 0.25rem;
    font-size: var(--text-size-extrasmall);
    line-height: var(--text-size-extrasmall-lh);
}
/* /PageComponents/General/DockedPanel.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 row container (the default) gives it the same
   full height as the grid area without an explicit height here. min-height:0 lets the content 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: dockedPanelResize.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. */
.docked-panel[b-tbrzc0kx29] {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 var(--docked-panel-width, 30.8rem);
    width: var(--docked-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. */
.docked-panel-resize-handle[b-tbrzc0kx29] {
    position: absolute;
    top: 0;
    left: -0.1875rem;
    width: 0.375rem;
    height: 100%;
    z-index: 1;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
}

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

.docked-panel-header[b-tbrzc0kx29] {
    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);
}

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

.docked-panel-title[b-tbrzc0kx29] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.docked-panel-spacer[b-tbrzc0kx29] {
    flex: 1 1 auto;
}

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

/* A flex column with min-height:0, so a caller's scrolling list or grid inside it takes the height
   left below the header and scrolls there, instead of growing the panel past the grid beside it. */
.docked-panel-content[b-tbrzc0kx29] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /PageComponents/General/EntityAuditInfoComponent.razor.rz.scp.css */
/* Inside a flex row (the page header's meta row) the rail takes the width left over, so its tail
   rule still runs up to whatever trails it. Outside a flex row the flex value has no effect. */
.audit-rail[b-f81umh14ku] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    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);
}

/* Only rendered when the grid actually reorders the selection, so it never becomes wallpaper the
   user stops reading. */
.cc-order-warning[b-yj1zwlhyej] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    border: 1px solid var(--orange-200);
    border-radius: 5px;
    background: var(--orange-50);
    color: var(--grey-800);
    font-size: var(--text-size-small);
    line-height: 1.4;
}

.cc-order-warning-icon[b-yj1zwlhyej] {
    color: var(--orange-700);
    flex-shrink: 0;
}

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

/* A panel with its own hint underneath; the panel takes the height the hint leaves. */
.cc-side[b-yj1zwlhyej] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    min-width: 0;
}

.cc-panel[b-yj1zwlhyej] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 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);
    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;
    white-space: nowrap;
}

.cc-move-buttons[b-yj1zwlhyej] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-050);
}

.cc-move-buttons[b-yj1zwlhyej]  .dxbl-btn {
    width: 100%;
}

.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-chosen[b-yj1zwlhyej] {
    background: var(--blue-50);
}

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

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

.cc-type[b-yj1zwlhyej] {
    color: var(--grey-500);
    font-size: var(--text-size-small);
    white-space: nowrap;
}

.cc-pin[b-yj1zwlhyej] {
    color: var(--grey-500);
    flex-shrink: 0;
}

/* Same pin, read as a warning: this column does not stay where the row number says it does. */
.cc-pin-warning[b-yj1zwlhyej] {
    color: var(--orange-700);
}

.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: pointer;
    user-select: none;
}

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

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

.cc-drop-above[b-yj1zwlhyej] {
    box-shadow: inset 0 2px 0 var(--accent-color);
}

.cc-drop-below[b-yj1zwlhyej] {
    box-shadow: inset 0 -2px 0 var(--accent-color);
}

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

/* Two lines reserved, so the longer hint under the selection does not make that panel shorter
   than the one beside it. */
.cc-hint[b-yj1zwlhyej] {
    font-size: var(--text-size-small);
    color: var(--grey-500);
    line-height: 1.4;
    min-height: 2.8em;
}
/* /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 */
/* Sized by the docked panel's content area, not by its own rows: a link in the same fill chain the
   page grids use (flex:1 1 auto + min-height:0), so the type summary keeps its height and the grid
   below it (.scrollable-grid) takes what is left and scrolls inside itself. A long sample then
   never grows the panel past the grid beside it. */
.preview-body[b-dlqho0bkkr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

    /* 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] {
    flex-shrink: 0;
    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: var(--blue-700);
    }

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

.column-name[b-dlqho0bkkr] {
    display: block;
    font-weight: 500;
}
/* /PageComponents/InputProcess/ExcelDataPreviewDockedPanel.razor.rz.scp.css */
/* The header details and the two content states render as child content of the shell, so plain
   selectors reach them; the shell itself (DockedPanel.razor.css) is not styled from here. */
.data-preview-panel-column[b-94w30wor3w] {
    color: var(--text-secondary);
    font-weight: 600;
}

.data-preview-panel-message[b-94w30wor3w] {
    padding: 0.625rem 0.75rem;
    color: var(--text-tertiary);
}

.data-preview-panel-loading[b-94w30wor3w] {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
}
/* /PageComponents/InputProcess/InputProcessNumberFormatPicker.razor.rz.scp.css */
/* The card itself is the shared .yx-choice-card look (global.css), and the card it sits in decides
   the padding around the choices - what stays here is this picker's own piece: the select holding
   the notations that are not on a card. */
.number-format-picker-other[b-hfyms0z2fw] {
    align-self: center;
    min-width: 16rem;
}

/* Inside the select's own items the notation and its regions read on one line, so the sample keeps
   its weight but not the size it has on a card. */
.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);
}
/* /PageComponents/InputProcess/InputProcessReferenceOptionPicker.razor.rz.scp.css */
/* The card look itself is the shared .yx-choice-card (global.css); the only thing this picker adds
   is a cap on how wide a card gets. What a strategy does is a sentence rather than the couple of
   words the notation cards carry, so without a cap one card grows as wide as its longest line and
   the three stop reading as a row of equals. */
.reference-option-picker .yx-choice-card[b-eu8o0g8onq] {
    max-width: 20rem;
}
/* /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-400) 70%, transparent);
}

.platform-header-dev .platform-environment[b-d7xigin7qb] {
    background-color: color-mix(in srgb, var(--blue-800) 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;
    /* Below the maintenance bar as well, when one is shown (zero otherwise). */
    top: calc(var(--topbar-height) + var(--maintenance-bar-offset));
    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;
}

/* No longer the part that gives way first - the tenant cluster next to it now carries a much
   higher flex-shrink (TenantNameComponent.razor.css's .tenant-trigger-cluster), so the flex
   algorithm drains that cluster's available space before this one gives up any of its own: at
   a comfortable width the project name reads in full, uncut. This item keeps flex-shrink: 1
   rather than 0, and min-width: 0 lets it go below its text width, so an extreme project name
   still ends in an ellipsis (via .project-name-text) once the tenant cluster is already down
   to its own floor - without that, a 100-character name would push the header wider than the
   viewport instead of truncating.
   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-grow: 1;
    flex-shrink: 1;
    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/MaintenanceBarComponent.razor.rz.scp.css */
/* A solid, urgent strip rather than a soft tint, as in the design: a maintenance window must not be
   missed or mistaken for a status pill. One fixed height, so the layout can offset everything below it
   by the same token; a text longer than the viewport is cut off instead of wrapping onto a second line. */
.maintenance-bar[b-5c2i1iqm69] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex: 0 0 var(--maintenance-bar-height);
    height: var(--maintenance-bar-height);
    padding: 0 1rem;
    overflow: hidden;
    white-space: nowrap;
    color: var(--white);
    font-size: var(--text-size-medium);
    line-height: var(--text-size-medium-lh);
}

.maintenance-bar-planned[b-5c2i1iqm69] {
    background-color: var(--amber-600);
}

.maintenance-bar-begun[b-5c2i1iqm69] {
    background-color: var(--red-700);
}

.maintenance-bar-icon[b-5c2i1iqm69] {
    flex: 0 0 auto;
}

.maintenance-bar-title[b-5c2i1iqm69] {
    flex: 0 0 auto;
    font-weight: 600;
}

.maintenance-bar-details[b-5c2i1iqm69] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /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 trigger opens the project menu ("Recent projects" plus the way back to the
   Projects hub), 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 the monogram and the chevron carry
   their own colour below. */
.project-name[b-owpe3hsalb] {
    display: flex;
    align-items: center;
    /* .topbar-trigger centres its content, which is right for the square icon-only triggers on
       the other side of the bar but not here: with the floor below, this button is wider than
       the name it holds, and centring would float the monogram and the name in the middle of
       an empty block instead of starting where the bar's content starts. */
    justify-content: flex-start;
    gap: 0.375rem;
    font: inherit;
    text-align: left;
    /* A floor rather than min-width: 0: the monogram and the chevron never shrink, so without
       one the name text is the only thing left to give and it collapses to a sliver of a
       letter plus an ellipsis - present, but no longer readable, which is what AC5 asks for.
       The floor is the width of the panel this trigger opens, so the two line up instead of
       the panel hanging off a much narrower name; the ellipsis in .project-name-text takes
       over from there. */
    min-width: var(--project-menu-width);
    /* The shared avatar size is set for the project tiles, where the circle is the tile's main
       marker; in a 3.125rem bar it takes up most of the height. A quarter smaller sits inside
       the bar without crowding the name. Overriding the token rather than the width reaches
       YxAvatar's own scoped rule, which a selector from here never could - custom properties
       inherit. */
    --size-avatar: 2.0625rem;
}

/* The letters have to come down with the circle; that one is a plain declaration inside the
   child component, so it needs ::deep. */
.project-name[b-owpe3hsalb]  .yx-avatar {
    font-size: 0.75rem;
}

/* 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;
}

/* Reads as a sub-element of the name rather than as the project icon next to it, so it
   follows the tenant menu's own chevron treatment (TenantNameComponent.razor.css): smaller
   than the bar's usual icon size, dimmed, and in white rather than the brand yellow
   .topbar-trigger-name would otherwise give it (that yellow marks the monogram as the
   workspace icon; the chevron is not that). It never shrinks: the name text gives up its
   own space first. */
.project-name-chevron[b-owpe3hsalb] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--white);
    opacity: 0.7;
}
/* /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.
   This cluster is now the part that gives way: the project name next to it (see
   .platform-header-project in MainLayout.razor.css) keeps a much lower flex-shrink, so per the
   flex-shrink algorithm - shrinkage is distributed in proportion to flex-shrink x flex-basis,
   and an item that hits its own min-width is frozen while the rest of the negative space keeps
   going to whichever item can still give (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
   - nearly all of the shrinking lands here first, and only once this cluster is already down to
   its own floor does the project name start giving up any of its own width.
   min-width: 0 lets the cluster itself shrink below its content width; the floor that keeps the
   tenant name from disappearing sits on .topbar-trigger's own min-width, and the text
   truncation in overwriteDevExStyle.css (.dxbl-btn.topbar-trigger-name > span:not(.dxbl-image))
   turns that squeeze into an ellipsis instead of wrapped or clipped text. */
.tenant-trigger-cluster[b-5ajwwxpi5w] {
    display: flex;
    align-items: center;
    flex-shrink: 999;
    min-width: 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/MaintenanceScheduleDialogComponent.razor.rz.scp.css */
/* The popup sizes itself to its content; capping the body keeps the window narrow. */
.maintenance-schedule-body[b-10356i2i78] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    max-width: 26rem;
}

.maintenance-schedule-error[b-10356i2i78] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
    margin: 0;
    font-size: var(--text-size-small);
    color: var(--red-600);
}

.maintenance-schedule-footer[b-10356i2i78] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-050);
}
/* /PageComponents/SystemManagement/MaintenanceTabComponent.razor.rz.scp.css */
.maintenance-card[b-fgqr7pb97m] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    padding: var(--spacing-10) var(--spacing-15);
}

.maintenance-card-header[b-fgqr7pb97m] {
    gap: var(--spacing-10);
}

.maintenance-card-caption[b-fgqr7pb97m] {
    min-width: 0;
}

.maintenance-card-actions[b-fgqr7pb97m] {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}

.maintenance-card-message[b-fgqr7pb97m],
.maintenance-card-notice[b-fgqr7pb97m] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    margin: 0;
    font-size: var(--text-size-small);
}

.maintenance-card-message-success[b-fgqr7pb97m] {
    color: var(--green-700);
}

.maintenance-card-message-information[b-fgqr7pb97m] {
    color: var(--grey-700);
}

.maintenance-card-message-error[b-fgqr7pb97m],
.maintenance-card-notice-error[b-fgqr7pb97m] {
    color: var(--red-600);
}

.maintenance-card-notice-denied[b-fgqr7pb97m] {
    color: var(--grey-700);
}

.maintenance-card-empty[b-fgqr7pb97m] {
    margin: 0;
    font-size: var(--text-size-small);
    color: var(--grey-700);
}

.maintenance-card-start[b-fgqr7pb97m],
.maintenance-card-duration[b-fgqr7pb97m],
.maintenance-card-ended[b-fgqr7pb97m] {
    font-variant-numeric: tabular-nums;
}
/* /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-800);
}

.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 */
/* Only the history-specific pieces live here: the header details, the content states and the row
   layout. The panel shell - width, resize handle, header line, close button, content area - is
   DockedPanel's; everything below renders inside that shell as this component's own child content,
   which is why plain (non-::deep) selectors still reach it. */

/* 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-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-800);
    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-layout[b-m7kjld8bpy] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
    max-width: 82.5rem;
}

/* Cards sit side by side, each as wide as the others while it keeps at least 20rem, and fall back to
   one column on a narrow window. */
.data-column-edit-cards[b-m7kjld8bpy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--spacing-10);
    align-items: start;
    min-width: 0;
}

/* The expression card starts a new row under Details and keeps the width of one card; the track it
   leaves empty next to it collapses, so Details and Type still share the row above. The card is a
   YxSettingsCard, so its root element carries no scope attribute of this page. */
.data-column-edit-cards[b-m7kjld8bpy]  .data-column-edit-expression {
    grid-column: 1;
}

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

/* The builder's own heading is suppressed (ShowSummaryTitle="false" in the .razor) because the card
   around it already carries the same label. */
[b-m7kjld8bpy] .data-column-edit-derived-expression-builder {
    min-width: 0;
}

/* Keeps "Not fixed" on one line in the narrow form column instead of wrapping inside the tag. */
.data-column-fixed-fact[b-m7kjld8bpy]  .static-tag {
    white-space: nowrap;
}

.data-column-edit-source[b-m7kjld8bpy] {
    margin-bottom: var(--spacing-10);
}

.data-column-edit-source-caption[b-m7kjld8bpy] {
    margin-bottom: var(--spacing-025);
}

.data-column-edit-source-options[b-m7kjld8bpy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050);
}

/* The cards are YxRadioCard components, so their root element carries no scope attribute of this page. */
.data-column-edit-source-options[b-m7kjld8bpy]  .yx-radio-card {
    flex: 1 1 12rem;
    min-width: 0;
}

.data-column-edit-source-normal[b-m7kjld8bpy] {
    color: var(--grey-700);
}

.data-column-edit-source-derived[b-m7kjld8bpy] {
    padding: 0 var(--spacing-050);
    border-radius: var(--radius-pill);
    background: var(--blue-50);
    color: var(--blue-600);
}

.data-column-edit-used-by-names[b-m7kjld8bpy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-025);
}

.data-column-edit-used-by-name[b-m7kjld8bpy] {
    padding: 0 var(--spacing-050);
    border-radius: var(--radius-pill);
    background: var(--blue-50);
    color: var(--blue-600);
}
/* /Pages/DataDimension/Columns/Manage/ManageColumns.razor.rz.scp.css */
.manage-columns-toolbar[b-hkuwkwe56w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.manage-columns-summary[b-hkuwkwe56w] {
    margin-left: auto;
    font-size: var(--text-size-medium);
}

.manage-columns-list[b-hkuwkwe56w] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.manage-column-cell[b-hkuwkwe56w] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.manage-column-cell-marker[b-hkuwkwe56w],
.manage-column-cell-position[b-hkuwkwe56w],
.manage-column-cell-fixed[b-hkuwkwe56w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manage-column-cell-position[b-hkuwkwe56w] {
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.manage-column-cell-name[b-hkuwkwe56w] {
    font-weight: 600;
}

.manage-column-cell-description[b-hkuwkwe56w] {
    color: var(--text-secondary);
}

.manage-column-pin[b-hkuwkwe56w] {
    color: var(--accent-color);
}

.manage-columns-list[b-hkuwkwe56w]  .dxbl-grid-drop-target-indicator {
    --dxbl-grid-drop-indicator-color: var(--accent-color);
}

.marker-legend[b-hkuwkwe56w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
}

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

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

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

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

.marker-icon-moved[b-hkuwkwe56w] {
    color: var(--status-valid-fg);
}
/* /Pages/DataDimension/Columns/Overview/DataColumnOverviewPage.razor.rz.scp.css */
.btn-header-group[b-yq5bpuho3a] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.source-normal[b-yq5bpuho3a] {
    color: var(--grey-700);
}

.source-derived[b-yq5bpuho3a] {
    display: inline-block;
    padding: 0 var(--spacing-050);
    border-radius: var(--radius-pill);
    background: var(--blue-50);
    color: var(--blue-600);
}

.used-by-none[b-yq5bpuho3a] {
    color: var(--grey-500);
}

.used-by-shield[b-yq5bpuho3a] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    color: var(--blue-600);
    font-variant-numeric: tabular-nums;
}
/* /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);
}

.layer-blocked-notice[b-3qx7hgoobu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.layer-blocked-notice-icon[b-3qx7hgoobu] {
    font-size: 1.75rem;
    color: var(--amber-600);
}

.layer-blocked-notice-text[b-3qx7hgoobu] {
    color: var(--text-secondary);
}
/* /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;
}

/* A generated file name is one long word without spaces; without this it runs out of its grid cell. */
.delivery-fact-value-wrap[b-144tocikml] {
    overflow-wrap: anywhere;
}

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

/* Details on the left; Quality and Recent activity stacked on the right. The column widths come from the grid,
   so the card's own maximum width is lifted here. On a narrow screen the three fall below each other. */
.dashboard-cards[b-5ylll35p4p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--spacing-10);
    max-width: 72rem;
}

.dashboard-cards-side[b-5ylll35p4p] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
}

    .dashboard-cards[b-5ylll35p4p]  .yx-detail-card {
        max-width: none;
    }

@media (max-width: 60rem) {
    .dashboard-cards[b-5ylll35p4p] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.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 */
.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) - var(--maintenance-bar-offset));
    max-height: calc(100vh - var(--topbar-height) - var(--maintenance-bar-offset));
    /* 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) - var(--maintenance-bar-offset));
    /* 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) - var(--maintenance-bar-offset));
}

.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-blocked-reason-error[b-1kbn8wy0yj] {
    color: var(--red-700);
}

.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. Every
   row is as tall as the tallest one, so the last row - which carries only its label, no summary
   line - lines up with the profiles above it. */
.import-profile-list[b-ccx02y29ew] {
    display: grid;
    grid-auto-rows: 1fr;
    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] {
    margin-top: var(--spacing-075);
}

/* 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-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 */
/* Back inside the .page-fill / .fill-region chain: the grid takes the height left below the number
   format and the hint, reaches the footer, and scrolls inside itself. The preview no longer sits
   below the grid, where opening it squeezed the grid - it is docked beside it, the layer-history
   arrangement of the Views page, so opening it costs width and never height. */
.convert-step[b-1p1qqivq0x] {
    gap: var(--spacing-075);
}

/* Two sections, one per thing the step asks: the number recognition format on top, the conversion
   table below it - the same card the Source file step uses, with the same padding. */
.convert-card[b-1p1qqivq0x] {
    padding: var(--spacing-075) var(--spacing-10);
}

/* The table card is the link in the fill chain: it takes the height left below the format card and
   hands it on to the row with the grid and the preview panel. As a flex column (via .fill-region)
   its header keeps its own height and the row gets the rest. */
.convert-grid-card[b-1p1qqivq0x] {
    min-height: 0;
}

/* Row container for the grid and the docked preview panel: the panel sits beside the grid, sharing
   the same fill-region chain so the pair together still stops at one bounded height. 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 the step, whichever direction it lays out
   its own children in. */
.convert-content-row[b-1p1qqivq0x] {
    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. */
.convert-grid-wrapper[b-1p1qqivq0x] {
    min-width: 0;
}

/* Every row opens the preview, so every row says so with the pointer. Anchored on the wrapper: the
   grid is a Razor component, not an element, so a selector on its own class matches nothing here. */
.convert-grid-wrapper[b-1p1qqivq0x]  .convert-step-data-row {
    cursor: pointer;
}

/* The cell is a button so it can be clicked and reached by keyboard. It reads as a link - the
   colour every user knows as "this can be clicked" - rather than as plain text that happens to do
   something, which is what made the preview invisible until a row was tried. */
.convert-step-header-name[b-1p1qqivq0x] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--text-link);
    text-align: left;
    cursor: pointer;
}

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

/* The column the panel currently shows, so the row and the panel header visibly belong together. */
.convert-step-header-name-previewed[b-1p1qqivq0x] {
    font-weight: 600;
}

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

/* The mapping table in its own section - the same card, header and padding as the other import
   steps. The card is a link in the fill chain (.fill-region): its header keeps its own height and
   the grid takes the rest, down to the footer, scrolling inside itself. */
.mapping-card[b-u95mirmz26] {
    padding: var(--spacing-075) var(--spacing-10);
    min-height: 0;
}

.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-blocked {
    background: var(--red-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-075);
}

/* Two sections, one per thing the step asks: how the reference is handled on top, the reference
   fields per column below it - the same card, header and padding as the other import steps. */
.reference-card[b-mpp46ry9a7] {
    padding: var(--spacing-075) var(--spacing-10);
}

/* The table card is a link in the fill chain (.fill-region): its header keeps its own height and
   the grid takes the rest, down to the footer, scrolling inside itself. */
.reference-grid-card[b-mpp46ry9a7] {
    min-height: 0;
}

.reference-step-auto-generate-note[b-mpp46ry9a7] {
    color: var(--grey-500);
    padding: var(--spacing-025) 0;
}
/* /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-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);
}

.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: var(--blue-50);
        color: var(--blue-800);
    }
/* /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 */
/* The height chain itself comes from .page-fill and .fill-region in app.css; this page adds only
   its own spacing and says which layer scrolls. Nothing scrolls around the grid any more: a
   scrollbar on a layer above it is what pushed the grid's own horizontal bar, and with it the
   bottom of the grid, below the window edge (BUG#26102). */
.parse-rule-excel-page[b-xyd36g2i7h] {
    gap: var(--spacing-15);
    padding: 0 var(--spacing-20) var(--spacing-15);
    overflow: hidden;
}

/* Keeps scrolling for the settings tab, whose form outgrows the page on a short window; the
   padding keeps the cards off that scrollbar instead of ending flush against it. */
.parse-rule-excel-container[b-xyd36g2i7h] {
    padding-right: var(--spacing-075);
    overflow: auto;
}

/* Only the result grid gives way when the space runs out; the file card, the reading-highlights
   block and the messages keep their own height. The grid needs its shrink handed back in a rule
   of its own, because the scope attribute makes the rule above it outweigh .scrollable-grid. No
   child combinator on that second rule: where DevExpress puts the grid's CssClass in its own
   markup is not ours to depend on. */
[b-xyd36g2i7h] .parse-rule-excel-container > * {
    flex-shrink: 0;
}

[b-xyd36g2i7h] .result-table {
    flex-shrink: 1;
    min-height: 0;
    padding: 0.3125rem;
}

/* 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;
}

/* 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 */
.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 - var(--maintenance-bar-offset));
}

.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) - var(--maintenance-bar-offset));
    /* 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) - var(--maintenance-bar-offset));
}

.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] {
    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 var(--blue-500);
    outline-offset: -2px;
    background-color: var(--blue-50);
}

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

.viewpoint-columns-header[b-vg41hdzntf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-050);
}

.viewpoint-columns-header .yx-field-hint[b-vg41hdzntf] {
    margin-top: 0;
}

.viewpoint-columns-counter[b-vg41hdzntf] {
    flex-shrink: 0;
    color: var(--grey-500);
    font-size: var(--text-size-small);
    white-space: nowrap;
}


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

/* 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);
}