/* Detail forms and forms: fields, messages, action bars. */

.erp-form {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    max-width: var(--erp-form-max-width);
}

/* Form using the panel's full width (a grid, many buttons on a line). */
.erp-form--wide {
    max-width: none;
    min-height: 0;
}

/* Data grid inside a form: its row of the form gives it its height. */
.erp-form__grid {
    min-height: 240px;
}

.erp-grid-caption {
    display: inline-flex;
    align-items: center;
    gap: var(--erp-space-2);
}

/* Action buttons written last (the tab order goes through the fields, then the buttons) but shown
   on the right of the first child (the first field, or a row of fields). Every other child spans
   the full width, in document order. */
.erp-form--actions-top {
    display: grid;
    /* Too narrow for both: the buttons wrap on several lines rather than squeezing the field. */
    grid-template-columns: minmax(var(--erp-form-lead-min-width, 200px), 1fr) auto;
    align-content: start;
}

/* Short first field (a key, a code) next to many buttons. */
.erp-form--actions-top-narrow {
    --erp-form-lead-min-width: 100px;
}

.erp-form--actions-top > * {
    grid-column: 1 / -1;
}

.erp-form--actions-top > :first-child {
    grid-column: 1;
}

.erp-form--actions-top > .erp-form__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

/* Record form (an article): a little wider than the default, for a row of fields beside the actions. */
.erp-form--record {
    --erp-form-max-width: 860px;
}

/* Row of fields sized to what they hold (never stretched), wrapping when short of room; inputs
   aligned on their line even when a label wraps. */
.erp-form__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--erp-space-3);
}

.erp-form__fields > .erp-field {
    flex: none;
    width: var(--erp-field-width, 200px);
    max-width: 100%;
}

/* Width scale of a field, from its content: xs = a short number (weight, percentage, VAT rate,
   unit), s = a number or a short code, m = a choice or an identifier, l = a path or a picked
   record, xl = a name. */
.erp-field--xs {
    --erp-field-width: 90px;
}

.erp-field--s {
    --erp-field-width: 140px;
}

.erp-field--m {
    --erp-field-width: 200px;
}

.erp-field--l {
    --erp-field-width: 320px;
}

.erp-field--xl {
    --erp-field-width: 420px;
}

/* Row 1 of a record form whose actions sit in the header: the field starts at its width and takes
   the free room, so the row spans the width of the blocks below. */
.erp-form__fields > .erp-field--stretch {
    flex: 1 1 var(--erp-field-width, 200px);
}

/* Framed group of the fields of one domain (packaging, billing...), titled by its legend. */
.erp-form__block {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    min-width: 0;
    margin: 0;
    padding: var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
}

.erp-form__block > legend {
    padding: 0 var(--erp-space-1);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    font-weight: 600;
}

.erp-form--dialog {
    min-width: 300px;
}

.erp-form__row {
    display: flex;
    gap: var(--erp-space-3);
}

.erp-form__row > * {
    flex: 1;
}

/* Row that wraps instead of squeezing its fields: one field per line on a phone. */
.erp-form__row--wrap {
    flex-wrap: wrap;
}

.erp-form__row--wrap > * {
    flex: 1 1 220px;
    min-width: 0;
}

/* Field as wide as its input (a drop-down, a date), its label kept on one line. */
.erp-form__row--wrap > .erp-field--fit {
    flex: none;
}

.erp-field--fit > span:first-child {
    white-space: nowrap;
}

/* A short code keeps its width; the other fields of the row share the rest equally. */
.erp-form__row > .erp-field--short {
    flex: none;
}

/* Row whose labels may wrap to different heights: the inputs stay aligned. */
.erp-form__row--end {
    align-items: flex-end;
}

.erp-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--erp-space-2);
}

.erp-form__header {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
}

.erp-form__record-nav {
    display: flex;
    gap: var(--erp-space-1);
}

.erp-form__title {
    flex: 1;
    margin: 0;
    font-size: var(--erp-font-size-title);
    font-weight: 600;
}

