.load-order-redesign {
    min-height: 100%;
    padding: 10px 12px 16px;
    background: #f5f8fc;
    color: #06245d;
}

/* Only the top padding beyond the standard .app-page 4px is cancelled, so the header lands on the
   same base margin as Viagem.razor (12px from the left, 4px from the top of the page). */
.load-order-redesign .page-header {
    margin-bottom: -6px;
    margin-top: -6px;
}

.load-order-redesign .page-header-hero {
    align-items: center;
}

.load-order-redesign .page-header-title {
    align-items: center;
}

.load-order-redesign .page-header-title-icon {
    display: none;
}

.load-order-redesign .page-header-title-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.load-order-redesign .page-header-title h1 {
    font-size: 28px;
    font-weight: 850;
    line-height: 1.05;
}

.load-order-redesign .page-header-title-meta {
    align-items: center;
}

.load-order-redesign .page-header-record-mode {
    min-height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

/* Sizing of the header's buttons: a rule shared in EntityHeader.razor.css
   (.page-header-menu-row ::deep .menuItemBase.btn, .page-header-custom-action). */

.load-order-redesign .jump-form-shell-grid {
    width: 100%;
}

.load-order-dashboard {
    display: grid;
    gap: 12px;
}

/* Remarks: only a title + memo (without a card/group). The memo fills the page's
   free space (height via loadOrderLayout.fit). */
.load-order-notes-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 340px;
    min-width: 0;
}

.load-order-notes-shell .load-order-notes-title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #075bd3;
    font-size: 14px;
    font-weight: 900;
}

/* The DxMemo has internal divs; the whole chain is forced to fill the height so the
   textarea takes the maximum available height. A dedicated class is used
   (load-order-notes-memo, aplicada via CssClass ao elemento raiz do DxMemo) para
   so as not to depend on DevExpress's internal class names. */
.load-order-notes-shell .load-order-notes-memo {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    width: 100%;
}

.load-order-notes-shell .load-order-notes-memo * {
    min-height: 0;
}

.load-order-notes-shell .load-order-notes-memo > * {
    flex: 1 1 auto;
    height: 100% !important;
    width: 100%;
}

.load-order-notes-shell textarea {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
    resize: none;
}

.load-order-top-identification {
    min-width: 0;
}

/* Compact summary bar (always visible); large cards collapse. */
.load-order-summary-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #eaeef4;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(6, 36, 93, .06);
    margin-bottom: 8px;
    cursor: default;
    user-select: none;
}

.load-order-summary-bar-rows {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 6px;
}

.load-order-summary-bar-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    min-width: 0;
}

.load-order-summary-bar-fields.secondary {
    padding-top: 6px;
    border-top: 0.5px solid #eef2f7;
}

.load-order-summary-bar-fields.secondary .load-order-summary-item strong {
    font-size: 12px;
    font-weight: 500;
    color: #49658d;
}

/* Total e Faturado destacados a negrito. */
.load-order-summary-item.strong strong,
.load-order-summary-bar-fields.secondary .load-order-summary-item.strong strong {
    font-weight: 700;
    color: #06245d;
}

/* Clickable fields on the bar: they expand and focus the respective control. */
.load-order-summary-seg {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background .12s ease;
}

.load-order-summary-seg:hover {
    background: #eef4fd;
}

.load-order-summary-item {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.load-order-summary-item.wide {
    flex: 1 1 200px;
    max-width: 320px;
}

.load-order-summary-item span {
    font-size: 10px;
    color: #6b7a90;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.load-order-summary-item strong {
    font-size: 13px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact F4 inside the summary bar (it targets the ControlF4's real classes). */
.load-order-summary-item-edit {
    min-width: 150px;
    justify-content: flex-start;
}

.load-order-summary-f4 {
    min-width: 0;
    width: 100%;
}

/* Hides the ControlF4's empty internal label (we already have the bar's label). */
.load-order-summary-f4 .control-f4-root > label {
    display: none;
}

/* Compact editor and input, stable height. */
.load-order-summary-f4 .ctlf4-native-editor {
    min-height: 24px;
    border-radius: 6px;
}

.load-order-summary-f4 .ctlf4-native-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 22px;
    line-height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
}

/* It always reserves the space of the F4 button (invisible until hover) so the
   input does not change size when the button appears. */
.load-order-summary-f4 .ctlf4-native-f4-button {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    opacity: 0;
    visibility: hidden;
    font-size: 10px;
}

.load-order-summary-f4 .ctlf4-native-combobox:hover .ctlf4-native-f4-button,
.load-order-summary-f4 .ctlf4-native-combobox:focus-within .ctlf4-native-f4-button {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    opacity: 1;
    visibility: visible;
}

.load-order-summary-toggle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #B5D4F4;
    border-radius: 8px;
    background: #ffffff;
    color: #185FA5;
    cursor: pointer;
}

.load-order-summary-toggle:hover {
    background: #E6F1FB;
}

.load-order-top-identity-grid {
    display: grid;
    grid-template-areas:
        "order other totals"
        "resources resources resources";
    /* Narrow "Outros" column (stacked checkboxes only). */
    grid-template-columns: minmax(760px, 1.6fr) minmax(170px, .3fr) minmax(300px, .55fr);
    gap: 8px;
    align-items: stretch;
}

.load-order-top-summary-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.load-order-top-order-card {
    grid-area: order;
}

.load-order-top-reference-card {
    grid-area: reference;
}

.load-order-top-client-card {
    grid-area: client;
}

.load-order-top-resources-card {
    grid-area: resources;
}

.load-order-top-resources-row {
    grid-area: resources;
    min-width: 0;
    display: grid;
    /* Viagem/Viatura (estreitos) + Reboque (largo p/ tipo) + Motorista.
       (The Customer moved up to the order's card, next to the Goods.) */
    grid-template-columns: minmax(140px, .35fr) minmax(150px, .35fr) minmax(350px, 1fr) minmax(320px, 1.2fr);
    gap: 8px;
    align-items: stretch;
}


.load-order-top-client-card {
    grid-area: auto;
}

.load-order-top-client-mini-grid {
    display: grid;
    grid-template-columns: minmax(160px, .6fr) minmax(0, 1.4fr);
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.load-order-top-resources-row > .load-order-top-summary-card {
    grid-area: auto;
}

.load-order-top-trip-card {
    grid-area: trip;
}

.load-order-top-vehicle-card {
    grid-area: vehicle;
}

.load-order-top-trailer-card {
    grid-area: trailer;
}

.load-order-top-driver-card {
    grid-area: driver;
}

.load-order-top-other-card {
    grid-area: other;
}

.load-order-top-totals-card {
    grid-area: totals;
}

.load-order-workspace-ribbon {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

.load-order-top-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #003d8f;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.15;
}

.load-order-top-icon-box {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    border-radius: 7px;
    background: #eef6ff;
    color: #0057b8;
    font-size: 12px;
    font-weight: 850;
}

.load-order-top-order-grid,
.load-order-top-reference-grid,
.load-order-top-client-grid,
.load-order-top-resources-grid,
.load-order-top-resource-card-grid,
.load-order-top-driver-grid,
.load-order-top-merchandise-grid {
    display: grid;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.load-order-top-checkbox-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    align-content: start;
    min-width: 0;
    padding-top: 2px;
}

.load-order-top-status-row {
    /* Loaded and Delivered stacked, like the remaining checkboxes. */
    grid-template-columns: 1fr;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e7f0fb;
}

.load-order-top-state-strip,
.load-order-top-options-strip {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid #e7f0fb;
}

.load-order-top-state-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
}

.load-order-top-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    min-width: 0;
}

/* Each checkbox keeps its natural width and moves to the next row when it does not
   fit, instead of squeezing the labels until they overlap. */
.load-order-top-options-row .dxbs-checkbox,
.load-order-top-options-row .dxbl-checkbox {
    flex: 0 0 auto;
    white-space: nowrap;
}

.load-order-top-checkbox-row label,
.load-order-top-options-row label,
.load-order-top-checkbox-row .dxbs-checkbox,
.load-order-top-options-row .dxbs-checkbox,
.load-order-top-checkbox-row .dxbl-checkbox,
.load-order-top-options-row .dxbl-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    margin: 0;
    color: #06245d;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.load-order-top-checkbox-row .dxbs-checkbox *,
.load-order-top-checkbox-row .dxbl-checkbox *,
.load-order-top-options-row .dxbs-checkbox *,
.load-order-top-options-row .dxbl-checkbox *,
.load-order-top-checkbox-row .dxbs-checkbox label,
.load-order-top-checkbox-row .dxbl-checkbox label,
.load-order-top-options-row .dxbs-checkbox label,
.load-order-top-options-row .dxbl-checkbox label {
    font-size: 11px;
    line-height: 16px;
}

.load-order-top-order-grid {
    /* Compact fields, pushed to the left, with WRAP: when the page narrows,
       the last fields (State/V-Ref) move to the next row instead of
       overflowing over the Totals card. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: flex-end;
}

.load-order-top-order-grid > * {
    flex: 0 0 auto;
    min-width: 0;
}

.load-order-top-order-grid > *:nth-child(1) { width: 100px; }
.load-order-top-order-grid > *:nth-child(2) { width: 110px; }
.load-order-top-order-grid > *:nth-child(3) { width: 160px; }
.load-order-top-order-grid > *:nth-child(4) { width: 200px; }
.load-order-top-order-grid > *:nth-child(5) { width: 160px; }
.load-order-top-order-grid > *:nth-child(6) { flex: 1 1 180px; max-width: 340px; }

/* The load order code closes the row. Sized by class, not by position, because the series
   field is optional and shifts every sibling after it. */
.load-order-top-order-grid > .load-order-top-code-field { flex: 0 0 auto; width: 160px; max-width: none; }

.load-order-top-reference-grid {
    grid-template-columns: 1fr;
}

.load-order-top-client-grid {
    grid-template-columns: minmax(160px, .7fr) minmax(300px, 1.5fr);
}

.load-order-top-resources-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.load-order-top-resource-card-grid {
    grid-template-columns: 1fr;
}

.load-order-top-resource-card-grid-two {
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
}

.load-order-top-driver-grid {
    grid-template-columns: minmax(120px, .4fr) minmax(0, 1.6fr);
}

.load-order-top-merchandise-grid {
    grid-template-columns: minmax(160px, .6fr) minmax(0, 1.4fr);
}

.load-order-top-card-foot {
    margin-top: 2px;
    color: #49658d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.load-order-top-inline-merchandise .load-order-top-options-strip {
    margin-top: 8px;
    text-align: left;
}

.load-order-top-classification-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

/* auto-fit → classification and goods collapse to 1 column depending on the real
   width of the "Ordem" column (not of the viewport), preventing the goods from overflowing
   over the Totals card at intermediate widths. */
.load-order-top-order-secondary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e7f0fb;
    min-width: 0;
}

