/* /Components/Connector/FlowSendStateButton.razor.rz.scp.css */
/* Send state (PIM-353): a compact, clickable badge in the manner of status tags — the charter's
   « Tag (color) » component (--ds-tags-*, design/CHARTE.md § 5.8): sent green, error red, running yellow,
   none grey. 24 px high, no border or shadow, so that it fits a grid row without making it taller. Common
   width and no wrapping: the four states line up, « Non envoyée » does not break onto two lines. Being
   clickable shows on hover (the tag's border colour as background, a ring), not as a permanent relief. */
.fss-button[b-e3py9frt8z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 108px;
    height: 24px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ds-radius-lg);
    background: var(--fss-bg);
    color: var(--fss-fg);
    font: 600 12px/1 var(--ds-font-family-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, box-shadow .12s;
}

/* In a grid cell, the height of a line of text at the user's density (16 px Compact, 20 px Standard):
   24 px plus the cell's own margins made every row of the order list 9 px taller than the others. A grid
   row is a <tr> whatever the component: no DevExpress class needed. */
td .fss-button[b-e3py9frt8z] {
    height: auto;
    line-height: inherit;
}

.fss-button:hover[b-e3py9frt8z] {
    background: var(--fss-bg-hover);
    box-shadow: 0 0 0 1px var(--fss-fg);
}

.fss-button:focus-visible[b-e3py9frt8z] {
    outline: 2px solid var(--dxds-color-border-focus-default);
    outline-offset: 1px;
}

.fss-dot[b-e3py9frt8z] {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--fss-dot);
}

.fss-text[b-e3py9frt8z] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fss-sent[b-e3py9frt8z] {
    --fss-bg: var(--ds-tags-green-bg);
    --fss-bg-hover: var(--ds-tags-green-border);
    --fss-fg: var(--ds-tags-green-content);
    --fss-dot: var(--ds-tags-green-content);
}

.fss-error[b-e3py9frt8z] {
    --fss-bg: var(--ds-tags-red-bg);
    --fss-bg-hover: var(--ds-tags-red-border);
    --fss-fg: var(--ds-tags-red-content);
    --fss-dot: var(--ds-tags-red-content);
}

.fss-running[b-e3py9frt8z] {
    --fss-bg: var(--ds-tags-yellow-bg);
    --fss-bg-hover: var(--ds-tags-yellow-border);
    --fss-fg: var(--ds-tags-yellow-content);
    --fss-dot: var(--ds-tags-yellow-content);
}

.fss-running .fss-dot[b-e3py9frt8z] {
    animation: fss-pulse-b-e3py9frt8z 1.6s ease-out infinite;
}

/* The ordinary case: it must not draw attention. */
.fss-none[b-e3py9frt8z] {
    --fss-bg: var(--ds-tags-grey-bg);
    --fss-bg-hover: var(--ds-tags-grey-border);
    --fss-fg: var(--ds-tags-grey-content);
    --fss-dot: transparent;
}

.fss-none .fss-dot[b-e3py9frt8z] {
    border: 1px dashed var(--ds-tags-grey-content);
}

@keyframes fss-pulse-b-e3py9frt8z {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-tags-yellow-content) 45%, transparent); }
    70% { box-shadow: 0 0 0 4px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .fss-button[b-e3py9frt8z] { transition: none; }
    .fss-running .fss-dot[b-e3py9frt8z] { animation: none; }
}
/* /Components/Tariff/DiscountPriorityComponent.razor.rz.scp.css */
/* Discount criteria priorities (Configuration > "Discount priorities" tab): a short list of criteria, kept
   narrow so the priority and its criterion read together instead of across the whole page. */
.discount-priority[b-xltxmpf0fp] {
    max-width: 600px;
}
/* /Editors/BulkEditPanel/BulkEditPanel.razor.rz.scp.css */
/* Bulk edit panel: one row per field to change (column + typed value), with add / remove.
   The combo box and the buttons are DevExpress components: their CssClass lands on their own root, which
   carries no scope attribute of this component, hence ::deep under a row of ours. */
.bulk-edit-panel[b-zelowxh05m] {
    padding: 0.5rem 0;
}

.bulk-edit-header[b-zelowxh05m],
.bulk-edit-row[b-zelowxh05m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Column headers, like a form caption (Teal, regular). */
.bulk-edit-header[b-zelowxh05m] {
    margin-bottom: 0.75rem;
    font-weight: var(--ds-font-weight-regular);
    color: var(--ds-panel-content);
}

.bulk-edit-col-field[b-zelowxh05m] {
    flex: 1 1 40%;
    min-width: 0;
}

.bulk-edit-col-value[b-zelowxh05m] {
    flex: 1 1 55%;
    min-width: 0;
}

.bulk-edit-col-actions[b-zelowxh05m] {
    flex: 0 0 auto;
    width: 2.5rem;
    text-align: center;
}

.bulk-edit-col-field[b-zelowxh05m]  .bulk-edit-editor {
    width: 100%;
}

/* The remove button, a link button in the charter's red: the theme paints a link button from the neutral
   text token at rest and the accent tokens on hover and press (way 1, on our class). */
.bulk-edit-col-actions[b-zelowxh05m]  .bulk-edit-delete {
    padding: 0 0.25rem;
    --dxds-color-content-neutral-default-rest: var(--ds-feedback-danger);
    --dxds-color-content-primary-default-hovered: var(--ds-feedback-danger);
    --dxds-color-content-primary-default-active: var(--ds-feedback-danger);
}

.bulk-edit-add[b-zelowxh05m] {
    margin-top: 0.75rem;
}

.text-muted[b-zelowxh05m] {
    color: var(--ds-panel-muted-content);
}
/* /Editors/ConfirmationMessage/ConfirmationMessagePanel.razor.rz.scp.css */
/* The sentence of a piece's confirmation box, in the text colour of the charter's Modal. Its size and the
   body that does not scroll belong to the window (PopupWindowSizeController, app-theme.css). */
.confirm-panel[b-14ry0t25dq] {
    padding: 4px 2px 10px;
}

.confirm-panel-text[b-14ry0t25dq] {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ds-modal-content);
}
/* /Editors/DefaultChannels/DefaultChannels.razor.rz.scp.css */
/* The « default » tick box, centred under its caption (the column is CaptionAlignment / TextAlignment
   Center; a template cell does not follow TextAlignment). Authored in this component's template, so the
   element carries its scope: no ::deep. */