/* State badge of a record (Inactive) right after its title, the rest of the header kept on the right. */
.erp-form__header > .erp-form__title:has(+ .erp-badge) {
    flex: 0 1 auto;
}

.erp-form__header > .erp-form__title + .erp-badge {
    margin-right: auto;
}

/* flex: 1 is for titles placed in a row (toolbar, header). Directly inside a form (column
   stretched to the full height, e.g. Settings > Sale units), it spread the free height between
   the titles and pushed them away from their fields. */
.erp-form > .erp-form__title {
    flex: none;
}

/* Field group subtitle: a little space after the previous group. */
.erp-form > .erp-form__title--small {
    margin-top: var(--erp-space-2);
}

.erp-field {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-1);
}

.erp-field > span:first-child {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

/* Short code (a few characters) next to other fields or buttons: fiscal year, sale unit. */
.erp-field--short {
    width: 90px;
}

.erp-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--erp-space-2);
}

/* A switch among fields (the roles beside the VAT of a partner): its own width, centred on the
   inputs of the row (32px high). */
.erp-form__fields > .erp-field--inline {
    width: auto;
    height: 32px;
}

.erp-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-4);
    margin: 0;
    padding: 0;
    border: 0;
}

.erp-fieldset legend {
    margin-bottom: var(--erp-space-1);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-status {
    margin: 0;
    white-space: pre-line;
}

.erp-error {
    margin: 0;
    color: var(--erp-color-danger);
    white-space: pre-line;
}

.erp-hint {
    margin: 0;
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

/* Read-only list of short technical names (e.g. template variables), wrapping on several lines. */
.erp-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-tokens code {
    display: inline-block;
    padding: 0 var(--erp-space-2);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    background: var(--erp-color-surface-alt);
    font-size: var(--erp-font-size-small);
    user-select: all;
}

.erp-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--erp-color-accent);
    font: inherit;
    cursor: pointer;
}

.erp-link:hover {
    text-decoration: underline;
}

.erp-link:disabled {
    cursor: default;
    opacity: 0.5;
}

.erp-profile-photo {
    align-self: center;
    border-radius: 50%;
    cursor: pointer;
}

.erp-profile-photo input[type=file] {
    display: none;
}

.erp-badge {
    display: inline-block;
    padding: 0 var(--erp-space-2);
    border-radius: 10px;
    background: var(--erp-color-surface-alt);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-badge--accent {
    background: var(--erp-color-selected);
    color: var(--erp-color-accent-hover);
    font-weight: 600;
}

.erp-badge--success {
    background: var(--erp-color-success-tint);
    color: var(--erp-color-success);
}

.erp-badge--warning {
    background: var(--erp-color-warning-tint);
    color: var(--erp-color-warning);
}

.erp-badge--danger {
    background: var(--erp-color-danger-tint);
    color: var(--erp-color-danger);
}

/* A state that only an administrator can undo (an accounting période Figée). */
.erp-badge--locked {
    background: var(--erp-color-text);
    color: var(--erp-color-surface);
    font-weight: 600;
}

/* Data import dashboard: one line per uploaded file, issues grouped by rule (native disclosure). */
.erp-data-import__file {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
}

/* While an action of the dashboard runs. */
.erp-data-import--busy {
    cursor: progress;
}

/* A heading row grouping the import types in the order they are imported. */
.erp-data-import__group-row th {
    padding-top: var(--erp-space-3);
    background: var(--erp-color-surface-alt);
    text-align: left;
}

.erp-data-import__group {
    margin: var(--erp-space-1) 0;
}

.erp-data-import__group > summary {
    cursor: pointer;
    padding: var(--erp-space-1) 0;
}

.erp-form__title--small {
    font-size: var(--erp-font-size);
}

/* Editable row of the retention policy (Settings > Company) */
.erp-retention {
    align-items: center;
}

.erp-retention > :last-child {
    flex: none;
}

.erp-form__actions--start {
    justify-content: flex-start;
}

.erp-field--grow {
    flex: 3;
    /* Shrinks below its content (a picker) rather than pushing its row out of its dialog. */
    min-width: 0;
}

.erp-field--small {
    flex: 1;
    max-width: 140px;
}

/* Search box with suggestions (address lookup) */
.erp-suggest {
    position: relative;
}

.erp-suggest__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    margin: var(--erp-space-1) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    background: var(--erp-color-surface);
    box-shadow: var(--erp-shadow);
}

