/* Page building blocks shared by the clients: page, toolbar, tabs, lists, avatar, menus, dialogs. */

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size);
    color: var(--erp-color-text);
    background: var(--erp-color-background);
}

#app {
    height: 100%;
}

/* Unhandled Blazor render error: banner shown by the Blazor host script. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--erp-space-2) var(--erp-space-4);
    background: var(--erp-color-warning-surface);
    box-shadow: var(--erp-shadow);
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

.erp-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--erp-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

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

.erp-page {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    height: 100%;
    box-sizing: border-box;
    padding: var(--erp-space-5);
}

/* A record form taller than its page (a customer with its prices, in a form window) scrolls inside
   the page, under the header, rather than overflowing the page's panel. It takes the page's width
   up to its right edge (its scrollbar there); the padding keeps the fields off the scrollbar and
   holds the border a Syncfusion input draws past its field, which would scroll sideways. */
.erp-page > .erp-form--record {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-width: none;
    margin-right: calc(-1 * var(--erp-space-5));
    padding-right: var(--erp-space-5);
}

.erp-page--narrow {
    max-width: calc(var(--erp-form-max-width) + 2 * var(--erp-space-5));
}

/* List toolbar */
.erp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
}

/* Toolbar above a grid of a split document: the height of a button row whatever it holds, so
   the grids side by side start on the same line. */
.erp-toolbar--fixed {
    min-height: 32px;
}

/* Check boxes in 3 columns of equal width, read top to bottom (e.g. the sites of a user). */
.erp-check-grid {
    flex: 1 1 100%;
    column-count: 3;
    column-gap: var(--erp-space-4);
}

.erp-check-grid > * {
    display: flex;
    break-inside: avoid;
    margin-bottom: var(--erp-space-2);
}

/* Fields kept on one line (the first line of a settings form, beside its buttons). */
.erp-toolbar--nowrap {
    min-width: 0;
    flex-wrap: nowrap;
}

/* The fields of such a line share its width, short ones (a code) keep theirs. */
.erp-toolbar--nowrap > .erp-field {
    flex: 1 1 0;
    min-width: 0;
}

.erp-toolbar--nowrap > .erp-field--short,
.erp-toolbar--nowrap > .erp-field--fixed {
    flex: none;
}

.erp-toolbar__spacer {
    flex: 1;
}

/* Toolbar item taking the remaining width (e.g. a field followed by its action buttons). */
.erp-toolbar__grow {
    flex: 1;
    min-width: 200px;
}

/* Filters sharing the width of a narrow column (e.g. above a master-detail list) in equal parts. */
.erp-filter-row {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--erp-space-2);
}

/* Label-less inline field (switch + text) among labelled fields: centered on their inputs' height. */
.erp-toolbar__inline-field {
    min-height: 32px;
}

/* Short value followed by many buttons (e.g. an email profile key): keeps them on one line. */
.erp-toolbar__grow--narrow {
    min-width: 100px;
}

.erp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--erp-space-3);
}

/* Secondary filters of a list, on the left of its pager. */
.erp-pager__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-3);
    margin-right: auto;
}

/* List toolbar: Search on the right, then "New" as the very last button (written in that order). */
.erp-page > .erp-toolbar > button[type="submit"],
.erp-page > .erp-toolbar > [data-shortcut~="new"] {
    margin-left: auto;
}

.erp-page > .erp-toolbar > button[type="submit"] ~ [data-shortcut~="new"] {
    margin-left: 0;
}

/* Tabs hosting sub-pages (Settings, partner form) */
.erp-tabs {
    display: flex;
    gap: var(--erp-space-1);
    border-bottom: 1px solid var(--erp-color-border);
}

/* Article choice of a document: the tabs, then the families filter on their right, on one line. */
.erp-article-chooser__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-article-chooser__bar > .erp-tabs {
    flex: 1 1 auto;
    border-bottom: 0;
}

.erp-tabs__tab {
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--erp-color-text-muted);
    font: inherit;
    cursor: pointer;
}

.erp-tabs__tab:hover {
    color: var(--erp-color-text);
}

.erp-tabs__tab.is-current {
    color: var(--erp-color-text);
    border-bottom-color: var(--erp-color-accent);
    font-weight: 600;
}

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

/* List + detail side by side (Settings tabs, a partner's addresses and emails) */
.erp-master-detail {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: var(--erp-space-4);
    min-height: 0;
    flex: 1;
}

.erp-list {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-height: 0;
}

/* "New" and "Import Excel" side by side above the list, "New" taking the remaining space. */
.erp-list__actions {
    display: flex;
    gap: var(--erp-space-2);
}

.erp-list__actions > :first-child {
    flex: 1;
}

.erp-list__items {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    background: var(--erp-color-surface);
}

/* Activity indicator shown in a list while its first load is running. */
.erp-list__busy {
    display: flex;
    justify-content: center;
    padding: var(--erp-space-4);
}

