.jump-form-page {
    min-height: 100%;
}

.jump-form-telemetry-ops-value,
.jump-form-telemetry-summary-value {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.jump-form-telemetry-ops-value small,
.jump-form-telemetry-summary-value small {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.jump-form-dashboard-page .page-header {
    margin-bottom: -2px;
}

.jump-form-dashboard-page .jump-form-telemetry-shell {
    gap: 12px;
}

.jump-form-dashboard-page .jump-form-telemetry-panel {
    border-radius: 16px;
    border-color: rgba(218, 228, 244, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 253, 255, 0.99));
    box-shadow: 0 18px 34px rgba(14, 53, 122, 0.06);
}

.jump-form-dashboard-page .jump-form-telemetry-overview {
    padding: 10px 12px;
}

.jump-form-dashboard-page .jump-form-telemetry-breadcrumbs {
    margin-bottom: 8px;
}

.jump-form-dashboard-page .jump-form-telemetry-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.jump-form-dashboard-page .jump-form-telemetry-sidebar .jump-form-telemetry-ops-card,
.jump-form-dashboard-page .jump-form-telemetry-sidebar .jump-form-telemetry-maintenance-card,
.jump-form-dashboard-page .jump-form-telemetry-sidebar .jump-form-telemetry-alert-card {
    height: auto;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-card,
.jump-form-dashboard-page .jump-form-telemetry-ops-card,
.jump-form-dashboard-page .jump-form-telemetry-trend-card,
.jump-form-dashboard-page .jump-form-telemetry-maintenance-card,
.jump-form-dashboard-page .jump-form-telemetry-alert-card {
    height: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    border-color: rgba(223, 231, 244, 0.96);
    box-shadow: none;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-body,
.jump-form-dashboard-page .jump-form-telemetry-utilization-layout {
    display: grid;
    gap: 8px;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-top {
    margin-bottom: 0;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jump-form-dashboard-page .jump-form-telemetry-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex: 0 0 12px;
}

.jump-form-dashboard-page .jump-form-telemetry-status-dot.is-positive {
    background: #19bb68;
}

.jump-form-dashboard-page .jump-form-telemetry-status-dot.is-warning {
    background: #e7a21a;
}

.jump-form-dashboard-page .jump-form-telemetry-status-dot.is-critical {
    background: #ea5a5a;
}

.jump-form-dashboard-page .jump-form-telemetry-status-dot.is-neutral,
.jump-form-dashboard-page .jump-form-telemetry-utilization-dot.is-neutral {
    background: #cfd7e6;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-top h2 {
    font-size: 20px;
    line-height: 1.05;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-top: 8px;
    align-items: start;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-metrics span,
.jump-form-dashboard-page .jump-form-telemetry-ops-card span,
.jump-form-dashboard-page .jump-form-telemetry-trend-card span,
.jump-form-dashboard-page .jump-form-telemetry-maintenance-card span,
.jump-form-dashboard-page .jump-form-telemetry-alert-card span {
    font-size: 10px;
    letter-spacing: 0.02em;
}

.jump-form-dashboard-page .jump-form-telemetry-hero-metrics strong,
.jump-form-dashboard-page .jump-form-telemetry-ops-card strong,
.jump-form-dashboard-page .jump-form-telemetry-trend-card strong,
.jump-form-dashboard-page .jump-form-telemetry-maintenance-card strong,
.jump-form-dashboard-page .jump-form-telemetry-alert-card strong {
    font-size: 14px;
}

.jump-form-dashboard-page .jump-form-telemetry-ops-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.jump-form-dashboard-page .jump-form-telemetry-ops-link {
    color: #184ed8;
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
}

.jump-form-dashboard-page .jump-form-telemetry-ops-row {
    padding: 5px 0;
}

.jump-form-dashboard-page .jump-form-telemetry-tabs {
    border-radius: 16px;
}

.jump-form-dashboard-page .jump-form-telemetry-tabs .jump-form-tabs-strip {
    gap: 8px;
    padding: 12px 12px 0;
}

.jump-form-dashboard-page .jump-form-telemetry-tabs .jump-form-tabs-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
}

.jump-form-dashboard-page .jump-form-telemetry-tabs .jump-form-tabs-button.active {
    background: #ffffff;
    border-color: #dbe5f5;
    box-shadow: inset 0 -3px 0 #2d4ee6;
}

.jump-form-dashboard-page .jump-form-telemetry-form-panel .jump-form-section-head,
.jump-form-dashboard-page .jump-form-telemetry-widget-panel .jump-form-section-head,
.jump-form-dashboard-page .jump-form-telemetry-panel > .jump-form-section-head {
    padding: 14px 18px;
}

.jump-form-dashboard-page .jump-form-telemetry-form-panel .jump-form-section-body,
.jump-form-dashboard-page .jump-form-telemetry-widget-panel .jump-form-section-body {
    padding: 14px;
}

.jump-form-dashboard-page .jump-form-telemetry-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}

.jump-form-dashboard-page .jump-form-telemetry-sidebar {
    gap: 14px;
    align-content: start;
}

.jump-form-dashboard-page .jump-form-telemetry-trend-chart {
    height: 118px;
    margin: 14px 0 18px;
    border-radius: 12px;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-layout {
    grid-template-columns: minmax(140px, 160px) minmax(0, 1fr);
    align-items: center;
}

.jump-form-dashboard-page .jump-form-telemetry-gauge {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    border-radius: 999px;
    background: none;
    box-shadow: none;
}

.jump-form-dashboard-page .jump-form-telemetry-gauge-svg {
    width: 132px;
    height: 132px;
    overflow: visible;
    transform: rotate(-90deg);
}

.jump-form-dashboard-page .jump-form-telemetry-gauge-track {
    fill: none;
    stroke: #eaf1fb;
    stroke-width: 16;
}

.jump-form-dashboard-page .jump-form-telemetry-gauge-value {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
    transition: stroke-dasharray .2s ease, stroke .2s ease;
}

.jump-form-dashboard-page .jump-form-telemetry-gauge-core {
    position: absolute;
    inset: 20px;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 253, 255, 0.99));
    border: 1px solid rgba(208, 224, 245, 0.95);
    box-shadow: 0 0 0 6px #fff;
    z-index: 1;
}

.jump-form-dashboard-page .jump-form-telemetry-gauge-core strong,
.jump-form-dashboard-page .jump-form-telemetry-gauge-core span {
    line-height: 1;
    margin: 0;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-legend {
    display: grid;
    gap: 10px;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #274d82;
    font-size: 13px;
    font-weight: 700;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5d79a5;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-dot.is-positive {
    background: #20a35f;
}

.jump-form-dashboard-page .jump-form-telemetry-utilization-dot.is-accent {
    background: #3858f2;
}

.jump-form-dashboard-page .jump-form-telemetry-status-list {
    gap: 8px;
    margin-top: 10px;
    padding: 0;
}

.jump-form-dashboard-page .jump-form-telemetry-status-row.is-positive,
.jump-form-dashboard-page .jump-form-telemetry-status-row.is-warning,
.jump-form-dashboard-page .jump-form-telemetry-status-row.is-critical,
.jump-form-dashboard-page .jump-form-telemetry-status-row.is-neutral {
    border-radius: 10px;
    padding: 8px 10px;
}

.jump-form-dashboard-page .jump-form-telemetry-status-row.is-positive {
    background: rgba(15, 157, 88, 0.08);
    border: 1px solid rgba(15, 157, 88, 0.18);
}

.jump-form-dashboard-page .jump-form-telemetry-status-row.is-warning {
    background: rgba(197, 138, 0, 0.08);
    border: 1px solid rgba(197, 138, 0, 0.18);
}

.jump-form-dashboard-page .jump-form-telemetry-status-row.is-critical {
    background: rgba(217, 48, 37, 0.08);
    border: 1px solid rgba(217, 48, 37, 0.18);
}

.jump-form-dashboard-page .jump-form-telemetry-status-row.is-neutral {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.jump-form-dashboard-page .jump-form-telemetry-summary {
    border-radius: 16px;
}

@media (max-width: 1200px) {
    .jump-form-dashboard-page .jump-form-telemetry-overview-grid,
    .jump-form-dashboard-page .jump-form-telemetry-utilization-layout {
        grid-template-columns: 1fr;
    }

    .jump-form-dashboard-page .jump-form-telemetry-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jump-form-dashboard-page .jump-form-telemetry-hero-shell {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .jump-form-dashboard-page .jump-form-telemetry-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jump-form-page .page-header {
    margin-bottom: 12px;
}

.jump-form-page .page-header-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title";
    min-height: 66px;
    margin-bottom: 12px;
    align-items: center;
}

.jump-form-page .page-header-title h1 {
    font-size: 26px;
    font-weight: 800;
}

.jump-form-page .page-header-kpis-wrap {
    display: none;
}

.jump-form-page .page-header-record-mode {
    font-weight: 850;
}

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

.jump-form-shell-grid > * {
    min-width: 0;
}

.jump-form-sections-grid {
    width: 100%;
}

.jump-form-sections-grid > * {
    min-width: 0;
}

.jump-form-sections-grid > * > * {
    height: 100%;
}

/* The DevExpress grid item (.dxbl-gridlayout-item) already stretches to the row's height,
   but the inner section is left with the content's height only. Mark the section that should
   fill with --stretch. The 'display:flex; flex-direction:column' is essential: with
   height:100% on a simple block the grid of 'auto' rows enters a circular dependency
   and blows up (a pattern already used and validated in .supply-control-summary-section). */
.jump-form-sections-grid .dxbl-gridlayout-item > .jump-form-section--stretch {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The summary card inside a --stretch section grows to fill the height,
   ending up equal to the section beside it (e.g. Resumo with the same height as Identificação). */
.jump-form-sections-grid .dxbl-gridlayout-item > .jump-form-section--stretch > .jump-form-summary-card {
    flex: 1 1 auto;
    height: 100%;
}

/* Section that should be left with the content's height only and align to the top of the row
   (e.g. the "Resumo" aligned by the block on the left instead of stretching). */
.jump-form-sections-grid .dxbl-gridlayout-item > .jump-form-section--top {
    height: auto;
    align-self: start;
}

.jump-form-section {
    border: 1px solid var(--app-page-border, #dbe7f6);
    border-radius: var(--app-page-radius, 8px);
    background: var(--app-page-card-bg, #fff);
    box-shadow: var(--app-page-shadow, 0 12px 30px rgba(16, 42, 84, .05));
    padding: 10px;
}

/* Fuel-supply control page: make the Resumo section and its summary card fill
   the grid row height so it matches the taller Identificação section beside it. */
.supply-control-summary-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.supply-control-summary-section .jump-form-summary-card {
    flex: 1 1 auto;
    height: 100%;
}

.jump-form-tabs-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid var(--app-page-border, #dbe7f6);
    border-radius: var(--app-page-radius, 8px);
    background: var(--app-page-card-bg, #fff);
    box-shadow: var(--app-page-shadow, 0 12px 30px rgba(16, 42, 84, .05));
}

.jump-form-tabs-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--app-page-border, #dbe7f6);
    background: #fff;
    scrollbar-width: none;
}

.jump-form-tabs-strip:hover {
    scrollbar-width: thin;
}

.jump-form-tabs-strip::-webkit-scrollbar {
    height: 0;
}

.jump-form-tabs-strip:hover::-webkit-scrollbar {
    height: 6px;
}

.jump-form-tabs-strip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #9fb2cc;
}

.jump-form-tabs-button {
    appearance: none;
    min-height: 36px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #06245d;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

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

.jump-form-tabs-button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #0057b8;
    outline-offset: -2px;
}

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

.jump-form-tabs-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.jump-form-tabs-overflow {
    position: relative;
    flex: 0 0 auto;
}

.jump-form-tabs-section.jump-form-tabs-overflow-open .jump-form-tabs-strip {
    overflow: visible;
}

.jump-form-tabs-overflow-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jump-form-tabs-overflow-caret {
    font-size: 8px;
}

.jump-form-tabs-overflow-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
}

.jump-form-tabs-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 31;
    display: grid;
    min-width: 180px;
    padding: 6px;
    border: 1px solid #dbe7f6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(14, 53, 122, 0.16);
}

.jump-form-tabs-overflow-item {
    appearance: none;
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #06245d;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.jump-form-tabs-overflow-item:hover {
    background: #f3f8ff;
    color: #0057b8;
}

.jump-form-tabs-overflow-item.active {
    background: #eef6ff;
    color: #0057b8;
}

.jump-form-tabs-overflow-item:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.jump-form-tabs-card {
    flex: 1 1 auto;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    min-width: 0;
}

.jump-form-tabs-body {
    min-width: 0;
    min-height: 0;
    padding: 8px;
    background: #fff;
}

.jump-form-tab-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.jump-form-theme-telemetry {
    --jump-form-telemetry-page: linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
    --jump-form-telemetry-surface: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --jump-form-telemetry-panel: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --jump-form-telemetry-border: rgba(194, 215, 242, 0.92);
    --jump-form-telemetry-grid: rgba(82, 136, 205, 0.06);
    --jump-form-telemetry-text: #0b489f;
    --jump-form-telemetry-muted: #5a78a6;
    --jump-form-telemetry-accent: #0d63c7;
    --jump-form-telemetry-accent-strong: #36c07d;
    background: transparent;
}

.jump-form-theme-telemetry .page-header-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title";
    min-height: 66px;
    margin-bottom: 12px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jump-form-theme-telemetry .page-header-title-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0d63c7 0%, #0a57b4 100%);
    border: 1px solid rgba(12, 92, 187, 0.55);
    box-shadow: 0 10px 22px rgba(13, 99, 199, 0.16);
}

.jump-form-theme-telemetry .page-header-title h1 {
    color: #0b3f90;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.jump-form-theme-telemetry .page-header-record-mode.new {
    border-color: rgba(155, 225, 180, 0.9);
    background: #eefbf1;
    color: #20a35f;
}

.jump-form-theme-telemetry .page-header-subtitle {
    color: #5d78a4;
}

.jump-form-theme-telemetry .page-header-topbar {
    background: transparent;
    box-shadow: none;
}

.jump-form-telemetry-shell {
    position: relative;
}

.jump-form-telemetry-shell::before {
    content: none;
}

.jump-form-telemetry-shell > * {
    position: relative;
    z-index: 1;
}

.jump-form-telemetry-panel {
    border-radius: 10px;
    border: 1px solid rgba(198, 217, 242, 0.95);
    background: var(--jump-form-telemetry-surface);
    box-shadow:
        0 14px 28px rgba(27, 79, 145, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.jump-form-telemetry-panel .jump-form-section-title {
    color: var(--jump-form-telemetry-text);
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    font-size: 14px;
}

.jump-form-telemetry-tabs {
    border-radius: 10px;
    overflow: hidden;
}

.jump-form-telemetry-tabs .jump-form-tabs-strip {
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    overflow: visible;
    padding: 6px 8px 0;
    border-bottom: 1px solid #dbe7f6;
    background: #fff;
    scrollbar-width: none;
}

.jump-form-telemetry-tabs .jump-form-tabs-button {
    appearance: none;
    min-height: 36px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #06245d;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.jump-form-telemetry-tabs .jump-form-tabs-button:hover {
    background: #f3f8ff;
    color: #0057b8;
}

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

.jump-form-telemetry-tabs .jump-form-tabs-body {
    background: transparent;
}

.jump-form-telemetry-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(208, 224, 245, 0.95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
    box-shadow:
        0 8px 18px rgba(27, 79, 145, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.jump-form-telemetry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, transparent 17px, rgba(125, 171, 225, 0.04) 17px, rgba(125, 171, 225, 0.04) 18px),
        linear-gradient(transparent 0, transparent 17px, rgba(125, 171, 225, 0.04) 17px, rgba(125, 171, 225, 0.04) 18px);
    background-size: 18px 18px;
}

.jump-form-telemetry-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(84, 144, 227, 0.03), transparent 34%),
        radial-gradient(circle at top right, rgba(86, 191, 134, 0.03), transparent 24%);
}

.jump-form-telemetry-card .jump-form-card-title {
    color: #0b4aa2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.jump-form-telemetry-card .jump-form-card-footer,
.jump-form-telemetry-card .jump-form-field-label {
    color: #5a78a6;
}

.jump-form-telemetry-card .form-control,
.jump-form-telemetry-card textarea,
.jump-form-telemetry-card input:not([type="checkbox"]):not([type="radio"]),
.jump-form-telemetry-card .dx-texteditor-input {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-color: rgba(198, 217, 242, 0.95);
    color: #274d82;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.jump-form-telemetry-card .form-control:focus,
.jump-form-telemetry-card textarea:focus,
.jump-form-telemetry-card input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: rgba(13, 99, 199, 0.42);
    box-shadow:
        0 0 0 0.2rem rgba(13, 99, 199, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.jump-form-telemetry-card .form-control::placeholder,
.jump-form-telemetry-card textarea::placeholder,
.jump-form-telemetry-card input::placeholder {
    color: rgba(74, 109, 155, 0.6);
}

.jump-form-telemetry-textarea {
    min-height: 76px;
    resize: vertical;
}

.jump-form-telemetry-summary {
    border: 1px solid rgba(198, 217, 242, 0.95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
    box-shadow:
        0 12px 24px rgba(27, 79, 145, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.jump-form-telemetry-summary .jump-form-card-title,
.jump-form-telemetry-summary .jump-form-summary-title {
    color: #0b4aa2;
}

.jump-form-telemetry-summary .jump-form-summary-subtitle,
.jump-form-telemetry-summary .jump-form-summary-row {
    color: #5d79a5;
}

.jump-form-telemetry-summary .jump-form-summary-row strong {
    color: #264d81;
}

.jump-form-telemetry-main,
.jump-form-telemetry-sidebar,
.jump-form-telemetry-tab-stack {
    display: grid;
    gap: 10px;
}

.jump-form-telemetry-overview {
    padding: 14px;
}

.jump-form-telemetry-breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    color: #6883aa;
    font-size: 11px;
    font-weight: 700;
}

.jump-form-telemetry-breadcrumbs strong {
    color: #0b4aa2;
}

.jump-form-telemetry-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, .8fr);
    gap: 12px;
}

.jump-form-telemetry-hero-card,
.jump-form-telemetry-ops-card,
.jump-form-telemetry-trend-card,
.jump-form-telemetry-maintenance-card,
.jump-form-telemetry-alert-card {
    padding: 14px;
    border: 1px solid rgba(208, 224, 245, 0.95);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
}

.jump-form-telemetry-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.jump-form-telemetry-hero-top h2 {
    margin: 0;
    color: #0b3f90;
    font-size: 22px;
    font-weight: 900;
}

.jump-form-telemetry-hero-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 229, 245, 0.95);
}

.jump-form-telemetry-hero-metrics span,
.jump-form-telemetry-ops-card span,
.jump-form-telemetry-trend-card span,
.jump-form-telemetry-maintenance-card span,
.jump-form-telemetry-alert-card span {
    color: #6883aa;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.jump-form-telemetry-hero-metrics strong,
.jump-form-telemetry-ops-card strong,
.jump-form-telemetry-trend-card strong,
.jump-form-telemetry-maintenance-card strong,
.jump-form-telemetry-alert-card strong {
    color: #21497d;
    font-size: 14px;
    font-weight: 900;
}

.jump-form-telemetry-hero-metrics div {
    display: grid;
    gap: 6px;
}

.jump-form-telemetry-hero-metric {
    appearance: none;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.jump-form-telemetry-hero-metric:hover strong,
.jump-form-telemetry-hero-metric:focus-visible strong {
    color: #0057b8;
    text-decoration: underline;
}

.jump-form-telemetry-hero-metric:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
    border-radius: 6px;
}

.jump-form-telemetry-hero-metric-action {
    appearance: none;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.jump-form-telemetry-hero-metric-action:hover strong,
.jump-form-telemetry-hero-metric-action:focus-visible strong {
    color: #0057b8;
    text-decoration: underline;
}

.jump-form-telemetry-hero-metric-action:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Summary bar: one always-visible strip under the header with the record's key values.
   The first row identifies the record (code, driver, vehicle, dates); the second holds
   the metrics as coloured pills so they can be told apart at a glance. An item rendered
   as a <button> takes the user to the field it summarises (the page decides which tab and
   which editor). Generalises the bar first drawn for the travel log
   (.travel-log-summary-bar) so the next form does not copy it a third time.
--------------------------------------------------------------------------- */
.jump-form-summary-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--app-page-border, #eaeef4);
    border-radius: 10px;
    background: var(--app-page-card-bg, #fff);
    box-shadow: 0 1px 4px rgba(6, 36, 93, .06);
    user-select: none;
}

/* Status pill at the start of the bar, vertically centred on the first row. */
.jump-form-summary-bar-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 30px;
}

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

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

.jump-form-summary-bar-fields.secondary {
    padding-top: 6px;
    border-top: 1px solid #eef2f7;
}

.jump-form-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

.jump-form-summary-item.wide {
    flex: 1 1 200px;
    max-width: 340px;
}

.jump-form-summary-item > span {
    color: #6b7a90;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.jump-form-summary-item > strong {
    max-width: 100%;
    overflow: hidden;
    color: #06245d;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Clickable items: strip the native button chrome and give them a hover surface. The
   negative margin keeps the text aligned with the non-clickable items beside it. */
button.jump-form-summary-item {
    appearance: none;
    margin: -2px -6px;
    padding: 2px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

button.jump-form-summary-item:hover,
button.jump-form-summary-item:focus-visible {
    background: #eef4fd;
}

button.jump-form-summary-item:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 1px;
}

/* Metric pills: each family of values has its own sober tone so they can be told apart
   without competing with the form. The neutral pill is the default for anything untoned. */
.jump-form-summary-item.metric > strong {
    padding: 1px 7px;
    border: 1px solid #dce3ed;
    border-radius: 999px;
    background: #eef2f7;
    color: #3f5573;
    font-size: 12px;
    font-weight: 600;
}

/* Odometer readings entered by the user: the theme's blue. */
.jump-form-summary-item.metric-km > strong {
    color: #185fa5;
    background: #e6f1fb;
    border-color: #cfe3f6;
}

/* Main computed result (total km): blue-green. */
.jump-form-summary-item.metric-total > strong {
    color: #0f6e56;
    background: #e1f5ee;
    border-color: #c6e8dc;
}

/* A leg without a load: discreet amber, it should draw the eye. */
.jump-form-summary-item.metric-empty > strong {
    color: #854f0b;
    background: #faeeda;
    border-color: #f0dfbe;
}

/* Loaded km: teal, the counterpart of the empty leg. */
.jump-form-summary-item.metric-loaded > strong {
    color: #0b6b7a;
    background: #e0f4f7;
    border-color: #c3e6ec;
}

/* The value to pay or invoice: the most prominent pill on the row. */
.jump-form-summary-item.metric-pay > strong {
    color: #534ab7;
    background: #eeedfe;
    border-color: #dad7f8;
    font-weight: 700;
}

/* Cost per km: discreet coral. */
.jump-form-summary-item.metric-price > strong {
    color: #993c1d;
    background: #faece7;
    border-color: #f2dbd1;
}

/* Telemetry dashboards draw their panels with the larger radius and the soft shadow;
   the bar follows them so it reads as one of the panels. */
.jump-form-dashboard-page .jump-form-summary-bar {
    border-radius: 16px;
    border-color: rgba(218, 228, 244, 0.96);
    box-shadow: 0 18px 34px rgba(14, 53, 122, 0.06);
}

@media (max-width: 900px) {
    .jump-form-summary-item.wide {
        max-width: none;
    }
}

.jump-form-lookup-hidden-host {
    display: none;
}

.jump-form-telemetry-ops-card header {
    margin-bottom: 12px;
}

.jump-form-telemetry-ops-card header span {
    color: #0b4aa2;
    font-size: 12px;
}

.jump-form-telemetry-ops-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(220, 231, 245, 0.95);
}

.jump-form-telemetry-form-panel {
    padding: 0;
}

.jump-form-telemetry-form-panel .jump-form-section-head {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(198, 217, 242, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.99));
}

.jump-form-telemetry-form-panel .jump-form-section-body,
.jump-form-telemetry-widget-panel .jump-form-section-body {
    padding: 14px;
}

.jump-form-telemetry-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.jump-form-telemetry-form-field-wide {
    grid-column: 1 / -1;
}

.jump-form-telemetry-form-group-title {
    margin: 12px 0 0;
    color: #0b4aa2;
    font-size: 13px;
    font-weight: 800;
}

.jump-form-telemetry-form-group-title + .jump-form-telemetry-form-grid {
    margin-top: 8px;
}

.jump-form-telemetry-form-field-pair {
    grid-column: span 2;
}

.jump-form-telemetry-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.jump-form-telemetry-summary-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.jump-form-telemetry-kpi-grid,
.jump-form-telemetry-module-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.jump-form-telemetry-kpi-card {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(208, 224, 245, 0.95);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
    box-shadow: 0 8px 18px rgba(27, 79, 145, 0.05);
}

.jump-form-telemetry-kpi-label {
    color: #6883aa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jump-form-telemetry-kpi-value {
    color: #0b4aa2;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
}

.jump-form-telemetry-kpi-note {
    color: #6883aa;
    font-size: 11px;
    line-height: 1.2;
}

/* These have to stay after .jump-form-telemetry-kpi-note: all four are single-class
   selectors, so the status colours only win on source order. */
.jump-form-telemetry-kpi-note--high {
    color: #0f9d58;
}

.jump-form-telemetry-kpi-note--medium {
    color: #c58a00;
}

.jump-form-telemetry-kpi-note--low {
    color: #d93025;
}

.jump-form-telemetry-summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(216, 229, 245, 0.95);
    color: #6883aa;
    font-size: 11px;
    font-weight: 700;
}

.jump-form-telemetry-summary-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jump-form-telemetry-summary-footer-item strong {
    color: #21497d;
    font-weight: 900;
}

.jump-form-telemetry-summary-footer-check {
    color: #20a35f;
    font-size: 12px;
}

.order-service-page__summary-section {
    position: relative;
    border-color: rgba(160, 205, 255, 0.95);
    background:
        radial-gradient(circle at top right, rgba(92, 212, 255, 0.18), transparent 28%),
        radial-gradient(circle at top left, rgba(44, 124, 255, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(238, 247, 255, 0.98));
    box-shadow:
        0 18px 34px rgba(21, 73, 138, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 0 0 1px rgba(166, 214, 255, 0.22);
}

.order-service-page__summary-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, transparent 19px, rgba(116, 181, 255, 0.09) 19px, rgba(116, 181, 255, 0.09) 20px),
        linear-gradient(transparent 0, transparent 19px, rgba(116, 181, 255, 0.09) 19px, rgba(116, 181, 255, 0.09) 20px);
    background-size: 20px 20px;
    opacity: .42;
}

.order-service-page__summary-section .jump-form-section-head {
    position: relative;
    overflow: hidden;
    border-bottom-color: rgba(165, 211, 255, 0.95);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(236, 247, 255, 0.96));
}

.order-service-page__summary-section .jump-form-section-head::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(11, 93, 194, 0), rgba(11, 93, 194, 0.92) 18%, rgba(79, 235, 194, 0.96) 52%, rgba(11, 93, 194, 0));
    box-shadow: 0 0 14px rgba(55, 169, 255, 0.35);
}

.order-service-page__summary-section .jump-form-section-title {
    color: #0a4bab;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-service-page__summary-stack {
    position: relative;
    margin-bottom: 0;
}

.order-service-page__summary-grid {
    gap: 10px;
}

.order-service-page__summary-list-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(165, 211, 255, 0.98);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 250, 255, 0.95));
    box-shadow:
        0 12px 26px rgba(25, 82, 150, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.order-service-page__summary-list-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 34%),
        radial-gradient(circle at top right, rgba(105, 213, 255, 0.18), transparent 30%);
}