/* File upload (data import, background photos): label styled as a button, native file picker hidden. */
.erp-import-button {
    cursor: pointer;
}

.erp-import-button.e-disabled {
    pointer-events: none;
}

.erp-import-button input[type=file] {
    display: none;
}

/* Lines of a document (orders, contracts): one row per line, inputs in the cells. The form is
   wider than a plain record form. */
.erp-form:has(.erp-lines) {
    max-width: none;
}

.erp-lines {
    width: 100%;
    border-collapse: collapse;
}

.erp-lines th {
    text-align: left;
    font-weight: 600;
    padding: var(--erp-space-1) var(--erp-space-2);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-lines td {
    padding: var(--erp-space-1) var(--erp-space-2);
    vertical-align: middle;
}

.erp-lines tr.is-settled td {
    opacity: 0.6;
}

.erp-lines__actions {
    white-space: nowrap;
}

.erp-number,
.erp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Compact read-only or inline-edited table on a framed surface: left-aligned text headers, numeric
   columns (erp-num) right-aligned with tabular figures, the totals row (tfoot) under its columns. */
.erp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    overflow: hidden;
}

.erp-table th {
    padding: var(--erp-space-2) var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
    background: var(--erp-color-surface-alt);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.erp-table td {
    padding: var(--erp-space-2) var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
    text-align: left;
    vertical-align: middle;
}

.erp-table th.erp-num,
.erp-table td.erp-num,
.erp-table th.erp-number,
.erp-table td.erp-number {
    text-align: right;
}

.erp-table tbody tr:last-child > td,
.erp-table tfoot tr:last-child > td {
    border-bottom: 0;
}

.erp-table tfoot td {
    background: var(--erp-color-surface-alt);
    font-weight: 600;
}

.erp-table tbody tr.is-current > td {
    background: var(--erp-color-selected);
}

.erp-table tbody tr.erp-clickable,
.erp-table tbody tr[data-period] {
    cursor: pointer;
}

/* Tender (right-hand panel of the Tenders window): the first row, then the customers beside the
   paged grid of the articles, which takes the rest of the width; a tender taller than the panel
   scrolls under the header, the padding holding the border a Syncfusion input draws past its field. */
.erp-tender__body {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-right: calc(-1 * var(--erp-space-5));
    padding-right: var(--erp-space-5);
}

.erp-tender__blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--erp-space-4);
}

.erp-tender__customers {
    flex: none;
    width: 320px;
    box-sizing: border-box;
}