.dch-default-cell[b-tiw28a6ezh] {
    display: flex;
    justify-content: center;
}
/* /Editors/DeliveryRecapPanel/DeliveryRecapPanel.razor.rz.scp.css */
/* The order's « planned delivery » card, drawn by DeliveryRecapPanelPropertyEditor. Not a field: the summary
   of what the calculation kept (departure, delivery, round, and the reason when a date was postponed). Small
   label / value cells on two lines, in the charter's panel colours (--ds-panel-*, design/CHARTE.md § 6). */
.drecap[b-jd0pgrqwsa] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

.drecap-cell[b-jd0pgrqwsa] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 132px;
    padding: 6px 10px;
    background: var(--ds-panel-header-bg);
    border: 1px solid var(--ds-panel-border);
    border-radius: var(--ds-radius-md);
    line-height: 1.25;
}

.drecap-key[b-jd0pgrqwsa] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ds-panel-muted-content);
}

.drecap-val[b-jd0pgrqwsa] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-panel-content);
    white-space: nowrap;
}

/* Postponement reason, planning failure, manual override: a note, not a piece of data. The banner's
   warning colours, to catch the eye without shouting. */
.drecap-cell.note[b-jd0pgrqwsa] {
    justify-content: center;
    background: var(--ds-banner-warning-bg);
    border-color: var(--ds-banner-warning-border);
}

.drecap-cell.note .drecap-val[b-jd0pgrqwsa] {
    font-weight: 500;
    color: var(--ds-banner-warning-content);
    white-space: normal;
}
/* /Editors/EAVAttributesPropertyEditor/EAVAttributesEditor.razor.rz.scp.css */
/* EAV attributes editor: one typed field per attribute value, label and editor on one line from 992 px (XAF's
   breakpoint). The rows are built by RenderTreeBuilder in the component's code, which sets no scope attribute:
   they are reached through ::deep under the container, which is markup. Label widths are set at run time by
   the component's script, to match the widest label. */
.eav-attributes-container[b-2ehbu75ld0] {
    padding: 1rem 0;
}

/* No attribute to show: said in the muted text of the panels. */
.eav-attributes-empty[b-2ehbu75ld0] {
    color: var(--ds-panel-muted-content);
}

.eav-attribute-field[b-2ehbu75ld0] {
    margin-bottom: 0.75rem;
}

.eav-attributes-container[b-2ehbu75ld0]  .eav-field-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

/* Like a form caption (Teal, regular). */
.eav-attributes-container[b-2ehbu75ld0]  .eav-field-label {
    align-self: flex-start;
    margin: 0;
    padding-left: 0;
    font-weight: var(--ds-font-weight-regular);
    color: var(--ds-panel-content);
}

.eav-attributes-container[b-2ehbu75ld0]  .eav-field-label label {
    margin: 0;
}

.eav-attributes-container[b-2ehbu75ld0]  .eav-field-editor {
    flex: 1;
    width: 100%;
}

@media (min-width: 992px) {
    .eav-attributes-container[b-2ehbu75ld0]  .eav-field-row {
        flex-direction: row;
        align-items: center;
    }

    .eav-attributes-container[b-2ehbu75ld0]  .eav-field-label {
        flex: 0 0 auto;
        padding-right: 1rem;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .eav-attributes-container[b-2ehbu75ld0]  .eav-field-editor {
        flex: 0 0 auto;
    }
}

/* The required mark of a label. It used to be a global .text-danger rule, written in a <style> of the
   component: it repainted every .text-danger of the page while the editor was shown. */
.eav-attributes-container[b-2ehbu75ld0]  .text-danger {
    color: var(--ds-feedback-danger);
}

.text-muted[b-2ehbu75ld0] {
    font-style: italic;
    color: var(--ds-panel-muted-content);
}
/* /Editors/ExclusiveEditBanner/ExclusiveEditBanner.razor.rz.scp.css */
/* TAP-03 — exclusive editing banner, set by the main window template between the action bar and the view.
   It stays as long as the situation lasts: no close button, it is not a notification.
   - --held: another user holds the record, or yours has ended (warning: --ds-banner-warning-*);
   - --mine: you hold the record (pale green, a mere reminder: --ds-banner-info-*).
   Its buttons are the charter's: secondary, primary for the one that takes the record back. */
.pim-exclusive-banner[b-zpefvfj3qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0.75rem 8px;
    font-family: var(--ds-font-family-text);
    border-radius: var(--ds-radius-lg);
}

.pim-exclusive-banner--held[b-zpefvfj3qa] {
    padding: 6px 12px;
    background: var(--ds-banner-warning-bg);
    border: 1px solid var(--ds-banner-warning-border);
    color: var(--ds-banner-warning-content);
}

.pim-exclusive-banner--mine[b-zpefvfj3qa] {
    padding: 6px 12px;
    gap: 10px;
    background: var(--ds-banner-info-bg);
    border: 1px solid var(--ds-banner-info-border);
    color: var(--ds-banner-info-content);
    font-size: 13px;
}

.pim-exclusive-banner__badge[b-zpefvfj3qa] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ds-banner-warning-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pim-exclusive-banner__badge svg[b-zpefvfj3qa] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--ds-banner-warning-content);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pim-exclusive-banner__line[b-zpefvfj3qa] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}

.pim-exclusive-banner__line strong[b-zpefvfj3qa] {
    margin-right: 4px;
    font-weight: 600;
}

.pim-exclusive-banner__dot[b-zpefvfj3qa] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-banner-info-accent);
}

.pim-exclusive-banner__button[b-zpefvfj3qa] {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--ds-button-secondary-enable-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-button-secondary-enable-bg);
    color: var(--ds-button-secondary-enable-content);
    font: 600 13px var(--ds-font-family-text);
    white-space: nowrap;
    cursor: pointer;
}

.pim-exclusive-banner__button:hover[b-zpefvfj3qa] {
    border-color: var(--ds-button-secondary-hover-bg);
    background: var(--ds-button-secondary-hover-bg);
    color: var(--ds-button-secondary-hover-content);
}

