/* Column definitions do not render sibling style blocks into the cell DOM. */
.readonly-range-field {
        min-width: 0;
        width: 100%;
        max-width: 12rem;
        display: grid;
        gap: 5px;
        margin: 0 auto;
        padding: 4px 6px;
        font-variant-numeric: tabular-nums;
    }

    .readonly-range-field-values {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        color: #2f405c;
        font-size: 11px;
        font-weight: 760;
        line-height: 1;
        white-space: nowrap;
    }

    .readonly-range-field-values span {
        color: #63738b;
    }

    .readonly-range-field-values strong {
        color: #182d4c;
        font-size: 14px;
        font-weight: 750;
        letter-spacing: -0.2px;
    }

    .readonly-range-field-track {
        width: 100%;
        height: 4px;
        position: relative;
        overflow: hidden;
        background: color-mix(in srgb, var(--range-accent) 14%, white);
        border-radius: 999px;
    }

    .readonly-range-field-track span {
        height: 100%;
        display: block;
        background: var(--range-accent);
        border-radius: inherit;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    }


.readonly-state-field {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 0;
    }

.readonly-state-field .jump-status-pill {
    gap: 6px;
}

/* Keep indicator typography independent of compact grid cell overrides. */
.assign-resources-grid-area .readonly-range-field .readonly-range-field-values strong {
    font-size: 14px !important;
    font-weight: 750 !important;
}

.assign-resources-grid-area .readonly-range-field .readonly-range-field-values span {
    font-size: 11px !important;
}

.app-page .dxbl-grid,
.app-page .dxbs-grid,
.app-page .dxgvControl,
.app-page .dxgvControl_MetropolisBlue {
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(16, 42, 84, .04);
}

.app-page .dxbl-grid table,
.app-page .dxbs-grid table,
.app-page .dxgvControl table {
    width: 100%;
}

.app-page .dxbl-grid-header-row,
.app-page .dxbl-grid-header,
.app-page .dxbs-grid-header,
.app-page .dxbs-grid-header-row,
.app-page .dxgvHeader {
    background: #f2f7fd;
    color: #003d8f;
    font-size: 11px;
    font-weight: 800;
}

.app-page .dxbl-grid-data-row,
.app-page .dxbs-grid-data-row,
.app-page .dxgvDataRow,
.app-page .dxgvAltDataRow {
    color: #173766;
    font-size: 11.5px;
}

.app-page .dxbl-grid-data-row:nth-child(even),
.app-page .dxbs-grid-data-row:nth-child(even),
.app-page .dxgvAltDataRow {
    background: #fbfdff;
}

.app-page .dxbl-grid-data-row:hover,
.app-page .dxbs-grid-data-row:hover,
.app-page .dxgvDataRow:hover,
.app-page .dxgvAltDataRow:hover {
    background: #eef6ff;
}

.jump-grid-header-cell {
    background: #f8fbff !important;
    color: #244b7d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.jump-grid-cell {
    border-color: #edf3fb !important;
}

.jump-grid-data-row {
    transition: background-color .12s ease, box-shadow .12s ease;
}

/* Native checkboxes inside grid cells (e.g. the row-selection column and bit
   columns) must stay within the row height; otherwise they overflow and get
   clipped by the next row's border. */
input[type="checkbox"][parent-id],
.dxbl-grid input[type="checkbox"],
.dxbs-grid input[type="checkbox"],
.jump-grid-data-cell input[type="checkbox"],
td input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    align-self: center !important;
    flex: 0 0 auto !important;
}