.order-service-page__summary-list-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(8, 90, 191, 0.15), rgba(52, 229, 189, 0.92), rgba(8, 90, 191, 0.15));
    box-shadow: 0 0 14px rgba(56, 212, 189, 0.32);
}

.order-service-page__summary-list-card .jump-form-summary-list {
    position: relative;
    z-index: 1;
}

.order-service-page__summary-row {
    padding: 8px 0;
    border-bottom-color: rgba(170, 214, 255, 0.42);
}

.order-service-page__summary-row span {
    color: #5e79a5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-service-page__summary-row strong {
    color: #0a4bab;
    font-size: 18px;
    font-weight: 900;
    text-shadow: 0 0 18px rgba(67, 161, 255, 0.10);
}

.order-service-page__summary-card {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    align-content: start;
    border-color: rgba(165, 211, 255, 0.98);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 250, 255, 0.95));
    box-shadow:
        0 12px 26px rgba(25, 82, 150, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.order-service-page__summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 34%),
        radial-gradient(circle at top right, rgba(105, 213, 255, 0.20), transparent 30%);
}

.order-service-page__summary-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(8, 90, 191, 0.15), rgba(52, 229, 189, 0.92), rgba(8, 90, 191, 0.15));
    box-shadow: 0 0 14px rgba(56, 212, 189, 0.32);
}

.order-service-page__summary-card:hover {
    transform: translateY(-1px);
    border-color: rgba(116, 193, 255, 0.98);
    box-shadow:
        0 16px 30px rgba(19, 78, 149, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.order-service-page__summary-card .jump-form-telemetry-kpi-label,
.order-service-page__summary-card .jump-form-telemetry-kpi-value,
.order-service-page__summary-card .jump-form-telemetry-kpi-note {
    position: relative;
    z-index: 1;
}

.order-service-page__summary-card .jump-form-telemetry-kpi-label {
    color: #5e79a5;
    letter-spacing: 0.12em;
}

.order-service-page__summary-card .jump-form-telemetry-kpi-value {
    color: #0a4bab;
    font-size: 28px;
    text-shadow: 0 0 18px rgba(67, 161, 255, 0.12);
}

.order-service-page__summary-card .jump-form-telemetry-kpi-note {
    color: #6984ae;
    max-width: 18ch;
}

.order-service-page__summary-card--breakdowns::after {
    background: linear-gradient(90deg, rgba(29, 110, 214, 0.1), rgba(81, 169, 255, 0.96), rgba(29, 110, 214, 0.1));
}

.order-service-page__summary-card--services::after {
    background: linear-gradient(90deg, rgba(9, 113, 177, 0.1), rgba(63, 235, 201, 0.98), rgba(9, 113, 177, 0.1));
}

.order-service-page__summary-card--materials::after {
    background: linear-gradient(90deg, rgba(9, 101, 191, 0.1), rgba(65, 212, 255, 0.98), rgba(9, 101, 191, 0.1));
}

.order-service-page__summary-card--tires::after {
    background: linear-gradient(90deg, rgba(28, 97, 186, 0.1), rgba(114, 162, 255, 0.98), rgba(28, 97, 186, 0.1));
}

.order-service-page__summary-card--expenses::after {
    background: linear-gradient(90deg, rgba(15, 98, 188, 0.1), rgba(91, 238, 175, 0.98), rgba(15, 98, 188, 0.1));
}

.jump-form-telemetry-status-list {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(208, 224, 245, 0.95);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
}

.jump-form-telemetry-status-row,
.jump-form-telemetry-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.jump-form-telemetry-status-row + .jump-form-telemetry-status-row,
.jump-form-telemetry-inline-row + .jump-form-telemetry-inline-row {
    padding-top: 6px;
    border-top: 1px solid rgba(220, 231, 245, 0.95);
}

.jump-form-telemetry-status-label,
.jump-form-telemetry-inline-row span {
    color: #6883aa;
    font-size: 11px;
    font-weight: 700;
}

.jump-form-telemetry-status-value,
.jump-form-telemetry-inline-row strong {
    color: #21497d;
    font-size: 11px;
    font-weight: 900;
}

.jump-form-telemetry-status-value.is-positive {
    color: #1c8b5a;
}

.jump-form-telemetry-status-value.is-warning {
    color: #b77100;
}

.jump-form-telemetry-status-value.is-critical {
    color: #c53e3e;
}

.jump-form-telemetry-status-value.is-neutral {
    color: #305f95;
}

.jump-form-telemetry-module {
    display: grid;
    gap: 12px;
}

.jump-form-telemetry-module-hero {
    display: grid;
    grid-template-columns: minmax(110px, 130px) 1fr;
    gap: 22px;
    align-items: center;
    padding: 22px 24px;
    border: 1px dashed rgba(208, 224, 245, 0.95);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
}

.jump-form-telemetry-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.jump-form-telemetry-copy-block {
    display: grid;
    gap: 8px;
}

.jump-form-telemetry-copy-block strong {
    color: #0b4aa2;
    font-size: 13px;
    font-weight: 900;
}

.jump-form-telemetry-copy-block p {
    margin: 0;
    color: #6883aa;
    font-size: 12px;
    line-height: 1.35;
}

.jump-form-telemetry-trend-chart {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    height: 96px;
    margin: 12px 0;
    padding: 10px 8px 6px;
    border: 1px solid rgba(208, 224, 245, 0.95);
    border-radius: 10px;
    background: linear-gradient(transparent 0, transparent 23px, rgba(117, 163, 221, 0.08) 23px, rgba(117, 163, 221, 0.08) 24px);
    background-size: 100% 24px;
}

.jump-form-telemetry-trend-group {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px;
    justify-items: center;
    min-width: 0;
    height: 100%;
}

.jump-form-telemetry-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
    max-width: 34px;
    height: 100%;
}

.jump-form-telemetry-trend-bars span {
    flex: 1 1 0;
    border-radius: 3px 3px 0 0;
    background: #2d6fe0;
    height: 64%;
}

.jump-form-telemetry-trend-bars span:first-child {
    background: #42c57e;
    height: 38%;
}

.jump-form-telemetry-trend-bars span:nth-child(3) {
    background: #7fb0f2;
    height: 86%;
}

.jump-form-telemetry-trend-group:nth-child(even) .jump-form-telemetry-trend-bars span:first-child {
    height: 30%;
}

.jump-form-telemetry-trend-group:nth-child(even) .jump-form-telemetry-trend-bars span:nth-child(2) {
    height: 76%;
}

.jump-form-telemetry-trend-group:nth-child(3) .jump-form-telemetry-trend-bars span:nth-child(3) {
    height: 68%;
}

.jump-form-telemetry-trend-group small {
    color: #6883aa;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.jump-form-telemetry-gauge {
    --telemetry-gauge: 0%;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    border-radius: 999px;
    background: conic-gradient(#42c57e 0 var(--telemetry-gauge), #0d63c7 var(--telemetry-gauge) 82%, #eaf1fb 82% 100%);
}

.jump-form-telemetry-gauge-core {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 253, 255, 0.99));
    border: 1px solid rgba(208, 224, 245, 0.95);
}

