/* MO module theme — global styles that need to reach DxGrid's rendered DOM
   (CSS isolation can't target it). Scoped to descendants of .mo-page.

   The MO layout shell (sidebar/workspace) is provided by the shared ModuleSidebar component;
   its styles live in Common/wwwroot/module-sidebar.css.

   Colors here track DevExpress/Bootstrap theme tokens (--dxbl-* / --bs-*) so the whole module
   adapts to light/dark mode and rebrands without per-file edits. */

.mo-page {
    font-size: 14px;
    color: var(--bs-body-color);
}

.mo-page .mo-info-bar {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mo-page .mo-cmd-col {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.mo-page .mo-cmd-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.mo-page .mo-cmd-btn:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-primary);
}

.mo-page .mo-mrn-cell {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.mo-page .mo-doc-cell {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--bs-body-color);
    font-weight: 500;
}

.mo-page .mo-doc-link,
.mo-page .mo-mini-grid .mo-doc-link {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--dxbl-accent-color);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.mo-page .mo-doc-link:hover,
.mo-page .mo-mini-grid .mo-doc-link:hover {
    color: var(--dxbl-accent-color-110);
    text-decoration: underline;
}

.mo-page .mo-doc-link:visited,
.mo-page .mo-mini-grid .mo-doc-link:visited {
    color: var(--dxbl-accent-color);
}

.mo-page .mo-mrn-link {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--dxbl-accent-color);
    text-decoration: none;
    cursor: pointer;
}

.mo-page .mo-mrn-link:hover {
    color: var(--dxbl-accent-color-110);
    text-decoration: underline;
}

.mo-page .mo-mrn-link:visited {
    color: var(--dxbl-accent-color);
}

.mo-field-hint {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 0.2rem;
    line-height: 1.3;
}

/* Read-only value rendered as plain text in a form row (e.g. Scheduled arrival after submit) —
   padded so the text lines up with the text inside neighbouring editors. */
.mo-static-value {
    padding: 0.375rem 0;
    color: var(--bs-body-color);
}

/* Nested house rows in the transport's masters-and-houses tree — one level of indentation
   under the master row. */
.mo-page .mo-tree-indent {
    padding-left: 1.75rem;
}

/* Filled state of the party field (MoPartyEditor): a read-only card with the party's basic
   data and the Edit/Change actions. Replaces the lookup until the user picks again. */
.mo-party-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.45rem 0.75rem;
    background-color: var(--bs-body-bg);
}

.mo-party-value-text {
    min-width: 0;
}

.mo-party-value-actions {
    display: flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}

/* Used by the edit pages (Transport, MasterConsignment, HouseConsignment) to disable the entire
   form when the tenant rep card is missing. <fieldset disabled> blocks input at the HTML level —
   the opacity rule gives a clear visual "locked" cue that all controls share, regardless of how
   each DevExpress widget renders its own disabled state. */