.pim-exclusive-banner__button--primary[b-zpefvfj3qa] {
    border-color: var(--ds-button-primary-enable-bg);
    background: var(--ds-button-primary-enable-bg);
    color: var(--ds-button-primary-enable-content);
}

.pim-exclusive-banner__button--primary:hover[b-zpefvfj3qa] {
    border-color: var(--ds-button-primary-hover-bg);
    background: var(--ds-button-primary-hover-bg);
    color: var(--ds-button-primary-hover-content);
}

@media (max-width: 720px) {
    .pim-exclusive-banner--held[b-zpefvfj3qa] {
        flex-wrap: wrap;
    }
}
/* /Editors/FileData/FileDataRenderer.razor.rz.scp.css */
/* File viewer (PDF, image, text, office document). Colours: the charter's custom panel (--ds-panel-*,
   design/CHARTE.md § 6) — it was Bootstrap's grey palette, written in clear. The full-screen rules that stood
   here had no producer (no element ever carried their classes) and are gone. The icons are DevExtreme's
   (dx-icon-*, the font XAF already loads) and the buttons DxButton: they were Font Awesome icons and Bootstrap
   buttons and utilities (mb-3, text-muted, fa-5x…), none of which any loaded sheet styles. */
.file-viewer-container[b-a3vbd71r43] {
    width: 100%;
    min-height: 200px;
    background-color: var(--ds-panel-header-bg);
    border: 1px solid var(--ds-panel-border);
    border-radius: var(--ds-radius-md);
}

.file-viewer-header[b-a3vbd71r43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--ds-panel-bg);
    border-bottom: 1px solid var(--ds-panel-border);
}

.file-info[b-a3vbd71r43] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-name[b-a3vbd71r43] {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-panel-content);
}

.file-name i[b-a3vbd71r43] {
    margin-right: 5px;
}

.file-size[b-a3vbd71r43] {
    font-size: 0.875rem;
    color: var(--ds-panel-muted-content);
}

.file-actions[b-a3vbd71r43] {
    display: flex;
    gap: 10px;
}

/* The large icons of the document, unsupported file and empty states: a dx-icon takes the font size of its own
   element (font-size: inherit in DevExtreme's sheet), so the size is set on our class. */
.file-viewer-icon-xl[b-a3vbd71r43],
.file-viewer-icon-lg[b-a3vbd71r43],
.file-viewer-icon-md[b-a3vbd71r43] {
    display: block;
    margin: 0 auto 1rem;
}

.file-viewer-icon-xl[b-a3vbd71r43] {
    font-size: 5rem;
}

.file-viewer-icon-lg[b-a3vbd71r43] {
    font-size: 3rem;
}

.file-viewer-icon-md[b-a3vbd71r43] {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.file-viewer-muted[b-a3vbd71r43] {
    color: var(--ds-panel-muted-content);
}

.document-info-actions[b-a3vbd71r43] {
    margin-top: 1.5rem;
}

.document-info-hint[b-a3vbd71r43] {
    margin-top: 1rem;
    color: var(--dxds-color-content-info-default-rest);
}

.file-viewer-content[b-a3vbd71r43] {
    position: relative;
    min-height: 600px;
    background-color: var(--ds-panel-bg);
}

/* The height was written inline on the iframe (100vh), over this rule's 800 px. */
.pdf-viewer[b-a3vbd71r43] {
    width: 100%;
    height: 100vh;
    margin-top: 0;
    border: none;
}

.document-info-viewer[b-a3vbd71r43] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    background-color: var(--ds-panel-header-bg);
    border: 2px dashed var(--ds-panel-border);
    border-radius: var(--ds-radius-lg);
}

.document-info-content[b-a3vbd71r43] {
    max-width: 400px;
    padding: 40px 20px;
    text-align: center;
}

/* The office document's icon: it was Word's blue, written inline. */
.document-icon[b-a3vbd71r43] {
    color: var(--ds-tags-blue-content);
}

.image-viewer[b-a3vbd71r43] {
    max-height: 800px;
    padding: 20px;
    overflow: auto;
    text-align: center;
}

.image-viewer img[b-a3vbd71r43] {
    max-width: 100%;
    height: auto;
    box-shadow: var(--ds-shadow-standard);
}

.text-viewer[b-a3vbd71r43] {
    max-height: 600px;
    padding: 20px;
    overflow: auto;
    background-color: var(--ds-panel-header-bg);
}

.text-viewer pre[b-a3vbd71r43] {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.unsupported-viewer[b-a3vbd71r43] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px;
}

.unsupported-message[b-a3vbd71r43] {
    text-align: center;
    color: var(--ds-panel-muted-content);
}

.no-file-message[b-a3vbd71r43] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--ds-panel-muted-content);
}
/* /Editors/FlowSendState/FlowSendStateItem.razor.rz.scp.css */
/* At the top of a detail view (PIM-353): label then button, right-aligned. */
.fss-item[b-2hq0opnixb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.fss-item-label[b-2hq0opnixb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-header-page-text);
}
/* /Editors/ListFilterPanel/ListFilterPanel.razor.rz.scp.css */
/* The filter panel above a list (PIM-350, mockup v7). Colours: the charter's --ds-filter-panel-*,
   design/CHARTE.md § 6. The panel's DevExpress editors (combo and tag boxes,
   the range picker) carry a CssClass of ours on their own root, which has no scope attribute of this component:
   they are reached through ::deep under a box of ours. The two drop-down windows' content is markup of this
   component, rendered in a popup: scoped as well. What lies outside the component — the drop-down frames, the
   range calendar, the host grid's toolbar and height chain — is in app-theme.css (« ListFilterPanel »). */
.lfp[b-ky7n71dvuo] {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ds-font-family-text);
    color: var(--ds-input-enable-filled-content);
    background: var(--ds-filter-panel-bg);
    border: 1px solid var(--ds-filter-panel-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-standard);
}

.lfp.lfp-active[b-ky7n71dvuo] {
    border-color: var(--ds-filter-panel-accent-border);
}

.lfp-head[b-ky7n71dvuo] {
    cursor: pointer;
    height: 50px;
    box-sizing: border-box;
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    border-bottom: 1px solid var(--ds-filter-panel-divider);
    background: var(--ds-filter-panel-bg);
}