/* The first row and the two blocks are white cards, as on the design. */
.erp-tender__card,
.erp-tender__blocks > .erp-form__block {
    padding: var(--erp-space-3) var(--erp-space-4) var(--erp-space-4);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-tender .erp-form__header > .erp-form__title {
    font-size: 18px;
}

.erp-tender__customer-list {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-tender__customer-list > li {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    padding: var(--erp-space-1) var(--erp-space-2);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
}

.erp-tender__customer {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.erp-tender__price {
    font-weight: 600;
}

.erp-tender__articles {
    flex: 1 1 480px;
}

/* Tenders screen (its own window), Variation grids and Families pages: the list or tree on the
   left, the record chosen on the right; each panel scrolls on its own. */
.erp-tenders__header,
.erp-variation-grids__header,
.erp-families__header {
    display: flex;
    align-items: center;
    gap: var(--erp-space-3);
}

.erp-tenders__header > .erp-form__title,
.erp-variation-grids__header > .erp-form__title,
.erp-families__header > .erp-form__title {
    flex: 1;
}

.erp-tenders__main,
.erp-variation-grids__main,
.erp-families__main {
    display: flex;
    flex: 1 1 0;
    align-items: stretch;
    gap: var(--erp-space-4);
    min-height: 0;
}

.erp-tenders__list,
.erp-variation-grids__list,
.erp-families__tree {
    flex: none;
    width: 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    overflow: hidden;
}

.erp-tenders__filters,
.erp-families__filters {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    padding: var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-tenders__filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--erp-space-2);
}

.erp-tenders__rows,
.erp-variation-grids__rows,
.erp-families__nodes {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.erp-tenders__row,
.erp-variation-grids__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    border-bottom: 1px solid var(--erp-color-border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-tenders__row:hover,
.erp-variation-grids__row:hover {
    background: var(--erp-color-hover);
}

.erp-tenders__row.is-selected,
.erp-variation-grids__row.is-selected {
    background: var(--erp-color-selected);
    box-shadow: inset 3px 0 0 var(--erp-color-accent);
}

.erp-tenders__row-title,
.erp-variation-grids__row-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--erp-space-2);
    font-weight: 600;
}

.erp-tenders__empty,
.erp-variation-grids__empty,
.erp-families__empty {
    padding: var(--erp-space-3);
}

.erp-tenders__detail,
.erp-variation-grids__detail,
.erp-families__detail {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.erp-tenders__detail > .erp-page,
.erp-families__detail > .erp-page {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
}

/* Family tree: a caret to expand, the label to choose; inactive families greyed. */
.erp-families__node {
    display: flex;
    align-items: center;
    border-radius: var(--erp-radius);
}

.erp-families__node:hover {
    background: var(--erp-color-hover);
}

.erp-families__node.is-selected {
    background: var(--erp-color-selected);
    box-shadow: inset 3px 0 0 var(--erp-color-accent);
    font-weight: 600;
}

.erp-families__node.is-inactive {
    color: var(--erp-color-text-muted);
}

.erp-families__caret {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--erp-color-text-muted);
    cursor: pointer;
}

.erp-families__label {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: var(--erp-space-2);
    min-width: 0;
    padding: var(--erp-space-1) var(--erp-space-2) var(--erp-space-1) 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-families__nodes {
    padding: var(--erp-space-1);
}

/* Article list: the family tree on the left filters the grid on the right. */
.erp-articles__tree {
    width: 260px;
}

.erp-articles__grid {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.erp-articles__grid > .e-grid {
    flex: 1 1 0;
    min-height: 0;
}

/* Family form: the identity row and the counts are white cards, as the blocks. */
.erp-family__card,
.erp-family__counts {
    padding: var(--erp-space-3) var(--erp-space-4);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-family__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--erp-space-2) var(--erp-space-5);
}

/* Variation grid sheet: a quantity column, then two columns (D, R) per packaging; the cells are
   plain inputs the arrows move between, as in a spreadsheet. The sheet scrolls on its own. */
.erp-variation-sheet {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--erp-space-3);
    min-width: 0;
    min-height: 0;
}

.erp-variation-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--erp-space-3);
}

/* The grid names are short: a narrower list than the tenders'. */
.erp-variation-grids__list {
    width: 200px;
}

.erp-variation-grids__spacer {
    flex: 1 1 auto;
}

.erp-variation-sheet__scroll {
    flex: 0 1 auto;
    align-self: flex-start;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-variation-sheet__table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.erp-variation-sheet__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--erp-space-1) var(--erp-space-2);
    border: 1px solid var(--erp-color-border);
    background: var(--erp-color-surface-alt);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.erp-variation-sheet__table thead tr + tr th {
    top: 1.9rem;
}

.erp-variation-sheet__table td {
    padding: 0;
    border: 1px solid var(--erp-color-border);
}

.erp-variation-sheet__table input {
    width: 3.75rem;
    padding: var(--erp-space-1) var(--erp-space-2);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
}

.erp-variation-sheet__table input:focus {
    outline: 2px solid var(--erp-color-accent);
    outline-offset: -2px;
    background: var(--erp-color-selected);
}

/* The quantity column, up to five digits, stays visible while the amounts scroll. */
.erp-variation-sheet__table .erp-variation-sheet__bound input {
    width: 4.5rem;
}