.erp-list__item {
    display: block;
    width: 100%;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    border-bottom: 1px solid var(--erp-color-border);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

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

/* Above a list: how many records, then "+ New" (and any other creation) on the right. */
.erp-list__header {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-list__header > :first-child {
    margin-right: auto;
}

/* A record on one line: its mark, its text, a badge on the right. */
.erp-list__item--row {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
}

.erp-list__item--row > .erp-site-swatch {
    flex: none;
    margin-right: 0;
}

.erp-list__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-list__secondary {
    display: block;
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

/* Avatar (photo or initials) */
.erp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--erp-avatar-size);
    height: var(--erp-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    background: var(--erp-color-accent);
    color: var(--erp-color-accent-contrast);
    font-size: calc(var(--erp-avatar-size) * 0.4);
    font-weight: 600;
}

.erp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* User menu */
.erp-menu {
    position: relative;
}

.erp-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.erp-menu__popup {
    position: absolute;
    right: 0;
    top: calc(100% + var(--erp-space-1));
    z-index: 901;
    min-width: 240px;
    padding: var(--erp-space-1);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    color: var(--erp-color-text);
    box-shadow: var(--erp-shadow);
}

.erp-menu__item {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    width: 100%;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    border-radius: var(--erp-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

.erp-menu__item--danger {
    color: var(--erp-color-danger);
}

/* Context menu: placed at the pointer through inline left/top. */
.erp-menu__popup--at-pointer {
    position: fixed;
    right: auto;
    min-width: 0;
}

.erp-menu__item--nested {
    padding-left: var(--erp-space-5);
}

.erp-menu__section {
    padding: var(--erp-space-2) var(--erp-space-3) var(--erp-space-1);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-menu__separator {
    margin: var(--erp-space-1) 0;
    border: 0;
    border-top: 1px solid var(--erp-color-border);
}

/* Activity indicator */
.erp-busy {
    width: 24px;
    height: 24px;
    border: 3px solid var(--erp-color-border);
    border-top-color: var(--erp-color-accent);
    border-radius: 50%;
    animation: erp-spin 0.8s linear infinite;
}

@keyframes erp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dialogs */
.erp-dialog .e-dlg-content {
    max-width: 560px;
}

.erp-dialog__message {
    margin: 0 0 var(--erp-space-4);
    white-space: pre-line;
}

.erp-dialog__buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--erp-space-2);
    margin-top: var(--erp-space-4);
}

/* A dialog button kept apart on the left (a delete). */
.erp-dialog__buttons > .erp-dialog__button--start {
    margin-right: auto;
}

/* Several items on the left: only the last one pushes the others to the right. */
.erp-dialog__buttons > .erp-dialog__button--start:has(+ .erp-dialog__button--start) {
    margin-right: 0;
}

/* A checkbox among the buttons (off stock), on their line. */
.erp-dialog__check {
    display: flex;
    align-items: center;
}

/* Selection dialogs (partner, later articles): a filter row above a grid; wider than the other
   dialogs, full screen on narrow screens. */
.erp-select-dialog .e-dlg-content {
    max-width: none;
}

.erp-select-dialog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
    margin-bottom: var(--erp-space-3);
}

/* Read-only field followed by its search and clear buttons (PartnerPicker). */
.erp-picker {
    display: flex;
    align-items: center;
    gap: var(--erp-space-1);
    max-width: 100%;
}

.erp-picker .e-input-group {
    flex: 1 1 auto;
    min-width: 0;
}

.erp-picker .e-input {
    cursor: pointer;
}

/* List grids: take the remaining height of the page. */
/* Grid of a list page: takes the remaining height between toolbar and pager, and scrolls
   inside. Targeted by its position rather than by CssClass="erp-grid", which SfGrid doesn't set
   on its root element: without these rules, min-height:auto keeps it from shrinking below the
   height of its rows and the page overflows at the bottom from about twenty rows. */
.erp-page > .e-grid {
    flex: 1 1 0;
    min-height: 0;
}
/* Field with a label above followed by a button: aligned on the input line. */
.erp-toolbar--end {
    align-items: flex-end;
}

/* Account signed in to Keycloak but not activated in the ERP: shown in place of the pages. */
.erp-not-activated {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--erp-space-3);
    max-width: 560px;
    margin: var(--erp-space-5) auto;
    padding: var(--erp-space-5);
    text-align: center;
}

.erp-not-activated__icon {
    font-size: 32px;
    color: var(--erp-color-text-muted);
}

.erp-not-activated__title {
    margin: 0;
    font-size: var(--erp-font-size-title);
    font-weight: 600;
}

.erp-not-activated__user {
    color: var(--erp-color-text-muted);
}

/* Touch screens (tablets): larger hit targets. */
@media (pointer: coarse) {
    .erp-icon-button {
        min-width: 44px;
        height: 44px;
    }

    .erp-tabs__tab,
    .erp-menu__item {
        min-height: 44px;
    }

    .erp-list__item {
        padding: var(--erp-space-3);
    }
}

/* Narrow screens (tablet in portrait, small windows): single column, tighter margins. */
@media (max-width: 800px) {
    .erp-select-dialog.e-dialog {
        width: 100vw !important;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
    }

    .erp-page {
        padding: var(--erp-space-3);
    }

    .erp-master-detail {
        grid-template-columns: 1fr;
    }

    .erp-toolbar > * {
        max-width: 100%;
    }
}

/* Shortcut help (F1) */
.erp-shortcut-help {
    min-width: 420px;
}

.erp-shortcut-help__title {
    margin: var(--erp-space-3) 0 var(--erp-space-1);
    font-size: 1em;
    color: var(--erp-color-text-muted);
}

.erp-shortcut-help__table td {
    padding: 2px var(--erp-space-2) 2px 0;
    vertical-align: top;
}

.erp-shortcut-help kbd {
    font-family: inherit;
    white-space: nowrap;
    padding: 1px var(--erp-space-1);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    background: var(--erp-color-surface-alt);
}

/* Document screens (orders, later delivery notes...): the read-only header on the full width,
   then the lines on the left and the article choice tabs on the right. */
.erp-document__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--erp-space-3);
    padding: var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: 4px;
    background: var(--erp-color-surface);
}