.lfp-active .lfp-head[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-highlight-bg);
    border-bottom-color: var(--ds-filter-panel-accent-divider);
}

.lfp-collapsed .lfp-head[b-ky7n71dvuo] {
    border-bottom: none;
    border-radius: var(--ds-radius-lg);
}

/* Every button of the panel, DevExpress's included (the editors' drop-down buttons): the panel's font, over
   the buttons' own classes below (their size and weight hold in the drop-down windows, outside .lfp). The ::deep rules keep the weight they had before the isolation (:where()
   leaves the scope attribute alone): heavier, they would win over the theme's own editor rules, which they
   used to lose to. */
.lfp button[b-ky7n71dvuo],
:where(.lfp)[b-ky7n71dvuo]  button {
    font: inherit;
    cursor: pointer;
}

.lfp-title[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ds-filter-panel-content);
}

.lfp-title span.lfp-caption[b-ky7n71dvuo] {
    font-size: 15px;
    font-weight: 700;
}

.lfp-badge[b-ky7n71dvuo] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--ds-filter-panel-badge-bg);
    color: var(--ds-filter-panel-text);
}

.lfp-active .lfp-badge[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-selected-bg);
    color: var(--ds-filter-panel-selected-content);
}

.lfp-chips[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    margin-left: 6px;
}

.lfp-chip[b-ky7n71dvuo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 4px 0 10px;
    border-radius: 13px;
    background: var(--ds-filter-panel-bg);
    border: 1px solid var(--ds-filter-panel-accent-border);
    color: var(--ds-filter-panel-content);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.lfp-chip button[b-ky7n71dvuo],
.lfp-clear[b-ky7n71dvuo] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ds-filter-panel-link);
}

/* The clear button of a field, after its editor: a little away from the field's right edge. */
.lfp-clear-in-box[b-ky7n71dvuo] {
    margin-right: 4px;
    color: var(--ds-filter-panel-text);
}

.lfp-grow[b-ky7n71dvuo] {
    flex-grow: 1;
}

.lfp-btn-outline[b-ky7n71dvuo] {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ds-filter-panel-accent-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-filter-panel-bg);
    color: var(--ds-filter-panel-link);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lfp-btn-ghost[b-ky7n71dvuo] {
    height: 30px;
    padding: 0 8px;
    border: none;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-filter-panel-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lfp-btn-icon[b-ky7n71dvuo] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ds-filter-panel-field-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-filter-panel-bg);
    color: var(--ds-filter-panel-content);
}

.lfp-body[b-ky7n71dvuo] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* One grid of four columns for both lines, so the fields of the first line and those of "More filters"
   fall in the same columns; a field takes one or two of them (FieldSpan). */
.lfp-row1[b-ky7n71dvuo],
.lfp-row2[b-ky7n71dvuo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 12px;
    align-items: end;
}

.lfp-field[b-ky7n71dvuo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lfp-label[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-filter-panel-text);
}

.lfp-dot[b-ky7n71dvuo] {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--ds-filter-panel-accent);
}

.lfp-box[b-ky7n71dvuo] {
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--ds-filter-panel-field-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-filter-panel-bg);
}

.lfp-box.lfp-on[b-ky7n71dvuo] {
    border-color: var(--ds-filter-panel-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-filter-panel-accent) 12%, transparent);
}

/* The box's own inputs and selects, and those of the DevExpress editors it holds. */
:where(.lfp-box)[b-ky7n71dvuo]  input,
:where(.lfp-box)[b-ky7n71dvuo]  select {
    height: 32px;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
}

:where(.lfp-box)[b-ky7n71dvuo]  input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    color: var(--ds-input-enable-filled-content);
    text-overflow: ellipsis;
}

/* The panel's controls are sized at 13px (v7 mockup), over the theme's editor size: at 14px the condition
   list ate the room of the search text ("Texte recherc…"). */
:where(.lfp) .lfp-box[b-ky7n71dvuo]  input,
:where(.lfp) .lfp-box[b-ky7n71dvuo]  select {
    font-size: 13px;
}

:where(.lfp-box)[b-ky7n71dvuo]  .lfp-combo {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Tag boxes (19/10: the three send states of the default were cut in two). The tags keep their font but
   lose the room around it — a 40 px cross per tag, 10 px of padding around the typing area —, so three
   states hold on one line from a 1366 px screen. Narrower, the tags wrap and the box grows with them
   instead of cutting them. Empty, it keeps the 34 px of its neighbours, without the editor's own
   border, which would double the box's.
   The 16 px cross is below the 24 px target of WCAG 2.2 (2.5.8), a trade-off for the one line: a tag
   also goes with Backspace in the field, and every field has its clear button. */
.lfp-box:has(> dxbl-tag-box)[b-ky7n71dvuo] {
    height: auto;
    min-height: 34px;
}

:where(.lfp) .lfp-box[b-ky7n71dvuo]  dxbl-tag-box.lfp-combo {
    min-height: 32px;
    padding-bottom: 0;
    border-width: 0;
}

:where(.lfp) .lfp-box[b-ky7n71dvuo]  .dxbl-tag .dxbl-tag-btn-close {
    width: 16px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

:where(.lfp) .lfp-box[b-ky7n71dvuo]  .dxbl-tag .dxbl-tag-text {
    padding-right: 2px;
}

:where(.lfp) .lfp-box[b-ky7n71dvuo]  dxbl-tag-box:has(.dxbl-tag) input.dxbl-text-edit-input {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.lfp-box select.lfp-op[b-ky7n71dvuo] {
    flex: 0 0 auto;
    padding: 0 4px;
    border-right: 1px solid var(--ds-filter-panel-field-border);
    background: var(--ds-filter-panel-field-muted-bg);
    color: var(--ds-filter-panel-content);
    font-weight: 600;
}

.lfp-prefix[b-ky7n71dvuo] {
    padding: 0 4px 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-filter-panel-text);
    white-space: nowrap;
}

/* Over the box's input rule above, by its weight. */
.lfp-box input.lfp-time[b-ky7n71dvuo] {
    padding: 0 6px;
    color: var(--ds-filter-panel-content);
}

.lfp-presets[b-ky7n71dvuo] {
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--ds-filter-panel-field-border);
    border-radius: var(--ds-radius-md);
}

.lfp-presets button[b-ky7n71dvuo] {
    height: 34px;
    padding: 0 10px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--ds-filter-panel-bg);
    color: var(--ds-filter-panel-text);
}