.load-order-top-inline-classification {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.load-order-top-inline-merchandise {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.load-order-top-totals-grid {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
}

.load-order-top-route-strip {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e7f0fb;
}

.load-order-top-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.load-order-top-totals-grid .jump-form-card-field {
    display: grid;
    grid-template-columns: minmax(70px, .7fr) minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.load-order-top-identification .load-order-top-totals-grid .jump-form-card-label {
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.load-order-top-identification .load-order-top-route-grid .jump-form-card-label {
    margin-bottom: 4px;
    text-align: center;
}

.load-order-top-identification .jump-form-card-field {
    min-width: 0;
}

.load-order-top-identification .jump-form-card-label {
    display: block;
    margin: 0 0 5px;
    color: #557097;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.load-order-top-identification .form-control,
.load-order-top-identification .dxbs-textbox,
.load-order-top-identification .dxbl-text-edit,
.load-order-top-identification .dxbs-spin-edit,
.load-order-top-identification .dxbl-spin-edit,
.load-order-top-identification .dxbs-combobox,
.load-order-top-identification .dxbl-combobox,
.load-order-top-identification .ctlf4-Size-label,
.load-order-top-identification .ctlf4-container,
.load-order-top-identification .ctlf4-control,
.load-order-top-identification input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border-color: #cfdded;
    border-radius: 6px;
    color: #06245d;
    font-size: 12px;
    box-shadow: none;
}

.load-order-top-totals-grid .form-control,
.load-order-top-totals-grid .dxbs-textbox,
.load-order-top-totals-grid .dxbl-text-edit,
.load-order-top-totals-grid .dxbs-spin-edit,
.load-order-top-totals-grid .dxbl-spin-edit,
.load-order-top-totals-grid input {
    min-height: 30px;
}

.load-order-transport-shell {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    /* The real height is set by JS (loadOrderLayout.fit), which measures the element's
       position and fills the free space down to the bottom — it adapts to the header being
       expanded/collapsed. This value is only a fallback before the JS runs. */
    display: flex;
    flex-direction: column;
    height: max(340px, calc(100vh / var(--jump-zoom, 1) - 260px));
}

.load-order-transport-splitter,
.load-order-transport-list-pane,
.load-order-transport-detail-pane,
.load-order-transport-tabs-section,
.load-order-transport-tabs-section .jump-form-tabs-card,
.load-order-transport-tabs-section .jump-form-tabs-body,
.load-order-transport-tabs-section .jump-form-tab-body,
.load-order-transport-tabs-section .jump-form-grid {
    max-width: 100%;
    min-width: 0;
}

/* Layout de 2 colunas (substitui o splitter): lista de CMRs | detalhe.
   CMRs column widened by +50%. */
.load-order-transport-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(375px, 480px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.load-order-transport-list-pane,
.load-order-transport-detail-pane {
    height: 100%;
    min-height: 0;
}

/* CMR list as its own card on the left. */
.load-order-transport-list-pane {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 10px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

/* Detail: transparent container; the internal cards show up separated. */
.load-order-transport-detail-pane {
    overflow: auto;
    background: transparent;
    padding: 0;
}

.load-order-cmr-table-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.load-order-cmr-table-grid,
.load-order-cmr-table-shell .dxbl-grid,
.load-order-cmr-table-shell .dxbs-gridview,
.load-order-cmr-table-shell .dxbs-gridview > .card {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.load-order-cmr-table-shell .dxbl-grid,
.load-order-cmr-table-shell .dxbs-gridview > .card {
    display: flex;
    flex-direction: column;
}

.load-order-cmr-table-shell .dxbl-grid-table-container,
.load-order-cmr-table-shell .dxbs-gridview > .card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.load-order-redesign .load-order-readonly-grid-clean,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-gridview,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-gridview > .card {
    border-color: #d9e7f6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-table-container,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-gridview > .card > .card-body,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-cell,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-row > td {
    background: #fff !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-header,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-header-row,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-header,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-header-row,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-table > thead > tr {
    background: #f8fbff !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-header-row > th,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-table > thead > tr > th,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-header-row > th {
    border-color: #d9e7f6 !important;
    color: #003a7a !important;
    font-weight: 800 !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-data-row > td,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-table > tbody > tr > td,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-data-row > td {
    border-color: #e6eef8 !important;
    background: #fff !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-cell,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-row > td {
    color: #64748b !important;
}

.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-cell > *,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-row > td > *,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data-area,
.load-order-redesign .load-order-readonly-grid-clean .dxbl-grid-empty-data,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-empty-data,
.load-order-redesign .load-order-readonly-grid-clean .dxbs-grid-empty-row > td > * {
    display: none !important;
}

.load-order-transport-detail-pane {
    overflow: hidden;
}

/* Without a CMR selected (e.g. all deleted) → the detail panel is faded.
   Non-editing is guaranteed by <fieldset disabled>; here we only give the visual hint. */
.load-order-transport-detail-pane.is-blocked .jump-form-tab-body {
    opacity: .7;
}

.load-order-transport-tabs-section .jump-form-tabs-card {
    overflow: auto;
}

.load-order-transport-cmr-card.jump-form-card {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    min-height: 0;
    padding: 8px 10px;
}

.load-order-transport-cmr-card .jump-form-card-title {
    margin-bottom: 4px;
}

.load-order-transport-cmr-card .jump-form-card-icon {
    width: 22px;
    height: 22px;
}

.load-order-transport-cmr-card .jump-form-card-field {
    width: auto;
    min-width: 0;
}

.load-order-transport-cmr-fields {
    display: grid;
    grid-template-columns: minmax(112px, .95fr) minmax(150px, 1.25fr) minmax(110px, .85fr) minmax(95px, .75fr) minmax(86px, auto);
    grid-auto-flow: column;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.load-order-transport-cmr-fields.with-load-unload {
    grid-template-columns: minmax(108px, .85fr) minmax(138px, 1fr) minmax(104px, .75fr) minmax(88px, .65fr) minmax(150px, 1.15fr) minmax(86px, auto);
}

.load-order-transport-cmr-fields.with-book {
    grid-template-columns: minmax(100px, .8fr) minmax(126px, 1fr) minmax(96px, .7fr) minmax(82px, .6fr) minmax(104px, auto) minmax(104px, .85fr) minmax(86px, auto);
}

.load-order-transport-book-check {
    align-self: end;
    display: flex;
    align-items: center;
    min-height: 34px;
    white-space: nowrap;
}

.load-order-transport-cmr-card .jump-form-card-label {
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1;
}

.load-order-transport-cmr-card .dxbl-text-edit,
.load-order-transport-cmr-card .dxbl-combobox,
.load-order-transport-cmr-card .dxbs-textbox,
.load-order-transport-cmr-card .dxbs-combobox,
.load-order-transport-cmr-card .ctlf4-Size-label,
.load-order-transport-cmr-card .ctlf4-container,
.load-order-transport-cmr-card input:not([type='checkbox']) {
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

.load-order-transport-ecmr-field {
    align-self: end;
}

.load-order-transport-ecmr-control {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}

.load-order-transport-ecmr-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.load-order-transport-ecmr-text {
    flex: 0 0 auto;
    color: #003d8f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.load-order-tab-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.load-order-code-lookup {
    width: min(190px, 100%);
    align-self: center;
}

.load-order-complete-fields.load-order-code-lookup .jump-form-card-label {
    display: none;
}

.load-order-code-lookup .jump-form-card-field {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.load-order-code-lookup .ctlf4-Size-label,
.load-order-code-lookup .ctlf4-container,
.load-order-code-lookup .ctlf4-control,
.load-order-code-lookup input {
    width: 100%;
    min-height: 40px;
}

.load-order-content-tabs {
    min-width: min(390px, 100%);
    margin-left: auto;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(16, 42, 84, .04);
}

.load-order-header-content-tabs {
    width: min(690px, calc(100vw / var(--jump-zoom, 1) - 32px));
    margin-left: 0;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
}

.load-order-workspace-tabs {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    /* Compact "tabbed" look (the same as the Route/Load tabs): flex auto-width,
       aligned left over a bottom line — not stretched to the full width. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    padding: 6px 8px 0;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.load-order-content-tab {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #49658d;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

/* Top workspace tabs in the "tabbed" style (the same as the Route/Load tabs). */
.load-order-workspace-tabs .load-order-content-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 750;
    color: #31476d;
}

.load-order-workspace-tabs .load-order-content-tab:hover {
    background: #f3f8ff;
    color: #0057b8;
}

.load-order-workspace-tabs .load-order-content-tab.active {
    background: #eef6ff;
    border-color: #b9d2f4;
    color: #0057b8;
    box-shadow: none;
}

.load-order-content-tab.active {
    background: #06245d;
    color: #fff;
    box-shadow: 0 8px 18px rgba(6, 36, 93, .18);
}

.load-order-kpi-strip {
    display: grid;
    grid-template-columns: minmax(230px, 1.6fr) minmax(100px, .75fr) minmax(115px, .8fr) minmax(120px, .9fr) minmax(210px, 1.35fr) minmax(105px, .8fr) minmax(105px, .8fr) minmax(130px, .85fr);
    align-items: stretch;
    min-height: 88px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    overflow: hidden;
}

.load-order-kpi-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 18px;
    border-left: 1px solid #e3edf8;
}

.load-order-kpi-item:first-child {
    border-left: 0;
}

.load-order-kpi-icon {
    --load-order-kpi-icon-bg: #f0f6ff;
    --load-order-kpi-icon-color: #245389;

    position: relative;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 8px;
    background: var(--load-order-kpi-icon-bg);
    color: var(--load-order-kpi-icon-color);
    font-size: 18px;
    line-height: 1;
}

.load-order-kpi-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.load-order-kpi-icon.client {
    --load-order-kpi-icon-bg: #eaf3ff;
    --load-order-kpi-icon-color: #0b5cad;
}

.load-order-kpi-icon.trip {
    --load-order-kpi-icon-bg: #fff1f2;
    --load-order-kpi-icon-color: #dc3545;
}

.load-order-kpi-icon.vehicle {
    --load-order-kpi-icon-bg: #ecfdf5;
    --load-order-kpi-icon-color: #16834a;
}

.load-order-kpi-icon.trailer {
    --load-order-kpi-icon-bg: #fff7e6;
    --load-order-kpi-icon-color: #c47a00;
}

.load-order-kpi-icon.driver {
    --load-order-kpi-icon-bg: #eef2ff;
    --load-order-kpi-icon-color: #4f46e5;
}

.load-order-kpi-icon.total {
    --load-order-kpi-icon-bg: #e8fbff;
    --load-order-kpi-icon-color: #0e7490;
}

.load-order-kpi-icon.kilometers {
    --load-order-kpi-icon-bg: #f0fdf4;
    --load-order-kpi-icon-color: #15803d;
}

.load-order-kpi-icon.time {
    --load-order-kpi-icon-bg: #f5f3ff;
    --load-order-kpi-icon-color: #7c3aed;
}

.load-order-kpi-item span:not(.load-order-kpi-icon) {
    display: block;
    margin-bottom: 6px;
    color: #506b96;
    font-size: 12px;
    font-weight: 800;
}

.load-order-kpi-item strong {
    display: block;
    min-width: 0;
    color: #06245d;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.load-order-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 560px);
    gap: 14px;
    align-items: start;
}

.load-order-main-column,
.load-order-side-column {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.load-order-side-column {
    position: sticky;
    top: calc(var(--jump-page-header-height, 0px) + 10px);
}

.load-order-panel {
    min-width: 0;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.load-order-panel-header,
.load-order-title-with-count,
.load-order-operations-toolbar,
.load-order-table-footer,
.load-order-pagination,
.load-order-route-strip,
.load-order-route-stop {
    display: flex;
    align-items: center;
}

.load-order-panel-header {
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 8px;
}

.load-order-panel h2,
.load-order-title-with-count h2,
.load-order-advanced-heading h2 {
    margin: 0;
    color: #06245d;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.15;
}

.load-order-title-with-count {
    gap: 12px;
}

.load-order-title-with-count span {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075bd3;
    font-size: 12px;
    font-weight: 900;
}

.load-order-operations-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px 14px;
    border-bottom: 1px solid #e8eff8;
}

.load-order-primary-action,
.load-order-secondary-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.load-order-primary-action {
    min-width: 178px;
    padding: 0 16px;
    border: 1px solid #9fc6f8;
    background: #eef6ff;
    color: #075bd3;
}

.load-order-secondary-action {
    min-width: 104px;
    padding: 0 14px;
    border: 1px solid #dbe7f6;
    background: #fff;
    color: #2d4770;
}

.load-order-search {
    flex: 1 1 320px;
    min-width: 220px;
    min-height: 38px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    margin: 0;
    border: 1px solid #d2e0f1;
    border-radius: 7px;
    background: #fff;
    color: #3b5c8b;
}

.load-order-search .oi:last-child {
    justify-self: center;
}

.load-order-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #06245d;
    font-size: 13px;
    font-weight: 650;
}

.load-order-search input::placeholder {
    color: #8a9ab3;
}

.load-order-table-wrap {
    overflow-x: auto;
    padding: 0 12px;
}

.load-order-operations-table {
    width: 100%;
    min-width: 910px;
    border-collapse: separate;
    border-spacing: 0;
    color: #06245d;
    font-size: 13px;
}

.load-order-operations-table th {
    height: 40px;
    padding: 0 10px;
    color: #5a7196;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e8eff8;
}

.load-order-operations-table td {
    height: 48px;
    padding: 0 10px;
    font-weight: 750;
    border-bottom: 1px solid #e8eff8;
    white-space: nowrap;
}

.load-order-operations-table tbody tr {
    cursor: pointer;
}

.load-order-operations-table tbody tr:hover {
    background: #f8fbff;
}

.load-order-operations-table tbody tr.selected {
    background: #edf5ff;
    outline: 1px solid #65a6ff;
    outline-offset: -1px;
}

.load-order-operations-table tbody tr.selected td:first-child {
    box-shadow: inset 4px 0 0 #075bd3;
}

.load-order-operation-badge {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
}

.load-order-operation-badge.load {
    border-color: #a9d0ff;
    background: #eef6ff;
    color: #075bd3;
}

.load-order-operation-badge.unload {
    border-color: #fed0a8;
    background: #fff4e8;
    color: #e26013;
}

.load-order-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #075bd3;
}

.load-order-row-menu {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #173a70;
    font-size: 16px;
    font-weight: 900;
}

.load-order-row-menu:hover {
    background: #eaf3ff;
}

/* Estados vazios: `.jump-form-empty-state` (+ `-compact` / `-fill` / `-plain`).
   The empty cell of the operations table keeps the height of a full row. */
.load-order-operations-table td.jump-form-empty-state {
    height: 88px;
}

.load-order-table-footer {
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 16px;
    color: #34517b;
    font-size: 13px;
    font-weight: 750;
}

.load-order-pagination {
    gap: 8px;
}

.load-order-pagination button,
.load-order-pagination strong {
    width: 38px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 7px;
    background: #fff;
    color: #075bd3;
}

.load-order-pagination strong {
    border-color: #075bd3;
    background: #075bd3;
    color: #fff;
}

.load-order-route-panel,
.load-order-summary-panel {
    padding: 16px 20px;
}

.load-order-route-panel h2,
.load-order-summary-panel h2,
.load-order-validation-panel h2 {
    margin-bottom: 14px;
}

.load-order-route-strip {
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.load-order-route-stop {
    gap: 10px;
    flex: 0 0 auto;
    min-width: 142px;
}

.load-order-route-index {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.load-order-route-index.load {
    background: #075bd3;
}

.load-order-route-index.unload {
    background: #f27a1a;
}

.load-order-route-copy {
    min-width: 0;
}

.load-order-route-copy strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    color: #06245d;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-route-copy div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.load-order-route-copy small {
    color: #49658d;
    font-size: 12px;
    font-weight: 800;
}

.load-order-route-arrow {
    flex: 0 0 auto;
    color: #8ca1bd;
    font-size: 24px;
    font-weight: 500;
}

.load-order-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(210px, 1.35fr);
    gap: 12px;
    align-items: stretch;
}

.load-order-summary-card {
    min-width: 0;
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

.load-order-summary-card span,
.load-order-summary-meta span {
    color: #5a7196;
    font-size: 12px;
    font-weight: 800;
}

.load-order-summary-card strong {
    color: #06245d;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

.load-order-summary-meta {
    display: grid;
    gap: 8px;
    padding-left: 18px;
    border-left: 1px solid #dbe7f6;
}

.load-order-summary-meta div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.load-order-summary-meta strong {
    min-width: 0;
    overflow: hidden;
    color: #06245d;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-detail-panel {
    padding-bottom: 16px;
}

.load-order-detail-panel .load-order-panel-header {
    padding-bottom: 12px;
}

.load-order-detail-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 18px;
}

.load-order-detail-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e6effa;
    border-radius: 7px;
    background: #fbfdff;
}

.load-order-detail-group.metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.load-order-detail-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.load-order-detail-form label.span-2 {
    grid-column: 1 / -1;
}

.load-order-detail-form label.span-4 {
    grid-column: 1 / -1;
}

.load-order-detail-form label > span {
    color: #48638d;
    font-size: 12px;
    font-weight: 850;
}

.load-order-detail-form .form-control {
    width: 100%;
    min-height: 38px;
    border-color: #cfdceb;
    border-radius: 7px;
    color: #06245d;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.load-order-detail-form textarea.form-control {
    min-height: 72px;
    resize: vertical;
}

.load-order-detail-form small {
    justify-self: end;
    color: #7e90aa;
    font-size: 11px;
    font-weight: 750;
}

/* The detail panel pushes the empty state up against the rest of the card. */
.load-order-detail-panel > .jump-form-empty-state {
    margin: 0 16px 16px;
}

.load-order-validation-panel {
    padding: 16px 20px;
}

.load-order-validation-list {
    display: grid;
    gap: 10px;
}

.load-order-validation-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.load-order-validation-row span {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 1px solid;
    border-radius: 999px;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.load-order-validation-row.ok span {
    border-color: #20ba7b;
    color: #20a96f;
}

.load-order-validation-row.warning span {
    border-color: #f27a1a;
    color: #f27a1a;
}

.load-order-validation-row.missing span {
    border-color: #d64b4b;
    color: #d64b4b;
}

.load-order-validation-row strong {
    min-width: 0;
    overflow: hidden;
    color: #244269;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-validation-row em {
    color: #7d94b3;
    font-size: 18px;
    font-style: normal;
    line-height: 1;
}

.load-order-advanced-section {
    display: grid;
    gap: 6px;
    /* It brings the content panel closer to the workspace tabs bar (it cancels the
       DxGridLayout's row spacing that created a gap between them). */
    margin-top: -10px;
}

.load-order-complete-grid {
    display: grid;
    grid-template-columns: minmax(255px, .95fr) minmax(255px, .95fr) minmax(260px, .95fr) minmax(340px, 1.25fr);
    gap: 8px;
    align-items: start;
}

.load-order-complete-fragment {
    display: contents;
}

.load-order-complete-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #cfe0f4;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(12, 42, 84, .04);
}

.load-order-identification-panel {
    grid-column: 1 / span 3;
    grid-row: 1;
    min-height: 0;
}

.load-order-resources-panel {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.load-order-billing-panel {
    grid-column: 4;
    grid-row: 3;
}

.load-order-totals-panel {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.load-order-route-values-panel {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.load-order-other-panel {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.load-order-options-panel {
    grid-column: 3;
    grid-row: 2;
}

.load-order-complete-grid-compact {
    grid-template-columns: minmax(720px, 1180px) minmax(320px, 380px) minmax(0, 1fr);
    align-items: start;
}

.load-order-complete-grid-compact .load-order-identification-panel {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.load-order-complete-grid-compact .load-order-resources-panel {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.load-order-complete-grid-compact .load-order-route-values-panel {
    grid-column: 1;
    grid-row: 2;
}

.load-order-complete-grid-compact .load-order-options-panel {
    grid-column: 2;
    grid-row: 2;
}

.load-order-complete-grid-compact .load-order-billing-panel {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.load-order-complete-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.load-order-complete-panel-title span {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    background: #edf5ff;
    color: #075bd3;
    font-size: 11px;
    font-weight: 900;
}

.load-order-complete-panel-title h3 {
    margin: 0;
    color: #075bd3;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
}

.load-order-complete-fields {
    display: grid;
    gap: 6px 8px;
    min-width: 0;
}

.load-order-complete-fields.identification {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.load-order-complete-fields.resources,
.load-order-complete-fields.billing,
.load-order-complete-fields.totals {
    grid-template-columns: 1fr;
}

.load-order-complete-fields.route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.load-order-complete-grid-compact .load-order-complete-fields.resources {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.load-order-complete-grid-compact .load-order-driver-row {
    grid-column: span 2;
}

.load-order-complete-grid-compact .load-order-complete-fields.billing {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.load-order-complete-grid-compact .load-order-options-panel .load-order-checkbox-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.load-order-totals-panel .load-order-complete-fields.totals {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
}

.load-order-complete-fields .jump-form-card-field {
    min-width: 0;
}

.load-order-complete-fields .jump-form-card-field.span-2 {
    grid-column: span 2;
}

.load-order-complete-fields .jump-form-card-label {
    display: block;
    margin: 0 0 4px;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.load-order-complete-fields .form-control,
.load-order-complete-fields .dxbs-textbox,
.load-order-complete-fields .dxbl-text-edit,
.load-order-complete-fields .dxbs-spin-edit,
.load-order-complete-fields .dxbl-spin-edit,
.load-order-complete-fields .dxbs-combobox,
.load-order-complete-fields .dxbl-combobox,
.load-order-complete-fields .ctlf4-container,
.load-order-complete-fields .ctlf4-control,
.load-order-complete-fields input {
    min-height: 34px;
    border-color: #cbdcf0;
    border-radius: 7px;
    background: #fff;
    color: #06245d;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.load-order-complete-fields .form-control:disabled,
.load-order-complete-fields .form-control[disabled] {
    background: #f5f7fa;
    color: #7a879c;
}

.load-order-total-value-input,
.load-order-total-value-input input,
.load-order-total-value-input .dxbl-text-edit-input {
    text-align: right;
}

.load-order-transport-fieldset {
    /* flex column com gap separa os grupos (CMR, Rota, Carga/Descarga, …).
       flex:1 + the growing stack make the Instructions fill the free space. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    min-inline-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.load-order-transport-tabs-section .jump-form-tab-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.load-order-transport-stack {
    flex: 1 1 auto;
    min-height: 0;
}

.load-order-transport-fieldset:disabled {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.load-order-transport-no-cmr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    color: #0b2f69;
    background: #eef4ff;
    border: 1px solid #d8e7ff;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Numeric editors (int/double/float) are right-aligned across the whole page. */
.load-order-dashboard .dxbs-spin-edit input,
.load-order-dashboard .dxbl-spin-edit input,
.load-order-dashboard .dxbl-spin-edit .dxbl-text-edit-input,
.load-order-dashboard .load-order-numeric-input,
.load-order-dashboard .load-order-numeric-input input,
.load-order-dashboard .load-order-numeric-input .dxbl-text-edit-input {
    text-align: right;
}

/* Right alignment of ALL numeric controls (int/float/double/decimal),
   including dialogs and popups (which may render outside the page's wrapper).
   Global rule: any DxSpinEdit / numeric input is aligned right.
   The !important is needed to beat the DevExpress theme's styles on the input. */
.dxbs-spin-edit input,
.dxbl-spin-edit input,
.dxbl-spin-edit .dxbl-text-edit-input,
.dxbl-text-edit.dxbl-spin-edit input,
input[type="number"],
.load-order-numeric-input,
.load-order-numeric-input input,
.load-order-numeric-input .dxbl-text-edit-input {
    text-align: right !important;
}

.load-order-complete-fields .ctlf4-Size-label {
    width: 100%;
    min-width: 0;
}

.load-order-driver-row {
    display: grid;
    grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr);
    gap: 6px;
}

.load-order-checkbox-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 6px;
    align-items: center;
    padding-top: 2px;
}

.load-order-options-panel .load-order-checkbox-row {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.load-order-checkbox-row label,
.load-order-checkbox-row .dxbs-checkbox,
.load-order-checkbox-row .dxbl-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
    margin: 0;
    color: #06245d;
    font-size: 11px;
    font-weight: 650;
    line-height: 16px;
}

.load-order-checkbox-row .dxbs-checkbox *,
.load-order-checkbox-row .dxbl-checkbox *,
.load-order-checkbox-row .dxbs-checkbox label,
.load-order-checkbox-row .dxbl-checkbox label {
    font-size: 11px;
    line-height: 16px;
}

.load-order-checkbox-row input[type="checkbox"] {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin: 0;
    vertical-align: middle;
}

.load-order-details-command,
.load-order-transport-command {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(520px, auto);
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid #cfe0f4;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(7, 91, 211, .08), rgba(22, 198, 255, .04) 38%, rgba(255, 255, 255, .92)),
        #fff;
    box-shadow: 0 14px 30px rgba(16, 42, 84, .07);
}

.load-order-details-command-copy,
.load-order-transport-command-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.load-order-details-command-icon,
.load-order-transport-command-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 8px;
    background: #075bd3;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 14px 28px rgba(7, 91, 211, .22);
}

.load-order-command-title {
    margin: 0;
    color: #06245d;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
}

.load-order-command-description {
    margin: 4px 0 0;
    color: #557097;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.load-order-details-command-stats,
.load-order-transport-command-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    gap: 8px;
    min-width: 0;
}

.load-order-transport-command-metrics {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
}

.load-order-details-command-stats div,
.load-order-transport-command-metrics div {
    min-width: 0;
    min-height: 48px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(207, 224, 244, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.load-order-details-command-stats div.active,
.load-order-transport-command-metrics div.active {
    border-color: #8ac4ff;
    background: #eef7ff;
    box-shadow: inset 3px 0 0 #075bd3;
}

.load-order-details-command-stats span,
.load-order-transport-command-metrics span {
    color: #557097;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.load-order-details-command-stats strong,
.load-order-transport-command-metrics strong {
    min-width: 0;
    overflow: hidden;
    color: #06245d;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-details-tabs-section {
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    overflow: hidden;
}

.load-order-details-tabs-top {
    margin-top: 0;
}

.load-order-details-tabs-section .jump-form-tabs-strip {
    gap: 5px;
    padding: 8px 10px 0;
    border-bottom: 1px solid #dbe7f6;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.load-order-transport-tabs-section .jump-form-tabs-strip {
    gap: 4px;
    align-items: center;
    overflow: visible;
    padding: 6px 8px 0;
    border-bottom: 1px solid #dbe7f6;
    background: #fff;
}

.load-order-details-tabs-top .jump-form-tabs-strip {
    position: relative;
    z-index: 2;
    align-items: flex-end;
    overflow-x: auto;
    scrollbar-width: thin;
}

.load-order-details-tabs-section .jump-form-tabs-button {
    position: relative;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 850;
}

/* "Tabbed" style (the same as the Route/Load tabs): rounded top corners,
   active in light blue over the bar's line. */
.load-order-transport-tabs-section .jump-form-tabs-button {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 750;
}

.load-order-details-tabs-section .jump-form-tabs-button.active {
    background: #eef6ff;
    border-color: #b9d2f4;
    color: #0057b8;
}

.load-order-transport-tabs-section .jump-form-tabs-button:hover {
    background: #f3f8ff;
    color: #0057b8;
}

.load-order-transport-tabs-section .jump-form-tabs-button.active {
    background: #eef6ff;
    border-color: #b9d2f4;
    color: #0057b8;
    box-shadow: none;
}

.load-order-details-tabs-section .jump-form-tabs-button.active::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #075bd3, #20c8ff);
}

.load-order-details-tabs-section .jump-form-tabs-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.load-order-details-tabs-section .jump-form-tabs-body {
    padding: 10px;
    background: #fff;
}

.load-order-details-tab-body {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 0 8px 8px;
}

.load-order-complete-panel-title-rich {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.load-order-complete-panel-title-rich div {
    min-width: 0;
}

.load-order-complete-panel-title-rich small {
    display: block;
    margin-top: 3px;
    color: #557097;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.load-order-identification-state {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.load-order-identification-state.new {
    border-color: #b9edc9;
    background: #ecfdf3;
    color: #087c34;
}

.load-order-identification-state.edit {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #075bd3;
}

.load-order-identification-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    gap: 12px;
    padding-top: 2px;
}

.load-order-identification-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.load-order-identification-layout.compact {
    grid-template-columns: 1fr;
}

.load-order-identification-layout.compact .load-order-identification-main {
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
    align-items: start;
}

.load-order-field-cluster {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e2edf9;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.load-order-field-cluster.primary {
    border-color: #cfe5ff;
    background: #f8fbff;
}

.load-order-field-cluster-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #075bd3;
}

.load-order-field-cluster-title span {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    background: #edf5ff;
    font-size: 11px;
}

.load-order-field-cluster-title strong {
    color: #003d8f;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.load-order-complete-fields.identification.identity-grid {
    grid-template-columns: minmax(92px, .6fr) minmax(120px, .8fr) minmax(110px, .75fr) minmax(140px, 1fr) repeat(2, minmax(0, 1.15fr));
}

.load-order-complete-fields.identification.billing-grid {
    grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(0, 1.2fr)) minmax(140px, .9fr) repeat(2, minmax(0, 1.1fr));
}

.load-order-complete-fields.identification.classification-grid {
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr);
}

.load-order-identification-aside {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.load-order-context-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

.load-order-context-card-title {
    color: #003d8f;
    font-size: 13px;
    font-weight: 900;
}

.load-order-context-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid #edf3fb;
}

.load-order-context-row span,
.load-order-context-check strong {
    color: #557097;
    font-size: 11px;
    font-weight: 800;
}

.load-order-context-row strong {
    min-width: 0;
    overflow: hidden;
    color: #06245d;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-context-card.validation {
    background: #fbfdff;
}

.load-order-context-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 26px;
}

.load-order-context-check span {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 1px solid;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.load-order-context-check.ok span {
    border-color: #20ba7b;
    background: #ecfdf3;
    color: #15803d;
}

.load-order-context-check.warning span {
    border-color: #f4a83d;
    background: #fff7ed;
    color: #c2410c;
}

.load-order-context-check.missing span {
    border-color: #ef4444;
    background: #fff1f2;
    color: #d13b3b;
}

.load-order-context-check strong {
    min-width: 0;
    overflow: hidden;
    color: #244269;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-transport-shell {
    gap: 10px;
}

.load-order-transport-command {
    grid-template-columns: minmax(300px, 1fr) minmax(430px, auto);
}

.load-order-transport-splitter {
    /* It fills the whole height of the shell (which in turn fills the page). */
    flex: 1 1 auto;
    min-height: 0;
    border-color: #dbe7f6 !important;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    overflow: hidden;
}

.load-order-transport-detail-pane {
    background: transparent;
}

/* A flex chain so the height reaches the Instructions memo (which fills the rest). */
.load-order-transport-tabs-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.load-order-transport-tabs-section .jump-form-tabs-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.load-order-transport-tabs-section .jump-form-tabs-body {
    padding: 10px 10px 12px;
    background: transparent;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1500px) {
    .load-order-kpi-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 76px;
    }

    .load-order-kpi-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
        border-left: 1px solid #e3edf8;
        border-top: 0;
    }

    .load-order-kpi-item:nth-child(4n + 1) {
        border-left: 0;
    }

    .load-order-kpi-item:nth-child(n + 5) {
        border-top: 1px solid #e3edf8;
    }

    .load-order-kpi-item:first-child {
        border-left: 0;
    }

    .load-order-kpi-icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .load-order-kpi-item span:not(.load-order-kpi-icon) {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .load-order-kpi-item strong {
        font-size: 13px;
    }

    .load-order-main-layout {
        grid-template-columns: 1fr;
    }

    .load-order-side-column {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    }

    .load-order-complete-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .load-order-top-identity-grid {
        grid-template-areas:
            "order totals"
            "other totals"
            "resources resources";
        grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
    }

    .load-order-top-resources-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-order-workspace-ribbon {
        grid-template-columns: 1fr;
    }

    .load-order-top-resources-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .load-order-details-command,
    .load-order-transport-command {
        grid-template-columns: 1fr;
    }

    .load-order-details-command-stats,
    .load-order-transport-command-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .load-order-identification-layout {
        grid-template-columns: 1fr;
    }

    .load-order-identification-layout.compact .load-order-identification-main {
        grid-template-columns: 1fr;
    }

    .load-order-identification-panel,
    .load-order-resources-panel,
    .load-order-billing-panel,
    .load-order-totals-panel,
    .load-order-route-values-panel,
    .load-order-other-panel,
    .load-order-options-panel {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 1100px) {
    .load-order-redesign {
        padding: 8px;
    }

    .load-order-redesign .page-header-title-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .load-order-summary-grid,
    .load-order-side-column,
    .load-order-top-identity-grid,
    .load-order-complete-grid {
        grid-template-columns: 1fr;
    }

    .load-order-top-identity-grid {
        grid-template-areas:
            "order"
            "other"
            "totals"
            "resources";
    }

    .load-order-top-resources-row {
        grid-template-columns: 1fr;
    }

    .load-order-top-order-grid,
    .load-order-top-client-grid,
    .load-order-top-resources-grid,
    .load-order-top-resource-card-grid,
    .load-order-top-resource-card-grid-two,
    .load-order-top-driver-grid,
    .load-order-top-order-secondary-grid,
    .load-order-top-merchandise-grid,
    .load-order-top-route-grid,
    .load-order-top-classification-grid {
        grid-template-columns: 1fr;
    }

    .load-order-workspace-ribbon {
        grid-template-columns: 1fr;
    }

    .load-order-workspace-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-order-top-checkbox-row {
        grid-template-columns: 1fr;
    }

    .load-order-top-options-row {
        grid-template-columns: 1fr;
    }

    .load-order-details-command-stats,
    .load-order-transport-command-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-order-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-order-kpi-item {
        border-left: 1px solid #e3edf8;
        border-top: 1px solid #e3edf8;
    }

    .load-order-tab-row {
        align-items: stretch;
        flex-direction: column;
    }

    .load-order-content-tabs {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .load-order-kpi-item:nth-child(2n + 1) {
        border-left: 0;
    }

    .load-order-kpi-item:nth-child(-n + 2) {
        border-top: 0;
    }

    .load-order-kpi-item:first-child {
        border-top: 0;
    }

    .load-order-operations-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .load-order-primary-action,
    .load-order-secondary-action,
    .load-order-search {
        width: 100%;
    }

    .load-order-detail-form {
        grid-template-columns: 1fr;
    }

    .load-order-detail-group.metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-order-complete-fields.identification,
    .load-order-complete-fields.identification.identity-grid,
    .load-order-complete-fields.identification.billing-grid,
    .load-order-complete-fields.identification.classification-grid,
    .load-order-totals-panel .load-order-complete-fields.totals,
    .load-order-complete-grid-compact .load-order-complete-fields.resources,
    .load-order-complete-grid-compact .load-order-complete-fields.billing,
    .load-order-complete-grid-compact .load-order-options-panel .load-order-checkbox-row,
    .load-order-complete-grid-compact .load-order-driver-row,
    .load-order-complete-fields.route,
    .load-order-checkbox-row,
    .load-order-top-checkbox-row,
    .load-order-options-panel .load-order-checkbox-row {
        grid-template-columns: 1fr;
    }

    .load-order-complete-fields .jump-form-card-field.span-2 {
        grid-column: auto;
    }

    .load-order-complete-grid-compact .load-order-identification-panel,
    .load-order-complete-grid-compact .load-order-resources-panel,
    .load-order-complete-grid-compact .load-order-route-values-panel,
    .load-order-complete-grid-compact .load-order-options-panel,
    .load-order-complete-grid-compact .load-order-billing-panel {
        grid-column: auto;
        grid-row: auto;
    }

    .load-order-complete-grid-compact .load-order-driver-row {
        grid-column: auto;
    }

    .load-order-identification-panel {
        min-height: 0;
    }
}

@media (max-width: 680px) {
    .load-order-kpi-strip {
        grid-template-columns: 1fr;
    }

    .load-order-kpi-item,
    .load-order-kpi-item:nth-child(2n + 1) {
        border-left: 0;
    }

    .load-order-kpi-item:nth-child(n + 2) {
        border-top: 1px solid #e3edf8;
    }

    .load-order-content-tabs {
        width: 100%;
    }

    .load-order-details-command,
    .load-order-transport-command {
        padding: 12px;
    }

    .load-order-details-command-copy,
    .load-order-transport-command-copy {
        align-items: flex-start;
    }

    .load-order-details-command-stats,
    .load-order-transport-command-metrics {
        grid-template-columns: 1fr;
    }

    .load-order-workspace-tabs {
        grid-template-columns: 1fr;
    }

    .load-order-top-totals-grid .jump-form-card-field {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .load-order-panel-header,
    .load-order-operations-toolbar,
    .load-order-table-footer,
    .load-order-route-panel,
    .load-order-summary-panel,
    .load-order-validation-panel {
        padding-right: 12px;
        padding-left: 12px;
    }

    .load-order-detail-form {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

    .load-order-detail-group,
    .load-order-detail-group.metrics {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .load-order-detail-form label.span-2,
    .load-order-detail-form label.span-4 {
        grid-column: auto;
    }

    .load-order-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==== Route general data — cards view (GeneralDataCards.razor) ==== */
.load-order-gd {
    display: grid;
    gap: 14px;
}

/* Height of the cards+map area: it fills without exceeding the window.
   The offset (620px) covers the header + the top cards + the tab bars.
   max() guarantees a comfortable minimum on small screens. */
.load-order-gd-layout {
    display: grid;
    grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    height: max(340px, calc(100vh / var(--jump-zoom, 1) - 620px));
}

/* Top row of the map's column: buttons + timeline. */
.load-order-gd-toprow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Buttons aligned to the top (level with the timeline's dates). */
.load-order-gd-toprow .load-order-gd-head-actions {
    margin-top: 2px;
}

.load-order-gd-toprow .load-order-gd-timeline {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -20px;
}

.load-order-gd-toprow .load-order-gd-head-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.load-order-gd-list {
    display: grid;
    gap: 10px;
    min-width: 0;
    align-content: start;
    overflow-y: auto;
    height: 100%;
    padding-right: 8px;
}

.load-order-gd-map {
    min-width: 0;
    height: 100%;
    border: 0.5px solid #dbe7f6;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.load-order-gd-map .load-order-map-panel,
.load-order-gd-map .load-order-map-panel-map {
    width: 100%;
    height: 100%;
}

/* The route's URL is a second row of the panel: the map keeps the remaining height. */
.load-order-gd-map .load-order-map-panel {
    grid-template-rows: minmax(0, 1fr) auto;
    padding-bottom: 8px;
}

.load-order-gd-map .load-order-map-panel-map {
    height: auto;
    min-height: 0;
}

.load-order-gd-map .jump-form-empty-state {
    padding: 16px;
}

@media (max-width: 1100px) {
    .load-order-gd-layout {
        grid-template-columns: 1fr;
    }
}

.load-order-gd-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* Coluna direita: timeline (topo) + mapa (preenche o resto). */
.load-order-gd-mapcol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    height: 100%;
}

.load-order-gd-mapcol .load-order-gd-map {
    flex: 1 1 auto;
    min-height: 0;
}

/* "See full route" button over the map (a Leaflet control). */
.load-order-map-fit-control a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #185FA5;
    font-size: 13px;
    background: #ffffff;
}

.load-order-map-fit-control a:hover {
    background: #E6F1FB;
}

/* ==== Operational timeline (above the map) — without a box ==== */
.load-order-gd-timeline {
    min-width: 0;
    padding: 0 4px;
}

.load-order-gd-timeline-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 16px 6px;
}

/* connecting line, centred in the middle of the points */
.load-order-gd-timeline-track::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    right: 12px;
    height: 3px;
    background: #dbe7f6;
    border-radius: 2px;
}

.load-order-gd-timeline-node {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.load-order-gd-timeline-node .tl-date {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #888780;
    white-space: nowrap;
}

.load-order-gd-timeline-node .tl-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(6, 36, 93, .25);
}

.load-order-gd-timeline-node .tl-label {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 600;
    color: #06245d;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-gd-timeline-node.selected .tl-dot {
    box-shadow: 0 0 0 3px #fce7a3;
}

.load-order-gd-head-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.load-order-gd-head-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #E6F1FB;
    color: #185FA5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.load-order-gd-head-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: #06245d;
    line-height: 1.1;
}

.load-order-gd-head-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #888780;
}

.load-order-gd-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-order-gd-head-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #185FA5;
    font-size: 18px;
    cursor: pointer;
}

.load-order-gd-head-btn:hover {
    color: #0c447c;
}

.load-order-gd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 0.5px solid #dbe7f6;
    border-left: 3px solid #dbe7f6;
    border-radius: 12px;
    padding: 6px 14px;
    box-shadow: 0 1px 4px rgba(6, 36, 93, .12);
}

/* On hover, the card rises above the following ones so the post-it
   (the remark's tooltip) is not hidden behind the card below. */
.load-order-gd-card:hover {
    z-index: 20;
}

.load-order-gd-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.load-order-gd-card-expand {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid #e7f0fb;
}

.load-order-gd-inline-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 160px;
}

.load-order-gd-inline-field.compact {
    flex: 0 0 110px;
}

.load-order-gd-inline-field label {
    font-size: 12px;
    font-weight: 600;
    color: #49658d;
    text-align: center;
}

.load-order-gd-inline-field input[type="number"] {
    text-align: right;
}

.load-order-gd-card-load {
    border-left-color: #EF9F27;
}

.load-order-gd-card-unload {
    border-left-color: #639922;
}

.load-order-gd-card-neutral {
    border-left-color: #B4B2A9;
}

.load-order-gd-card-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Left column of the card: number (top) + edit (bottom). */
.load-order-gd-card-badgecol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.load-order-gd-badge {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    flex: 0 0 auto;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(6, 36, 93, .25);
}

.load-order-gd-badge-load {
    background: #FAEEDA;
    color: #854F0B;
}

.load-order-gd-badge-unload {
    background: #EAF3DE;
    color: #3B6D11;
}

.load-order-gd-badge-neutral {
    background: #F1EFE8;
    color: #5F5E5A;
}

.load-order-gd-card-copy {
    min-width: 0;
    text-align: left;
}

.load-order-gd-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #06245d;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-gd-card-subtitle {
    font-size: 12px;
    color: #888780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-gd-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Clickable segments of the card (they expand and focus the respective field). */
.load-order-gd-seg {
    cursor: pointer;
    border-radius: 4px;
}

.load-order-gd-seg:hover {
    background: #eef4fd;
    text-decoration: underline;
}

/* The card's title is clickable but stays intact (without colour/underline). */
.load-order-gd-card-title.load-order-gd-seg:hover {
    background: transparent;
    text-decoration: none;
}

.load-order-gd-sep {
    color: #b4b2a9;
    padding: 0 2px;
}

.load-order-gd-kms {
    font-size: 13px;
    color: #5f6b80;
    white-space: nowrap;
}

.load-order-gd-kms-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Post-it style icon + a "written paper" tooltip with the remark. */
.load-order-gd-note {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.load-order-gd-note-icon {
    color: #E0A700;
    font-size: 14px;
    cursor: help;
}

/* Tooltip flutuante (post-it) posicionado no cursor via position:fixed —
   it escapes the list's overflow/scroll and is never left behind the cards. */
.load-order-gd-note-tip-float {
    position: fixed;
    z-index: 6000;
    max-width: 260px;
    max-height: 220px;
    overflow: auto;
    padding: 10px 12px;
    background: #fff7ad;
    color: #3c3618;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid #ecdc78;
    border-radius: 3px;
    box-shadow: 0 8px 18px rgba(30, 25, 0, .22);
    transform: rotate(-1.5deg);
    pointer-events: none;
}

.load-order-gd-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.load-order-gd-icon-btn {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #185FA5;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.load-order-gd-icon-btn:hover {
    background: #E6F1FB;
}

/* ==== Pins coloridos do mapa (Leaflet divIcon) ==== */
.load-order-map-pin-wrapper {
    background: transparent;
    border: 0;
    position: relative;
    overflow: visible;
}

.load-order-map-pin {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(6, 36, 93, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.load-order-map-pin span {
    transform: rotate(45deg);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ==== Operation editing dialog (GeneralDataEditForm.razor) ====
   It reuses the Trip's jump-dialog-* base; it only adjusts the field grid. */
/* Above the EntityHeader's layers (KPIs: z-index 1102), but below the
   Blazored modal (z-index 10000) so the ControlF4's selection grid
   (F4) abrir POR CIMA deste popup e o duplo-clique selecionar. */
.load-order-gd-popup-backdrop {
    z-index: 1200;
}

/* The popup lives inside the page's content; an ancestor creates a stacking
   context that prevents the backdrop from going over the fixed top bars
   (New/Save actions, navbar), however high its z-index is. While
   the popup is open, those bars drop behind the backdrop. */
body:has(.load-order-gd-popup-backdrop) .app-page-topbar,
body:has(.load-order-gd-popup-backdrop) .page-header-topbar,
body:has(.load-order-gd-popup-backdrop) .top-row {
    z-index: 0 !important;
}

/* This popup has only 2 elements in the header (title + close); the generic grid
   assumes 3 (auto 1fr auto) and left the X in the centre. Here the title takes up the space
   and the X sits against the right. */
.load-order-gd-popup-head {
    grid-template-columns: 1fr auto;
}

.load-order-gd-popup-head > div {
    text-align: left;
}

.load-order-gd-popup-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #06245d;
}

.load-order-gd-popup-head span {
    font-size: 12px;
    color: #888780;
}

/* Actions in the popup's header (the user fields "..." button + close). */
.load-order-gd-popup-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-order-popup-userfields-toggle.active {
    background: #eef6ff;
    color: #0057b8;
}

/* Floating panel of the user fields inside the popup: the same visual
   frame as the EntityHeader's (UserFieldsPanel), anchored under the header. The popup
   (.jump-dialog) does overflow:hidden + flex, so the panel is positioned
   absolutely relative to the dialog. */
.load-order-gd-popup {
    position: relative;
}

.load-order-popup-userfields-panel {
    position: absolute;
    top: 62px;
    right: 14px;
    width: min(440px, calc(100% - 28px));
    max-height: calc(100% - 130px);
    overflow-y: auto;
    z-index: 6;
    border: 1px solid #d9e7fb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(9, 39, 88, .18);
}

.load-order-gd-group {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #eaeef4;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 12px;
}

.load-order-gd-group-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7a90;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.load-order-gd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.load-order-gd-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 160px;
}

.load-order-gd-field.wide {
    flex: 1 1 260px;
}

.load-order-gd-field.compact {
    flex: 0 0 108px;
}

/* Horizontal field (label beside it) — e.g. Totalizador */
.load-order-gd-field.inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-bottom: 4px;
}

.load-order-gd-field.inline label {
    margin: 0;
}

/* Extra spacing on the right (e.g. between Date and Time) */
.load-order-gd-field.spaced-right {
    margin-right: 16px;
}

.load-order-gd-field label {
    font-size: 12px;
    font-weight: 600;
    color: #49658d;
    text-align: center;
}

.load-order-gd-field textarea.form-control {
    min-height: 56px;
    width: 100%;
}

/* ==== Grouped pin (quantity badge) + highlight on focus ==== */
.load-order-map-pin-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #A32D2D;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* z-index on the wrapper (positioned by Leaflet); the animation goes on the internal
   element so as NOT to replace Leaflet's positioning transform. */
.load-order-map-pin-active {
    z-index: 1000 !important;
}

.load-order-map-pin-active .load-order-map-pin {
    animation: load-order-pin-pulse 0.9s ease-out 2;
}

/* It keeps the pin's rotate(-45deg) (otherwise the animation would remove it). */
@keyframes load-order-pin-pulse {
    0% { transform: rotate(-45deg) scale(1); }
    30% { transform: rotate(-45deg) scale(1.3); }
    100% { transform: rotate(-45deg) scale(1); }
}

/* ==== Clickable / selected card ==== */
.load-order-gd-card {
    cursor: pointer;
}

/* Drag & drop para reordenar (atualiza OrdemRota). */
.load-order-gd-card[draggable="true"] {
    cursor: grab;
}

.load-order-gd-card.dragging {
    opacity: .45;
}

.load-order-gd-card.drag-over {
    outline: 2px dashed #075bd3;
    outline-offset: 2px;
    background: #f4f9ff;
}

.load-order-gd-card.selected {
    background: #fffde7;
}

/* Card's badge: number (like the pin) + a C/D letter chip in the corner */
.load-order-gd-badge {
    position: relative;
    overflow: visible;
}

.load-order-gd-badge-letter {
    position: absolute;
    bottom: -6px;
    right: -6px;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    background: #ffffff;
    color: #06245d;
    border: 1px solid #cfdded;
    font-size: 9px;
    font-weight: 700;
    line-height: 11px;
    text-align: center;
}

/* Remove icon in red (as in the Trip) */
.load-order-gd-icon-btn-danger,
.load-order-gd-icon-btn-danger .oi {
    color: #d33a3a;
}

.load-order-gd-icon-btn-danger:hover {
    background: #FCEBEB;
}

/* ============================================================
   Operations as cards (OperationCards.razor) — it reuses the General Data's
   load-order-gd-card base; here only what is specific:
   the list's header, weight + state chip and the expanded
   read-only panel.
   ============================================================ */

.load-order-op {
    display: grid;
    gap: 10px;
}

/* ==== KPIs of the Operations workspace — they live on the workspace tabs row
   (Load Data / Transport / ... / Operations), aligned right. ==== */
.load-order-ws-kpis {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    padding-bottom: 4px;
}

/* The same look as the EntityHeader's KPIs (page-header-kpi): a 1px border in the
   branch's colour, a very light background and a soft shadow. */
.load-order-ws-kpi {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 12px 4px 10px;
    border: 1px solid #d7e4f4;
    border-radius: 10px;
    background: #ffffff;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(16, 42, 84, .05);
}

.load-order-ws-kpi > span {
    font-size: 15px;
}

.load-order-ws-kpi > div {
    display: grid;
    line-height: 1.15;
}

.load-order-ws-kpi strong {
    font-size: 14px;
    font-weight: 700;
}

.load-order-ws-kpi small {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.load-order-ws-kpi.kpi-loads {
    border-color: #ffd2b0;
    background: #fff7ef;
}

.load-order-ws-kpi.kpi-loads > span,
.load-order-ws-kpi.kpi-loads small,
.load-order-ws-kpi.kpi-loads strong {
    color: #d95d00;
}

.load-order-ws-kpi.kpi-unloads {
    border-color: #c8edd4;
    background: #f2fcf5;
}

.load-order-ws-kpi.kpi-unloads > span,
.load-order-ws-kpi.kpi-unloads small,
.load-order-ws-kpi.kpi-unloads strong {
    color: #1c8c49;
}

.load-order-ws-kpi.kpi-cmr-progress {
    border-color: #f5c4b3;
    background: #fdf4f0;
}

.load-order-ws-kpi.kpi-cmr-progress > span,
.load-order-ws-kpi.kpi-cmr-progress small,
.load-order-ws-kpi.kpi-cmr-progress strong {
    color: #b3492a;
}

.load-order-ws-kpi.kpi-cmr-loaded {
    border-color: #c8ddfb;
    background: #f4f9ff;
}

.load-order-ws-kpi.kpi-cmr-loaded > span,
.load-order-ws-kpi.kpi-cmr-loaded small,
.load-order-ws-kpi.kpi-cmr-loaded strong {
    color: #0d5bb8;
}

.load-order-ws-kpi.kpi-cmr-delivered {
    border-color: #bde8df;
    background: #f0fdfa;
}

.load-order-ws-kpi.kpi-cmr-delivered > span,
.load-order-ws-kpi.kpi-cmr-delivered small,
.load-order-ws-kpi.kpi-cmr-delivered strong {
    color: #0f766e;
}

.load-order-ws-kpi.kpi-operations {
    border-color: #d9cdf8;
    background: #f8f5ff;
}

.load-order-ws-kpi.kpi-operations > span,
.load-order-ws-kpi.kpi-operations small,
.load-order-ws-kpi.kpi-operations strong {
    color: #6d4cc2;
}

/* ============================================================
   Split LO dialog (LoadOrderSplitDialog.razor) — it reuses the
   jump-dialog/load-order-gd-popup base; here only what is specific.
   ============================================================ */

.load-order-split-dialog {
    max-width: 1100px;
    width: min(1100px, calc(100vw / var(--jump-zoom, 1) - 48px));
}

.load-order-split-loading {
    padding: 24px;
    text-align: center;
    color: #557097;
    font-size: 13px;
    font-weight: 600;
}

.load-order-split-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #ffd2b0;
    border-radius: 8px;
    background: #fff7ef;
    color: #d95d00;
    font-size: 13px;
}

.load-order-split-confirm-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.load-order-split-cmr.invalid {
    border-color: #f7c1c1;
    background: #fffafa;
}

.load-order-split-cmr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.load-order-split-cmr-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.load-order-split-cmr-copy strong {
    font-size: 14px;
    color: #06245d;
}

.load-order-split-cmr-copy span {
    font-size: 12px;
    color: #888780;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-split-cmr-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.load-order-split-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #F1EFE8;
    color: #5F5E5A;
    white-space: nowrap;
}

.load-order-split-chip.accent {
    background: #E6F1FB;
    color: #185FA5;
}

.load-order-split-chip.danger {
    background: #FCEBEB;
    color: #A32D2D;
}

.load-order-split-chip.done {
    background: #EAF3DE;
    color: #3B6D11;
}

.load-order-split-error {
    font-size: 12px;
    font-weight: 600;
    color: #A32D2D;
}

.load-order-split-line {
    align-items: end;
}

.load-order-split-line-remove {
    margin-bottom: 8px;
}

/* Ghost card at the end of the list for adding an operation. */
.load-order-op-add-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed #b9d2f4;
    border-radius: 12px;
    background: transparent;
    color: #185FA5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.load-order-op-add-card:hover {
    background: #f3f8ff;
    border-color: #185FA5;
}

/* CMR add row: "Add CMR" (it expands) + "In bulk" (compact). */
.load-order-cmr-add-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.load-order-cmr-add-row .load-order-op-add-card {
    flex: 1 1 auto;
}

.load-order-cmr-add-bulk {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #dbe7f6;
    border-radius: 12px;
    background: #fff;
    color: #185FA5;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.load-order-cmr-add-bulk:hover {
    border-color: #185FA5;
    background: #f3f8ff;
    color: #0043a5;
}

/* ==== CMRs in Bulk dialog (CmrCardList.razor) ====
   Skin of the DxPopup for the jump-dialog look (the same as GeneralDataEditForm /
   general data). The DxPopup provides the sized container — needed for the
   DxGrid — and the chrome (header/body/footer) is the jump-dialog's. */

/* The F4 modal (Blazored, .bm-container) is at z-index 10000; the element of this
   popup that competes with it at body level is the <dxbl-popup-cell> (a tag, not a
   class) that site.css forces to 20050 — which is why the F4 ended up behind. It lowers
   THIS popup's cell to 9500 (verified live): below the F4 (10000),
   above the page's chrome (~120) and the jump-dialog backdrops (1300). */
dxbl-popup-root:has(.load-order-cmr-bulk-shell) dxbl-popup-cell {
    z-index: 9500 !important;
}

/* The invoicing cancellation's JumpStandardDialog also contains a ControlF4 and
   needs to stay below the F4's Blazored modal (z-index 10000), otherwise the
   list opens behind the dialog. */
dxbl-popup-root:has(.load-order-cancel-billing-dialog-frame) dxbl-popup-cell {
    z-index: 9500 !important;
}

dxbl-popup-root:has(.load-order-cancel-billing-dialog-frame) .dxbl-popup-body {
    height: auto !important;
    max-height: calc(100vh / var(--jump-zoom, 1) - 32px);
    padding: 0;
    overflow: hidden;
}

.load-order-cancel-billing-dialog-frame {
    min-height: 0;
}

.load-order-cancel-billing-dialog-frame.jump-dialog-frame {
    height: auto;
    max-height: calc(100vh / var(--jump-zoom, 1) - 32px);
}

.load-order-cancel-billing-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.load-order-cancel-billing-dialog-footer {
    justify-content: flex-end;
}

.load-order-cancel-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
    gap: 12px;
    align-items: end;
}

.load-order-cancel-billing-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.load-order-cancel-billing-field .form-label {
    margin: 0;
    color: #5b728f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.load-order-cancel-billing-document {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #cbd8e8;
    border-radius: 6px;
    background: #ffffff;
    color: #06245d;
    font-size: 13px;
    font-weight: 850;
}

.load-order-cancel-billing-lookup .control-f4-root > label {
    display: none;
}

.load-order-cancel-billing-validation {
    margin-top: 8px;
    color: #c7384a;
    font-size: 12px;
    font-weight: 750;
}

.load-order-cancel-billing-notes {
    min-height: 120px !important;
    resize: vertical;
}

/* It hides the DxPopup's native chrome (the 21px <dxbl-popup-header> band at the
   top); it needs !important because the DevExpress theme's rule beats
   ours without it. */
dxbl-popup-root:has(.load-order-cmr-bulk-shell) dxbl-popup-header,
.load-order-cmr-bulk-popup .dxbl-popup-header {
    display: none !important;
}

/* Rounded corners like the jump-dialog's: the dialog already has radius 8px but the shell
   interno pintava por cima dos cantos — o overflow:hidden faz o clip. */
dxbl-popup-root:has(.load-order-cmr-bulk-shell) dxbl-modal-dialog.load-order-cmr-bulk-popup {
    border-radius: 8px !important;
    overflow: hidden !important;
}

dxbl-popup-root:has(.load-order-cmr-bulk-shell) .dxbl-modal-content {
    border-radius: 8px !important;
}

.load-order-cmr-bulk-popup .dxbl-popup-body {
    padding: 0;
    overflow: hidden;
}

/* Shell interno em coluna: header (fixo) + body (cresce/scroll) + footer (fixo).
   It defines the jump-dialog's variables (normally set by the root class
   .jump-dialog, which does not exist here because the container is the DxPopup) — without them
   the .jump-dialog-buttons were left without colour (white text on a white background). */
.load-order-cmr-bulk-shell {
    --jump-dialog-ink: var(--app-page-ink, var(--atrans-ink, #06245d));
    --jump-dialog-muted: var(--app-page-muted, #557097);
    --jump-dialog-border: var(--app-page-border, var(--atrans-border, #dbe7f6));
    --jump-dialog-surface: var(--app-page-card-bg, #fff);
    --jump-dialog-shell: var(--app-page-bg, var(--atrans-light, #f4f7fb));
    --jump-dialog-header-bg: #fbfdff;
    --jump-dialog-title: #003d8f;
    --jump-dialog-accent: #0057b8;
    --jump-dialog-control-border: #cfdded;
    --jump-dialog-control-bg: #fbfdff;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--app-page-card-bg, #fff);
    color: var(--app-page-ink, #06245d);
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
}

.load-order-cmr-bulk-shell > .jump-dialog-header,
.load-order-cmr-bulk-shell > .jump-dialog-footer {
    flex: 0 0 auto;
}

/* Darkened backdrop the same as jump-dialog-backdrop's (the DxPopup does not bring it by
   default and without it the popup looked "detached" from the page). */
dxbl-popup-root:has(.load-order-cmr-bulk-shell) .dxbl-modal-root {
    background: rgba(6, 36, 93, .18);
    backdrop-filter: blur(3px);
}

/* Body = jump-dialog-body (shell cinzento) a ocupar o resto. A grelha gere o
   its own scroll, so the body does not do overflow auto. Without its own gap:
   the spacing between sections (8px) comes from the jump-dialog pattern
   (.jump-dialog-section + .jump-dialog-section { margin-top: 8px }). */
.load-order-cmr-bulk-body-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header in compact cards (the look of the Trip's identification;
   reutiliza summary-grid/summary-card/icon-box/card-foot de cards.css). */
.load-order-cmr-bulk-head {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
}

.load-order-cmr-bulk-head-cards.summary-grid {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 8px;
}

.load-order-cmr-bulk-head-cards .summary-card {
    padding: 8px;
}

.load-order-cmr-bulk-head-cards .summary-card-title {
    margin-bottom: 6px;
    font-size: 12px;
}

.load-order-cmr-bulk-head-cards .card-foot {
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-cmr-bulk-head-cards .form-control {
    width: 100%;
    min-height: 30px;
    font-size: 12px;
}

.load-order-cmr-bulk-head-cards .ctlf4-Size-label {
    width: 100%;
}

/* Number · Year (read-only), aligned with the height of the other cards' inputs. */
.load-order-cmr-bulk-head-ro {
    min-height: 30px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #06245d;
}

/* Grid block (CmrBulkGrid): a jump-dialog section with the table filling
   the remaining space of the body. */
.load-order-cmr-bulk-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.load-order-cmr-bulk-grid {
    flex: 1 1 auto;
    min-height: 200px;   /* floor: visible even if the flex does not distribute height */
    overflow: auto;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

/* HTML table (CMR staging) — it replaces the DxGrid. */
.load-order-cmr-bulk-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
}

.load-order-cmr-bulk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eef4fc;
    color: #49658d;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
    padding: 7px 8px;
    border-bottom: 1px solid #dbe7f6;
}

.load-order-cmr-bulk-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eef2f8;
    vertical-align: middle;
}

.load-order-cmr-bulk-table td.f4 {
    min-width: 160px;
}

/* Editors without a frame, in the style of the Provisional Expenses grid
   (jump-editable-grid): a transparent border; it only appears with focus on the cell
   (#0057b8). The inputs fill the cell without imposing their own width — the
   widths live on the th, so they do not change when rows are added. */
.load-order-cmr-bulk-table .form-control {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.load-order-cmr-bulk-table .form-control:focus {
    border-color: #0057b8;
    background: #fff;
    outline: 0;
    box-shadow: none;
}

/* ControlF4 filling the cell (it hides the empty label), without a frame. */
.load-order-cmr-bulk-table td.f4 .control-f4-root {
    width: 100%;
    gap: 0;
}

.load-order-cmr-bulk-table td.f4 .control-f4-root > label {
    display: none;
}

.load-order-cmr-bulk-table td.f4 .ctlf4-native-combobox {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.load-order-cmr-bulk-table .ctlf4-native-editor {
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.load-order-cmr-bulk-table .ctlf4-native-combobox:focus-within .ctlf4-native-editor {
    border-color: #0057b8 !important;
    background: #fff !important;
}

/* Actions (+ in the header, ✕ on the row): blue links without a frame, as in the
   Despesas Provisionais. */
.load-order-cmr-bulk-cell-actions {
    width: 36px;
    text-align: center;
}

.load-order-cmr-bulk-cell-actions .oi {
    color: #0057b8;
    font-size: 12px;
    cursor: pointer;
}

.load-order-cmr-bulk-cell-actions .oi:hover {
    color: #003d8f;
}

/* Footer: herda .jump-dialog-footer (centrado). */
.load-order-cmr-bulk-footer {
    flex: 0 0 auto;
}

.load-order-op-list {
    display: grid;
    gap: 10px;
    align-content: start;
}

/* Weight + state chip, aligned right next to the delete. */
.load-order-op-side-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-order-op-weight {
    font-size: 13px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
}

.load-order-op-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #F1EFE8;
    color: #5F5E5A;
    white-space: nowrap;
}

.load-order-op-chip.state-done {
    background: #EAF3DE;
    color: #3B6D11;
}

.load-order-op-chip.state-active {
    background: #E6F1FB;
    color: #185FA5;
}

.load-order-op-chip.state-pending {
    background: #FAEEDA;
    color: #854F0B;
}

/* Zona central do card: rota (origem → destino) + recursos. */
.load-order-op-card-middle {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 0 12px;
    text-align: left;
}

.load-order-op-route {
    font-size: 13px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-op-resources {
    font-size: 12px;
    color: #888780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Summarised metrics (pallets · LDM · volume) below the weight. */
.load-order-op-metrics {
    font-size: 12px;
    color: #5f6b80;
    white-space: nowrap;
}

/* Remarks in the inline editing of the operation card (a whole row). */
.load-order-op-inline-notes {
    display: grid;
    gap: 4px;
    flex: 1 1 100%;
    min-width: 0;
}

.load-order-op-inline-notes label {
    font-size: 12px;
    font-weight: 600;
    color: #49658d;
    text-align: center;
    margin: 0;
}

.load-order-op-inline-notes textarea {
    min-height: 48px;
    resize: vertical;
}

.load-order-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    color: #557097;
    font-size: 13px;
    font-weight: 700;
}

/* ============================================================
   Transporte (sub-tab 0) — layout "rota visual"
   ============================================================ */

.load-order-transport-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* ---- Route card (timeline) ---- */
.load-order-transport-route-card {
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    padding: 10px 12px;
    min-width: 0;
}

.load-order-transport-route-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.load-order-transport-route-title {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #557097;
}

.load-order-transport-route-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.load-order-transport-route-line {
    position: absolute;
    top: 16px;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 999px;
    background: #dbe7f6;
}

.load-order-transport-route-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: center;
    cursor: pointer;
    min-width: 0;
}

.load-order-transport-route-node:hover {
    background: #f4f9ff;
}

.load-order-transport-route-node.active {
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px #a9d0ff;
}

.load-order-transport-route-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
    border: 2px solid #a9d0ff;
    background: #eef6ff;
    color: #075bd3;
}

.load-order-transport-route-dot.dot-sender {
    border-color: #075bd3;
    background: #eaf3ff;
    color: #075bd3;
}

.load-order-transport-route-dot.dot-arrival {
    border-color: #fed0a8;
    background: #fff4e8;
    color: #e26013;
}

.load-order-transport-route-dot.dot-delivery {
    border-color: #b7ebd0;
    background: #ecfdf5;
    color: #16834a;
}

.load-order-transport-route-node-label {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #557097;
    line-height: 1;
}

.load-order-transport-route-node-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    color: #06245d;
    line-height: 1.2;
}

.load-order-transport-route-node-value.empty {
    color: #8aa2c4;
    font-weight: 600;
}

/* ---- Inline editing panel (it expands under the timeline) ---- */
.load-order-transport-route-expand {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(200px, 1fr);
    gap: 8px;
    align-items: end;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #cfe3ff;
    border-radius: 8px;
    background: #f4f9ff;
}

.load-order-transport-route-expand.single {
    grid-template-columns: minmax(200px, 320px);
}

.load-order-transport-route-expand .jump-form-card-label {
    font-size: 11px;
}

/* ---- Chips below the timeline ---- */
.load-order-transport-route-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #e3edf8;
}

.load-order-transport-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #dbe7f6;
    border-radius: 7px;
    background: #f5f8fc;
    font-size: 11px;
    font-weight: 700;
    color: #06245d;
    cursor: pointer;
    line-height: 1;
}

.load-order-transport-route-chip:hover {
    border-color: #a9d0ff;
    background: #f4f9ff;
}

.load-order-transport-route-chip.active {
    border-color: #075bd3;
    background: #eef6ff;
}

.load-order-transport-route-chip .fas,
.load-order-transport-route-chip-icon {
    color: #075bd3;
    font-size: 12px;
}

.load-order-transport-route-chip-label {
    color: #557097;
    font-weight: 850;
}

.load-order-transport-route-chip-value {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-transport-route-chip-value.empty {
    color: #8aa2c4;
    font-weight: 600;
}

/* ---- Loading / Unloading state cards ---- */
/* Loading/Unloading (left, stacked) + metrics (right). */
/* auto-fit makes the layout responsive to the PANEL's width (not the viewport's):
   two columns when there is room, one stacked column when the panel shrinks. */
/* flex pushing the groups to the left (Loading/Unloading + Weights and Measures), without the
   large empty space of before. */
.load-order-transport-cargo-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
}

.load-order-transport-status-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 300px;
    flex: 0 1 460px;
}

.load-order-transport-status-card {
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    padding: 9px 11px;
    min-width: 0;
    max-width: 560px;
}

.load-order-transport-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.load-order-transport-status-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    color: #06245d;
}

.load-order-transport-status-title .fas {
    font-size: 12px;
}

.load-order-transport-status-title .load-icon {
    color: #075bd3;
}

.load-order-transport-status-title .unload-icon {
    color: #e26013;
}

.load-order-transport-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #dbe7f6;
    background: #f1f4f9;
    font-size: 11px;
    font-weight: 800;
    color: #557097;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.load-order-transport-status-chip.on {
    border-color: #b7ebd0;
    background: #ecfdf5;
    color: #16834a;
}

.load-order-transport-status-chip.disabled {
    cursor: not-allowed;
    opacity: .6;
}

.load-order-transport-status-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 210px));
    justify-content: start;
    gap: 10px;
    min-width: 0;
}

@media (max-width: 520px) {
    .load-order-transport-status-dates {
        grid-template-columns: 1fr;
    }
}

/* The native date inputs (datetime-local) have a large intrinsic minimum width;
   forcing them to shrink prevents them from pushing the panel beyond its width. */
.load-order-transport-status-dates > div {
    min-width: 0;
}

.load-order-transport-status-dates input,
.load-order-transport-status-dates .form-control {
    width: 100%;
    min-width: 0;
    max-width: 180px;
    box-sizing: border-box;
}

.load-order-transport-status-date-label {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 850;
    color: #557097;
    line-height: 1;
}

/* ---- Metrics (Weights and Measures) — a card with label/value rows, the same as the "Totals" ---- */
.load-order-transport-metrics-card {
    flex: 0 1 340px;
    max-width: 340px;
}

.load-order-transport-metrics-grid {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.load-order-transport-metrics-card .load-order-transport-metrics-grid .jump-form-card-field {
    display: grid !important;
    grid-template-columns: 92px 140px !important;
    justify-content: start;
    column-gap: 10px;
    align-items: center;
    min-width: 0;
}

.load-order-transport-metrics-card .load-order-transport-metrics-grid .jump-form-card-label {
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    align-self: center;
}

.load-order-transport-metrics-grid input {
    text-align: right !important;
}

/* ---- Footer: instructions + actions ---- */
.load-order-transport-footer {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    /* It grows to take up the column's free vertical space. */
    flex: 1 1 auto;
    min-height: 160px;
}

.load-order-transport-footer-memo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The instructions memo fills the whole available height of the footer. */
.load-order-transport-footer-memo .jump-form-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.load-order-transport-footer-memo .load-order-transport-instructions-memo {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    width: 100%;
}

.load-order-transport-footer-memo .load-order-transport-instructions-memo > * {
    flex: 1 1 auto;
    height: 100% !important;
    width: 100%;
    min-height: 0;
}

.load-order-transport-footer-memo textarea {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 120px;
    box-sizing: border-box;
    resize: none;
}

.load-order-transport-footer-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

/* ---- Left panel: grid / cards toggle ---- */
.load-order-cmr-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.load-order-cmr-pane-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 2px 6px;
}

.load-order-cmr-pane-title {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #557097;
}

.load-order-cmr-pane-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border: 1px solid #dbe7f6;
    border-radius: 6px;
    background: #06245d;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.load-order-cmr-pane-add:hover {
    background: #0a3a8c;
}

.load-order-cmr-pane-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ---- CMR card list ---- */
.load-order-cmr-cards {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
    padding: 1px;
}

.load-order-cmr-card {
    border: 1px solid #dbe7f6;
    border-radius: 9px;
    background: #fff;
    padding: 8px 9px;
    cursor: pointer;
    min-width: 0;
    text-align: left;
}

.load-order-cmr-card:hover {
    border-color: #a9d0ff;
    background: #fbfdff;
}

.load-order-cmr-card.selected {
    border: 1.5px solid #075bd3;
    background: #f4f9ff;
}

.load-order-cmr-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.load-order-cmr-card-code {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 850;
    color: #06245d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-cmr-card-footer {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.load-order-cmr-card-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #c0392b;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.load-order-cmr-card-del:hover {
    background: #fdecef;
    color: #a5281b;
}

/* State + print button on the right of the CMR card's header. */
.load-order-cmr-card-head-right {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.load-order-cmr-card-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #075bd3;
    cursor: pointer;
}

.load-order-cmr-card-print:hover {
    background: #eef6ff;
    color: #0043a5;
}

.load-order-cmr-card-print:disabled {
    color: #b8c4d4;
    cursor: default;
    background: transparent;
}

/* CMR report menu: items aligned left (it reuses load-order-cmr-context-menu). */
.load-order-cmr-reports-menu button {
    text-align: left;
    justify-content: flex-start;
}

.load-order-cmr-card-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #a9d0ff;
    background: #eef6ff;
    color: #075bd3;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.load-order-cmr-card-chip.delivered {
    border-color: #b7ebd0;
    background: #ecfdf5;
    color: #16834a;
}

.load-order-cmr-card-chip.loaded {
    border-color: #b7ebd0;
    background: #ecfdf5;
    color: #16834a;
}

.load-order-cmr-card-route {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #557097;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-cmr-card-meta {
    font-size: 11px;
    color: #8aa2c4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.load-order-billing-context-cell {
    width: 100%;
    min-height: 20px;
    cursor: context-menu;
}

/* ---- Context menu (right click) of the CMR card — the timeline's look ---- */
.load-order-cmr-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10999;
    background: transparent;
}

.load-order-cmr-context-menu {
    position: fixed;
    z-index: 11000;
    min-width: 200px;
    max-width: 260px;
    overflow: hidden;
    transform: translate(4px, 4px);
    border: 1px solid #dbe7f6;
    border-radius: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 42px rgba(10, 26, 58, .18);
    color: #06245d;
}

.load-order-cmr-context-menu-title {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8eff8;
    background: linear-gradient(180deg, #fbfdff, #f4f8ff);
}

.load-order-cmr-context-menu-title strong {
    max-width: 236px;
    overflow: hidden;
    color: #06245d;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-cmr-context-menu-title span {
    overflow: hidden;
    color: #557097;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-cmr-context-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #edf3fb;
    background: transparent;
    padding: 9px 12px;
    color: #06245d;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.load-order-cmr-context-menu button:last-child {
    border-bottom: 0;
}

.load-order-cmr-context-menu button:hover,
.load-order-cmr-context-menu button:focus-visible {
    background: #eef6ff;
    color: #0057b8;
    outline: 0;
}

.load-order-cmr-context-menu button:disabled {
    color: #91a2bd;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .load-order-cancel-billing-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Responsivo ---- */
@media (max-width: 1100px) {
    .load-order-transport-cargo-metrics {
        grid-template-columns: 1fr;
    }

    .load-order-transport-status-row {
        grid-template-columns: 1fr;
    }

    .load-order-transport-route-track {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 12px;
    }

    .load-order-transport-route-line {
        display: none;
    }

    .load-order-transport-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Red vehicle/trailer overlap traffic light: clickable (it opens the conflicting
   trip, like the legacy ImgSemafro). */
.load-order-traffic-light-link {
    cursor: pointer;
}

/* ---- Consultation mode (portal user with an associated customer) ---- */
/* Data-entry controls are locked: text boxes, date/number editors, combos,
   checkboxes and the grid editors. Buttons stay clickable on purpose — tab
   navigation, grid paging and the view dialogs have to keep working, and the
   actions that write are blocked in the page itself (BlockWhenConsultationOnly). */
.load-order-consultation-only input,
.load-order-consultation-only textarea,
.load-order-consultation-only select {
    pointer-events: none;
}

.load-order-consultation-only input:not([type="checkbox"]):not([type="radio"]),
.load-order-consultation-only textarea,
.load-order-consultation-only select {
    background-color: #f4f6fb;
}

/* The header is not part of the form: its own inputs (attachment search, report
   and email pickers) stay usable in consultation mode. */
.load-order-consultation-only .page-header input,
.load-order-consultation-only .page-header textarea,
.load-order-consultation-only .page-header select {
    pointer-events: auto;
    background-color: inherit;
}

/* Number and year are how a record is opened, not how it is changed: locking them
   left the page with no way of reaching another load order. They stay usable — the
   lookup is already limited to the customer associated with the portal user. */
.load-order-consultation-only [data-permission-key="load-order.header.number"] input,
.load-order-consultation-only [data-permission-key="load-order.header.year"] input {
    pointer-events: auto;
    background-color: inherit;
}

/* ---- "Total a Faturar" breakdown ---- */
/* The header field only shows the figure; the link next to its label opens the dialog
   that says what it is made of (transport, additional charges, occurrences and
   incidents marked to invoice) and lets the user add additional charges. */
.load-order-breakdown-link {
    margin-left: 4px;
    color: #1b62c9;
    font-weight: 700;
    text-decoration: none;
}

.load-order-breakdown-link:hover,
.load-order-breakdown-link:focus {
    color: #0f4796;
    text-decoration: underline;
}

/* The footer carries the summary cards and the composition bar instead of buttons, so
   the total stays in view while the statement scrolls. */
.load-order-breakdown-footer {
    display: block;
    padding: 10px 12px 12px;
}

/* Summary cards: one per source plus the total. --breakdown-color is set inline per group. */
.load-order-breakdown-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 1.35fr;
    gap: 8px;
}

.load-order-breakdown-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dfe8f5;
    border-top: 3px solid var(--breakdown-color, #1b62c9);
    border-radius: 8px;
    background: #ffffff;
}

.load-order-breakdown-kpi small {
    color: #6b7f9e;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.load-order-breakdown-kpi strong {
    color: #06245d;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.load-order-breakdown-kpi em {
    color: #6b7f9e;
    font-size: 11px;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-breakdown-kpi.total {
    border-color: #06245d;
    background: #06245d;
}

.load-order-breakdown-kpi.total small,
.load-order-breakdown-kpi.total em {
    color: rgba(255, 255, 255, .75);
}

.load-order-breakdown-kpi.total strong {
    color: #ffffff;
    font-size: 22px;
}

/* Composition bar under the cards: one segment per source, widths set inline. */
.load-order-breakdown-bar {
    display: flex;
    height: 6px;
    margin: 8px 0 0;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
}

.load-order-breakdown-bar i {
    display: block;
    height: 100%;
}

/* Statement: a 4-column grid; group headers, editor and subtotals span every column. */
.load-order-breakdown-statement-section {
    padding-top: 4px;
    margin-top: 2px;
}

.load-order-breakdown-statement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 110px 130px;
}

.load-order-breakdown-statement .amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.load-order-breakdown-head {
    display: contents;
}

.load-order-breakdown-head > span {
    padding: 4px 8px 6px;
    border-bottom: 1px solid #dfe8f5;
    color: #6b7f9e;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.load-order-breakdown-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #eef3fa;
    color: #06245d;
    font-size: 12px;
    font-weight: 850;
}

.load-order-breakdown-group i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--breakdown-color, #1b62c9);
}

.load-order-breakdown-group .count {
    color: #6b7f9e;
    font-size: 11px;
    font-weight: 700;
}

.load-order-breakdown-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    border: 1px dashed #9db8dd;
    border-radius: 999px;
    background: #ffffff;
    color: #1b62c9;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.load-order-breakdown-add:hover {
    border-style: solid;
    background: #eaf1fb;
}

.load-order-breakdown-line {
    display: contents;
}

.load-order-breakdown-line > span {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 6px 8px;
    border-bottom: 1px solid #f0f4fa;
    color: #06245d;
    font-size: 12.5px;
}

.load-order-breakdown-line > span.amount {
    justify-content: flex-end;
}

.load-order-breakdown-line > span:first-child {
    padding-left: 24px;
}

.load-order-breakdown-line.off > span {
    color: #9aa9bf;
}

.load-order-breakdown-line.off > span.amount {
    text-decoration: line-through;
}

.load-order-breakdown-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f4f9;
    color: #6b7f9e;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.load-order-breakdown-tag.origin {
    background: #fff3e0;
    color: #b25e00;
}

/* Percentage reasons: the unit column shows the rate; the computed unit price is the tooltip. */
.load-order-breakdown-percent {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef3fa;
    color: #1b4fa0;
    font-size: 11px;
    font-weight: 800;
}

.load-order-breakdown-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa9bf;
    font-size: 11px;
    cursor: pointer;
}

.load-order-breakdown-remove:hover {
    background: #fdecec;
    color: #b12a2a;
}

.load-order-breakdown-empty {
    grid-column: 1 / -1;
    padding: 6px 8px 6px 24px;
    color: #9aa9bf;
    font-size: 11.5px;
    font-style: italic;
}

.load-order-breakdown-subtotal {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 6px 8px 2px;
}

.load-order-breakdown-subtotal span {
    color: #6b7f9e;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.load-order-breakdown-subtotal strong {
    min-width: 114px;
    color: #06245d;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Inline editor for a manual additional charge (reason lookup, quantity, unit value). */
.load-order-breakdown-editor {
    grid-column: 1 / -1;
    display: grid;
    /* Reason, quantity, percentage or unit price, total, actions. The additional charge
       carries no dates of its own, so the form asks for none. */
    grid-template-columns: minmax(0, 1.4fr) 70px 105px 105px auto;
    gap: 6px;
    align-items: end;
    margin: 4px 0 2px;
    padding: 8px;
    border: 1px solid #bcd0ea;
    border-radius: 8px;
    background: #f3f7fd;
}

.load-order-breakdown-editor > label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    min-width: 0;
    color: #6b7f9e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.load-order-breakdown-editor .actions {
    display: flex;
    gap: 4px;
}

.load-order-breakdown-editor .actions .jump-form-config-dialog-button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
}

.load-order-breakdown-editor .hint {
    grid-column: 1 / -1;
    color: #6b7f9e;
    font-size: 10.5px;
}

/* ============================================================
   Occurrences as cards + detail form (OccurrenceCards.razor /
   OccurrenceDetailPanel.razor). The 2-column shell copies the shape of
   .load-order-transport-layout (CMR list | detail) and the cards reuse the
   General Data base (.load-order-gd-card). Only what is specific lives here:
   the search toolbar, the card's middle/right columns, the detail pane's
   chrome and the draft footer.
   ============================================================ */

.load-order-occ-layout {
    display: grid;
    grid-template-columns: minmax(375px, 480px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
}

.load-order-occ-list-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.load-order-occ-detail-pane {
    min-width: 0;
    overflow: auto;
    background: transparent;
}

/* Without a selection the pane only shows the empty state, so it must not look
   like an editable form. */
.load-order-occ-detail-pane.is-blocked {
    opacity: .9;
}

.load-order-occ-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

.load-order-occ-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.load-order-occ-search .oi {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    color: #7d94b5;
    font-size: 12px;
    pointer-events: none;
}

.load-order-occ-search input {
    padding-left: 28px;
}

.load-order-occ-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #49658d;
    white-space: nowrap;
}

.load-order-occ-list {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
}

/* Record-type tones: the card's left border and badge come from the type
   (Ocorrência / Incidência), not from the position in the list. Additional costs
   cannot be created here but existing rows may carry the type. */
.load-order-occ-card {
    --occ-tone: #185FA5;
    --occ-tone-soft: #E6F1FB;
    cursor: pointer;
    border-left-color: var(--occ-tone);
}

.load-order-occ-card.is-incident {
    --occ-tone: #D85A30;
    --occ-tone-soft: #FBECE4;
}

.load-order-occ-card.is-additional-cost {
    --occ-tone: #534AB7;
    --occ-tone-soft: #ECEAF8;
}

/* is-selected, not selected: .load-order-gd-card.selected paints the General Data
   card yellow, and these cards share that base class. */
.load-order-occ-card.is-selected {
    border-color: var(--occ-tone);
    background: var(--occ-tone-soft);
    box-shadow: 0 2px 8px rgba(6, 36, 93, .22);
}

.load-order-occ-badge {
    color: #ffffff;
    background: var(--occ-tone);
    font-weight: 700;
}

/* One add button per type, side by side, each tinted with its own tone. */
.load-order-occ-add-row {
    display: flex;
    gap: 8px;
}

.load-order-occ-add {
    --occ-tone: #185FA5;
    --occ-tone-soft: #E6F1FB;
    flex: 1 1 0;
    min-width: 0;
    border-color: var(--occ-tone);
    color: var(--occ-tone);
}

.load-order-occ-add.is-incident {
    --occ-tone: #D85A30;
    --occ-tone-soft: #FBECE4;
}


.load-order-occ-add:hover {
    background: var(--occ-tone-soft);
}

/* Record-type filter: segmented buttons with the count of each type. */
.load-order-occ-filters {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.load-order-occ-filter {
    --occ-tone: #5F6B80;
    --occ-tone-soft: #F1F4F9;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe7f6;
    border-radius: 20px;
    background: #fff;
    color: #49658d;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.load-order-occ-filter.is-occurrence {
    --occ-tone: #185FA5;
    --occ-tone-soft: #E6F1FB;
}

.load-order-occ-filter.is-incident {
    --occ-tone: #D85A30;
    --occ-tone-soft: #FBECE4;
}


.load-order-occ-filter:hover {
    border-color: var(--occ-tone);
}

.load-order-occ-filter.active {
    border-color: var(--occ-tone);
    background: var(--occ-tone-soft);
    color: var(--occ-tone);
}

.load-order-occ-filter strong {
    font-weight: 700;
}

/* A line the price list produced: it says why the remove button is not there. */
.load-order-occ-origin-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 9px;
    border: 1px solid #d5e1f0;
    border-radius: 20px;
    background: #f6f8fc;
    color: #5f6b80;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.load-order-occ-origin-chip .oi {
    font-size: 9px;
}

/* Record-type chip on the detail pane's header. */
.load-order-occ-type-chip {
    --occ-tone: #185FA5;
    --occ-tone-soft: #E6F1FB;
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--occ-tone-soft);
    color: var(--occ-tone);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.load-order-occ-type-chip.is-incident {
    --occ-tone: #D85A30;
    --occ-tone-soft: #FBECE4;
}

.load-order-occ-type-chip.is-additional-cost {
    --occ-tone: #534AB7;
    --occ-tone-soft: #ECEAF8;
}

/* The card stacks title/dates/description/metrics in a single column: at this
   pane width a third column truncated the date range. */
.load-order-occ-card .load-order-gd-card-main {
    align-items: flex-start;
}

.load-order-occ-card .load-order-gd-card-copy {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
}

.load-order-occ-card-description {
    font-size: 13px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-occ-card-metrics {
    font-size: 12px;
    color: #888780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-occ-side-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-order-occ-amount {
    font-size: 13px;
    font-weight: 600;
    color: #06245d;
    white-space: nowrap;
}

.load-order-occ-empty-list {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 12px;
    border: 1.5px dashed #dbe7f6;
    border-radius: 12px;
    color: #6b7a90;
}

.load-order-occ-empty-list .oi {
    font-size: 18px;
    color: #b9d2f4;
}

.load-order-occ-empty-list strong {
    font-size: 13px;
    font-weight: 600;
}

/* ==== Detail pane ==== */

.load-order-occ-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
}

.load-order-occ-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 0;
}

.load-order-occ-detail-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.load-order-occ-detail-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #06245d;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-order-occ-detail-head > div > span {
    font-size: 12px;
    color: #888780;
}

.load-order-occ-detail-body {
    padding: 0;
}

/* Sections separated by a hairline instead of the boxed load-order-gd-group: the
   panel is already a card, so a second frame per group only added noise and height. */
.load-order-occ-section {
    padding: 14px 16px;
    border-top: 1px solid #eef3fa;
}

.load-order-occ-section:first-child {
    border-top: 0;
}

/* Left-aligned title with a rule running to the edge, instead of a centred
   uppercase band. */
.load-order-occ-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #6b7a90;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.load-order-occ-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #eef3fa;
}

/* Fixed track widths per kind of value: quantities do not need the width of a
   description, and flex: 1 1 160px made every field the same size. */
.load-order-occ-fields {
    display: grid;
    gap: 10px 14px;
    align-items: end;
}

.load-order-occ-fields + .load-order-occ-fields {
    margin-top: 10px;
}

.load-order-occ-fields.is-identification,
.load-order-occ-fields.is-dates {
    grid-template-columns: 200px 200px minmax(0, 1fr);
}

/* The same row without the two dates, for records that carry the load order's period. */
.load-order-occ-fields.is-options-only {
    grid-template-columns: minmax(0, 1fr);
}

/* Liability: the code lookup plus the description it resolves to, read-only. */
.load-order-occ-fields.is-liability {
    grid-template-columns: 200px minmax(0, 1fr);
}

.load-order-occ-fields.is-money {
    grid-template-columns: 110px 130px 130px 150px 90px 150px 110px;
}

.load-order-occ-field {
    min-width: 0;
}

.load-order-occ-field > label {
    display: block;
    margin-bottom: 3px;
    color: #49658d;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One height and one border for every editor in the panel: plain inputs, the
   DevExpress editors and the ControlF4 wrapper all render differently by default. */
.load-order-occ-field .form-control,
.load-order-occ-field .ctlf4-Size-label,
.load-order-occ-field .dxbl-text-edit,
.load-order-occ-field .dxbl-spin-edit,
.load-order-occ-field .dxbl-date-edit,
.load-order-occ-field .ctlf4-native-editor {
    width: 100%;
    min-width: 0;
}

.load-order-occ-field .form-control,
.load-order-occ-field .dxbl-text-edit,
.load-order-occ-field .ctlf4-native-editor {
    height: 32px;
    min-height: 32px;
    border: 1px solid #d5e1f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #06245d;
    font-size: 13px;
    font-weight: 600;
}

.load-order-occ-field .form-control:focus,
.load-order-occ-field .dxbl-text-edit:focus-within,
.load-order-occ-field .ctlf4-native-combobox:focus-within .ctlf4-native-editor {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, .12) !important;
}

.load-order-occ-field .form-control[readonly] {
    background: #f6f8fc !important;
    color: #49658d;
}

/* Numbers right-aligned, as in the grids. */
.load-order-occ-field .dxbl-spin-edit input,
.load-order-occ-readonly-number {
    text-align: right;
}

/* Facturar / DND as pills that light up, with their own "Opções" label, instead
   of two loose checkboxes at the end of the dates row. */
.load-order-occ-flags {
    display: flex;
    gap: 6px;
}

.load-order-occ-flag {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 11px;
    border: 1px solid #d5e1f0;
    border-radius: 20px;
    background: #fff;
}

.load-order-occ-flag.on {
    border-color: #1D9E75;
    background: #EAF6F1;
}

.load-order-occ-flag .dxbl-checkbox {
    margin: 0;
    color: #49658d;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.load-order-occ-flag.on .dxbl-checkbox {
    color: #147053;
}

/* The line's computed total: a value, not a disabled field. */
.load-order-occ-field.is-total {
    align-self: end;
}

.load-order-occ-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    background: #f4f9ff;
}

.load-order-occ-total span {
    color: #49658d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.load-order-occ-total strong {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* Scoped through .app-page: site.css pins every .form-control inside .app-page to
   min-height 34px, which outranks a plain class or element+class selector. */
.app-page textarea.load-order-occ-notes,
textarea.load-order-occ-notes {
    width: 100%;
    height: auto;
    min-height: 74px;
    padding: 7px 9px;
    border: 1px solid #d5e1f0;
    border-radius: 8px;
    resize: vertical;
}

.load-order-occ-userfields {
    padding: 14px 16px;
    border-top: 1px solid #eef3fa;
}

.load-order-occ-detail-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eef3fa;
    background: #fbfdff;
    border-radius: 0 0 8px 8px;
}

.load-order-occ-detail-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px;
    border: 1.5px dashed #dbe7f6;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.load-order-occ-detail-empty .oi {
    font-size: 22px;
    color: #b9d2f4;
}

.load-order-occ-detail-empty strong {
    font-size: 15px;
    font-weight: 700;
    color: #06245d;
}

.load-order-occ-detail-empty span {
    font-size: 13px;
    color: #888780;
}

@media (max-width: 1200px) {
    .load-order-occ-layout {
        grid-template-columns: 1fr;
    }
}

/* No red outline around the mandatory fields on this page.

   JumpFormField draws one for Required="true" (jump-form.css,
   .jump-form-card-field--required). On this screen it reads as an error rather than a
   convention — the header is dense and several of its fields are mandatory at once — and no
   other aTrans page marks them, so the Load Order was the odd one out.

   The Required attribute stays on the fields: besides the outline it is what publishes them to
   the page diagnostics panel, which is a separate concern and still wanted. Only the drawing
   goes. */
.load-order-redesign .jump-form-card-field--required > :not(label) {
    outline: none;
    outline-offset: 0;
}