.erp-document__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
}

.erp-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2) var(--erp-space-5);
    margin: 0;
}

.erp-summary dt {
    font-size: 0.85em;
    color: var(--erp-color-text-muted);
}

.erp-summary dd {
    margin: 0;
}

/* Fixed summary of a document header: five columns, every field in its place whatever its
   content, long texts cut on one line (their title shows them whole). */
.erp-summary--grid {
    display: grid;
    flex: 1 1 100%;
    /* The two last columns (partners, remarks) hold the longest texts. */
    grid-template-columns: repeat(3, minmax(0, 0.8fr)) repeat(2, minmax(0, 1.3fr));
    gap: var(--erp-space-2) var(--erp-space-4);
}

.erp-summary--grid dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-summary__wide {
    grid-column: span 2;
}

/* A remark over the two rows of the summary, on as many lines as that height allows. */
.erp-summary__tall {
    grid-row: span 2;
    min-width: 0;
}

.erp-summary--grid .erp-summary__tall dd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: pre-line;
}

/* Document title bar: the type and number, its customers right after it, the actions pushed to the right. */
.erp-document .erp-form__header > .erp-form__title {
    flex: none;
    white-space: nowrap;
}

.erp-document__parties {
    display: flex;
    flex: 0 1 auto;
    gap: var(--erp-space-4);
    min-width: 0;
    margin-left: var(--erp-space-3);
}

.erp-document__parties > div {
    min-width: 0;
    max-width: 320px;
}

/* The customer names read first: larger and bold, under their small label. */
.erp-document__parties dd {
    font-size: 1.1em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-form__header > .erp-document__actions {
    margin-left: auto;
}

/* The chooser is sized for its widest tab (Stock: 840px of columns, plus the vertical scrollbar
   and borders) so a full-screen 1920px window shows it without a horizontal scrollbar; the lines
   take the rest. On narrower windows it never takes more than 60%. */
.erp-document__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(860px, 60%);
    gap: var(--erp-space-4);
    flex: 1 1 0;
    min-height: 0;
}

.erp-document__lines,
.erp-document__chooser {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-height: 0;
}

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

/* Lines without the split (returns, productions): they take the height the header leaves, or
   their grid, sized from it, would collapse to nothing on a wide window. */
.erp-page > .erp-document__lines {
    flex: 1 1 0;
}

/* Article list of a picker, in a DialogService dialog (sized by its content). */
.erp-article-select {
    width: min(760px, 90vw);
}

/* A dialog holding the article list, a grid of lines (the silos of an address) or a list with its
   record (the addresses of a partner) takes its width. */
.erp-dialog .e-dlg-content:has(.erp-article-select),
.erp-dialog .e-dlg-content:has(.erp-lines-grid),
.erp-dialog .e-dlg-content:has(.erp-master-detail) {
    max-width: none;
}

/* The details of a line (its contract...), under its article in the same cell. */
.erp-line-detail {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

/* A grain take-back line right under its feed line, indented. */
.erp-line--take-back {
    padding-left: var(--erp-space-4);
    color: var(--erp-color-text-muted);
}

/* The article choice takes the height of the window: its grid fills what the tabs, the filters
   and the pager leave. */
.erp-document__chooser > .erp-article-chooser,
.erp-article-chooser > [data-grid-search] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-height: 0;
}

.erp-article-chooser > [data-grid-search] > .erp-select-dialog__filters {
    margin-bottom: 0;
}

.erp-article-chooser .erp-choice-grid {
    flex: 1 1 0;
    min-height: 0;
}

.erp-article-chooser .erp-choice-grid > .e-grid {
    height: 100%;
}

.erp-document-dialog .erp-form {
    max-width: none;
}

/* A refusal the user can act on (e.g. detach contracts before changing a header). */
.erp-warning {
    padding: var(--erp-space-3);
    border-left: 4px solid var(--erp-color-warning);
    background: var(--erp-color-surface-alt);
}

.erp-warning p {
    margin: 0 0 var(--erp-space-2);
}

/* Tablet in portrait and phones: the panels stack, the dialogs take the whole screen. */
@media (max-width: 1100px) {
    .erp-document__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-document__lines > .e-grid,
    .erp-article-chooser .erp-choice-grid {
        min-height: 240px;
    }
}