.lfp-presets button + button[b-ky7n71dvuo] {
    border-left: 1px solid var(--ds-filter-panel-field-border);
}

.lfp-presets button.lfp-sel[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-selected-bg);
    color: var(--ds-filter-panel-selected-content);
    font-weight: 700;
}

/* The native range picker fills its box; its own border would double the box's. */
:where(.lfp-box)[b-ky7n71dvuo]  .lfp-period {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.lfp-more[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lfp-more button[b-ky7n71dvuo] {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 4px;
    border: none;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-filter-panel-link);
    font-size: 12px;
    font-weight: 700;
}

.lfp-more span.lfp-line[b-ky7n71dvuo] {
    flex-grow: 1;
    height: 1px;
    background: var(--ds-filter-panel-divider);
}

.lfp-flip[b-ky7n71dvuo] {
    transform: rotate(180deg);
}

.lfp-box select.lfp-choice[b-ky7n71dvuo] {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    color: var(--ds-input-enable-filled-content);
}

/* The "Customize" window: the native drop-down gives the frame and the positioning; its content is
   drawn with the panel's tokens (sprint 9 feedback: "un design bien mieux"). */
.lfp-fp[b-ky7n71dvuo] {
    display: flex;
    flex-direction: column;
    max-height: 520px;
    font-family: var(--ds-font-family-text);
    color: var(--ds-input-enable-filled-content);
}

.lfp-fp-head[b-ky7n71dvuo] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 10px 16px;
}

.lfp-fp-title[b-ky7n71dvuo] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-filter-panel-content);
}

.lfp-fp-sub[b-ky7n71dvuo] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ds-filter-panel-text);
}

.lfp-fp-close[b-ky7n71dvuo] {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-filter-panel-text);
    cursor: pointer;
}

.lfp-fp-close:hover[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-hover-bg);
}

.lfp-fp-search[b-ky7n71dvuo] {
    flex-shrink: 0;
    gap: 6px;
    margin: 0 16px 10px 16px;
    padding-left: 10px;
    color: var(--ds-filter-panel-muted);
}

.lfp-fp-search input[b-ky7n71dvuo] {
    font-size: 13px !important;
}

.lfp-fp-list[b-ky7n71dvuo] {
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 4px 8px 8px 8px;
    border-top: 1px solid var(--ds-filter-panel-divider);
}

.lfp-fp-section[b-ky7n71dvuo] {
    padding: 10px 8px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-filter-panel-muted);
}

.lfp-fp-row[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
}

.lfp-fp-row:hover[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-row-hover-bg);
}

.lfp-fp-row.lfp-fp-on .lfp-fp-name[b-ky7n71dvuo] {
    color: var(--ds-filter-panel-content);
    font-weight: 600;
}

.lfp-fp-name[b-ky7n71dvuo] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lfp-fp-kind[b-ky7n71dvuo] {
    flex-shrink: 0;
    height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--ds-filter-panel-hover-bg);
    color: var(--ds-filter-panel-text);
    font-size: 11px;
    font-weight: 600;
}

.lfp-fp-switch[b-ky7n71dvuo] {
    pointer-events: none;
    flex-shrink: 0;
}

.lfp-fp-row:focus-visible[b-ky7n71dvuo] {
    outline: 2px solid var(--ds-filter-panel-accent);
    outline-offset: -2px;
}

.lfp-fp-empty[b-ky7n71dvuo] {
    padding: 18px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--ds-filter-panel-muted);
}

.lfp-fp-foot[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--ds-filter-panel-divider);
    background: var(--ds-filter-panel-field-muted-bg);
}

/* "My filters" (PIM-474): the "Customize" window's frame. Opened to pick a filter, it shows names only:
   a row's icons appear on hover or keyboard focus, the filled star of the favourite stays. */
.lfp-ps-icon[b-ky7n71dvuo] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-filter-panel-muted);
    cursor: pointer;
    opacity: 0;
}

.lfp-fp-row:hover .lfp-ps-icon[b-ky7n71dvuo],
.lfp-fp-row:focus-within .lfp-ps-icon[b-ky7n71dvuo],
.lfp-ps-icon.lfp-ps-on[b-ky7n71dvuo] {
    opacity: 1;
}

.lfp-ps-icon:hover[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-hover-bg);
    color: var(--ds-filter-panel-content);
}

.lfp-ps-icon.lfp-ps-on[b-ky7n71dvuo] {
    color: var(--ds-filter-panel-link);
}

.lfp-ps-foot[b-ky7n71dvuo] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.lfp-ps-save[b-ky7n71dvuo] {
    color: var(--ds-filter-panel-link);
}

.lfp-fp-row.lfp-ps-active[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-highlight-bg);
}

/* The standing restriction's two-way toggle on the bar: the date shortcuts' look, at the bar buttons' 30 px. */
.lfp-mode button[b-ky7n71dvuo] {
    height: 30px;
}

.lfp-ps-check-mark[b-ky7n71dvuo] {
    width: 14px;
    flex-shrink: 0;
    display: flex;
    color: var(--ds-filter-panel-link);
}