.erp-variation-sheet__table .erp-variation-sheet__bound {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--erp-color-surface);
}

.erp-variation-sheet__table input.is-invalid {
    color: var(--erp-color-danger);
}


/* Article rows of a tender kept compact (the remove button sets their height): more lines per page. */
.erp-tender__articles .e-grid .e-row:not(.e-editedrow) .e-rowcell {
    padding-top: var(--erp-space-1);
    padding-bottom: var(--erp-space-1);
}

/* The cards keep their height: the panel scrolls instead. */
.erp-tender__body > * {
    flex-shrink: 0;
}

/* Article form: the fields on the left, the base prices beside them on a wide window. */
.erp-article {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--erp-space-4);
    max-width: 1320px;
}

.erp-article__main {
    display: flex;
    flex: 999 1 640px;
    flex-direction: column;
    gap: var(--erp-space-3);
    min-width: 0;
}

.erp-article__side {
    flex: 1 1 260px;
    max-width: 360px;
}

/* Billing and scanning side by side, stacked when short of room. */
.erp-article__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--erp-space-4);
    align-items: stretch;
}

.erp-article__formulation {
    margin-left: auto;
}

.erp-article__card-title {
    display: flex;
    align-items: baseline;
    padding: 0 var(--erp-space-4) var(--erp-space-2);
}

.erp-article__card-title > h2 {
    margin: 0;
    font-size: var(--erp-font-size);
    font-weight: 600;
}

.erp-article__card-title > .erp-link {
    margin-left: auto;
}

/* Price block of a line: the price, then each adjustment as a short number (XX.XX or X.XXX) with
   its €/% toggle, spread over the width of the block. */
.erp-line-price {
    justify-content: space-between;
}

.erp-form__fields > .erp-line-price__adjustment {
    --erp-field-width: 130px;
}

.erp-line-price__value {
    display: flex;
    gap: var(--erp-space-1);
}

.erp-line-price__value > :first-child {
    flex: 1 1 0;
    min-width: 0;
}

.erp-line-price__value > .e-btn {
    flex: none;
    min-width: 40px;
}

/* A quantity next to a growing field (the article of a line): a fixed width its input fills. */
.erp-form__row > .erp-field--quantity {
    width: 130px;
}

/* Legal label tab of the article form (spec 058): a version's head line, its sub-tables, the
   versions list beside it and the inherited mentions. */
.erp-article__card-title > .erp-badge {
    margin-left: auto;
}

.erp-label__version-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
    margin-bottom: var(--erp-space-3);
}

.erp-label__version-head > .erp-form__actions {
    margin-left: auto;
}

.erp-label__subtitle {
    margin: var(--erp-space-3) 0 var(--erp-space-1);
    font-size: var(--erp-font-size);
    font-weight: 600;
}

.erp-label__mention {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--erp-space-2) var(--erp-space-3);
    margin-top: var(--erp-space-2);
}

.erp-label__mention > .erp-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.erp-label__missing {
    margin: 0;
    padding: 0 var(--erp-space-4) var(--erp-space-2) calc(var(--erp-space-4) + 1.2em);
}

.erp-label__version {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    width: 100%;
    padding: var(--erp-space-2) var(--erp-space-4);
    border: 0;
    border-top: 1px solid var(--erp-color-border);
    background: transparent;
    color: var(--erp-color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.erp-label__version.is-current {
    background: var(--erp-color-selected);
}

.erp-label__version-when {
    flex: 1;
    min-width: 0;
}

.erp-label__total {
    min-height: 30px;
    line-height: 30px;
    font-variant-numeric: tabular-nums;
}

.erp-label__tree-link {
    margin: var(--erp-space-2) var(--erp-space-4) 0;
}

.erp-label__recompute {
    margin-top: var(--erp-space-3);
    padding: var(--erp-space-3) var(--erp-space-4);
    border-radius: var(--erp-radius);
    background: var(--erp-color-row-expiring);
}

.erp-label__preview {
    display: flex;
    gap: var(--erp-space-3);
    padding: var(--erp-space-2) var(--erp-space-4) 0;
}