@media (max-width: 800px) {
    .erp-document-dialog.e-dialog {
        width: 100vw !important;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
    }

    .erp-summary--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-summary__tall {
        grid-row: auto;
    }

    /* The customers go under the number rather than squeezing the actions. */
    .erp-form__header:has(.erp-document__parties) {
        flex-wrap: wrap;
    }

    .erp-document__parties {
        order: 1;
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* An off-stock document line (financial, no goods) stands out in the line grids. */
.e-grid .e-row.erp-row--off-stock .e-rowcell {
    color: var(--erp-color-off-stock);
}

/* Lot history: the entry clicked and the exits that follow it up to the next entry. */
.e-grid .e-row.erp-row--history-entry .e-rowcell {
    background: var(--erp-color-selected);
    font-weight: 600;
}

.e-grid .e-row.erp-row--history-following .e-rowcell {
    background: var(--erp-color-selected);
}

/* A line of a mixed customer order that the list it was opened from does not cover. */
.e-grid .e-row.erp-row--unlisted .e-rowcell {
    background: var(--erp-color-surface-alt);
    opacity: 0.45;
}

/* A base price of an article taking its substitute's prices: kept, ignored. */
.e-grid .e-row.erp-row--substituted .e-rowcell {
    color: var(--erp-color-text-muted);
    font-style: italic;
}

/* A valued sales line without price (out of tariff): it cannot be invoiced. */
.e-grid .e-row.erp-row--out-of-tariff .e-rowcell {
    color: var(--erp-color-danger);
}

/* Lists of documents: a value with its detail under it, and remarks on two lines at most. */
.erp-cell-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.erp-cell-stack > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-cell-stack__detail {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* State of a document as the color of its row, explained by the legend under the list. */
.e-grid .e-row.erp-row--done .e-rowcell,
.erp-legend__item.erp-row--done {
    color: var(--erp-color-text-muted);
}

.e-grid .e-row.erp-row--pending .e-rowcell,
.erp-legend__item.erp-row--pending {
    background-color: var(--erp-color-row-pending);
}

.e-grid .e-row.erp-row--transit .e-rowcell,
.erp-legend__item.erp-row--transit {
    background-color: var(--erp-color-row-transit);
}

.e-grid .e-row.erp-row--changed .e-rowcell,
.erp-legend__item.erp-row--changed {
    background-color: var(--erp-color-row-changed);
}

.e-grid .e-row.erp-row--deleted .e-rowcell,
.erp-legend__item.erp-row--deleted {
    color: var(--erp-color-text-muted);
    font-style: italic;
}

.e-grid .e-row.erp-row--return .e-rowcell,
.erp-legend__item.erp-row--return {
    color: var(--erp-color-return);
}

.erp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
    font-size: var(--erp-font-size-small);
}

.erp-legend__item {
    padding: 2px var(--erp-space-2);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
}

/* "…" next to a button: a short menu of other actions, over the page. */
.erp-more-menu {
    position: relative;
    display: inline-flex;
}

.erp-more-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.erp-more-menu__items {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    margin-top: var(--erp-space-1);
    padding: var(--erp-space-1) 0;
    background: var(--erp-color-surface);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-raised);
}

.erp-more-menu__items > button {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    padding: var(--erp-space-2) var(--erp-space-3);
    text-align: left;
    background: none;
    border: none;
    color: var(--erp-color-text);
    font: inherit;
    cursor: pointer;
}

.erp-more-menu__label {
    flex: 1 1 auto;
}

.erp-more-menu__shortcut {
    color: var(--erp-color-text-muted);
    font-family: inherit;
    font-size: var(--erp-font-size-small);
}

/* Out of sight but still laid out: a keyboard shortcut can click it (keyboard-shortcuts.js). */
.erp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

.erp-more-menu__items > button:hover,
.erp-more-menu__items > button:focus-visible {
    background: var(--erp-color-hover);
}

/* An action not possible on this record: greyed out, its tooltip says why. */
.erp-more-menu__items > button[aria-disabled="true"] {
    color: var(--erp-color-text-muted);
    cursor: default;
}

.erp-more-menu__items > button[aria-disabled="true"]:hover {
    background: none;
}

/* A figure that asks for attention: the balance of a production not at zero. */
.erp-text--warning {
    color: var(--erp-color-warning);
    font-weight: 600;
}

/* A figure that blocks: the blocking issues of an import. */
.erp-text--danger {
    color: var(--erp-color-danger);
    font-weight: 600;
}

/* Settings: the menu of its sections on the left, the section on the right. */
.erp-page.erp-settings {
    flex-direction: row;
    align-items: stretch;
}

.erp-settings__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
    overflow: auto;
}

.erp-tabs--vertical {
    flex: 0 0 220px;
    flex-direction: column;
    gap: 0;
    border-bottom: 0;
    border-right: 1px solid var(--erp-color-border);
    overflow-y: auto;
}

.erp-tabs--vertical .erp-tabs__tab {
    text-align: left;
    border-bottom: 0;
    border-left: 2px solid transparent;
}

.erp-tabs--vertical .erp-tabs__tab.is-current {
    border-left-color: var(--erp-color-accent);
    background: var(--erp-color-selected);
}

/* Dashboard buttons (desktop and tablet): their color, their content, and the properties editor. */
.erp-tile--blue { --erp-tile-color: var(--erp-color-tile-blue); }
.erp-tile--teal { --erp-tile-color: var(--erp-color-tile-teal); }
.erp-tile--green { --erp-tile-color: var(--erp-color-tile-green); }
.erp-tile--olive { --erp-tile-color: var(--erp-color-tile-olive); }
.erp-tile--orange { --erp-tile-color: var(--erp-color-tile-orange); }
.erp-tile--red { --erp-tile-color: var(--erp-color-tile-red); }
.erp-tile--purple { --erp-tile-color: var(--erp-color-tile-purple); }
.erp-tile--gray { --erp-tile-color: var(--erp-color-tile-gray); }