.lfp-ps-update[b-ky7n71dvuo] {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The recalled filter was changed: "Update" stands out, in a light tone rather than the solid button. */
.lfp-ps-update.lfp-ps-update-on[b-ky7n71dvuo] {
    background: var(--ds-filter-panel-highlight-bg);
    border: 1px solid var(--ds-filter-panel-accent-border);
    color: var(--ds-filter-panel-link);
}

.lfp-ps-check[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.lfp-ps-actions[b-ky7n71dvuo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lfp-ps-error[b-ky7n71dvuo] {
    margin: 4px 8px;
    font-size: 12px;
    color: var(--ds-feedback-danger);
}

.lfp-ps-confirm[b-ky7n71dvuo] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
}

.lfp-fp-done[b-ky7n71dvuo] {
    height: 30px;
    margin-left: auto;
    padding: 0 14px;
    border: none;
    border-radius: var(--ds-radius-md);
    background: var(--ds-filter-panel-selected-bg);
    color: var(--ds-filter-panel-selected-content);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
/* /Editors/OrderLineDetailPanel/OrderLineDetailPanel.razor.rz.scp.css */
/* Order line detail panel (stock + discount), under the line list, on a click on a line.
   Colours: the charter's custom panel (--ds-panel-*, --ds-feedback-*, design/CHARTE.md § 6). The secondary
   text was a light grey (Charcoal/70, 1,9:1): it takes the panel's muted text, readable. */
.oldp[b-9vgn3chlrd] {
    height: 100%;
    min-height: 240px;
    font-family: var(--ds-font-family-text);
    font-size: 12px;
    color: var(--ds-panel-content);
}

.oldp-empty[b-9vgn3chlrd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    height: 100%;
    padding: 16px;
    text-align: center;
    font-style: italic;
    color: var(--ds-panel-muted-content);
}

.oldp-detail[b-9vgn3chlrd] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    align-items: stretch;
}

@media (max-width: 720px) {
    .oldp-detail[b-9vgn3chlrd] {
        grid-template-columns: 1fr;
    }
}

.oldp-panel[b-9vgn3chlrd] {
    overflow: hidden;
    background: var(--ds-panel-bg);
    border: 1px solid var(--ds-panel-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-standard);
}

.oldp-head[b-9vgn3chlrd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--ds-panel-header-bg);
    border-bottom: 1px solid var(--ds-panel-border);
}

.oldp-title[b-9vgn3chlrd] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-panel-title);
}

.oldp-ctx[b-9vgn3chlrd] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

.oldp-body[b-9vgn3chlrd] {
    padding: 8px 10px;
}

.oldp-muted[b-9vgn3chlrd] {
    font-style: italic;
    color: var(--ds-panel-muted-content);
}

.oldp-note[b-9vgn3chlrd] {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
    background: var(--ds-panel-note-bg);
    border: 1px solid var(--ds-panel-note-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-panel-content);
}

.oldp-note b[b-9vgn3chlrd] {
    color: var(--ds-panel-title);
}

/* A line priced before a change (pricing date, discounts): the note says so, in the colour of a forced
   pricing date. */
.oldp-stale[b-9vgn3chlrd] {
    border-left: 3px solid var(--ds-state-forced-content);
}

.oldp-stale b[b-9vgn3chlrd] {
    color: var(--ds-state-forced-content);
}

.oldp-pricing-date[b-9vgn3chlrd] {
    margin: -2px 0 4px;
    font-size: 11px;
}

/* Stock */
.oldp-kv[b-9vgn3chlrd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed var(--ds-panel-border);
}

.oldp-kv .k[b-9vgn3chlrd] {
    color: var(--ds-panel-muted-content);
}

.oldp-kv .v[b-9vgn3chlrd] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oldp-kv.oldp-total[b-9vgn3chlrd] {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--ds-panel-divider);
    border-bottom: none;
}

.oldp-kv.oldp-total .k[b-9vgn3chlrd] {
    font-weight: 700;
    color: var(--ds-panel-content);
}

.oldp-kv.oldp-total .v[b-9vgn3chlrd] {
    font-size: 14px;
}

.oldp-kv .v.pos[b-9vgn3chlrd] {
    color: var(--ds-feedback-success);
}

.oldp-kv .v.neg[b-9vgn3chlrd] {
    color: var(--ds-feedback-danger);
}

.oldp-badge[b-9vgn3chlrd] {
    margin-top: 7px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--ds-radius-sm);
}

.oldp-badge.ok[b-9vgn3chlrd] {
    background: var(--ds-feedback-success-bg);
    border: 1px solid var(--ds-feedback-success-border);
    color: var(--ds-feedback-success);
}

.oldp-badge.ko[b-9vgn3chlrd] {
    background: var(--ds-feedback-danger-bg);
    border: 1px solid var(--ds-feedback-danger-border);
    color: var(--ds-feedback-danger);
}

/* Discount */
.oldp-disc-total[b-9vgn3chlrd] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ds-panel-divider);
}

.oldp-disc-total .rate[b-9vgn3chlrd] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-panel-title);
}

.oldp-disc-total .lbl[b-9vgn3chlrd] {
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

.oldp-cat[b-9vgn3chlrd] {
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid var(--ds-panel-border);
    border-radius: var(--ds-radius-sm);
}

.oldp-cat-top[b-9vgn3chlrd] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.oldp-cat-name[b-9vgn3chlrd] {
    font-weight: 600;
}

.oldp-cat-rate[b-9vgn3chlrd] {
    margin-left: auto;
    font-weight: 700;
    color: var(--ds-panel-title);
}

.oldp-crit[b-9vgn3chlrd] {
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--ds-panel-note-bg);
    border: 1px solid var(--ds-panel-note-border);
    border-radius: 9px;
    color: var(--ds-panel-title);
}

.oldp-cat-meta[b-9vgn3chlrd] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

.oldp-cat-meta b[b-9vgn3chlrd] {
    color: var(--ds-panel-content);
}

.oldp-why[b-9vgn3chlrd] {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--ds-panel-border);
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

.oldp-why-title[b-9vgn3chlrd] {
    margin-right: 4px;
    font-weight: 600;
    color: var(--ds-panel-content);
}

.oldp-why ul[b-9vgn3chlrd] {
    margin: 2px 0 0;
    padding-left: 15px;
}

.oldp-why li[b-9vgn3chlrd] {
    margin: 1px 0;
}

/* « Pourquoi ? » folded by default (native details / summary): the panel is read by its headline first. */
.oldp-why > summary[b-9vgn3chlrd] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.oldp-why > summary[b-9vgn3chlrd]::-webkit-details-marker {
    display: none;
}

.oldp-why > summary[b-9vgn3chlrd]::before {
    content: "▸";
    display: inline-block;
    width: 10px;
}

.oldp-why[open] > summary[b-9vgn3chlrd]::before {
    content: "▾";
}
/* /Editors/OrderSummaryPanel/OrderSummaryPanel.razor.rz.scp.css */
/* Order summary card, at the top of the order view: total amount and detected alerts.
   Colours: the charter's custom panel (--ds-panel-*, design/CHARTE.md § 6, « composant sur mesure »). */
.osum[b-9owynn3n1y] {
    display: flex;
    gap: 10px;
    align-items: stretch;
    font-family: var(--ds-font-family-text);
    font-size: 12px;
    color: var(--ds-panel-content);
}