.jump-form-telemetry-gauge-core strong {
    color: #0b4aa2;
    font-size: 28px;
}

.jump-form-telemetry-gauge-core span {
    color: #6883aa;
    font-size: 10px;
}

.jump-form-telemetry-maintenance-card,
.jump-form-telemetry-alert-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
}

.jump-form-telemetry-widget-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

.jump-form-telemetry-widget-icon.is-accent {
    background: #eef3ff;
    color: #2d4ee6;
}

.jump-form-telemetry-widget-icon.is-critical {
    background: #fff0f0;
    color: #ea5a5a;
}

.jump-form-telemetry-maintenance-card .jump-form-telemetry-widget-icon span,
.jump-form-telemetry-alert-card .jump-form-telemetry-widget-icon span {
    color: inherit;
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.jump-form-telemetry-widget-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.jump-form-telemetry-maintenance-card strong.is-positive,
.jump-form-telemetry-alert-card strong {
    color: #20a35f;
}

.jump-form-telemetry-maintenance-card strong.is-warning {
    color: #bf7e08;
}

.jump-form-telemetry-maintenance-card strong.is-critical {
    color: #c55252;
}

.jump-form-telemetry-empty {
    position: relative;
    display: grid;
    grid-template-columns: minmax(110px, 130px) 1fr;
    gap: 22px;
    align-items: center;
    min-height: 260px;
    padding: 26px;
    border: 1px dashed rgba(168, 197, 229, 0.9);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
}

.jump-form-telemetry-radar {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 999px;
    border: 1px solid rgba(96, 161, 224, 0.28);
    background:
        radial-gradient(circle at center, rgba(114, 240, 194, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(244, 250, 255, 0.98), rgba(229, 239, 250, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.62),
        0 0 24px rgba(41, 159, 255, 0.14);
}

.jump-form-telemetry-radar span {
    position: absolute;
    inset: 50%;
    border: 1px solid rgba(96, 161, 224, 0.22);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.jump-form-telemetry-radar span:nth-child(1) {
    width: 30px;
    height: 30px;
}

.jump-form-telemetry-radar span:nth-child(2) {
    width: 58px;
    height: 58px;
}

.jump-form-telemetry-radar span:nth-child(3) {
    width: 86px;
    height: 86px;
}

.jump-form-telemetry-empty-copy h3 {
    margin: 0 0 8px;
    color: #123f82;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jump-form-telemetry-empty-copy p {
    margin: 0 0 10px;
    color: #5b79a2;
    max-width: 70ch;
}

.jump-form-telemetry-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(160, 211, 190, 0.9);
    background: #edfbee;
    color: #1d8b5a;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.order-service-page__overview-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(260px, 0.9fr);
    /* Stretch so the "Resumo" panel matches the hero card's height instead of ending short of it. */
    align-items: stretch;
}

/* The section and the card inside it have to become flex containers, otherwise stretching the grid cell
   leaves the card at its content height and the panel still looks unaligned. */
.order-service-page__summary-section {
    display: flex;
    flex-direction: column;
}

.order-service-page__summary-section > .order-service-page__summary-list-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.order-service-page__summary-section .jump-form-summary-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* The overview block is deliberately compact: no breadcrumbs, no hero title and no KPI notes, so the tabs and
   grids below start higher up the page. Everything here is scoped to .order-service-page — the same telemetry
   classes are shared with other forms that still use the taller layout. */
.order-service-page__overview {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Flex column so the totals ribbon can absorb whatever height is left when the Resumo panel next door is
   taller — otherwise the leftover space piled up under the KPI cards. */
.order-service-page .jump-form-telemetry-hero-card {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
}

/* The order's key fields sit at the top of the totals card, in three columns of two rows. */
.order-service-page__hero-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
}

@media (max-width: 1200px) {
    .order-service-page__hero-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .order-service-page__hero-fields {
        grid-template-columns: 1fr;
    }
}

.order-service-page__totals-ribbon {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    /* Breathing room from the fields above, and grow to take the leftover height of the hero card. */
    flex: 1 1 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(214, 227, 245, 0.95);
}

/* Two lines only (label + value), so the card no longer needs the 112px floor the note required.
   align-content centres them when the ribbon is stretched, instead of leaving a gap underneath. */
.order-service-page__total-card {
    min-height: 56px;
    align-content: center;
    gap: 2px;
    padding: 8px 10px;
}

.order-service-page__total-card .jump-form-telemetry-kpi-value {
    font-size: 1.15rem;
}

.order-service-page__total-card--accent {
    border-color: rgba(84, 144, 227, 0.55);
    background:
        radial-gradient(circle at top right, rgba(78, 180, 130, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(243, 249, 255, 0.99), rgba(233, 244, 255, 0.99));
    box-shadow:
        0 12px 24px rgba(27, 79, 145, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.order-service-page__total-card--accent .jump-form-telemetry-kpi-value {
    color: #0b3f90;
    font-size: 1.3rem;
}

.order-service-page .order-service-full-grid,
.order-service-page .order-service-full-grid .dxbl-grid,
.order-service-page .order-service-full-grid .dxbl-grid-table,
.order-service-page .order-service-full-grid .dxbl-grid-header,
.order-service-page .order-service-full-grid .dxbl-grid-data-area {
    width: 100% !important;
    max-width: 100% !important;
}

/* Editors placed in a grid's CellEditTemplate: the div wrapping them exists only to give them
   focus through JS, so it must not change the cell's width. */
.jump-grid-numeric-editor-host,
.jump-grid-text-editor-host,
.jump-grid-editor-focus-host {
    width: 100%;
}

/* Strip under grids that have a detail band, where the "double click the empty area" gesture is not available
   because the row double click belongs to DevExpress (it expands the band). */
.jump-grid-add-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 8px;
    border: 1px dashed rgba(150, 185, 230, 0.9);
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.85);
    color: #3b6398;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.jump-grid-add-strip:hover,
.jump-grid-add-strip:focus-visible {
    border-color: #6ba3e6;
    background: rgba(235, 245, 255, 0.95);
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .jump-grid-add-strip {
        border-color: rgba(94, 124, 163, .8);
        background: rgba(34, 43, 56, .8);
        color: #9dc0ee;
    }

    .jump-grid-add-strip:hover,
    .jump-grid-add-strip:focus-visible {
        background: rgba(44, 57, 74, .9);
    }
}

/* "Deb. Stk" / "Deb. Stock": ticked directly in the grid cell, so it needs a visible box and a usable hit area. */
.order-service-stock-debit {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #0b5dc2;
    vertical-align: middle;
}

.order-service-stock-debit:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* "Pneus" tab: wheel layout diagram shown beside the grid. */
.order-service-tire-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 12px;
    align-items: start;
}

.order-service-tire-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(208, 224, 245, 0.95);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 253, 255, 0.99));
}

.order-service-tire-layout__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-service-tire-layout__title {
    color: #0a4bab;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-service-tire-layout__hint {
    color: #6b7c96;
    font-size: 11px;
}

.order-service-tire-layout__svg {
    width: 100%;
    max-height: 460px;
}

.order-service-tire-layout__driveline rect,
.order-service-tire-layout__driveline circle {
    fill: #46505f;
    stroke: #2b333d;
    stroke-width: 1.5;
}

.order-service-tire-layout__driveline line {
    stroke: #46505f;
    stroke-width: 9;
    stroke-linecap: round;
}

.order-service-tire-layout__hubdot {
    fill: #24c6f5;
    stroke: none;
}

.order-service-tire-layout__beam {
    stroke: #46505f;
    stroke-width: 11;
    stroke-linecap: round;
}

.order-service-tire-layout__hub {
    cursor: pointer;
}

.order-service-tire-layout__tire {
    fill: #d6dee9;
    stroke: #7d8a9c;
    stroke-width: 1.5;
    transition: fill .12s ease, stroke .12s ease;
}

.order-service-tire-layout__hub:hover .order-service-tire-layout__tire {
    fill: #bfd3ea;
}

/* Amber = tire on the vehicle today; green = tire this order is fitting. */
.order-service-tire-layout__hub.is-current .order-service-tire-layout__tire {
    fill: #d99a1a;
    stroke: #96690b;
}

.order-service-tire-layout__hub.is-order .order-service-tire-layout__tire {
    fill: #2f6731;
    stroke: #1f4a21;
}

.order-service-tire-layout__hub.is-selected .order-service-tire-layout__tire {
    stroke: #0b5dc2;
    stroke-width: 3;
}

.order-service-tire-layout__hub:focus {
    outline: none;
}

.order-service-tire-layout__hub:focus-visible .order-service-tire-layout__tire {
    stroke: #0b5dc2;
    stroke-width: 3;
}

.order-service-tire-layout__label {
    fill: #33415a;
    font-size: 17px;
    font-weight: 800;
}

.order-service-tire-layout__hub.is-order .order-service-tire-layout__label {
    fill: #22592a;
}

.order-service-tire-layout__hub.is-current .order-service-tire-layout__label {
    fill: #7a5406;
}

.order-service-tire-layout__detail {
    padding: 8px 10px;
    border: 1px solid rgba(178, 205, 236, 0.95);
    border-radius: 10px;
    background: rgba(246, 251, 255, 0.95);
    font-size: 12px;
}

.order-service-tire-layout__detail.is-empty {
    color: #6b7c96;
}

.order-service-tire-layout__detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #23456f;
}

.order-service-tire-layout__detail-tag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.order-service-tire-layout__detail-tag.is-order {
    background: #e5f3de;
    color: #22592a;
}

.order-service-tire-layout__detail-tag.is-current {
    background: #fdf1d6;
    color: #7a5406;
}

.order-service-tire-layout__detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin: 0;
}

.order-service-tire-layout__detail-list dt {
    color: #6b7c96;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.order-service-tire-layout__detail-list dd {
    margin: 0;
    color: #23456f;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.order-service-tire-layout__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    color: #55606f;
}

.order-service-tire-layout__swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    vertical-align: -1px;
}

.order-service-tire-layout__swatch.is-free {
    background-color: #d6dee9;
}

.order-service-tire-layout__swatch.is-current {
    background-color: #d99a1a;
}

.order-service-tire-layout__swatch.is-order {
    background-color: #2f6731;
}

@media (max-width: 1200px) {
    .order-service-tire-panel {
        grid-template-columns: 1fr;
    }

    .order-service-tire-layout__svg {
        max-height: 380px;
    }
}

@media (prefers-color-scheme: dark) {
    .order-service-tire-layout {
        border-color: rgba(80, 100, 128, .7);
        background: linear-gradient(180deg, rgba(30, 38, 50, .98), rgba(24, 31, 41, .98));
    }

    .order-service-tire-layout__title {
        color: #7fb6ff;
    }

    .order-service-tire-layout__hint,
    .order-service-tire-layout__legend {
        color: #aab6c6;
    }

    .order-service-tire-layout__tire {
        fill: #59677a;
        stroke: #8697aa;
    }

    .order-service-tire-layout__label {
        fill: #dce6f4;
    }

    .order-service-tire-layout__swatch.is-free {
        background-color: #59677a;
    }

    .order-service-tire-layout__detail {
        border-color: rgba(80, 100, 128, .7);
        background: rgba(36, 46, 60, .95);
    }

    .order-service-tire-layout__detail.is-empty,
    .order-service-tire-layout__detail-list dt {
        color: #aab6c6;
    }

    .order-service-tire-layout__detail-head,
    .order-service-tire-layout__detail-list dd {
        color: #dce6f4;
    }

    .order-service-tire-layout__hub.is-current .order-service-tire-layout__label {
        fill: #f0c975;
    }

    .order-service-tire-layout__hub.is-order .order-service-tire-layout__label {
        fill: #9fd8a6;
    }
}

/* "Operações" tab: legend for the estimated-vs-actual row colouring carried over from V3. */
.order-service-operations__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #55606f;
}

.order-service-operations__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    vertical-align: -1px;
}

.order-service-operations__swatch--under {
    background-color: #e5f3de;
}

.order-service-operations__swatch--on-target {
    background-color: #fff6cc;
}

.order-service-operations__swatch--over {
    background-color: #fbdcd8;
}

@media (prefers-color-scheme: dark) {
    .order-service-operations__legend {
        color: #aab6c6;
    }
}

.order-service-page .order-service-document-input {
    background-color: #f8fbff;
    color: #23456f;
    font-weight: 600;
}

.order-service-page .order-service-document-input.is-configured {
    background-color: #fff7df;
    color: #7a650d;
    font-weight: 700;
}

.order-service-page .order-service-document-input.is-generated {
    background-color: #edf7e8;
    color: #2f6731;
    font-weight: 700;
}

.order-service-page .order-service-document-input.is-source {
    background-color: #fff7df;
    color: #7a650d;
    font-weight: 700;
}

.order-service-page .order-service-header-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
}

.order-service-page .order-service-header-panel-copy {
    display: grid;
    gap: 2px;
}

.order-service-page .order-service-header-panel-copy strong {
    color: #0d3f8f;
    font-size: 14px;
    font-weight: 800;
}