/* Above the theme's own panel styles, hover and active included (they would turn the tile white). */
.e-dashboardlayout.e-control .e-panel.erp-tile,
.e-dashboardlayout.e-control .e-panel.erp-tile:hover,
.e-dashboardlayout.e-control .e-panel.erp-tile:active {
    border: none;
    border-radius: var(--erp-radius-large);
    background: var(--erp-tile-color);
    color: var(--erp-color-on-tile);
    overflow: hidden;
}

.erp-tile .e-panel-container,
.erp-tile .e-panel-content {
    height: 100%;
}

.erp-tile__button,
.erp-tile__edit {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--erp-space-1);
    width: 100%;
    height: 100%;
    padding: var(--erp-space-3);
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.erp-tile__button {
    cursor: pointer;
}

.erp-tile__button:hover {
    background: var(--erp-color-on-tile-hover);
}

.erp-tile__button:focus-visible {
    outline: 3px solid var(--erp-color-on-tile);
    outline-offset: -6px;
}

.erp-tile__edit {
    position: relative;
    cursor: move;
}

.erp-tile__icon {
    font-size: 24px;
}

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

.erp-tile__notice {
    font-size: var(--erp-font-size-small);
    font-style: italic;
}

.erp-tile__tools {
    position: absolute;
    top: var(--erp-space-1);
    right: var(--erp-space-1);
    display: flex;
    gap: var(--erp-space-1);
}

.erp-tile__tools .erp-icon-button {
    min-width: 28px;
    height: 28px;
    color: inherit;
    background: var(--erp-color-on-tile-tools);
}

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

.erp-tile-editor__colors {
    display: flex;
    gap: var(--erp-space-2);
}

.erp-tile-editor__swatch {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--erp-tile-color);
    cursor: pointer;
}

.erp-tile-editor__swatch.is-selected {
    border-color: var(--erp-color-text);
    box-shadow: 0 0 0 2px var(--erp-color-surface) inset;
}

/* Order lines a tour can take: scrolls inside its dialog. */
.erp-tour-candidates,
.erp-mark-notes {
    max-height: 60vh;
    overflow: auto;
}

/* Progress and report of an invoicing job, under the selection. */
.erp-job {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 860px;
    margin-top: 12px;
}

.erp-job progress {
    width: 100%;
    height: 12px;
}

.erp-job__warning {
    color: var(--erp-color-warning);
}

/* Header row of a tour stop, above its lines. */
.erp-lines tr.erp-tour-stop td {
    padding-top: var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
}

/* Contract forms (their own window): white cards under the header, which scroll together. */
.erp-contract__summary {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-contract__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--erp-space-4);
    min-height: 0;
    overflow-y: auto;
    margin-right: calc(-1 * var(--erp-space-5));
    padding-right: var(--erp-space-5);
}

.erp-contract__body > * {
    flex-shrink: 0;
}

.erp-contract__cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-4);
}

.erp-contract__card {
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-contract__cards > .erp-contract__card {
    padding: var(--erp-space-3) var(--erp-space-4) var(--erp-space-4);
}

.erp-contract__card--party {
    flex: 3 1 560px;
}

.erp-contract__card--consumption {
    flex: 2 1 380px;
}

/* The figures of a record in tiles under its header: label, value in strong, unit in small, an
   erp-progress bar for a share. Four tiles, five with --five; an action (Settle) after the last. */
.erp-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--erp-space-3);
}

.erp-kpis--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.erp-kpis:has(> .erp-kpis__action) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.erp-kpis--five:has(> .erp-kpis__action) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

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

/* The advance and the communication of a prepaid contract, then Paid and the printing. */
.erp-kpis--prepaid,
.erp-kpis--prepaid:has(> .erp-kpis__action) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.erp-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-1);
    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);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-kpi > strong {
    color: var(--erp-color-text);
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A value that is a text or a date rather than a quantity. */
.erp-kpi > strong.erp-kpi__text {
    font-size: 18px;
}

.erp-kpi small {
    color: var(--erp-color-text-muted);
    font-size: 13px;
    font-weight: 400;
}

.erp-progress {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--erp-color-surface-alt);
    overflow: hidden;
}

.erp-progress > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--erp-color-accent);
}

.erp-progress.is-complete > span {
    background: var(--erp-color-success);
}

.erp-chip {
    display: inline-block;
    padding: 2px var(--erp-space-2);
    border: 1px solid var(--erp-color-border);
    border-radius: 999px;
    background: var(--erp-color-surface);
    color: var(--erp-color-text);
    font: inherit;
    font-size: var(--erp-font-size-small);
    white-space: nowrap;
}

button.erp-chip {
    cursor: pointer;
}

.erp-chip.is-current {
    border-color: var(--erp-color-accent);
    background: var(--erp-color-accent);
    color: var(--erp-color-accent-contrast);
}

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

.erp-chip--danger {
    border-color: transparent;
    background: var(--erp-color-danger-tint);
    color: var(--erp-color-danger);
    font-weight: 600;
}