.jump-grid-data-row .jump-grid-data-cell,
.jump-grid-data-cell {
    background: #fff !important;
    color: #153b6f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jump-grid-data-row:nth-child(even) .jump-grid-data-cell,
.jump-grid-data-row:nth-child(even) > td:not(.dxbl-grid-empty-cell),
.jump-grid-data-row:nth-child(even) > th:not(.dxbl-grid-empty-cell) {
    background: #fbfdff !important;
}

.jump-grid-data-row:hover .jump-grid-data-cell,
.jump-grid-data-row:hover > td:not(.dxbl-grid-empty-cell),
.jump-grid-data-row:hover > th:not(.dxbl-grid-empty-cell) {
    background: #f7fbff !important;
}

.jump-grid-data-row:focus-within .jump-grid-data-cell,
.jump-grid-data-row.dxbl-focused-row .jump-grid-data-cell,
.jump-grid-data-row.dxbs-focused-row .jump-grid-data-cell,
.jump-grid-data-row.dxbl-selected-row .jump-grid-data-cell,
.jump-grid-data-row.dxbs-selected-row .jump-grid-data-cell,
.jump-grid-data-row[class*="selected" i] .jump-grid-data-cell,
.jump-grid-data-row[class*="focused" i] .jump-grid-data-cell,
.jump-grid-edit-row .jump-grid-data-cell {
    background: #eaf5ff !important;
    box-shadow: inset 0 1px 0 #c5def8, inset 0 -1px 0 #c5def8 !important;
}

.jump-grid-data-row:focus-within > td:first-child,
.jump-grid-data-row:focus-within > th:first-child,
.jump-grid-data-row.dxbl-focused-row > td:first-child,
.jump-grid-data-row.dxbs-focused-row > td:first-child,
.jump-grid-data-row.dxbl-selected-row > td:first-child,
.jump-grid-data-row.dxbs-selected-row > td:first-child,
.jump-grid-data-row[class*="selected" i] > td:first-child,
.jump-grid-data-row[class*="focused" i] > td:first-child,
.jump-grid-edit-row > td:first-child,
.jump-grid-edit-row > th:first-child {
    box-shadow: inset 3px 0 0 #0d63bd, inset 0 1px 0 #c5def8, inset 0 -1px 0 #c5def8 !important;
}

.jump-grid-data-cell .form-control,
.jump-grid-data-cell .dxbs-textbox,
.jump-grid-data-cell .dxbl-text-edit,
.jump-grid-data-cell .dxbs-date-edit,
.jump-grid-data-cell .dxbl-date-edit,
.jump-grid-data-cell .dxbs-spin-edit,
.jump-grid-data-cell .dxbl-spin-edit,
.jump-grid-data-cell .ctlf4-native-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    border: 1px solid #d9e8f8 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(0, 87, 184, .045) !important;
    color: #153b6f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.jump-grid-data-cell .form-control:focus,
.jump-grid-data-cell .dxbs-textbox:focus-within,
.jump-grid-data-cell .dxbl-text-edit:focus-within,
.jump-grid-data-cell .dxbs-date-edit:focus-within,
.jump-grid-data-cell .dxbl-date-edit:focus-within,
.jump-grid-data-cell .dxbs-spin-edit:focus-within,
.jump-grid-data-cell .dxbl-spin-edit:focus-within,
.jump-grid-data-cell .ctlf4-native-editor:focus-within {
    border-color: #8abfff !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, .12) !important;
    outline: 0 !important;
}

/* ControlF4 in grid cells being edited: the cell in editing only has
   .jump-grid-cell (without .jump-grid-data-cell), so the style above does not
   catch it and the editor was left with the default frame, stretching the row from
   34px to 40px. Without a frame: only the value + F4 button, a stable row. */
.jump-grid-cell:not(.jump-grid-data-cell) .ctlf4-Size-label,
.jump-grid-cell:not(.jump-grid-data-cell) .control-f4-root {
    min-height: 0 !important;
}

.jump-grid-cell:not(.jump-grid-data-cell) .control-f4-root {
    align-items: center;
}

.jump-grid-cell:not(.jump-grid-data-cell) .control-f4-root .col-form-label {
    display: none !important;
}

.jump-grid-cell:not(.jump-grid-data-cell) .ctlf4-native-editor,
.jump-grid-cell:not(.jump-grid-data-cell) .ctlf4-native-editor:focus-within {
    height: 26px !important;
    min-height: 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.jump-grid-cell:not(.jump-grid-data-cell) .ctlf4-native-input {
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #153b6f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.jump-grid-cell:not(.jump-grid-data-cell) .ctlf4-native-f4-button {
    height: 22px !important;
    align-self: center;
}

/* The remaining editors of the row in editing: the same content height (26px) and the
   cell fixed at 34px, so the row does not change height when it enters editing. */
.jump-grid-cell:not(.jump-grid-data-cell) .dxbl-text-edit,
.jump-grid-cell:not(.jump-grid-data-cell) .dxbl-spin-edit,
.jump-grid-cell:not(.jump-grid-data-cell) .dxbl-date-edit,
.jump-grid-cell:not(.jump-grid-data-cell) .form-control {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

tr[class*="edit"] .jump-grid-cell:not(.jump-grid-data-cell) {
    height: 34px !important;
    min-height: 34px !important;
    vertical-align: middle;
}

/* Filler cells (the space left over to the right of the columns): the
   GridComponentBase's CustomizeElement does not fire for them, and the rows' alternating
   background extends over that area giving it the look of real
   cells. It is left blank, as if there were nothing there. */
.dxbl-grid-empty-cell {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.jump-grid-group-row,
.jump-grid-group-panel-header {
    border-color: #dbe8f7 !important;
}

/* Rows a business rule locks (a posted provisional expense, an occurrence that came from the
   database). GridComponentBase puts .jump-grid-row-locked on the row when the grid's IsRowLocked
   says so; the cells are greyed through it. These rules come after the alternating, hover and
   selected backgrounds on purpose: they have the same specificity, so the later one wins and the
   row stays grey in every state. */
.jump-grid-data-row.jump-grid-row-locked .jump-grid-data-cell,
.jump-grid-data-row.jump-grid-row-locked > td:not(.dxbl-grid-empty-cell),
.jump-grid-data-row.jump-grid-row-locked > th:not(.dxbl-grid-empty-cell) {
    background: #f2f4f7 !important;
    color: #7b8798 !important;
    font-style: italic !important;
}

.jump-grid-data-row.jump-grid-row-locked:hover .jump-grid-data-cell,
.jump-grid-data-row.jump-grid-row-locked:hover > td:not(.dxbl-grid-empty-cell),
.jump-grid-data-row.jump-grid-row-locked:hover > th:not(.dxbl-grid-empty-cell) {
    background: #eceff3 !important;
}