.osum-block[b-9owynn3n1y] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    background: var(--ds-panel-bg);
    border: 1px solid var(--ds-panel-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-standard);
}

.osum-total[b-9owynn3n1y] {
    flex: 0 0 auto;
    min-width: 190px;
    border-left: 3px solid var(--ds-panel-accent);
}

.osum-alerts[b-9owynn3n1y] {
    flex: 1 1 auto;
}

.osum-label[b-9owynn3n1y] {
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-panel-muted-content);
}

.osum-amount[b-9owynn3n1y] {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ds-panel-content);
}

.osum-sub[b-9owynn3n1y] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

.osum-ok[b-9owynn3n1y],
.osum-alert[b-9owynn3n1y] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    font-size: 12px;
}

.osum-ok[b-9owynn3n1y] {
    color: var(--ds-panel-muted-content);
}

.dot[b-9owynn3n1y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.osum-ok .dot[b-9owynn3n1y] {
    background: var(--ds-panel-divider);
}

.osum-alert.ko[b-9owynn3n1y] {
    font-weight: 600;
    color: var(--ds-feedback-danger);
}

.osum-alert.ko .dot[b-9owynn3n1y] {
    background: var(--ds-feedback-danger);
}

.osum-alert.info .dot[b-9owynn3n1y] {
    background: var(--ds-panel-accent);
}
/* /Editors/PieceChainFlow/PieceChainFlow.razor.rz.scp.css */
/* Document flow (PieceChainFlow), at the top of a piece: Devis → Commande → BL → Facture, each stage
   clickable. Drawn in the spirit of the charter's « Suivi de document » (design/reference/ds-pim/
   6439-4062-*, 6439-4198-*; design/CHARTE.md § 5.12): a line of stages, each a round marker, its type in
   bold and its number in grey, joined by a short dash; a group of several documents is an underlined toggle
   with its caret, a pale green dashed pill once open, and opens a list of pale green dashed cards that end on
   the document's status tag (« Tag (color) », § 5.8). Colours: --ds-panel-* and --ds-filter-panel-* (the
   accent's pale tints, the link), --ds-tags-*. */
.pcf-wrap[b-h23pj9tgeu] {
    display: flex;
    flex-direction: column;
}

.pcf[b-h23pj9tgeu] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 2px 14px;
    color: var(--ds-panel-content);
}

.pcf-label[b-h23pj9tgeu] {
    font-size: 11px;
    color: var(--ds-panel-muted-content);
}

/* The flow's empty state: the band stays and explains itself instead of vanishing. A note, not a stage. */
.pcf-empty[b-h23pj9tgeu] {
    font-size: 12px;
    font-style: italic;
    color: var(--ds-panel-muted-content);
}

.pcf-track[b-h23pj9tgeu] {
    display: flex;
    /* flex-start, not stretch: the delivery-note cell is taller than the others because it carries the
       credit branch, and stretching would drag every other stage down with it. */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Each stage of the flow is a CELL. The cell of the delivery note also carries the credit branch
   underneath it, so the fork points at the document the avoir answers instead of at the left edge of the
   row (where it read as if it descended from the Devis). */
.pcf-cell[b-h23pj9tgeu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pcf-cell--forked[b-h23pj9tgeu] {
    padding-left: 18px; /* room for the fork elbow, which is pulled back into it */
}

.pcf-track--branch[b-h23pj9tgeu] {
    margin-top: 2px;
}

/* A stage: marker, type, number — one line. */
.pcf-step[b-h23pj9tgeu] {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

/* The round marker: a ring with a dot, grey; at the accent for the current stage. */
.pcf-step[b-h23pj9tgeu]::before {
    content: "";
    flex: none;
    align-self: center;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1.5px solid var(--ds-panel-muted-content);
    border-radius: 50%;
    background: radial-gradient(circle, var(--ds-panel-muted-content) 0 2px, transparent 2.5px);
}

.pcf-step:hover[b-h23pj9tgeu] {
    background: var(--ds-filter-panel-row-hover-bg);
}

.pcf-step:focus-visible[b-h23pj9tgeu] {
    outline: 2px solid var(--dxds-color-border-focus-default);
    outline-offset: 1px;
}

.pcf-type[b-h23pj9tgeu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-panel-content);
}

.pcf-meta[b-h23pj9tgeu] {
    font-size: 11px;
    color: var(--ds-panel-muted-content);
    font-variant-numeric: tabular-nums;
}

/* The current stage: the accent's marker, not clickable. */
.pcf-step--current[b-h23pj9tgeu] {
    cursor: default;
}

.pcf-step--current:hover[b-h23pj9tgeu] {
    background: transparent;
}

.pcf-step--current[b-h23pj9tgeu]::before {
    border-color: var(--ds-filter-panel-accent);
    background: radial-gradient(circle, var(--ds-filter-panel-accent) 0 2.5px, transparent 3px);
}

/* The single downstream child of the current piece, and a group: a dashed marker, « produced by » or « several ». */
.pcf-step--child[b-h23pj9tgeu]::before,
.pcf-step--group[b-h23pj9tgeu]::before {
    border-style: dashed;
}

/* A group of documents (« 2 Bons de livraison »): an underlined toggle with its caret, at the link's
   colour; open, or holding the current piece, a pale green dashed pill. */
.pcf-step--group .pcf-type[b-h23pj9tgeu] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ds-filter-panel-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pcf-step--group.pcf-step--open[b-h23pj9tgeu],
.pcf-step--group.pcf-step--current[b-h23pj9tgeu] {
    border: 1px dashed var(--ds-filter-panel-accent-border);
    background: var(--ds-filter-panel-highlight-bg);
    cursor: pointer;
}

.pcf-step--group.pcf-step--current[b-h23pj9tgeu]::before {
    border-style: dashed;
}

/* The caret, which turns when the group is open. */
.pcf-caret[b-h23pj9tgeu] {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s ease;
}

.pcf-step--open .pcf-caret[b-h23pj9tgeu] {
    transform: rotate(180deg);
}

/* The dash between two stages. */
.pcf-chevron[b-h23pj9tgeu] {
    flex: none;
    align-self: flex-start;
    width: 14px;
    height: 1px;
    margin: 13px 4px 0;
    background: var(--ds-panel-divider);
}

.pcf-fork[b-h23pj9tgeu] {
    flex: none;
    align-self: center;
    width: 12px;
    height: 12px;
    margin: 0 7px 9px -18px;
    border-left: 1px solid var(--ds-panel-divider);
    border-bottom: 1px solid var(--ds-panel-divider);
    border-bottom-left-radius: 5px;
}

/* The group's documents, under the line: pale green dashed cards. */
.pcf-panel[b-h23pj9tgeu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
}

.pcf-row[b-h23pj9tgeu] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
    padding: 6px 10px;
    border: 1px dashed var(--ds-filter-panel-accent-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-filter-panel-highlight-bg);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.pcf-row[b-h23pj9tgeu]::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1.5px dashed var(--ds-filter-panel-accent);
    border-radius: 50%;
    background: radial-gradient(circle, var(--ds-filter-panel-accent) 0 2px, transparent 2.5px);
}

.pcf-row:hover[b-h23pj9tgeu] {
    border-color: var(--ds-filter-panel-accent);
    background: var(--ds-filter-panel-accent-divider);
}

.pcf-row--current[b-h23pj9tgeu] {
    border-style: solid;
    border-color: var(--ds-filter-panel-accent);
}

.pcf-row-num[b-h23pj9tgeu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-panel-content);
    font-variant-numeric: tabular-nums;
}