.order-service-page .order-service-header-panel-copy span {
    color: #5c7296;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 1200px) {
    .order-service-page__overview-grid {
        grid-template-columns: 1fr;
    }

    .order-service-page__totals-ribbon {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .order-service-page__totals-ribbon {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .order-service-page__totals-ribbon {
        grid-template-columns: 1fr;
    }
}

.jump-form-section-title {
    margin: 0 0 8px;
    color: #003d8f;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
}

.jump-form-grid {
    width: 100%;
}

.jump-form-grid > * {
    min-width: 0;
}

.jump-form-grid > * > * {
    height: 100%;
}

.jump-form-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 118px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--app-page-border, #dbe7f6);
    border-radius: var(--app-page-radius, 8px);
    background: var(--app-page-card-bg, #fff);
    box-shadow: var(--app-page-shadow, 0 12px 30px rgba(16, 42, 84, .05));
}

.jump-form-card-clickable {
    padding-right: 10px;
}

.workshop-page .jump-form-card {
    min-height: 180px;
}

.workshop-employee-selector {
    display: grid;
    gap: 8px;
    max-height: 560px;
    overflow: auto;
}

.workshop-employee-selector__item {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d7e4f5;
    border-radius: 8px;
    background: #fff;
    color: #153b6f;
    text-align: left;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.workshop-employee-selector__item.selected {
    border-color: #0057b8;
    background: #eef6ff;
    box-shadow: 0 0 0 1px rgba(0, 87, 184, .08);
}

.workshop-employee-selector__item.assigned {
    border-color: #4f7ec7;
    background: #f3f8ff;
}

.workshop-employee-selector__item.assigned.selected {
    border-color: #0057b8;
    background: #e8f1ff;
    box-shadow: 0 0 0 1px rgba(0, 87, 184, .12);
}

.workshop-employee-selector__item.assigned .workshop-employee-selector__status {
    color: #0b55b5;
}

.workshop-employee-selector__item.available .workshop-employee-selector__status {
    color: #1f7a3d;
}

.workshop-employee-selector__item.busy .workshop-employee-selector__status {
    color: #0057b8;
}

.workshop-employee-selector__item.paused .workshop-employee-selector__status {
    color: #b86a00;
}

.workshop-employee-selector__header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.workshop-employee-selector__name {
    font-size: 13px;
    font-weight: 800;
}

.workshop-employee-selector__status,
.workshop-employee-selector__meta,
.workshop-employee-selector__service {
    font-size: 12px;
    font-weight: 600;
}

.workshop-employee-selector__meta {
    display: flex;
    gap: 8px;
    color: #48678f;
}

.workshop-action-panel {
    display: grid;
    gap: 12px;
}

.workshop-action-panel__group {
    display: grid;
    gap: 8px;
}

.workshop-action-panel__summary {
    display: grid;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2ecf8;
}

.workshop-action-panel__summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #37577f;
}

.workshop-action-panel__summary-row strong {
    color: #0f2f63;
    font-weight: 800;
    text-align: right;
}

.workshop-action-panel__notices {
    display: grid;
    gap: 6px;
}

.workshop-action-panel__notice {
    padding: 8px 10px;
    border: 1px solid #ffe4b8;
    border-radius: 8px;
    background: #fff8ec;
    color: #8a5200;
    font-size: 12px;
    font-weight: 700;
}

.workshop-page--designer {
    height: calc(100vh / var(--jump-zoom, 1) - 190px);
    min-height: 720px;
}

.workshop-modern-shell {
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) minmax(240px, 280px);
    gap: 12px;
    min-height: 0;
    height: 100%;
}

.workshop-modern-shell__orders,
.workshop-modern-shell__main,
.workshop-modern-shell__sidebar {
    min-width: 0;
    min-height: 0;
}

.workshop-modern-shell__orders .jump-form-section,
.workshop-modern-shell__main .jump-form-section,
.workshop-modern-shell__sidebar .jump-form-section {
    height: 100%;
}

.workshop-modern-shell__orders .jump-form-section-body,
.workshop-modern-shell__main .jump-form-section-body,
.workshop-modern-shell__sidebar .jump-form-section-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.workshop-modern-shell .jump-form-section {
    border-radius: 10px;
    background: #f7fbff;
}

.workshop-modern-shell .jump-form-section-head {
    padding-bottom: 8px;
    border-bottom: 1px solid #dfeaf7;
}

.workshop-orders-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    margin-bottom: 8px;
}

.workshop-orders-head__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workshop-orders-head__right .jump-form-field {
    margin-bottom: 0;
}

.workshop-refresh-button {
    min-width: 38px;
}

.workshop-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #cfe2fb;
    border-radius: 10px;
    background: #eef6ff;
    color: #0057b8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;
}

.workshop-chip strong {
    color: #082b61;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.1;
}

.workshop-chip--time {
    min-width: 88px;
}

.workshop-orders-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.workshop-stat-card {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #dfe9f7;
    border-radius: 10px;
    background: #fff;
}

.workshop-stat-card span {
    color: #6b84a5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.workshop-stat-card strong {
    color: #0b2f66;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.workshop-orders-grid-host {
    flex: 1 1 auto;
    min-height: 0;
}

.workshop-command-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #dbe7f6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 42, 84, .05);
}

.workshop-command-bar__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.workshop-command-bar__identity strong {
    color: #082b61;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.1;
}

.workshop-command-bar__eyebrow {
    color: #6883a6;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workshop-command-bar__context {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.workshop-command-bar__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.workshop-command-bar__actions .dxbl-btn {
    min-width: 112px;
}

.workshop-tabs-surface {
    display: grid;
    min-height: 0;
    height: 100%;
}

.workshop-tabs-surface > * {
    min-height: 0;
}

.workshop-main-stack {
    display: grid;
    gap: 10px;
    min-height: 0;
    height: 100%;
}

.workshop-main-stack > .jump-form-section:first-child {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workshop-main-stack > .jump-form-section:first-child .jump-form-section-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.workshop-grid-panel {
    display: flex;
    min-height: 0;
    height: 100%;
}

.workshop-grid-panel > * {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.workshop-grid-panel .dxbl-grid {
    height: 100%;
}

.workshop-main-stack > .jump-form-section:first-child .dxbl-grid,
.workshop-orders-grid-host .dxbl-grid {
    height: 100%;
}

.workshop-sidebar-panel {
    display: grid;
    gap: 10px;
}

.workshop-vehicle-hero {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0f4f99 0%, #08386e 100%);
    color: #fff;
}

.workshop-vehicle-hero__plate {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .04em;
}

.workshop-vehicle-hero__brand {
    font-size: 13px;
    font-weight: 700;
    opacity: .92;
}

.workshop-vehicle-hero__state {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 11px;
    font-weight: 800;
}

.workshop-facts-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dde8f7;
    border-radius: 10px;
    background: #fff;
}

.workshop-facts-card__title {
    color: #0d3f81;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workshop-facts-list {
    display: grid;
    gap: 8px;
}

.workshop-fact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.workshop-fact-row span {
    color: #6b84a5;
    font-weight: 700;
}

.workshop-fact-row strong {
    color: #082b61;
    font-weight: 850;
    text-align: right;
    overflow-wrap: anywhere;
}

.workshop-notes-stack {
    display: grid;
    gap: 10px;
}

.workshop-note-block {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e4ecf8;
    border-radius: 8px;
    background: #f8fbff;
}

.workshop-note-block span {
    color: #6b84a5;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.workshop-note-block p {
    margin: 0;
    color: #082b61;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.workshop-grid-actions {
    display: grid;
    gap: 6px;
}

.workshop-grid-actions .dxbl-btn {
    width: 100%;
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.workshop-modern-shell__sidebar .jump-form-card {
    min-height: 0;
}

.workshop-modern-shell__sidebar .workshop-action-panel__group {
    grid-template-columns: 1fr;
}

.workshop-modern-shell__sidebar .workshop-action-panel__group .dxbl-btn {
    width: 100%;
}

.workshop-modern-shell__sidebar .workshop-action-panel {
    gap: 10px;
}

.workshop-action-panel__group .dxbl-btn {
    min-height: 38px;
    border-radius: 10px;
    font-weight: 800;
}

.workshop-action-panel__summary {
    padding-top: 10px;
    border-top: 1px solid #e5edf8;
}

.workshop-action-panel__notice {
    border-radius: 10px;
}

@media (max-width: 1400px) {
    .workshop-modern-shell {
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) 240px;
    }
}

@media (max-width: 1180px) {
    .workshop-page--designer {
        height: auto;
        min-height: 0;
    }

    .workshop-modern-shell {
        grid-template-columns: 1fr;
    }

    .workshop-command-bar {
        grid-template-columns: 1fr;
    }

    .workshop-command-bar__actions {
        justify-content: stretch;
    }

    .workshop-command-bar__actions .dxbl-btn {
        flex: 1 1 160px;
    }

    .workshop-orders-stats {
        grid-template-columns: 1fr;
    }
}

.jump-form-card-compact {
    min-height: 84px;
}

.jump-form-card-stack {
    gap: 8px;
}

/* Several cards stacked in one grid column. A card fills its grid cell (height: 100%), which
   inside a stack would make every card as tall as the column; here each card keeps its own
   height and the last one grows, so the columns of a tab still end level. */
.jump-form-card-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.jump-form-card-column > .jump-form-card {
    height: auto;
}

.jump-form-card-column > .jump-form-card:last-child {
    flex: 1 1 auto;
}

.jump-form-card-field {
    min-width: 0;
}

.jump-form-card-field-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.jump-form-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #003d8f;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

button.jump-form-card-title-button {
    width: fit-content;
    max-width: calc(100% - 28px);
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

button.jump-form-card-title-button:hover > span:last-child,
button.jump-form-card-title-button:focus-visible > span:last-child {
    text-decoration: underline;
}

button.jump-form-card-title-button:focus-visible {
    outline: 2px solid #78aeea;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Collapsible card (JumpFormCard Collapsible). The title takes the whole row so the chevron sits
   against the right edge, and the underline the title button gives its last span is cancelled on
   the chevron — the underline belongs to the words, not to the arrow. */
button.jump-form-card-collapse-button {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
}

button.jump-form-card-collapse-button:hover > .jump-form-card-collapse-icon,
button.jump-form-card-collapse-button:focus-visible > .jump-form-card-collapse-icon {
    text-decoration: none;
}

.jump-form-card-collapse-icon {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #7d92b2;
    font-size: 9px;
    line-height: 1;
}

button.jump-form-card-collapse-button:hover .jump-form-card-collapse-icon {
    color: #0057b8;
}

/* A closed card keeps the title's bottom margin off, so it reads as one compact bar rather than a
   box with an empty space where the body was. */
.jump-form-card.is-collapsed > .jump-form-card-title {
    margin-bottom: 0;
}

/* A collapsible card that also has a drilldown keeps room for the link button on the right. */
.jump-form-card-collapsible.jump-form-card-clickable > .jump-form-card-collapse-button {
    max-width: calc(100% - 28px);
}

.jump-form-card-link-button {
    position: absolute;
    top: 12px;
    right: 9px;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #a8b3c2;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.jump-form-card-link-button:hover,
.jump-form-card-link-button:focus-visible {
    background: #eef6ff;
    color: #0057b8;
}

.jump-form-card-link-button:focus-visible {
    outline: 2px solid #78aeea;
    outline-offset: 2px;
}

/* Drilldown button of the ControlF4 on a card with the internal label hidden
   (.ctlf4-Size-label without its own .jump-form-card-label): the button's top: -9px
   (ControlF4.razor) is designed for the internal label's row; without a label, the
   button was left floating between the card's title and the editor. Make
   .control-f4-root static so the button anchors to .jump-form-card
   (position: relative) and place it in the title's corner, in the same position as the
   .jump-form-card-link-button (top 12px / right 9px). O :not(:has(...))
   it preserves the fields with their own label (e.g. the LoadOrder's Fornecedor card),
   where the button stays aligned with the field's label. */
.jump-form-card > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label .control-f4-root,
.jump-form-card > .jump-form-card-grid > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label .control-f4-root {
    position: static;
}

.jump-form-card > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label .ctlf4-root-drilldown-button,
.jump-form-card > .jump-form-card-grid > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label .ctlf4-root-drilldown-button {
    top: 12px;
    right: 9px;
    width: 20px;
}

/* With the autocomplete's popover open, the wrapper becomes position: relative
   (ControlF4Styles.css) and would become the button's anchor again, throwing it
   over the editor; hide the button while the popover is open. */
.jump-form-card > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label:has(.ctlf4-search-popover) .ctlf4-root-drilldown-button,
.jump-form-card > .jump-form-card-grid > .jump-form-card-field:not(:has(> .jump-form-card-label)) > .ctlf4-Size-label:has(.ctlf4-search-popover) .ctlf4-root-drilldown-button {
    visibility: hidden;
}

.jump-form-card-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #eef6ff;
    color: #0057b8;
    font-size: 12px;
    font-weight: 700;
}

.jump-form-card-field-code {
    width: 100%;
}

.jump-form-card-field-narrow {
    max-width: 240px;
}

.jump-form-card-grid {
    display: grid;
    gap: 8px;
    align-items: center;
}

.jump-form-compact-fields .jump-form-card-grid {
    justify-content: start;
}

.jump-form-card-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jump-form-card-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jump-form-card-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Segmented control for a mutually exclusive choice inside a card, such as picking
   whether an occurrence is quantified by an absolute amount or by a percentage.
   The visual language is the one already used by .trip-tab-strip, so a card and a
   tab strip on the same page read as the same family. */
.jump-form-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--app-page-border, #dbe7f6);
    border-radius: 7px;
    background: #fff;
}

.jump-form-segmented-option {
    min-height: 24px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #31476d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.jump-form-segmented-option:hover {
    background: #f3f8ff;
    color: #0057b8;
}

.jump-form-segmented-option.active {
    background: #eef6ff;
    border-color: #b9d2f4;
    color: #0057b8;
}

.jump-form-segmented-option:focus-visible {
    outline: 2px solid #78aeea;
    outline-offset: 2px;
}

/* The card's own separator, for a qualifying input that sits below a group of
   checkboxes or below the amount fields. */
.jump-form-card-divided {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef2f7;
}

.jump-form-card-grid-entity {
    grid-template-columns: minmax(112px, 150px) minmax(0, 1fr);
}

.jump-form-card-grid-entity-two {
    grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) minmax(112px, 150px) minmax(0, 1fr);
}

/* Variant of the entity-two grid that always keeps the four columns in a single
   row, regardless of the container width (uses compact lookup columns). */
.jump-form-card-grid-entity-two-inline {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) minmax(90px, 120px) minmax(0, 1fr);
}

.jump-form-card-grid-entity-two-inline > .jump-form-card-field {
    min-width: 0;
}

/* Variant of the entity grid (lookup code + description) that always keeps both
   fields on a single row, regardless of the container width. */
.jump-form-card-grid-entity-inline {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
}

.jump-form-card-grid-entity-inline > .jump-form-card-field {
    min-width: 0;
}

/* Variant of the entity grid with the place's postal code (lookup code + description +
   postal code) that always keeps the three fields on a single row, regardless of the
   container width. */
.jump-form-card-grid-entity-postal-inline {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) minmax(80px, 110px);
}

.jump-form-card-grid-entity-postal-inline > .jump-form-card-field {
    min-width: 0;
}

/* Variant of the two-column grid that always keeps both fields in a single
   row, regardless of the container width. */
.jump-form-card-grid-two-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jump-form-card-grid-two-inline > .jump-form-card-field {
    min-width: 0;
}

/* Clean form layout with the label on the left, in 2 columns (the style of the
   legacy "Info Geral" screen). Each field (JumpFormField) uses jump-form-field-row. */
.jump-form-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
    align-items: start;
}

/* Wider variants of the label-left layout, for the dense legacy bands where a
   full-width section holds three or four label+field columns per row. */
.jump-form-field-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 18px;
    align-items: start;
}

.jump-form-field-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 18px;
    align-items: start;
}

.jump-form-field-row {
    display: grid;
    grid-template-columns: minmax(84px, 118px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.jump-form-field-row > .jump-form-card-label,
.jump-form-field-row > .jump-form-card-label-button {
    margin-bottom: 0;
    align-self: center;
}

.jump-form-field-row--full {
    grid-column: 1 / -1;
    align-items: start;
}

/* Required-field highlight rendered by JumpFormField (Required="true"): a thin
   outline around the field's editor (every direct child except the label). An
   outline instead of a border so the editor's own border and layout stay intact.
   The color is a token so the convention can be retuned in one place. */
.jump-form-card-field--required > :not(label) {
    outline: 1px solid var(--jump-required-color, #dc3545);
    outline-offset: 1px;
    border-radius: 4px;
}

/* A card whose single full-width row (an observations textarea) fills the card
   height, so it aligns with taller neighbour cards (e.g. grids) in the same band. */
.jump-form-card--fill {
    height: 100%;
}

.jump-form-card--fill .jump-form-card-grid,
.jump-form-card--fill .jump-form-field-row--full {
    height: 100%;
}

.jump-form-card--fill .jump-form-field-row--full textarea.form-control {
    height: 100%;
    resize: none;
}

/* Nested grid that spans the full row of the parent card grid. */
.jump-form-card-grid > .jump-form-card-grid-span {
    grid-column: 1 / -1;
}

/* Field that spans the full row of the parent card grid. */
.jump-form-card-grid > .jump-form-card-field-span {
    grid-column: 1 / -1;
}

.purchase-document-page .jump-form-card-grid-entity {
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
}

.client-identification-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.client-identification-field-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: end;
}

.client-identification-location-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-identification-fields .client-field-full {
    grid-column: 1 / -1;
}

.client-lookup-pair {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    gap: 8px 10px;
    align-items: end;
    min-width: 0;
}

.client-identification-fields .ctlf4-Size-label,
.client-identification-fields .ctlf4,
.client-identification-fields .ctlf4-ctrl,
.client-identification-fields .form-control {
    width: 100%;
}

.client-credit-at-sections {
    display: grid;
    gap: 8px;
}

.client-credit-limit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.client-operational-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.client-processing-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.client-tax-number-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: end;
}

.client-insurance-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.client-fiscal-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 12px;
    align-items: center;
}