/* Five tiles on a narrow window: three per row. */
@media (max-width: 1100px) {
    .erp-kpis--five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Lot form: its figures, then its movements and traceability in a framed panel with tabs. */
.erp-lot__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--erp-space-4);
    min-height: 0;
}

.erp-lot__body > .erp-kpis {
    flex-shrink: 0;
}

.erp-lot__panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-lot__panel > .erp-tabs {
    padding: 0 var(--erp-space-4);
}

.erp-lot__panel > .erp-hint {
    margin: 0;
    padding: var(--erp-space-2) var(--erp-space-4);
}

.erp-lot__grid {
    flex: 1 1 auto;
    min-height: 0;
}

.erp-lot__grid .e-grid {
    border-width: 1px 0 0;
    border-radius: 0 0 var(--erp-radius-large) var(--erp-radius-large);
}

.erp-lot__summary {
    color: var(--erp-color-text-muted);
    font-size: 13px;
}

/* Traceability: the lots linked to this one as a chain of cards, a column per step away from it. */
.erp-lot-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-3);
    padding: var(--erp-space-5) var(--erp-space-4);
    overflow-y: auto;
}

.erp-lot-chain__step {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
}

.erp-lot-chain__arrow {
    color: var(--erp-color-text-muted);
}

.erp-lot-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 10px var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    font-size: 13px;
}

.erp-lot-card--current {
    border-color: var(--erp-color-accent);
    box-shadow: 0 0 0 1px var(--erp-color-accent);
}

.erp-lot-card__kind,
.erp-lot-card__detail {
    color: var(--erp-color-text-muted);
}

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

.erp-contract__tabs > .erp-tabs {
    padding: 0 var(--erp-space-4);
}

.erp-contract__table {
    overflow-x: auto;
}

.erp-contract__table > .erp-lines th,
.erp-contract__table > .erp-lines td {
    padding: var(--erp-space-2) var(--erp-space-4);
    white-space: nowrap;
}

.erp-contract__table tfoot td {
    border-top: 1px solid var(--erp-color-border);
    font-weight: 600;
}

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

.erp-contract__quantity.is-negative {
    color: var(--erp-color-danger);
}

.erp-contract__empty,
.erp-contract__remarks {
    margin: 0;
    padding: var(--erp-space-4);
}

.erp-form__header > .erp-contract__summary {
    flex: 1;
}

.erp-contract__card--remarks {
    flex: 1 1 100%;
}

/* The partner of a contract stands out in its header. */
.erp-contract__partner {
    color: var(--erp-color-text);
    font-size: 16px;
    font-weight: 600;
}

/* Lists: a date passed or close (erp-row--expiring), the status as a segmented choice, quick
   filters with their count, and the remainder with the share consumed. */
.e-grid .e-row.erp-row--expiring .e-rowcell,
.erp-legend__item.erp-row--expiring {
    background-color: var(--erp-color-row-expiring);
}

.e-grid .e-row.erp-row--near-end .e-rowcell,
.erp-legend__item.erp-row--near-end {
    background-color: var(--erp-color-row-near-end);
}

.erp-segmented {
    display: inline-flex;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius);
    overflow: hidden;
    background: var(--erp-color-surface);
}

.erp-segmented__item {
    padding: 0 var(--erp-space-3);
    min-height: 30px;
    border: 0;
    border-right: 1px solid var(--erp-color-border);
    background: transparent;
    color: var(--erp-color-text);
    font: inherit;
    cursor: pointer;
}

.erp-segmented__item:last-child {
    border-right: 0;
}

.erp-segmented__item.is-current {
    background: var(--erp-color-accent);
    color: var(--erp-color-accent-contrast);
    font-weight: 600;
}

.erp-contract-list__focus {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
}

.erp-contract-list__focus > .erp-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--erp-space-2);
    padding: 4px var(--erp-space-3);
}

.erp-contract-list__count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--erp-color-selected);
    font-weight: 600;
    text-align: center;
}

.erp-contract-list__expired {
    color: var(--erp-color-warning);
    font-weight: 600;
}

.erp-contract-list__remaining {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erp-contract-list__remaining-text {
    display: flex;
    justify-content: space-between;
    gap: var(--erp-space-2);
    font-variant-numeric: tabular-nums;
}

.erp-contract-list__overrun {
    color: var(--erp-color-warning);
    font-weight: 600;
}

.erp-progress.is-overrun > span {
    background: var(--erp-color-warning);
}

.erp-progress.is-done > span {
    background: var(--erp-color-text-muted);
}

/* Partner form: Identity beside the contact card, the commercial conditions in three columns,
   then three equal cards (communications, customer and supplier contracts). */
.erp-partner__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--erp-space-1);
}

/* The summary and the roles follow the title; the actions stay on the right. */
.erp-form__header > .erp-form__title:has(+ .erp-partner__summary),
.erp-form__header > .erp-form__title:has(+ .erp-partner__tags) {
    flex: 0 1 auto;
}

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

.erp-partner {
    max-width: 1320px;
}

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

.erp-partner__identity {
    flex: 3 1 600px;
}

/* The roles in two columns beside the VAT fields. */
.erp-partner__roles {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--erp-space-1) var(--erp-space-5);
}