.mo-form-locked {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.mo-form-locked[disabled] {
    opacity: 0.55;
}

/* Create/edit header (back + title-block + optional right) — matches handoff .create-header */
.mo-page .mo-edit-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.mo-page .mo-edit-top-title {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mo-page .mo-edit-top-title h1 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mo-page .mo-edit-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Status-hint text rendered inline inside the page top toolbar (PageContextBar), next to the
   status pill. Used by MoEditToolbarActions for the "View only while Customs validates" /
   "Validated and ready for amendment" / "Fix the errors below before amending" hints.
   line-height matches the surrounding status pill (.page-context-status uses 1.4) so vertical
   centring inside the toolbar row matches the pill, the title, and the action buttons.
   margin-right (not padding-right) gives breathing room before the next item — important for
   the danger variant below, whose pill background must not extend into the spacer. */
.mo-toolbar-hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    margin-right: 0.75rem;
}

.mo-toolbar-hint-ok { color: var(--bs-success-text-emphasis); }
.mo-toolbar-hint-ok i { color: var(--bs-success); }

/* Danger variant — rendered as a real red pill (matching the visual weight of .page-context-status)
   rather than just coloured text, so it catches the eye as forcefully as the green "Accepted"
   pill it sits next to. Triggered when a Validated entity's local form has been edited into an
   invalid state. */
.mo-toolbar-hint-danger {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid var(--bs-danger-border-subtle);
    padding: 0.15rem 0.55rem;
    border-radius: 0.25rem;
    font-weight: 500;
}
.mo-toolbar-hint-danger i { color: var(--bs-danger); }

/* Customs MRN displayed in the page top toolbar, immediately after the status pill. Rendered as
   a button (not a div) so it gets keyboard focus, Enter/Space activation, and a copy-to-clipboard
   click target for free. The strip is intentionally low-chrome — it sits next to the status pill
   and should read as data, not as a call-to-action competing with Amend / Submit. */
.mo-toolbar-mrn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.mo-toolbar-mrn:hover {
    background: var(--bs-tertiary-bg);
}

.mo-toolbar-mrn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.mo-toolbar-mrn-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.mo-toolbar-mrn-value {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mo-toolbar-mrn-icon {
    font-size: 11px;
    color: var(--bs-secondary-color);
}

/* Edit page utilities — shared by the three MO edit pages. */
.mo-page.mo-edit-page {
    /* Full-width canvas; inner grid handles column widths */
    padding: 0.25rem 1rem;
}

/* Required-field asterisk on DxFormLayoutItem captions. Add CssClass="mo-required" to mark a
   field as required — the asterisk colour tracks --bs-danger so it works in light/dark mode. */
.mo-page .mo-required .dxbl-fl-cpt::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

/* Mass spin editors on the Master/House edit pages. DxSpinEdit keeps a ~70px intrinsic width
   inside DxFormLayout, which truncates formatted values like "6 000" to "6 …". Stretch to the
   form-layout cell but cap the width — a mass field doesn't need a full md-3 column, and the
   cap keeps it from overflowing into the neighbouring caption in cramped cells. */
.mo-page .mo-mass-edit {
    width: 100%;
    max-width: 12rem;
}

/* Subheader for repeated field trios inside a DxFormLayoutGroup — used in the Places groups on
   the House and Master Consignment edit pages to label each "Acceptance / Delivery / Loading /
   Unloading" row without nesting a card. Rendered inside a full-width, caption-less
   DxFormLayoutItem so the FormLayout's column grid still owns spacing and breakpoints. */
.mo-place-subheader {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    margin-top: 0.25rem;
}

/* Spin-any-icon utility — Bootstrap Icons don't ship a spin animation, and Bootstrap's
   .spinner-border is a different shape (border arc). Apply alongside any icon class to make
   it rotate, e.g. used by MoEditToolbarActions buttons during saving / submitting / deleting. */
.mo-spin {
    display: inline-block;
    animation: mo-spin 0.9s linear infinite;
}

@keyframes mo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Operator (driver) access link panel inside the Transport edit form. Lives in theme CSS
   rather than scoped CSS because it's already namespaced under .mo-page. */
.mo-page .mo-operator-access-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mo-page .mo-operator-access-helper {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

/* The notify checkbox sits caption-less beside vertically-captioned editors — pad it down so
   the checkbox lines up with the inputs, not with their captions. */
.mo-page .mo-notify-inline {
    padding-top: 1.7rem;
}

/* Operator access link as one line: the link itself, a copy button, the generated timestamp. */
.mo-page .mo-operator-access-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.mo-page .mo-operator-access-link {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-page .mo-operator-access-subtext {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* Dashboard panels (shared by action items, activity, etc.) */
.mo-page .mo-panel {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-top: 1rem;
    overflow: hidden;
}

.mo-page .mo-panel-head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mo-page .mo-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-body-color);
    flex: 1;
}

.mo-page .mo-action-items .mo-panel-title i {
    color: var(--bs-danger);
    font-size: 16px;
}

.mo-page .mo-by-type .mo-panel-title i {
    color: var(--bs-secondary-color);
    font-size: 16px;
}

.mo-page .mo-panel-count {
    margin-left: 0.25rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    height: 20px;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.mo-page .mo-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mo-page .mo-panel-link {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.mo-page .mo-panel-link:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.mo-page .mo-panel-empty {
    padding: 1.5rem 1rem;
    color: var(--bs-secondary-color);
    font-size: 13px;
    text-align: center;
}

.mo-page .mo-panel-error {
    color: var(--bs-danger-text-emphasis);
}

.mo-page .mo-mini-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mo-page .mo-mini-grid thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.mo-page .mo-mini-grid tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    vertical-align: middle;
}

.mo-page .mo-mini-grid tbody tr:last-child td {
    border-bottom: none;
}

.mo-page .mo-mini-grid tbody tr:hover {
    background: var(--bs-tertiary-bg);
}

.mo-page .mo-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Three semantically distinct types — Bootstrap has no purple, so Master gets info (cyan)
   rather than the original Tailwind violet. */
.mo-page .mo-type-t { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.mo-page .mo-type-m { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }
.mo-page .mo-type-h { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }

.mo-page .mo-mini-grid-actions {
    text-align: right;
    white-space: nowrap;
}

.mo-page .mo-mini-grid-actions .mo-cmd-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.mo-page .mo-mini-grid-actions .mo-cmd-btn:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-border-subtle);
}

.mo-page .mo-fix-btn {
    appearance: none;
    background: var(--bs-primary);
    color: var(--bs-body-bg);
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    padding: 0.2rem 0.7rem;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.25rem;
    line-height: 1.5;
}

.mo-page .mo-fix-btn:hover {
    background: color-mix(in srgb, var(--bs-primary) 85%, black);
    border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
}

.mo-page .mo-mini-grid .mo-doc-cell {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--bs-body-color);
    font-weight: 500;
}

.mo-page .mo-mini-grid .mo-mrn-cell {
    font-family: var(--bs-font-monospace);
    font-size: 11.5px;
    color: var(--bs-secondary-color);
    margin-top: 1px;
}

.mo-page .mo-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mo-page .mo-search-icon {
    position: absolute;
    left: 10px;
    color: var(--bs-secondary-color);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.mo-page .mo-toolbar-search {
    width: 280px;
}

.mo-page .mo-toolbar-search input {
    padding-left: 30px;
}

/* Routing + Border-crossing panels (shared by MoRoutingSection and MoBorderCrossingSection):
   latest-decision / status line, results table, and the QA test panel. Global (not scoped) so
   both components render identically. */
.mo-page .mo-routing-latest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mo-page .mo-routing-latest-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.mo-page .mo-routing-loc {
    font-size: 0.82rem;
    color: var(--bs-body-color);
}

.mo-page .mo-routing-at {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

.mo-page .mo-routing-empty {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    padding: 0.25rem 0;
}

.mo-page .mo-routing-table {
    font-size: 0.85rem;
}

.mo-page .mo-routing-raw {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.mo-page .mo-routing-test {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--bs-secondary-bg-subtle);
    border: 1px dashed var(--bs-secondary-border-subtle);
    border-radius: 0.375rem;
}

.mo-page .mo-routing-test-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.mo-page .mo-routing-test-tag {
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-radius: 8px;
    padding: 0.05rem 0.4rem;
}

.mo-page .mo-routing-test-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mo-page .mo-routing-test-combo {
    min-width: 220px;
}

.mo-page .mo-routing-test-help {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* ──────────────────────────────────────────────────────────────────────────
   Lineage bar — clickable ancestor chain (Transport › Master › current) on the
   Master/House edit pages. Accent per level mirrors the builder cards:
   transport slate, master indigo, house teal.
   ────────────────────────────────────────────────────────────────────────── */
.mo-lineage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    margin: 0.5rem 0 0.85rem;
    background: var(--bs-tertiary-bg, #f5f6f8);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 10px;
}

.mo-lineage-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-body-bg);
    min-width: 0;
    text-align: left;
    --mo-lineage-accent: var(--bs-secondary-color);
}

.mo-lineage-chip--transport { --mo-lineage-accent: #475569; }
.mo-lineage-chip--master { --mo-lineage-accent: var(--bs-primary); }
.mo-lineage-chip--house { --mo-lineage-accent: var(--bs-teal, #0d9488); }

.mo-lineage-chip > i {
    font-size: 1.05rem;
    color: var(--mo-lineage-accent);
}

/* Navigable chips render as DxButtons (text mode) — re-assert the chip geometry over the
   dxbl-btn theme defaults. */
.mo-lineage-chip.dxbl-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.mo-lineage-chip.dxbl-btn:hover {
    border-color: color-mix(in srgb, var(--mo-lineage-accent) 55%, transparent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background: var(--bs-body-bg);
}

.mo-lineage-chip--current {
    border-color: color-mix(in srgb, var(--mo-lineage-accent) 45%, transparent);
    background: color-mix(in srgb, var(--mo-lineage-accent) 7%, var(--bs-body-bg));
}

.mo-lineage-chip--ghost { border-style: dashed; }

.mo-lineage-chip-text { display: flex; flex-direction: column; min-width: 0; }

.mo-lineage-chip-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    line-height: 1.15;
}

.mo-lineage-chip-sub {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-lineage-chip-sub--muted { font-weight: 400; color: var(--bs-secondary-color); }

.mo-lineage-sep { color: var(--bs-secondary-color); opacity: 0.55; font-size: 12px; }

.mo-lineage-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mo-lineage-note { font-size: 12px; color: var(--bs-secondary-color); }

/* Disclosure rows — collapsed field clusters inside form groups (vehicle classification,
   transport document). A DxButton (text mode) restyled as a quiet chevron + label + muted
   summary row; selectors target the button element DevExpress renders.
   center-aligned with a fixed min-height so the row keeps EXACTLY the same geometry whether
   the summary span is present (collapsed) or not (expanded) — baseline alignment made the
   label hop a few pixels on toggle. */
.mo-disclosure.dxbl-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    width: 100%;
    min-height: 1.75rem;
    padding: 0;
    margin: 0;
    text-align: left;
    color: var(--bs-body-color);
}
.mo-disclosure i {
    font-size: 11px;
    width: 1em;
    text-align: center;
    color: var(--bs-secondary-color);
}
.mo-disclosure-label { font-size: 13px; font-weight: 600; line-height: 1.75rem; }
.mo-disclosure-summary {
    font-size: 12.5px;
    color: var(--bs-secondary-color);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mo-disclosure:hover .mo-disclosure-label { color: var(--bs-primary); }

/* Children-list rows: the child summary is a navigation affordance (a text-mode DxButton),
   styled as a quiet link. */
.mo-child-link.dxbl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    color: var(--bs-body-color);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.mo-child-link i { color: var(--bs-teal, #0d9488); }
.mo-child-link:hover { text-decoration: underline; color: var(--bs-primary); }

/* ──────────────────────────────────────────────────────────────────────────
   Quick-registration consignment builder.
   DevExpress owns the layout and actions.
   ────────────────────────────────────────────────────────────────────────── */

/* DevExpress consignment card (MoConsignmentGroupDx) */
.mo-cgdx { margin-bottom: 0; }

/* Required-field marker on grid headers + per-row action cluster (move / duplicate / delete) */
.mo-cgdx-move { width: 104px; }

/* Dense rows — DxGrid's default cell padding is generous for an always-editable line-item grid.
   Selectors chain on the grid root (CssClass lands on .dxbl-grid) to out-specify the theme. */

/* Detail-row expander chevron. Blink (Chrome) rasterises DevExpress's expand-button icon — an
   external SVG-sprite <use> — with a stray 1px "ghost" pixel beside the chevron (a small dark
   dot; absent in Firefox, and not an addressable DOM node — colouring/removing the <use>s and
   layer promotion all failed to clear it). Sidestep the sprite entirely: hide the icon and draw
   the chevron from pure CSS borders. :has() points it down when the row is expanded — DevExpress
   inserts a row carrying a .dxbl-grid-detail-cell immediately after the open data row. */

/* Running structure summary */
.mo-page .mo-builder-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    font-size: 13px;
    color: var(--bs-secondary-color);
}

/* Result panel lines */
.mo-page .mo-result-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mo-page .mo-result-line i { color: var(--bs-secondary-color); }
.mo-page .mo-result-child { margin-left: 1.25rem; font-size: 13px; }