.client-tax-authority-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 12px;
    align-items: center;
}

.client-digital-billing-checkboxes {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 8px 18px;
    align-items: center;
    justify-content: start;
}

.client-group-supplier-fields {
    display: grid;
    grid-template-columns: minmax(130px, 200px) minmax(130px, 200px) minmax(0, 1fr);
    gap: 8px 10px;
    align-items: end;
}

.client-group-supplier-fields .ctlf4-Size-label,
.client-group-supplier-fields .ctlf4,
.client-group-supplier-fields .ctlf4-ctrl,
.client-group-supplier-fields .form-control {
    width: 100%;
}

.client-language-fields {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.client-vat-validation-button {
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 87, 184, .14);
}

.client-vat-validation-button .dxbl-btn-content {
    justify-content: center;
}

.jump-form-compact-fields .jump-form-card-field {
    max-width: 360px;
}

.jump-form-compact-fields .jump-form-card-grid-two {
    grid-template-columns: repeat(2, minmax(160px, 260px));
}

.jump-form-compact-fields .jump-form-card-grid-three {
    grid-template-columns: repeat(3, minmax(140px, 220px));
}

.jump-form-compact-fields .jump-form-card-grid-entity {
    grid-template-columns: minmax(120px, 160px) minmax(180px, 320px);
}

.jump-form-compact-fields .jump-form-card-grid-entity .jump-form-card-field,
.jump-form-compact-fields .jump-form-card-grid-two .jump-form-card-field,
.jump-form-compact-fields .jump-form-card-grid-three .jump-form-card-field {
    max-width: none;
}

.jump-form-compact-fields .jump-form-card .dxbl-text-edit,
.jump-form-compact-fields .jump-form-card .dx-texteditor,
.jump-form-compact-fields .jump-form-card .dxbs-textbox,
.jump-form-compact-fields .jump-form-card .dxbs-spin-edit,
.jump-form-compact-fields .jump-form-card .dxbs-combobox,
.jump-form-compact-fields .jump-form-card .ctlf4-Size-label {
    width: 100%;
    max-width: 100%;
}

.jump-form-document-block {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.jump-form-document-title {
    color: var(--app-page-ink, #06245d);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.jump-form-warning-input .dx-texteditor-input,
.jump-form-warning-input .dxbl-text-edit-input {
    background-color: #fff6a8;
}

.default-list-sql-tag-hint {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.default-list-sql-tag-hint-text {
    color: #d60000;
}

.default-list-sql-tag-hint-code {
    color: #128a2e;
}

.jump-form-link-active {
    color: #0057b8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jump-form-link-disabled {
    color: var(--app-page-muted, #557097);
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
    text-decoration: none;
    opacity: .62;
}

.jump-form-card-grid-registry-unlock {
    grid-template-columns: minmax(120px, 150px) minmax(120px, 160px) minmax(180px, 1fr);
}

/* The same flag + user + name row with an action button at the end (e.g. "Exportar ERP"). */
.jump-form-card-grid-registry-unlock--action {
    grid-template-columns: minmax(120px, 150px) minmax(120px, 160px) minmax(180px, 1fr) auto;
}

/* Entity lookup (code + description) followed by a timestamp column, for audit cards
   such as "who created the record and when". */
.jump-form-card-grid-entity-stamp {
    grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) minmax(140px, 170px);
}

/* Action cell of a card grid: lines the button up with the inputs beside it, under the
   height a labelled field takes. */
.jump-form-card-grid-action {
    display: flex;
    align-items: flex-end;
    align-self: end;
    min-height: 32px;
}

.jump-form-card-grid-lookup-compact {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
}

.jump-form-card-grid-lookup-narrow {
    grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
}

.jump-form-card-grid-lookup-narrow > .jump-form-card-field {
    min-width: 0;
}

.jump-form-card-grid-entity > .jump-form-card-field,
.jump-form-card-grid-entity-two > .jump-form-card-field,
.jump-form-card-grid-two > .jump-form-card-field {
    min-width: 0;
}

.jump-form-status-options {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 28px;
}

/* Variant that spreads the options across the full row width. */
.jump-form-status-options-justified {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jump-form-status-options-wrap {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 14px;
    min-width: 0;
}

.jump-form-status-options-wrap > * {
    flex: 0 1 auto;
    max-width: 100%;
}

.operator-permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
    justify-items: start;
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
    min-height: 58px;
}

.operator-permission-check {
    width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    transform: none;
}

.operator-permission-check.dxbl-checkbox.dxbl-checkbox-align-right {
    justify-content: flex-start !important;
}

.operator-permission-check .dxbl-checkbox-container,
.operator-permission-check .dxbl-checkbox-label {
    align-items: center;
    min-height: 18px;
}

.operator-planning-default-options {
    width: 100%;
    justify-content: space-between;
    gap: 18px;
}

.operator-planning-default-options > * {
    flex: 0 0 auto;
}

.cmr-reception-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
    justify-items: start;
    column-gap: 18px;
    row-gap: 10px;
    align-items: center;
    min-height: 58px;
}

.cmr-reception-status-check {
    width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    transform: none;
}

.cmr-reception-status-check.dxbl-checkbox.dxbl-checkbox-align-right {
    justify-content: flex-start !important;
}

.cmr-reception-status-check .dxbl-checkbox-container,
.cmr-reception-status-check .dxbl-checkbox-label {
    align-items: center;
    min-height: 18px;
}

.jump-form-dialog-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: calc(85vh / var(--jump-zoom, 1) - 96px);
    min-height: 0;
    padding: 12px;
}

.jump-form-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding-right: 4px;
}

.jump-form-dialog-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid #dce8f5;
    background: #fbfdff;
}

.jump-form-dialog-actions .dxbl-btn,
.jump-form-dialog-actions .dxbs-button {
    min-height: 30px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.ctlf4-list-frame {
    width: min(980px, calc(100vw / var(--jump-zoom, 1) - 64px));
    max-height: calc(100vh / var(--jump-zoom, 1) - 136px);
    margin: 24px auto 112px;
    background: #fff;
    border: 1px solid #c9d9ec;
    border-radius: 10px;
    box-shadow: 0 26px 48px rgba(20, 47, 85, .25), 0 4px 12px rgba(20, 47, 85, .12);
    overflow: hidden;
}

.ctlf4-list-window-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e1eaf6;
    background: #fbfdff;
}

.ctlf4-list-window-header > div {
    min-width: 0;
    flex: 1;
}

.ctlf4-list-title {
    color: #003d8f;
    font-size: 15px;
    font-weight: 850;
}

.ctlf4-list-subtitle {
    color: #557097;
    font-size: 11px;
}

.ctlf4-list-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #0057b8;
    font-weight: 900;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.ctlf4-list-close:hover {
    color: #0057b8;
    background: #fff;
}

.ctlf4-list-shell {
    max-height: calc(100vh / var(--jump-zoom, 1) - 220px);
    padding: 12px;
    overflow: auto;
    background: #fff;
}

.jump-form-dialog-frame.ctlf4-list-frame {
    width: 100%;
    height: calc(85vh / var(--jump-zoom, 1));
    max-height: calc(100vh / var(--jump-zoom, 1) - 48px);
    display: flex;
    flex-direction: column;
    margin: 0;
}

.jump-form-dialog-frame .ctlf4-list-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 12px;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-form-dialog-frame),
.jump-form-ctlf4-dialog,
.jump-form-ctlf4-dialog .dxbs-popup,
.jump-form-ctlf4-dialog .dxbl-popup {
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    max-height: calc(100vh / var(--jump-zoom, 1) - 48px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-form-dialog-frame) .dxbs-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-form-dialog-frame) .dxbl-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-form-dialog-frame) .dxbs-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-form-dialog-frame) .dxbl-popup-body,
.jump-form-ctlf4-dialog .dxbs-popup-content,
.jump-form-ctlf4-dialog .dxbl-popup-content,
.jump-form-ctlf4-dialog .dxbs-popup-body,
.jump-form-ctlf4-dialog .dxbl-popup-body {
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame),
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame),
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame),
.jump-dialog-popup,
.jump-dialog-popup.dxbs-popup,
.jump-dialog-popup.dxbl-popup,
.jump-dialog-popup .dxbs-popup,
.jump-dialog-popup .dxbl-popup,
.execution-button-parameter-popup,
.execution-button-parameter-popup.dxbs-popup,
.execution-button-parameter-popup.dxbl-popup,
.execution-button-parameter-popup .dxbs-popup,
.execution-button-parameter-popup .dxbl-popup,
.action-parameter-popup,
.action-parameter-popup.dxbs-popup,
.action-parameter-popup.dxbl-popup,
.action-parameter-popup .dxbs-popup,
.action-parameter-popup .dxbl-popup {
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbs-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbl-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbs-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbl-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbs-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbl-popup-header,
.execution-button-parameter-popup .dxbs-popup-header,
.execution-button-parameter-popup .dxbl-popup-header,
.action-parameter-popup .dxbs-popup-header,
.action-parameter-popup .dxbl-popup-header {
    display: none !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbs-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbl-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbs-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .dxbl-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.jump-dialog-frame) .jump-dialog-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbs-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbl-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbs-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .dxbl-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.execution-button-parameter-dialog-frame) .execution-button-parameter-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbs-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbl-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbs-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .dxbl-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.action-parameter-dialog-frame) .action-parameter-popup-body,
.jump-dialog-popup-body,
.execution-button-parameter-popup-body,
.action-parameter-popup-body,
.execution-button-parameter-popup .dxbs-popup-content,
.execution-button-parameter-popup .dxbl-popup-content,
.execution-button-parameter-popup .dxbs-popup-body,
.execution-button-parameter-popup .dxbl-popup-body,
.action-parameter-popup .dxbs-popup-content,
.action-parameter-popup .dxbl-popup-content,
.action-parameter-popup .dxbs-popup-body,
.action-parameter-popup .dxbl-popup-body {
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

dxbl-popup-cell:has(.jump-dialog-frame .ctlf4-Size-label) {
    z-index: 9990 !important;
}

.jump-dialog-frame {
    height: 100%;
    max-height: none;
    border-radius: 8px;
}

.jump-form-config-dialog-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(85vh / var(--jump-zoom, 1));
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d6e2f0;
    border-radius: 12px;
    background: #f4f7fb;
    box-shadow: 0 28px 58px rgba(18, 43, 78, .22), 0 4px 14px rgba(18, 43, 78, .10);
}

.jump-form-config-dialog-frame.jump-dialog-frame {
    height: 100%;
    max-height: none;
    border-radius: 8px;
}

.jump-form-config-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    min-height: 84px;
    padding: 14px 16px;
    border-bottom: 1px solid #dfe8f5;
    background: #ffffff;
}

.jump-form-config-dialog-title-area {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.jump-form-config-dialog-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0057b8;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 87, 184, .24);
}

.jump-form-config-dialog-icon .oi,
.jump-form-config-dialog-icon .fas {
    font-size: 18px;
}

.jump-form-config-dialog-title-block {
    min-width: 0;
}

.jump-form-config-dialog-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #5b728f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.jump-form-config-dialog-title-block h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #06245d;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-form-config-dialog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-width: 0;
}

.jump-form-config-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.jump-form-config-dialog-button,
.jump-form-config-dialog-close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border-radius: 6px;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.jump-form-config-dialog-button {
    padding: 0 13px;
    border: 1px solid #d5e1ee;
    background: #ffffff;
    color: #334c69;
}

.jump-form-config-dialog-button.primary {
    border-color: #0057b8;
    background: #0057b8;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 87, 184, .22);
}

.jump-form-config-dialog-button.secondary {
    background: #f8fafc;
}

.jump-form-config-dialog-close {
    width: 34px;
    padding: 0;
    border: 1px solid #dbe7f6;
    background: #ffffff;
    color: #0057b8;
}

.jump-form-config-dialog-button:hover,
.jump-form-config-dialog-close:hover {
    border-color: #9fc5f4;
    background: #eef6ff;
    color: #00499e;
    box-shadow: 0 8px 18px rgba(16, 42, 84, .12);
}

.jump-form-config-dialog-button.primary:hover {
    border-color: #004a9e;
    background: #004a9e;
    color: #ffffff;
}

.jump-form-config-dialog-button:active,
.jump-form-config-dialog-close:active {
    transform: translateY(1px);
}

.jump-form-config-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    background: #f4f7fb;
}

.jump-form-config-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 12px 16px;
    border-top: 1px solid #dfe8f5;
    background: #ffffff;
}

.jump-form-config-dialog-body .jump-form-section,
.jump-form-config-dialog-body .jump-form-tabs-section {
    border-color: #dbe7f6;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 43, 78, .06);
}

.jump-form-config-dialog-body .jump-form-section + .jump-form-section,
.jump-form-config-dialog-body .jump-form-section + .jump-form-tabs-section,
.jump-form-config-dialog-body .jump-form-tabs-section + .jump-form-section {
    margin-top: 10px;
}

.jump-form-config-dialog-body .jump-form-section-title {
    justify-content: flex-start;
    min-height: 24px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf3fa;
    color: #06245d;
    font-size: 13px;
    text-align: left;
}

.jump-form-config-dialog-body .jump-form-section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 8px;
    border-radius: 999px;
    background: #0057b8;
    vertical-align: -2px;
}

.jump-form-config-dialog-body .jump-form-card {
    min-height: 96px;
    border-color: #dfe9f7;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(18, 43, 78, .06);
}

.jump-form-config-dialog-body .jump-form-card-title {
    color: #06245d;
}

.jump-form-config-dialog-body .jump-form-card-icon {
    background: #eaf3ff;
    color: #075ebd;
}

.jump-form-config-dialog-body .jump-form-tabs-strip,
.jump-form-config-dialog-body .jump-form-tabs-body {
    background: #ffffff;
}

.jump-form-config-dialog-body .jump-form-tabs-card {
    background: #ffffff;
}

.jump-form-config-dialog-body .jump-form-tabs-body {
    padding: 10px;
}

.jump-form-config-dialog-body .form-control,
.jump-form-config-dialog-body select.form-control,
.jump-form-config-dialog-body textarea.form-control {
    min-height: 32px;
    border-color: #cbd8e8;
    border-radius: 6px;
    background: #ffffff;
    color: #17263b;
    font-size: 12px;
    font-weight: 650;
}

.jump-form-config-dialog-body textarea.form-control {
    min-height: 58px;
}

.jump-form-config-dialog-body .form-control:focus,
.jump-form-config-dialog-body select.form-control:focus,
.jump-form-config-dialog-body textarea.form-control:focus {
    border-color: #8ab8ef;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, .10);
}

.jump-form-config-dialog-body .jump-form-status-options {
    gap: 10px 16px;
}

.jump-form-config-dialog-body .jump-form-status-check {
    font-size: 11px;
    transform: scale(.88);
    transform-origin: left center;
}

.jump-form-status-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
    justify-items: start;
    min-width: 0;
}

.jump-form-status-options-grid > * {
    width: 100%;
    justify-self: start;
    text-align: left;
    margin-left: 0 !important;
}

.jump-form-status-options-vertical {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
    min-width: 0;
}

.jump-form-status-check > input[type="radio"],
.jump-form-status-check > input[type="checkbox"] {
    margin-right: 6px;
}

.jump-form-status-check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 11px;
    line-height: 1.1;
    transform: scale(.88);
    transform-origin: left center;
    white-space: normal;
    min-width: 0;
}

.jump-form-status-options-grid .jump-form-status-check,
.jump-form-status-options-vertical .jump-form-status-check {
    width: 100%;
    text-align: left;
    margin-left: 0 !important;
}

/* See the note in ControlF4Styles.css: with .control-f4-root in a column, a label
   with width 0 but with text would still take up a row. */
.jump-form-lookup-label-hidden .ctlf4-label {
    display: none;
}

.jump-form-card-label {
    display: block;
    margin-bottom: 4px;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}

.jump-form-label-emphasis {
    color: var(--app-page-ink, #06245d);
    font-weight: 850;
}

button.jump-form-card-label-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
}