/* Two rows of switches as high as a labelled field. */
.erp-partner__roles > .erp-field--inline {
    height: 24px;
}

.erp-partner__contact {
    display: flex;
    flex: 2 1 360px;
    flex-direction: column;
    gap: var(--erp-space-3);
    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-partner__contact-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--erp-space-3);
}

.erp-partner__contact-facts > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.erp-partner__contact > .erp-toolbar {
    margin-top: auto;
}

.erp-partner__conditions,
.erp-partner__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--erp-space-5);
    align-items: start;
}

.erp-partner__cards {
    gap: var(--erp-space-4);
    align-items: stretch;
}

.erp-partner__column {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-width: 0;
}

.erp-partner__column > .erp-form__fields {
    flex-wrap: nowrap;
}

.erp-partner__column > .erp-form__fields > .erp-field {
    flex: 1 1 auto;
    min-width: 0;
}

.erp-partner__conditions > .erp-status {
    grid-column: 1 / -1;
}

/* A card of the partner: its title, then a table edge to edge. */
.erp-partner__card {
    min-width: 0;
    padding: var(--erp-space-3) 0;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-partner__card > h2 {
    margin: 0;
    padding: 0 var(--erp-space-4) var(--erp-space-2);
    font-size: var(--erp-font-size);
    font-weight: 600;
}

.erp-partner__card > .erp-hint {
    margin: 0;
    padding: 0 var(--erp-space-4);
}

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

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

.erp-partner__table td {
    padding: var(--erp-space-1) var(--erp-space-2);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-partner__table tr:last-child > td {
    border-bottom: none;
}

.erp-partner__card .erp-partner__table th:first-child,
.erp-partner__card .erp-partner__table td:first-child {
    padding-left: var(--erp-space-4);
}

.erp-partner__card .erp-partner__table th:last-child,
.erp-partner__card .erp-partner__table td:last-child {
    padding-right: var(--erp-space-4);
}

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

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

.erp-partner__table .erp-lines__actions {
    width: 32px;
    text-align: right;
}

@media (max-width: 900px) {
    .erp-partner__conditions,
    .erp-partner__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Settings home: cards of links in two sections, a line under each link on what it holds. */
.erp-settings-home {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-5);
    min-height: 0;
    overflow-y: auto;
}

/* Above the theme's input.e-input, full width. */
.erp-toolbar > .erp-settings-home__search {
    width: 340px;
    max-width: 100%;
    margin-left: auto;
}

.erp-settings-home__section {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-3);
}

.erp-settings-home__section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--erp-space-3);
}

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

.erp-settings-home__section-title > span,
.erp-settings-home__card li > span,
.erp-settings-home__empty {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
}

.erp-settings-home__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--erp-space-3);
}

.erp-settings-home__card {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-width: 0;
    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-settings-home__card > h3 {
    margin: 0;
    font-size: var(--erp-font-size);
    font-weight: 600;
}

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

.erp-settings-home__card li > .erp-link {
    text-align: left;
}

.erp-settings-home__card li > span {
    display: block;
}

.erp-tabs--vertical > .erp-settings__home {
    align-self: flex-start;
    margin-bottom: var(--erp-space-2);
    padding: var(--erp-space-1) var(--erp-space-2);
}

/* A settings page: its section's menu grouped by card, its title and where it sits above it. */
.erp-settings__group {
    margin: var(--erp-space-3) var(--erp-space-3) var(--erp-space-1);
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erp-settings__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--erp-space-3);
}

.erp-settings__header > .erp-form__title {
    flex: none;
}

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

/* Fields on the left of the buttons (date and site of a document header): aligned on their inputs. */
.erp-dialog__buttons--end {
    align-items: flex-end;
}

/* Header summary with its own "Modify" button: the button stays in the top right corner, never on a row of its own. */
.erp-document__header--editable {
    flex-wrap: nowrap;
}

.erp-document__header--editable > .erp-summary--grid {
    flex: 1 1 0;
}

.erp-document__header--editable > .erp-document__edit {
    flex: none;
}

/* Discount and markup of a line, one above the other in a single cell. */
.erp-line-adjustments {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    column-gap: var(--erp-space-1);
    font-variant-numeric: tabular-nums;
}

.erp-line-adjustments > dt {
    color: var(--erp-color-text-muted);
}

.erp-line-adjustments > dd {
    margin: 0;
    text-align: right;
}

/* Cash register (spec 039): the ticket on the left, the article entry on the right. */
.erp-cash-register__sale {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    gap: var(--erp-space-3);
    align-items: start;
}

.erp-cash-register__ticket {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-2);
    min-height: 320px;
}

.erp-cash-register__totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--erp-space-1);
    font-variant-numeric: tabular-nums;
}

.erp-cash-register__total {
    display: flex;
    align-items: baseline;
    gap: var(--erp-space-3);
    font-size: 1.5rem;
}

.erp-cash-register__actions {
    display: flex;
    gap: var(--erp-space-2);
    margin-top: var(--erp-space-2);
}

.erp-cash-register__line-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--erp-space-1);
}