.pcf-row-info[b-h23pj9tgeu] {
    flex: 1 1 auto;
    font-size: 11px;
    color: var(--ds-panel-muted-content);
    font-variant-numeric: tabular-nums;
}

/* The document's status: a « Tag (color) » of the charter. */
.pcf-pill[b-h23pj9tgeu] {
    flex: none;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.pcf-pill--done[b-h23pj9tgeu] {
    background: var(--ds-tags-green-bg);
    border-color: var(--ds-tags-green-border);
    color: var(--ds-tags-green-content);
}

.pcf-pill--inprogress[b-h23pj9tgeu] {
    background: var(--ds-tags-yellow-bg);
    border-color: var(--ds-tags-yellow-border);
    color: var(--ds-tags-yellow-content);
}

.pcf-pill--active[b-h23pj9tgeu] {
    background: var(--ds-tags-blue-bg);
    border-color: var(--ds-tags-blue-border);
    color: var(--ds-tags-blue-content);
}

.pcf-pill--expired[b-h23pj9tgeu],
.pcf-pill--neutral[b-h23pj9tgeu] {
    background: var(--ds-tags-grey-bg);
    border-color: var(--ds-tags-grey-border);
    color: var(--ds-tags-grey-content);
}

/* The removable filter chip shown when the flow is focused on a single order line. */
.pcf-chip[b-h23pj9tgeu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--ds-filter-panel-accent-border);
    border-radius: 999px;
    background: var(--ds-filter-panel-bg);
    color: var(--ds-filter-panel-content);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.pcf-chip:hover[b-h23pj9tgeu] {
    border-color: var(--ds-filter-panel-accent);
    background: var(--ds-filter-panel-highlight-bg);
}

.pcf-chip-label[b-h23pj9tgeu] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcf-chip-x[b-h23pj9tgeu] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--ds-filter-panel-accent-divider);
    color: var(--ds-filter-panel-link);
    font-size: 10px;
    line-height: 1;
}

.pcf-chip:hover .pcf-chip-x[b-h23pj9tgeu] {
    background: var(--ds-filter-panel-accent);
    color: var(--ds-filter-panel-selected-content);
}
/* /Editors/PriceListLastSaved/PriceListLastSavedText.razor.rz.scp.css */
/* La pastille du dernier enregistrement de la mercuriale (PIM-329). Une pastille, pas une ligne de texte
   nue : trois niveaux de lecture dans un seul objet — l'icône et le préfixe s'effacent, l'AUTEUR ressort
   en gras et en foncé, la date revient en gris. L'œil trouve « qui » avant « quand », ce qui est l'ordre
   dans lequel la question se pose. Teintes du vert de la charte (--ds-last-saved-*) plutôt qu'un gris
   neutre : la pastille appartient visiblement à cet écran-là.

   Sa place dans la fiche (sortie du flux, sur la barre d'outils de la grille) se règle sur des conteneurs
   XAF, hors de ce composant : wwwroot/css/domains/tariff.css. */
.pim-lastsaved[b-1pzwxugof5] {
    position: absolute;
    /* Centre la pastille (23 px) sur la barre d'outils de la grille (34 px). */
    top: 6px;
    right: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .6rem .2rem .5rem;
    border: 1px solid var(--ds-last-saved-border);
    border-radius: 999px;
    background: var(--ds-last-saved-bg);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ds-last-saved-content);
    /* La pastille se dimensionne sur son contenu, bornée à la largeur de l'élément de disposition XAF
       qui la porte : au-delà, le texte se coupe en points de suspension. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pim-lastsaved__icon[b-1pzwxugof5] {
    width: .85rem;
    height: .85rem;
    flex: 0 0 auto;
    /* currentColor : l'icône suit la couleur du texte, y compris si les teintes changent. */
    color: var(--ds-last-saved-icon);
}

.pim-lastsaved__user[b-1pzwxugof5] {
    font-weight: 600;
    color: var(--ds-last-saved-user);
}

.pim-lastsaved__prefix[b-1pzwxugof5],
.pim-lastsaved__when[b-1pzwxugof5] {
    font-weight: 400;
}

/* Les espaces entre les trois morceaux viennent d'ici et non du balisage : Razor supprime les blancs
   entre deux balises, et « par Admin le » se lisait « parAdminle ». */
.pim-lastsaved__user[b-1pzwxugof5],
.pim-lastsaved__when[b-1pzwxugof5] {
    margin-left: .3em;
}

/* Fenêtre étroite : les deux groupes de boutons de la barre d'outils se rapprochent et finiraient par
   passer sous la pastille. En dessous du seuil, elle retourne dans le flux et reprend sa ligne -- une
   ligne de plus vaut mieux qu'un chevauchement. Seuil posé à partir des 231 px de marge mesurés sur une
   fenêtre de 1326 px. */
@media (max-width: 1200px) {
    .pim-lastsaved[b-1pzwxugof5] {
        position: static;
    }
}