button.jump-form-card-label-button:hover,
button.jump-form-card-label-button:focus-visible {
    color: var(--app-page-ink, #06245d);
    text-decoration: underline;
}

.jump-form-input-emphasis .dx-texteditor-input {
    font-weight: 850;
}

.jump-form-card .ctlf4-Size-label,
.jump-form-card .ctlf4,
.jump-form-card .ctlf4-ctrl,
.jump-form-card .form-control {
    width: 100%;
}

.jump-form-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 32px;
}

.jump-form-checkbox-list-vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

.jump-form-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin: 0;
    color: var(--app-page-ink, #06245d);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.jump-form-checkbox-item .form-check-input {
    float: none;
    position: static;
    flex: 0 0 auto;
    margin: 0;
}

.jump-form-input-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.jump-form-command-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 34px;
}

.jump-form-command-button.dxbl-btn {
    min-width: 86px;
    min-height: 32px;
    align-self: stretch;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
}

.jump-form-command-button .dxbl-btn-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    line-height: 1.1;
    white-space: nowrap;
}

.jump-form-phone-field {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.jump-form-phone-field .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.jump-form-phone-action {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: var(--jump-field-height, 34px);
    border: 1px solid #ced4da;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #f8fbff;
    color: #0057b8;
    text-decoration: none;
    cursor: pointer;
}

.jump-form-phone-action:hover {
    background: #eef6ff;
    color: #00499e;
    text-decoration: none;
}

.jump-form-phone-action:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
}

.jump-form-phone-action:disabled {
    background: #eef2f6;
    color: #8a9bb1;
    cursor: not-allowed;
}

.jump-form-reveal-field {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.jump-form-reveal-field .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.jump-form-reveal-action {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: var(--jump-field-height, 34px);
    border: 1px solid #ced4da;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #f8fbff;
    color: #0057b8;
    cursor: pointer;
}

.jump-form-reveal-action:hover {
    background: #eef6ff;
    color: #00499e;
}

.jump-form-reveal-action:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
}

.jump-form-reveal-action.is-active {
    background: #eef6ff;
    color: #00499e;
}

.jump-form-action-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #9fc5f4;
    border-radius: 8px;
    background: #eef6ff;
    color: #0057b8;
    box-shadow: 0 6px 14px rgba(16, 42, 84, .08);
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.jump-form-action-button:hover {
    border-color: #75aae8;
    background: #e4f1ff;
    color: #00499e;
    box-shadow: 0 9px 18px rgba(16, 42, 84, .12);
}

.jump-form-action-button:active {
    transform: translateY(1px);
}

.jump-form-action-button:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
}

.jump-form-action-button .oi {
    flex: 0 0 auto;
    font-size: 12px;
}

.jump-form-action-button-compact {
    width: auto;
    min-width: 34px;
    min-height: 32px;
    padding: 0 10px;
}

.jump-form-master-detail {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
}

.jump-form-master-pane,
.jump-form-detail-pane {
    min-width: 0;
}