.erp-cash-amount {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.erp-cash-amount--change {
    color: var(--erp-color-success);
}

.erp-zreport {
    min-width: 28rem;
}

.erp-zreport__heading {
    margin: var(--erp-space-3) 0 var(--erp-space-1);
    font-size: 1rem;
}

.erp-zreport__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.erp-zreport__table th,
.erp-zreport__table td {
    padding: var(--erp-space-1) var(--erp-space-2);
    text-align: right;
}

.erp-zreport__table th:first-child,
.erp-zreport__table td:first-child {
    text-align: left;
}

.erp-zreport__table tfoot td {
    border-top: 1px solid var(--erp-color-border);
    font-weight: 600;
}

.erp-zreport__total {
    display: flex;
    justify-content: space-between;
    margin: var(--erp-space-2) 0;
    font-size: 1.25rem;
}
/* Grain reception form: the analyses beside the estimated effects block; "Modifier" in the corner of the header block. */
.erp-grain-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: var(--erp-space-4);
    flex: 1 1 0;
    min-height: 0;
}

.erp-document__corner {
    order: 2;
}

.erp-supplier-invoice__layout {
    display: flex;
    gap: 1rem;
    min-height: 0;
    flex: 1;
}

.erp-supplier-invoice__pdf {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.erp-supplier-invoice__form {
    flex: 3;
    min-width: 0;
    overflow: auto;
}

.erp-pdf-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.erp-pdf-preview__frame {
    flex: 1;
    width: 100%;
    min-height: 24rem;
    border: 0;
}

/* Accounting (spec 062): banners over a form, text states, the side panels and the two-pane screens. */
.erp-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-3);
    padding: var(--erp-space-3);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
    color: var(--erp-color-text-muted);
}

.erp-banner--warning {
    border-color: var(--erp-color-warning);
    background: var(--erp-color-warning-surface);
    color: var(--erp-color-text);
}

.erp-banner > span {
    flex: 1 1 400px;
}

.erp-text--success {
    color: var(--erp-color-success);
    font-weight: 600;
}

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

/* "Modifiée en comptabilité": the color of the changed rows. */
.erp-badge--changed {
    background: var(--erp-color-row-changed);
    color: var(--erp-color-text);
}

.erp-purchase-entry__main {
    display: flex;
    flex: 1 1 720px;
    flex-direction: column;
    gap: var(--erp-space-3);
    min-width: 0;
}

.erp-entry-history {
    flex: 0 1 340px;
    min-width: 260px;
    align-self: flex-start;
}

.erp-entry-history__item {
    display: flex;
    flex-direction: column;
    padding: var(--erp-space-2) 0;
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-accounting-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--erp-space-3);
}

.erp-accounting-split__list {
    flex: 1 1 320px;
    max-width: 440px;
    min-width: 0;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    background: var(--erp-color-surface);
}

.erp-accounting-split__list > .erp-toolbar,
.erp-accounting-split__list > .erp-pager {
    padding: var(--erp-space-2) var(--erp-space-3);
}

.erp-accounting-split__list > .erp-pager {
    justify-content: space-between;
}

.erp-accounting-split__list > button {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    gap: var(--erp-space-2);
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    border-bottom: 1px solid var(--erp-color-border);
    background: none;
    text-align: left;
    cursor: pointer;
}

.erp-accounting-split__list > button.is-current {
    background: var(--erp-color-selected);
    box-shadow: inset 3px 0 0 var(--erp-color-accent);
}

.erp-accounting-split__list .erp-badge {
    white-space: nowrap;
}

.erp-accounting-split__empty {
    margin: 0;
    padding: var(--erp-space-4);
    border: 1px dashed var(--erp-color-border);
    border-radius: var(--erp-radius-large);
    color: var(--erp-color-text-muted);
}

/* Segmented control: its items stay on one line, and it keeps its own width in a column field. */
.erp-segmented__item {
    white-space: nowrap;
}

.erp-field > .erp-segmented {
    align-self: flex-start;
}

/* Row of fields and buttons at their natural size (a segmented control, a Save button), aligned on the inputs. */
.erp-form__row.erp-form__row--natural {
    align-items: flex-end;
    flex-wrap: wrap;
}

.erp-form__row.erp-form__row--natural > * {
    flex: 0 0 auto;
}

/* A field of a shared row that takes twice the share of the others (a supplier next to short fields). */
.erp-form__row > .erp-field--double {
    flex: 2 1 280px;
    min-width: 0;
}

.erp-form__row.erp-form__row--center {
    align-items: center;
}

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

.erp-report-dialog {
    max-height: 70vh;
    overflow: auto;
}

/* Règles d'imputation: the family tree beside the chosen family. */
.erp-rules {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: var(--erp-space-4);
}

.erp-rules__tree {
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 420px;
}

.erp-rules__family {
    display: flex;
    justify-content: space-between;
    gap: var(--erp-space-3);
    padding: var(--erp-space-1) var(--erp-space-2);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.erp-rules__family.is-current {
    background: var(--erp-color-row-pending);
}

/* Report of a posting: refused documents on the danger tint. */
.erp-posting-report__list {
    max-height: 380px;
    overflow: auto;
    margin-bottom: var(--erp-space-3);
}

.erp-posting-report__item {
    padding: var(--erp-space-2) var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-posting-report__item--refused {
    background: var(--erp-color-danger-tint);
}

.erp-posting-report__item ul {
    margin: var(--erp-space-1) 0 0;
    padding-left: var(--erp-space-4);
}