.jump-form-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.jump-form-list-heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.jump-form-list-title {
    color: var(--app-page-ink, #06245d);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.jump-form-list-subtitle {
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.jump-form-card-list {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.jump-form-list-card {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    min-height: 44px;
    padding: 7px 6px 7px 8px;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 1px 2px rgba(16, 42, 84, .08), 0 5px 12px rgba(16, 42, 84, .045);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.jump-form-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #cdd9e8;
}

.jump-form-list-card.active {
    border-color: #79b4e7;
    background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
    box-shadow: 0 1px 2px rgba(0, 87, 184, .12), 0 7px 16px rgba(0, 87, 184, .10);
}

.jump-form-list-card.active::before {
    background: #0f6db6;
}

.jump-form-list-card.dragging {
    opacity: .62;
}

.jump-form-list-card.drop-target {
    border-color: #2f80d0;
    box-shadow: 0 0 0 2px rgba(47, 128, 208, .14), 0 6px 16px rgba(16, 42, 84, .08);
}

.jump-form-list-card-main {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    justify-self: start;
}

.jump-form-list-card-drag[draggable="true"] {
    cursor: grab;
}

.jump-form-list-card-drag[draggable="true"]:active,
.jump-form-list-card.dragging .jump-form-list-card-drag {
    cursor: grabbing;
}

.jump-form-list-card-main:hover,
.jump-form-list-card-main:focus-visible {
    background: transparent;
}

.jump-form-list-card-main:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: -2px;
}

.jump-form-list-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.jump-form-list-card-title,
.jump-form-list-card-meta,
.jump-form-list-card-reference span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-form-list-card-title {
    flex: 0 1 auto;
    color: var(--app-page-ink, #06245d);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.jump-form-list-card-order {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    min-height: 18px;
    padding: 2px 5px;
    border: 1px solid #c8d9ec;
    border-radius: 999px;
    background: #eef5fc;
    color: #285c8e;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.jump-form-list-card-drag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 26px;
    border-radius: 0;
    background: transparent;
    color: #6d86a5;
    font-size: 12px;
    opacity: .86;
    transition: color .16s ease, opacity .16s ease;
}

.jump-form-list-card:hover .jump-form-list-card-drag,
.jump-form-list-card:focus-within .jump-form-list-card-drag,
.jump-form-list-card.active .jump-form-list-card-drag {
    background: transparent;
    color: #2e669b;
    opacity: 1;
}

.jump-form-list-card-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.jump-form-list-card-details {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jump-form-list-card-meta {
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.jump-form-list-card-reference {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #386072;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.jump-form-list-card-reference .oi {
    flex: 0 0 auto;
    color: #5f7f91;
    font-size: 9px;
}

.jump-form-list-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}

.jump-form-list-card-remove {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8a4b4b;
    cursor: pointer;
    justify-self: end;
    line-height: 1;
    transition: color .16s ease, opacity .16s ease;
}

.jump-form-list-card-remove:hover,
.jump-form-list-card-remove:focus-visible {
    background: transparent;
    color: #a51f1f;
}

.jump-form-list-card-remove:focus-visible {
    outline: 2px solid #c93232;
    outline-offset: -2px;
}

.jump-form-list-card-remove:disabled {
    color: #b8a3a3;
    cursor: not-allowed;
    opacity: .68;
}

.jump-form-parameters-editor .jump-form-card-grid + .jump-form-card-grid,
.jump-form-parameters-editor .jump-form-status-options + .jump-form-card-grid {
    margin-top: 10px;
}

.jump-form-parameters-flags {
    margin-top: 10px;
}

.jump-form-lookup-disabled {
    opacity: .7;
    pointer-events: none;
}

.import-page .jump-form-import-actions {
    display: grid;
    gap: 8px;
}

.import-page .jump-form-import-progress {
    display: grid;
    gap: 8px;
}

.import-page .jump-form-import-progress-label {
    color: var(--app-page-ink, #06245d);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.jump-form-card-metric {
    display: block;
    min-height: 30px;
    color: var(--app-page-ink, #06245d);
    font-size: 20px;
    font-weight: 800;
    line-height: 30px;
}

.jump-form-file-field input[type="file"] {
    width: 100%;
    color: var(--app-page-muted, #557097);
    font-size: 12px;
    font-weight: 600;
    line-height: 30px;
}

.jump-form-file-field input[type="file"]::file-selector-button {
    height: 30px;
    margin-right: 10px;
    padding: 0 14px;
    border: 1px solid #c8ddfb;
    border-radius: 7px;
    background: #eef6ff;
    color: #0057b8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.jump-form-file-field input[type="file"]:not(:disabled)::file-selector-button:hover {
    border-color: #0057b8;
    background: #0057b8;
    color: #ffffff;
}

.jump-form-file-field input[type="file"]:disabled {
    opacity: .55;
}

.jump-form-file-field input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
}

.service-sheet-load-unload-details {
    display: grid;
    gap: 10px;
}

.jump-form-card-foot {
    min-height: 14px;
    margin-top: 8px;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 600;
}

.jump-form-summary-card {
    min-height: 0;
}

.jump-form-summary-card .jump-form-card-title {
    margin-bottom: 4px;
}

.jump-form-summary-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.jump-form-summary-title .oi {
    color: #0057b8;
    font-size: 12px;
    line-height: 1;
}

.jump-form-summary-subtitle {
    margin-top: 2px;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 500;
}

.jump-form-summary-list {
    display: grid;
}

.client-portal-load-order-page-compact .jump-form-section {
    padding: 8px;
}

.client-portal-load-order-page-compact .jump-form-section-title {
    margin-bottom: 6px;
    font-size: 13px;
}

.client-portal-load-order-page-compact .jump-form-card {
    padding: 9px 10px;
}

.client-portal-load-order-page-compact .jump-form-card-title {
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11px;
}

.client-portal-load-order-page-compact .jump-form-card-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 11px;
}

.client-portal-load-order-page-compact .jump-form-card .form-control {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
}

.client-portal-load-order-page-compact .jump-form-summary-row {
    padding: 5px 0;
}

.client-portal-service-card.jump-form-card,
.client-portal-actions-panel.jump-form-card {
    min-height: 0;
}

.client-portal-service-section {
    height: 100%;
    min-height: 376px;
}

.client-portal-service-grid {
    height: calc(100% - 22px);
}

.client-portal-service-grid > * > * {
    height: 100%;
}

.client-portal-service-card.jump-form-card {
    justify-content: center;
    min-height: 150px;
}

.client-portal-service-meta-grid {
    display: grid;
    grid-template-columns: minmax(84px, .7fr) minmax(72px, .55fr) minmax(110px, .8fr) minmax(180px, 1.45fr) minmax(120px, .9fr);
    gap: 8px;
    align-items: end;
}

.client-portal-service-parties-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.client-portal-load-order-side-stack {
    display: grid;
    gap: 10px;
    align-content: start;
}

.client-portal-load-order-side-stack .jump-form-section {
    display: grid;
    align-content: start;
    height: auto;
    overflow: visible;
}

.client-portal-load-order-side-stack .jump-form-card {
    height: auto;
}

.client-portal-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.client-portal-action-button {
    min-height: 34px;
    padding: 0 8px;
}

.client-portal-action-alert-button {
    border-color: #dc3545;
    background: #fff5f5;
    color: #a61d2d;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, .12);
}

.client-portal-action-alert-button:hover {
    border-color: #c83244;
    background: #ffe9eb;
    color: #8f1725;
}

.client-portal-lines-card.jump-form-card {
    min-height: 0;
}

.client-portal-lines-card .jump-form-card-title {
    margin-bottom: 6px;
}

@media (max-width: 1200px) {
    .client-portal-service-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.logistics-document-page .jump-form-section {
    padding: 8px;
}

.logistics-document-page .jump-form-card {
    padding: 8px 10px;
}

.logistics-document-page__header-section .jump-form-section-title {
    margin-bottom: 6px;
}

.logistics-document-page__header-section .jump-form-card-title {
    margin-bottom: 6px;
}

.logistics-document-page__lookup-pair {
    grid-template-columns: minmax(108px, 138px) minmax(0, 1fr);
}

.logistics-document-page__client-pair {
    grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
}

.logistics-document-page__document-meta {
    align-items: end;
}

.logistics-document-page__compact-fields {
    gap: 6px;
}

.logistics-document-page__summary-card .jump-form-summary-row {
    padding: 5px 0;
}

.logistics-document-page__summary-card .jump-form-summary-subtitle {
    display: none;
}

.logistics-document-page__section-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

@media (max-width: 1100px) {
    .logistics-document-page__document-meta,
    .logistics-document-page__lookup-pair,
    .logistics-document-page__client-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup),
.logistics-document-units-popup-shell,
.logistics-document-units-popup-shell .dxbs-popup,
.logistics-document-units-popup-shell .dxbl-popup {
    max-width: calc(100vw / var(--jump-zoom, 1) - 48px) !important;
    overflow: hidden !important;
    border: 1px solid #cfe0f3 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 52px rgba(15, 40, 82, .24), 0 4px 14px rgba(15, 40, 82, .12) !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbs-popup-header,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbl-popup-header,
.logistics-document-units-popup-shell .dxbs-popup-header,
.logistics-document-units-popup-shell .dxbl-popup-header {
    padding: 0 !important;
    border-bottom: 1px solid #dce8f7 !important;
    background: linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%) !important;
}

dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbs-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbl-popup-content,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbs-popup-body,
dxbl-modal > .dxbs-modal > .dxbs-popup:has(.logistics-document-units-popup) .dxbl-popup-body,
.logistics-document-units-popup-shell .dxbs-popup-content,
.logistics-document-units-popup-shell .dxbl-popup-content,
.logistics-document-units-popup-shell .dxbs-popup-body,
.logistics-document-units-popup-shell .dxbl-popup-body {
    padding: 0 !important;
    background: #ffffff !important;
}

.logistics-document-units-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 62px;
    padding: 14px 16px 14px 18px;
    color: #002f6c;
}

.logistics-document-units-popup__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.logistics-document-units-popup__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #5f7188;
    background: transparent;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.logistics-document-units-popup__close:hover,
.logistics-document-units-popup__close:focus-visible {
    border-color: #cfe0f3;
    color: #002f6c;
    background: #ffffff;
    outline: none;
}

.logistics-document-units-popup__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid #b9d5f4;
    border-radius: 10px;
    color: #0057b8;
    background: #eaf4ff;
    font-size: 1rem;
    font-weight: 900;
}

.logistics-document-units-popup__title {
    color: #002f6c;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.logistics-document-units-popup__subtitle {
    margin-top: 2px;
    color: #58759b;
    font-size: 12px;
    font-weight: 600;
}

.logistics-document-units-popup {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.logistics-document-units-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.logistics-document-units-popup-shell .dxbl-btn,
.logistics-document-units-popup-shell .btn {
    min-height: 38px;
}

.jump-list-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jump-list-hint {
    color: #58759b;
    font-size: 12px;
    font-weight: 600;
}

.jump-list-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* .jump-status-pill now lives in components/badges.css. */

.jump-grid-row-success {
    background-color: #e9f8ef !important;
}

.jump-grid-row-warning {
    background-color: #fff7d9 !important;
}

.jump-grid-row-danger {
    background-color: #fbe2e2 !important;
}

/* A row with unsaved changes keeps its on-target/at-limit/over-limit colour and is marked with a
   bar on the leading edge instead, so the two signals can be read at the same time. */
tr.jump-grid-row-dirty > td:first-child,
td.jump-grid-row-dirty:first-child {
    box-shadow: inset 3px 0 0 0 #b26a00;
}

.jump-form-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 7px 0;
    border-bottom: 1px solid #e8eff8;
    color: var(--app-page-muted, #557097);
    font-size: 12px;
}

/* The closing line of a summary that adds up to a total: same row, read as the conclusion. */
.jump-form-summary-row-total {
    border-bottom: 0;
}

.jump-form-summary-row-total span,
.jump-form-summary-row-total strong {
    color: var(--app-page-ink, #06245d);
    font-weight: 800;
}

/* A second, quieter line inside a summary label, such as the date under a document number. */
.jump-form-summary-note {
    display: block;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 500;
}

/* What a card says when it has nothing to list yet. */
.jump-form-card-empty {
    margin: 0;
    color: var(--app-page-muted, #557097);
    font-size: 12px;
    line-height: 1.5;
}

/* Buttons that belong to a card, under its content. */
.jump-form-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.jump-form-summary-row:last-child {
    border-bottom: 0;
}

.jump-form-summary-row span,
.jump-form-summary-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jump-form-summary-row span {
    flex: 0 1 auto;
    white-space: nowrap;
}

.jump-form-summary-row strong {
    flex: 1 1 0;
    color: var(--app-page-ink, #06245d);
    font-size: 13px;
    font-weight: 850;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.jump-form-summary-row.sales-document-summary-amount span,
.jump-form-summary-row.sales-document-summary-amount strong {
    color: var(--app-page-ink, #06245d);
    font-weight: 850;
}

.occurrence-consultation-page .occurrence-consultation-actions {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}

.occurrence-consultation-page .occurrence-consultation-action-button {
    appearance: none;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 7px 9px;
    border: 1px solid #c9d8eb;
    border-radius: 8px;
    background: #fff;
    color: #06245d;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.occurrence-consultation-page .occurrence-consultation-action-button:hover {
    border-color: #8ab8ef;
    box-shadow: 0 8px 18px rgba(16, 42, 84, .10);
}

.occurrence-consultation-page .occurrence-consultation-action-button:focus-visible {
    outline: 2px solid #0057b8;
    outline-offset: 2px;
}

.occurrence-consultation-page .occurrence-consultation-action-button:disabled {
    opacity: .56;
    cursor: not-allowed;
}

.occurrence-consultation-page .occurrence-consultation-action-button:disabled:hover {
    border-color: #c9d8eb;
    box-shadow: none;
}

.occurrence-consultation-page .occurrence-consultation-action-button.primary {
    border-color: #9fc5f4;
    background: #eef6ff;
}

.occurrence-consultation-page .occurrence-consultation-action-button.primary:hover {
    background: #e4f1ff;
    color: #00499e;
}

.occurrence-consultation-page .occurrence-consultation-action-button.secondary {
    background: #f8fafc;
}

.occurrence-consultation-page .occurrence-consultation-action-button.secondary:hover {
    background: #f1f5f9;
}

.occurrence-consultation-page .occurrence-consultation-action-button.export {
    border-color: #b8dcc7;
    background: #f0fdf4;
}

.occurrence-consultation-page .occurrence-consultation-action-button.export:hover {
    background: #e8f8ee;
    color: #155f3a;
}

.occurrence-consultation-page .occurrence-consultation-action-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 13px;
}

.occurrence-consultation-page .occurrence-consultation-action-button.primary .occurrence-consultation-action-icon {
    background: #0057b8;
    color: #fff;
}

.occurrence-consultation-page .occurrence-consultation-action-button.secondary .occurrence-consultation-action-icon {
    background: #edf2f7;
    color: #50617a;
}

.occurrence-consultation-page .occurrence-consultation-action-button.export .occurrence-consultation-action-icon {
    background: #1b7a4b;
    color: #fff;
}

.occurrence-consultation-page .occurrence-consultation-action-copy {
    min-width: 0;
}

.occurrence-consultation-page .occurrence-consultation-action-title,
.occurrence-consultation-page .occurrence-consultation-action-subtitle {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.occurrence-consultation-page .occurrence-consultation-action-title {
    color: inherit;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.15;
}

.occurrence-consultation-page .occurrence-consultation-action-subtitle {
    margin-top: 2px;
    color: var(--app-page-muted, #557097);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
}

/* ------------------------------------------------------------------------ */
/* Estado vazio partilhado.                                                  */
/*                                                                           */
/* The modifiers HAVE to come after the base: the specificity is the same  */
/* (one class), so the last declared wins. Keep the block    */
/* junto — separar a base dos modificadores volta a partir o `-fill`.        */
/*                                                                           */
/* Content rule: the text says why it is empty and what to do next   */
/* ("Não existem registos para os filtros indicados"), never "Sem dados".    */
/* ------------------------------------------------------------------------ */
.jump-form-empty-state {
    display: grid;
    min-height: 120px;
    place-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px dashed #c9d8eb;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--app-page-muted, #557097);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}

.jump-form-empty-state i {
    color: #9bb0cb;
    font-size: 1rem;
}

.jump-form-empty-state strong {
    color: var(--app-page-ink, #06245d);
}

/* Short box: cards and side panels where 120px is too much. */
.jump-form-empty-state-compact {
    min-height: 88px;
    padding: 10px;
}

/* Has to stay after .jump-form-empty-state: both are single-class selectors, so the
   taller variant only wins on source order. */
.jump-form-empty-state-fill {
    min-height: 180px;
}

/* No box: centred text only, for table cells and inline lists. */
.jump-form-empty-state-plain {
    min-height: 0;
    border: 0;
    background: none;
}

.jump-form-password-card-grid {
    display: grid;
    gap: 8px;
}

.jump-form-password-meter {
    display: grid;
    gap: 6px;
}

.jump-form-password-meter-value {
    width: 100%;
    height: 10px;
    appearance: none;
    background: none;
    background-color: rgba(0, 0, 0, 0.08);
}

.jump-form-password-meter-value::-webkit-meter-bar {
    background: none;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
}

.jump-form-password-meter-value[value="1"]::-webkit-meter-optimum-value {
    background: #d9534f;
}

.jump-form-password-meter-value[value="2"]::-webkit-meter-optimum-value {
    background: #b94a48;
}

.jump-form-password-meter-value[value="3"]::-webkit-meter-optimum-value {
    background: #d9a406;
}

.jump-form-password-meter-value[value="4"]::-webkit-meter-optimum-value {
    background: #2fa36b;
}

.jump-form-password-meter-value[value="5"]::-webkit-meter-optimum-value {
    background: #1f8a4c;
}

.jump-form-password-meter-value[value="1"]::-moz-meter-bar {
    background: #d9534f;
}

.jump-form-password-meter-value[value="2"]::-moz-meter-bar {
    background: #b94a48;
}

.jump-form-password-meter-value[value="3"]::-moz-meter-bar {
    background: #d9a406;
}

.jump-form-password-meter-value[value="4"]::-moz-meter-bar {
    background: #2fa36b;
}

.jump-form-password-meter-value[value="5"]::-moz-meter-bar {
    background: #1f8a4c;
}

.jump-form-password-meter-text {
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 750;
}

.jump-form-matrix-shell {
    width: 100%;
    overflow: auto;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

.jump-form-matrix-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

.jump-form-matrix-table th,
.jump-form-matrix-table td {
    padding: 8px 10px;
    border-right: 1px solid #e6eef8;
    border-bottom: 1px solid #e6eef8;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.jump-form-matrix-table thead th {
    background: #f8fbff;
    color: #003d8f;
    text-align: center;
    font-weight: 850;
    background-clip: padding-box;
}

.jump-form-matrix-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fffef5;
    background-clip: padding-box;
    box-shadow: 1px 0 0 #e6eef8;
}

.jump-form-matrix-header-service {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 1px 0 0 #dbe7f6, 0 1px 0 #dbe7f6;
}

.jump-form-matrix-service-column,
.jump-form-matrix-row-header {
    min-width: 220px;
    text-align: left !important;
}

.jump-form-matrix-vehicle-title {
    font-size: 12px;
    font-weight: 850;
}

.jump-form-matrix-vehicle-meta {
    display: grid;
    gap: 2px;
    margin-top: 4px;
    color: #557097;
    font-size: 10px;
    font-weight: 650;
}

.jump-form-matrix-number {
    text-align: right;
}

.jump-form-matrix-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #0057b8;
    font-size: 10px;
    font-weight: 800;
}

.jump-form-matrix-pill-internal {
    background: #e8f4ec;
    color: #1d6b3f;
}

.jump-form-matrix-pill-external {
    background: #fdf1e3;
    color: #9a5a10;
}

.jump-form-tree-shell {
    max-height: 360px;
    min-height: 220px;
    overflow: auto;
    padding: 8px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

.jump-form-image-picker {
    display: grid;
    gap: 8px;
    align-content: start;
}

.jump-form-image-preview,
.jump-form-image-empty {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #d7e3f4;
    border-radius: 8px;
    background: #fff;
}

.jump-form-image-empty {
    width: 100%;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.jump-form-image-preview img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.load-order-map-panel {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: min(100%, 520px);
}

.load-order-floating-panel-grid {
    display: block;
    max-height: min(64vh / var(--jump-zoom, 1), 560px);
    overflow: auto;
}

.load-order-map-panel-map {
    width: 100%;
    height: min(70vh / var(--jump-zoom, 1), 620px);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid #c9d8eb;
    border-radius: 8px;
    background: #eef2f7;
}

/* Editable route: the line is grabbed to add a waypoint, and each added waypoint is a handle. */
.load-order-map-route-editable {
    cursor: grab;
}

.load-order-map-via-handle span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #185FA5;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 42, 84, 0.35);
    cursor: grab;
}

.load-order-map-via-handle.dragging span {
    cursor: grabbing;
    border-color: #d85a30;
}

/* Route URL row (UrlGPS): editable field, link to Google Maps and reset to the automatic route. */
.load-order-map-route-url {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0 4px;
}

.load-order-map-route-url .form-control {
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.load-order-map-route-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    color: #6b7c93;
    font-size: 11px;
}

/* O painel de mapa vazio usa `.jump-form-empty-state jump-form-empty-state-fill`. */

.load-order-map-info-window {
    min-width: 180px;
    color: #102a54;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 12px;
    line-height: 1.35;
}

.load-order-map-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #06245d;
    font-weight: 850;
}

.load-order-map-info-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.load-order-map-info-line {
    color: #35506f;
    font-weight: 650;
}

.load-order-map-note {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.load-order-map-info-line .load-order-map-note {
    margin-left: 6px;
}

.load-order-map-note-icon {
    border: 0;
    background: transparent;
    padding: 0;
    color: #E0A700;
    font-size: 14px;
    cursor: pointer;
}

.load-order-map-note-tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 4000;
    width: max-content;
    max-width: 240px;
    padding: 10px 26px 10px 12px;
    background: #fff7ad;
    color: #3c3618;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    border: 1px solid #ecdc78;
    border-radius: 3px;
    box-shadow: 0 8px 18px rgba(30, 25, 0, .22);
    /* Hidden until the pin is clicked. */
    display: none;
}

/* Pinned when the pin is clicked — it allows the mouse to be moved and the scroll to be used. */
.load-order-map-note.open .load-order-map-note-tip {
    display: block;
}

.load-order-map-note-text {
    display: block;
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.load-order-map-note-close {
    position: absolute;
    top: 2px;
    right: 4px;
    border: 0;
    background: transparent;
    padding: 0 2px;
    color: #7a6b1f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.load-order-map-note-close:hover {
    color: #3c3618;
}

/* It lets the post-it's tooltip leave the balloon without being cut off. */
.load-order-gd-map .leaflet-popup-content-wrapper,
.load-order-gd-map .leaflet-popup-content {
    overflow: visible;
}

.execution-button-page .execution-button-tabs-panel {
    height: 100%;
    min-height: 360px;
}

.execution-button-page .execution-button-tabs-panel .jump-form-tabs-card,
.execution-button-page .execution-button-tabs-panel .jump-form-tabs-body {
    min-height: 0;
}

.execution-button-page .execution-button-tabs-panel .jump-form-tab-body {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.execution-button-page .execution-button-tabs-panel .jump-form-tab-body > * {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.execution-button-page .jump-form-textarea-tall {
    width: 100%;
    min-height: 320px;
    height: auto;
    overflow: auto;
    resize: none;
}

.execution-button-page .jump-form-planning-field {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-top: calc(11px * 1.15 + 4px);
}

.execution-button-page .jump-form-planning-field .jump-form-status-check {
    margin: 0;
}

.default-list-page .default-list-options-checks {
    align-self: stretch;
    padding-top: calc(11px * 1.15 + 4px);
}

.default-list-page .default-list-options-checks .jump-form-status-check {
    margin: 0;
}

.execution-button-page .jump-form-grid-select {
    min-height: 32px;
    font-size: 12px;
}

:where(.execution-button-page, .default-list-page) .jump-form-location-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: start;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

:where(.execution-button-page, .default-list-page) .jump-form-location-layout > .jump-form-menu-tree {
    min-width: 0;
}

:where(.execution-button-page, .default-list-page) .jump-form-location-image {
    align-self: start;
    min-width: 0;
    width: 100%;
}

:where(.execution-button-page, .default-list-page) .jump-form-image-panel {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid #d7e4f5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(21, 55, 98, 0.08);
}

:where(.execution-button-page, .default-list-page) .jump-form-image-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

:where(.execution-button-page, .default-list-page) .jump-form-image-panel-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: #003d8f;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.15;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-panel-title .oi {
        color: #0b63ce;
        font-size: 13px;
    }

:where(.execution-button-page, .default-list-page) .jump-form-image-status {
    flex: 0 0 auto;
    max-width: 110px;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-status.is-ready {
        color: #0f7a3a;
        background: #e7f7ee;
        border: 1px solid #b9e6c9;
    }

    :where(.execution-button-page, .default-list-page) .jump-form-image-status.is-empty {
        color: #65758b;
        background: #f3f6fa;
        border: 1px solid #dce5f0;
    }

:where(.execution-button-page, .default-list-page) .jump-form-image-preview {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    min-height: 156px;
    overflow: hidden;
    border: 1px solid #d9e5f4;
    border-radius: 8px;
    background: #f7fafd;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-preview img {
        width: min(88px, 68%);
        height: min(88px, 68%);
        object-fit: contain;
    }

:where(.execution-button-page, .default-list-page) .jump-form-image-placeholder {
    display: grid;
    gap: 8px;
    justify-items: center;
    color: #506680;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-placeholder .oi {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #0b63ce;
        background: #eaf3ff;
        font-size: 16px;
    }

:where(.execution-button-page, .default-list-page) .jump-form-image-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

:where(.execution-button-page, .default-list-page) .jump-form-image-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

:where(.execution-button-page, .default-list-page) .jump-form-image-upload-button,
:where(.execution-button-page, .default-list-page) .jump-form-image-clear-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}

:where(.execution-button-page, .default-list-page) .jump-form-image-upload-button {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0;
    border: 1px solid #0b63ce;
    color: #ffffff;
    background: #075ebd;
    cursor: pointer;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-upload-button:hover {
        border-color: #004a9e;
        background: #004faa;
        box-shadow: 0 8px 18px rgba(0, 82, 176, 0.2);
    }

:where(.execution-button-page, .default-list-page) .jump-form-image-clear-button {
    flex: 0 0 auto;
    border: 1px solid #d5e0ed;
    color: #334c69;
    background: #f5f8fc;
}

    :where(.execution-button-page, .default-list-page) .jump-form-image-clear-button:hover:not(:disabled) {
        border-color: #c3d2e4;
        color: #0f2d4f;
        background: #edf3fa;
    }

    :where(.execution-button-page, .default-list-page) .jump-form-image-clear-button:disabled {
        color: #8d9aab;
        background: #eef2f6;
        cursor: not-allowed;
        opacity: 0.72;
    }

@media (max-width: 900px) {
    :where(.execution-button-page, .default-list-page) .jump-form-location-layout {
        grid-template-columns: 1fr;
    }

    :where(.execution-button-page, .default-list-page) .jump-form-location-image {
        max-width: 260px;
    }
}

@container (max-width: 700px) {
    .jump-form-card-grid-entity-two {
        grid-template-columns: minmax(112px, 150px) minmax(0, 1fr);
    }
}

@container (max-width: 390px) {
    .jump-form-card-grid-two,
    .jump-form-card-grid-entity,
    .jump-form-card-grid-entity-two {
        grid-template-columns: 1fr;
    }

    .default-list-page .default-list-options-checks {
        padding-top: 0;
    }
}

/* Travel dossier: the identification cards live in a three-column grid, so each
   card is narrower than the 390px container breakpoint that collapses
   jump-form-card-grid-two to a single column. Keep the two date fields side by
   side and the four kilometre fields two by two. */
.travel-dossier-page .jump-form-card-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Price matrix: same situation as the travel dossier above. The identification
   cards are laid out three per row, so each card is narrower than the 390px
   container breakpoint, and the country lookup would drop below its level
   selector. The level selector only holds "N1", "N2", and so on, so it gets the
   narrow column and the lookup keeps the rest. */
.price-matrix-page .jump-form-card-grid-two {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 96px);
}

/* Consulta de ocorrências: same situation as the two above. The filter cards are
   laid out four per row, so each card is narrower than the 390px container
   breakpoint, and the period would drop Data Fim under Data Inicio and each
   lookup its description. Keep the two fields of every filter card side by side. */
.occurrence-consultation-page .jump-form-card-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-unit-price-list-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh / var(--jump-zoom, 1) - 124px);
}

.supplier-unit-price-list-page .supplier-unit-price-list-shell,
.supplier-unit-price-list-page .supplier-unit-price-list-layout {
    flex: 1 1 auto;
    min-height: 0;
}

.supplier-unit-price-list-page .supplier-unit-price-list-layout {
    height: 100%;
}

.supplier-unit-price-list-page .supplier-unit-price-list-lines-section {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    height: 100%;
}

.supplier-unit-price-list-page .supplier-unit-price-list-lines-section .supplier-unit-price-list-lines-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

@media (max-width: 992px) {
    .jump-form-page .page-header-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "title";
        gap: 10px;
        align-items: start;
    }
}

@media (max-width: 900px) {
    .jump-form-sections-grid {
        grid-template-columns: 1fr !important;
    }

    .jump-form-sections-grid > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .jump-form-grid {
        grid-template-columns: 1fr !important;
    }

    .jump-form-grid > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

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

    .jump-form-telemetry-module-grid,
    .jump-form-telemetry-module-hero,
    .jump-form-telemetry-overview-grid,
    .jump-form-telemetry-form-grid,
    .jump-form-telemetry-link-grid,
    .jump-form-telemetry-hero-metrics {
        grid-template-columns: 1fr;
    }

    .client-identification-fields,
    .client-identification-field-group,
    .client-identification-location-fields,
    .client-lookup-pair {
        grid-template-columns: 1fr !important;
    }

    .client-identification-location-fields {
        grid-column: auto;
    }

    .client-tax-number-fields,
    .client-credit-limit-fields,
    .client-operational-fields,
    .client-processing-card-fields,
    .client-insurance-fields,
    .client-fiscal-checkboxes,
    .client-tax-authority-checkboxes,
    .client-digital-billing-checkboxes,
    .client-group-supplier-fields,
    .client-language-fields {
        grid-template-columns: 1fr;
    }

    .client-vat-validation-button {
        width: fit-content;
    }

    .jump-form-card-grid-two,
    .jump-form-card-grid-three,
    .jump-form-card-grid-entity,
    .jump-form-card-grid-entity-stamp,
    .jump-form-card-grid-registry-unlock,
    .jump-form-card-grid-registry-unlock--action {
        grid-template-columns: 1fr;
    }

    .jump-form-status-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .jump-form-status-options-grid,
    .jump-form-status-options-vertical {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .jump-form-config-dialog-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .jump-form-config-dialog-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .jump-form-config-dialog-title-block h2 {
        white-space: normal;
    }

    .jump-form-config-dialog-button {
        flex: 1 1 120px;
    }

}

/* ============================================================================
   Calculated values with an editable formula (aTrans - Orcamentacao)
   Reusable by any form that exposes formula-driven cells with an "i" indicator.
   ============================================================================ */

.jump-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.jump-formula-grid-single {
    grid-template-columns: 1fr;
}

.jump-formula-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

/* Row of cards inside a section. Packs the cards responsively and aligns them to the
   top, so a taller card never stretches its neighbours - which is what produced the
   large empty gaps when these sections were laid out with nested DxGridLayout rows. */
.jump-formula-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
    align-items: start;
}

.jump-formula-card-grid > * {
    min-width: 0;
}

/* Consecutive card rows inside the same section keep the section gap. */
.jump-formula-card-grid + .jump-formula-card-grid {
    margin-top: 8px;
}

.jump-formula-card-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/* Cards the user has to fill in for the budget to mean anything. The warm tint reuses the
   "needs attention" palette already used elsewhere in this file, so it reads as a prompt
   for planning rather than as an error. */
.jump-formula-card-planning {
    border-color: #ffe4b8;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);
}

.jump-formula-card-planning .jump-form-card-icon {
    background: #ffe4b8;
    color: #8a5200;
}

.jump-formula-card-planning .jump-form-card-footer {
    color: #8a5200;
}

.jump-formula-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 58px;
    padding: 6px 8px;
    border: 1px solid rgba(194, 215, 242, 0.92);
    border-radius: 6px;
    background: #ffffff;
}

.jump-formula-cell-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #5a78a6;
}

.jump-formula-cell-body {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.jump-formula-cell-value {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: #06245d;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-formula-cell-value-error {
    color: #b4243a;
}

.jump-formula-cell-unit {
    font-size: 11px;
    color: #5a78a6;
    white-space: nowrap;
}

.jump-formula-cell-error {
    font-size: 11px;
    color: #b4243a;
}

.jump-formula-cell-strong {
    border-color: rgba(13, 99, 199, 0.55);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

.jump-formula-cell-strong .jump-formula-cell-value {
    font-size: 18px;
    color: #0d63c7;
}

.jump-formula-info {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(13, 99, 199, 0.45);
    border-radius: 50%;
    background: #ffffff;
    color: #0d63c7;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}

.jump-formula-info:hover {
    background: #0d63c7;
    color: #ffffff;
}

.jump-formula-info-inactive {
    border-color: rgba(150, 160, 175, 0.65);
    color: #7a879b;
}

.jump-formula-info-inactive:hover {
    background: #7a879b;
}

/* Destination zone field with the tariff search action. */
.jump-formula-zone-field {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.jump-formula-zone-field .form-control {
    flex: 1 1 auto;
}

.jump-formula-zone-search {
    flex: 0 0 auto;
    width: 34px;
    border: 1px solid rgba(194, 215, 242, 0.92);
    border-radius: 4px;
    background: #ffffff;
    color: #0d63c7;
    cursor: pointer;
}

.jump-formula-zone-search:hover {
    background: #f4f8ff;
}

.jump-formula-zone-list {
    max-height: 320px;
    overflow: auto;
}

/* Formula information / editor dialog. */
.jump-formula-dialog-description,
.jump-formula-dialog-hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: #5a78a6;
}

.jump-formula-dialog-expression {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

.jump-formula-dialog-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.jump-formula-dialog-error {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #b4243a;
}

.jump-formula-dialog-success {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #1f7a4d;
}

.jump-formula-dialog-variables {
    margin-bottom: 8px;
    font-size: 12px;
}

.jump-formula-dialog-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f4f8ff;
    font-size: 12px;
    color: #5a78a6;
}

.jump-formula-dialog-result strong {
    font-size: 16px;
    color: #0d63c7;
}

/* Formula catalog page. */
.jump-formula-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 8px;
}

.jump-formula-catalog-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(194, 215, 242, 0.92);
    border-radius: 6px;
    background: #ffffff;
}

.jump-formula-catalog-item header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.jump-formula-catalog-caption {
    font-size: 13px;
    font-weight: 700;
    color: #06245d;
}

.jump-formula-catalog-key {
    font-size: 11px;
    color: #7a879b;
}

.jump-formula-catalog-badge {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.jump-formula-catalog-badge-inactive {
    background: rgba(122, 135, 155, 0.15);
    color: #5c6779;
}

.jump-formula-catalog-badge-custom {
    background: rgba(13, 99, 199, 0.12);
    color: #0d63c7;
}

.jump-formula-catalog-description {
    margin: 0;
    font-size: 12px;
    color: #5a78a6;
}

.jump-formula-catalog-expression {
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f4f8ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #06245d;
    white-space: pre-wrap;
    word-break: break-word;
}

.jump-formula-catalog-item footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #7a879b;
}

.jump-formula-catalog-item footer button {
    margin-left: auto;
}

.jump-dialog-button-compact {
    min-width: 0;
    padding: 4px 10px;
    font-size: 12px;
}

@media (max-width: 900px) {

    .jump-formula-grid,
    .jump-formula-input-grid,
    .jump-formula-card-grid,
    .jump-formula-card-grid-wide,
    .jump-formula-catalog,
    .jump-formula-dialog-options {
        grid-template-columns: 1fr;
    }

}

/* Product form: square clickable image picker in the operational summary card
   (legacy imgDesenho parity — click opens the file dialog, the image fills the area). */
.product-form-page .jump-form-image-picker {
    display: grid;
    gap: 6px;
    justify-items: center;
    margin-top: 10px;
}

.product-form-page .jump-form-image-picker .jump-form-image-preview {
    max-width: 320px;
}

.product-form-page .jump-form-image-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 0;
    overflow: hidden;
    border: 1px dashed #c9d8ec;
    border-radius: 8px;
    background: #f7fafd;
    cursor: pointer;
}

    .product-form-page .jump-form-image-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* The file input covers the whole square, transparent: any click opens the native dialog. */
.product-form-page .jump-form-image-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.product-form-page .jump-form-image-placeholder {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 8px;
    color: #506680;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.product-form-page .jump-form-image-remove {
    border: 0;
    background: none;
    color: var(--app-page-muted, #557097);
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Compact density modifier for form pages that must show the whole record on one
   screen without vertical scroll (the aDepot forms). Opt-in through the JumpFormPage
   CssClass parameter; it only tightens the vertical metrics that .jump-form-page,
   the sections and the cards already define, so pages that do not ask for it keep
   the regular density. Kept at the end of the file: several rules tie with the
   defaults on specificity and must win on source order. */
.jump-form-page--compact {
    --jump-field-height: 28px;
}

.jump-form-page--compact .page-header {
    margin-bottom: 6px;
}

.jump-form-page--compact .page-header-hero {
    min-height: 44px;
    margin-bottom: 2px;
    align-items: center;
}

.jump-form-page--compact .page-header-title-icon {
    width: 38px;
    height: 38px;
}

.jump-form-page--compact .page-header-title-icon span {
    font-size: 20px !important;
}

.jump-form-page--compact .page-header-title h1 {
    font-size: 20px;
}

.jump-form-page--compact .jump-form-section {
    padding: 6px 8px;
}

.jump-form-page--compact .jump-form-section-title {
    margin-bottom: 4px;
    font-size: 13px;
}

/* The 118px floor exists so sparse cards align on regular pages; in compact mode
   every card collapses to its content so rows only take what the fields need. */
.jump-form-page--compact .jump-form-card {
    min-height: 0;
    padding: 6px 10px;
}

.jump-form-page--compact .jump-form-card-title {
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
}

.jump-form-page--compact .jump-form-card-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 11px;
}

.jump-form-page--compact .jump-form-card-label {
    margin-bottom: 2px;
}

.jump-form-page--compact .jump-form-card .form-control {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
}

/* Observation boxes: two text lines are enough on a no-scroll page. The pages set
   rows="2"; this floor only keeps a one-row textarea from collapsing below a
   usable click target. */
.jump-form-page--compact .jump-form-card textarea.form-control {
    min-height: 48px;
}

.jump-form-page--compact .jump-form-field-row {
    min-height: 30px;
    /* Legacy-style field width: the editor stops at a fixed cap instead of
       stretching to the end of the column; the remaining space stays empty. */
    grid-template-columns: minmax(84px, 118px) minmax(0, var(--jump-field-row-control-max, 340px));
}

/* Full-width rows (observation boxes) keep stretching across the card. */
.jump-form-page--compact .jump-form-field-row--full {
    grid-template-columns: minmax(84px, 118px) minmax(0, 1fr);
}

.jump-form-page--compact .jump-form-summary-row {
    padding: 4px 0;
}

/* Catalog of selectable cards: a short list where the page picks one record and edits its
   detail below, as in the user tables page. The tile keeps the shared .jump-form-card
   contract; only the grid, the full-card click target and the selected state live here. */
.jump-form-card-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.jump-form-card-catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.jump-form-card-catalog-filter {
    max-width: 260px;
}

.jump-form-card-catalog-count {
    color: #5d79a5;
    font-size: 12px;
    font-weight: 600;
}

.jump-form-card-catalog-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--app-page-border, #dbe7f6);
    border-radius: var(--app-page-radius, 8px);
    color: #5d79a5;
    font-size: 12px;
    text-align: center;
}

/* The title button is stretched over the whole tile so the click target is the card and not
   only its title text, without adding a second interactive element to the markup. */
.jump-form-card-catalog .jump-form-card-title-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.jump-form-card-catalog .jump-form-card-title-button > span:last-child {
    display: block;
    overflow-wrap: anywhere;
}

.jump-form-card-catalog .jump-form-card-foot {
    color: #5d79a5;
    font-size: 11px;
}

/* The whole tile is already the click target, so the card's link button would only repeat it
   and add a second tab stop on every card. */
.jump-form-card-catalog .jump-form-card-link-button {
    display: none;
}

/* Record count and last change of each catalog entry, under the card title. */
.jump-form-card-catalog-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #5d79a5;
    font-size: 11px;
    line-height: 1.35;
}

.jump-form-card-catalog-meta-count {
    color: #0b3f90;
    font-weight: 600;
}

/* Side panel variant of the catalog: one card per row inside a splitter pane. */
.jump-form-card-catalog--stacked {
    grid-template-columns: minmax(0, 1fr);
}

/* Table variant of the catalog: the same cards drawn as dense rows, name on one side and record
   count on the other. The definition date is dropped here because the row has no width for it. */
.jump-form-card-catalog--rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.jump-form-card-catalog--rows .jump-form-card {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 5px 8px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.jump-form-card-catalog--rows .jump-form-card:last-child {
    border-bottom-width: 0;
}

.jump-form-card-catalog--rows .jump-form-card-title {
    margin-bottom: 0;
    min-width: 0;
    flex-grow: 1;
}

.jump-form-card-catalog--rows .jump-form-card-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 10px;
}

.jump-form-card-catalog--rows .jump-form-card-catalog-meta {
    flex: 0 0 auto;
}

.jump-form-card-catalog--rows .jump-form-card-catalog-meta > span:not(.jump-form-card-catalog-meta-count) {
    display: none;
}

.jump-form-card-catalog--rows .jump-form-card-selected {
    box-shadow: inset 3px 0 0 #0057b8;
}

/* Workspace of a form page split between a selector panel and its detail. The height is fixed so
   the splitter and the grid inside it have something to fill; the rest of the shell is the header.
   The chain below carries that height down to the grid: every level is a flex column that is
   allowed to shrink (min-height: 0), which is what lets the grid scroll instead of overflowing the
   pane. Same recipe as .planning-lists-split, including the splitter's own pane content element. */
.jump-form-split-workspace {
    height: calc(100vh / var(--jump-zoom, 1) - 200px);
    min-height: 360px;
}

.jump-form-split-workspace .dxbl-splitter-pane-content {
    display: flex;
    padding: 0;
    min-height: 0;
}

.jump-form-split-workspace .jump-form-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.jump-form-split-workspace .jump-form-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The selector scrolls on its own when the installation has many tables. align-content keeps the
   rows at their own height: filling the pane would otherwise stretch each card over the free space,
   because a grid's rows stretch by default and .jump-form-card is height: 100%. */
.jump-form-split-workspace .jump-form-card-catalog {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
}

/* Segmented control that switches between two views of the same content. */
.jump-form-view-switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--app-page-border, #dbe7f6);
    border-radius: 7px;
    background: #fbfdff;
}

.jump-form-view-switch-button {
    width: 26px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #5d79a5;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.jump-form-view-switch-button:hover {
    background: #eef6ff;
    color: #0057b8;
}

.jump-form-view-switch-button-active {
    background: #d8e8fb;
    color: #06245d;
}

.jump-form-view-switch-button:focus-visible {
    outline: 2px solid #78aeea;
    outline-offset: 2px;
}

.jump-form-card-selected {
    border-color: #0057b8;
    background: #f3f8ff;
    box-shadow: inset 0 0 0 1px #0057b8;
}

.jump-form-card-selected .jump-form-card-icon {
    background: #d8e8fb;
}

/* Section title with a single inline action, such as collapsing the section content. */
.jump-form-section-title-with-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jump-form-section-toggle {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #0057b8;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.jump-form-section-toggle:hover,
.jump-form-section-toggle:focus-visible {
    background: #eef6ff;
}

.jump-form-section-toggle:focus-visible {
    outline: 2px solid #78aeea;
    outline-offset: 2px;
}

/* Locked record: the form body stops accepting input, the page header stays usable so the
   record can still be printed, duplicated or left. Applied by JumpFormPage IsReadOnly. */
.jump-form-page--readonly {
    pointer-events: none;
}

.jump-form-page--readonly .page-header {
    pointer-events: auto;
}

.jump-form-page--readonly .jump-form-section,
.jump-form-page--readonly .jump-form-tabs-section {
    opacity: 0.72;
}

/*
 * The action bar of a form section — filters, refresh, import/export — with the same look as the page
 * header's own actions. That rule (.page-header-custom-action) lives in EntityHeader's scoped
 * stylesheet, and a scoped selector only matches markup of its own component, so the look is restated
 * here instead of every page reshaping a Bootstrap button by hand.
 *
 * Not to be confused with .jump-form-action-button, which is the action *inside a field* (full width,
 * filled background) and belongs to the value beside it.
 */
.jump-form-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 8px;
}

.jump-form-section-action {
    appearance: none;
    min-width: 94px;
    min-height: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #d5e2f2;
    border-radius: 8px;
    background: #fff;
    color: #0057b8;
    font-family: var(--app-page-font-family, 'Inter', 'Segoe UI', sans-serif);
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(16, 42, 84, .06);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.jump-form-section-action:hover:not(:disabled) {
    border-color: #b9d2f4;
    background: #f7fbff;
    box-shadow: 0 10px 22px rgba(16, 42, 84, .09);
    transform: translateY(-1px);
}

.jump-form-section-action:focus-visible {
    outline: 2px solid rgba(0, 87, 184, .24);
    outline-offset: 2px;
}

.jump-form-section-action:disabled {
    opacity: .55;
    box-shadow: none;
    cursor: not-allowed;
}