/* Shared native contract for portal grids. DevExtreme owns scrolling and fixed columns. */
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid {
    --ff-view-grid-cell-line-height: 16px;
    --ff-view-grid-check-size: 16px;
    --ff-view-grid-data-font-size: 12px;
    --ff-view-grid-filter-height: 22px;
    --ff-view-grid-header-height: 22px;
    --ff-view-grid-pager-height: 28px;
    --ff-view-grid-row-height: 18px;
    --ff-view-grid-select-width: 20px;
    --ff-view-grid-summary-height: 18px;
    --ff-grid-cell-padding-y: 0px;
    --ff-grid-row-height: var(--ff-view-grid-row-height);
    contain: layout paint;
    min-height: 160px !important;
    overflow: hidden !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid[data-ff-view-grid-height] {
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page > :is(.container-fullw, .container-fluid.container-fullw),
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page > :is(.container-fullw, .container-fluid.container-fullw) [block-ui] {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page:not(.ff-capture-page) > #page-title.ff-page-header {
    margin-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page:not(.ff-capture-page) > :is(.container-fullw, .container-fluid.container-fullw) {
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-standard-filter-overlay-row[ng-cloak] {
    display: none !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-standard-filter-overlay-row {
    contain: layout paint !important;
    left: 9px !important;
    margin: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 9px !important;
    visibility: visible !important;
    z-index: 1050 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-standard-filter-overlay-row.ff-standard-filter-overlay-row--closed {
    opacity: 0 !important;
    position: fixed !important;
    top: -2000px !important;
    z-index: -1 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-standard-filter-overlay-row.ff-standard-filter-overlay-row--open {
    opacity: 1 !important;
    position: absolute !important;
    top: auto !important;
    z-index: 1050 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-standard-filter-overlay-row.ff-standard-filter-overlay-row--persistent,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-inline-row, .ff-finance-filter-inline-row) {
    contain: layout !important;
    display: block !important;
    left: auto !important;
    margin: 0 0 4px 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    visibility: visible !important;
    z-index: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-standard-filter-overlay-panel {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #d9e0ea) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18) !important;
    contain: layout paint !important;
    max-height: calc(100dvh - 145px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row)
    .ff-standard-filter-overlay-panel {
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-standard-filter-overlay-row--closed .ff-standard-filter-overlay-panel {
    pointer-events: none !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--open, .ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row):has(:is(.ui-select-container, .ui-select-bootstrap, ui-select)),
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--open, .ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row):focus-within {
    contain: none !important;
    overflow: visible !important;
    z-index: 1800 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--open, .ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row):has(:is(.ui-select-container, .ui-select-bootstrap, ui-select))
    :is(.ff-standard-filter-overlay-panel, .accordion-no-display, .ff-filter-flow-row, .ff-finance-primary-filters, .ff-waybill-filter-grid, .row, [class*="col-"], .form-group) {
    contain: none !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--open, .ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row)
    :is(.ui-select-container.open, .ui-select-bootstrap.open, ui-select.open) {
    z-index: 1850 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    :is(.ff-standard-filter-overlay-row--open, .ff-standard-filter-overlay-row--persistent, .ff-standard-filter-inline-row, .ff-finance-filter-inline-row)
    :is(.ui-select-container.open, .ui-select-bootstrap.open, ui-select.open) .ui-select-choices {
    max-height: min(320px, calc(100dvh - 180px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1900 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-gridbase-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Tracking still carries an older ID-scoped auto-height reset. Restore one
   definite rows viewport so DevExtreme's native scroll range remains usable. */
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] {
    box-sizing: border-box !important;
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
    min-height: var(--ff-view-grid-height) !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] > .dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-gridbase-container {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview {
    flex: 1 1 0 !important;
    height: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview
    :is(.dx-scrollable-wrapper, .dx-scrollable-container) {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height]
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow: auto !important;
    scrollbar-gutter: stable !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-total-footer, .dx-datagrid-pager, .dx-pager) {
    flex: 0 0 auto !important;
}

/* Short result sets contract to their rows, optional totals, and pager so page
   options remain directly below the final data row. */
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result {
    height: var(--ff-view-grid-short-height) !important;
    max-height: var(--ff-view-grid-short-height) !important;
    min-height: var(--ff-view-grid-short-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview {
    flex: 0 0 var(--ff-view-grid-short-rows-height) !important;
    height: var(--ff-view-grid-short-rows-height) !important;
    max-height: var(--ff-view-grid-short-rows-height) !important;
    min-height: var(--ff-view-grid-short-rows-height) !important;
}

/* A delayed legacy Collections resize can briefly leave its old viewport class
   on the shared grid. Keep the compact result height authoritative until that
   marker is cleaned up so the pager cannot jump back to the page footer. */
html body.ff-app.ff-app.ff-app .ff-view-collections.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid.ff-shared-view-grid-short-result {
    height: var(--ff-view-grid-short-height) !important;
    max-height: var(--ff-view-grid-short-height) !important;
    min-height: var(--ff-view-grid-short-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid.ff-shared-view-grid-short-result
    :is(.dx-datagrid, .dx-gridbase-container) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview {
    flex: 0 0 var(--ff-view-grid-short-rows-height) !important;
    height: var(--ff-view-grid-short-rows-height) !important;
    max-height: var(--ff-view-grid-short-rows-height) !important;
    min-height: var(--ff-view-grid-short-rows-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview
    :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview
    :is(.dx-scrollable-wrapper, .dx-scrollable-container) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview .dx-scrollable-container {
    overflow-y: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview .dx-scrollable-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview
    :is(tr.dx-freespace-row, tr.dx-virtual-row),
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result .dx-datagrid-rowsview
    :is(tr.dx-freespace-row, tr.dx-virtual-row) > :is(td, th) {
    border: 0 !important;
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-shared-view-grid-short-result :is(.dx-datagrid-pager, .dx-pager) {
    margin-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-shared-view-grid-page
    .ff-shared-view-grid--collections .dx-datagrid-total-footer {
    display: none !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-headers,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-headers .dx-datagrid-content {
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-headers
    .dx-header-row > :is(td, th) {
    background: var(--primary, #337bf2) !important;
    color: #fff !important;
    font-size: 12px !important;
    height: var(--ff-view-grid-header-height) !important;
    line-height: 18px !important;
    max-height: var(--ff-view-grid-header-height) !important;
    min-height: var(--ff-view-grid-header-height) !important;
    overflow: hidden !important;
    padding: 1px 4px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row) > :is(td, th) {
    height: var(--ff-view-grid-filter-height) !important;
    line-height: 18px !important;
    max-height: var(--ff-view-grid-filter-height) !important;
    min-height: var(--ff-view-grid-filter-height) !important;
    overflow: hidden !important;
    padding: 1px 2px !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row)
    :is(.dx-editor-container, .dx-texteditor, .dx-texteditor-container, .dx-texteditor-input-container, .dx-dropdowneditor, .dx-datebox, input) {
    box-sizing: border-box !important;
    height: 20px !important;
    line-height: 18px !important;
    max-height: 20px !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(td, th):is(.ff-view-grid-select-col, .dx-command-select) {
    box-sizing: border-box !important;
    max-width: var(--ff-view-grid-select-width) !important;
    min-width: var(--ff-view-grid-select-width) !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    text-align: center !important;
    width: var(--ff-view-grid-select-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > :is(td, th) {
    block-size: var(--ff-view-grid-row-height) !important;
    box-sizing: border-box !important;
    font-size: var(--ff-view-grid-data-font-size) !important;
    height: var(--ff-view-grid-row-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-block-size: var(--ff-view-grid-row-height) !important;
    max-height: var(--ff-view-grid-row-height) !important;
    min-block-size: var(--ff-view-grid-row-height) !important;
    min-height: var(--ff-view-grid-row-height) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    transition: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-content-fixed {
    box-shadow: 2px 0 0 var(--border, #d2d8e0) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-total-footer
    .dx-row > :is(td, th) {
    height: var(--ff-view-grid-summary-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-height: var(--ff-view-grid-summary-height) !important;
    min-height: var(--ff-view-grid-summary-height) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.dx-datagrid-pager, .dx-pager) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: var(--ff-view-grid-pager-height) !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    min-height: var(--ff-view-grid-pager-height) !important;
    overflow: visible !important;
    padding-left: 8px !important;
    padding-bottom: 0 !important;
    padding-right: 8px !important;
    padding-top: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-pager :is(.dx-page-sizes, .dx-pages) {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    position: static !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-pager .dx-page-sizes {
    margin-left: auto !important;
    order: 1 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-pager .dx-pages {
    order: 2 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    .dx-data-row > :is(td, th):is(.ff-view-grid-boolean-col, .ff-grid-boolean-col, .ff-grid-boolean-cell) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    .dx-data-row :is(.ff-grid-boolean-checkbox, .dx-checkbox) {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Read-only boolean flags need breathing room inside the compact bordered row.
   Keep the box and its glyph centred without changing the shared row height. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-view-grid-boolean-col, .ff-grid-boolean-col, .ff-grid-boolean-cell) {
    --ff-grid-data-checkbox-size-final: calc(var(--ff-view-grid-row-height) - 4px) !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-view-grid-boolean-col, .ff-grid-boolean-col, .ff-grid-boolean-cell)
    > .ff-grid-boolean-checkbox {
    align-items: center !important;
    display: flex !important;
    height: calc(var(--ff-view-grid-row-height) - 2px) !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    max-height: calc(var(--ff-view-grid-row-height) - 2px) !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-view-grid-boolean-col, .ff-grid-boolean-col, .ff-grid-boolean-cell)
    .ff-grid-boolean-checkbox .dx-checkbox:is(.dx-checkbox-checked, .dx-checkbox-indeterminate)
    .dx-checkbox-icon::before {
    align-items: center !important;
    display: flex !important;
    font-size: calc(var(--ff-grid-data-checkbox-size-final) - 2px) !important;
    height: 100% !important;
    justify-content: center !important;
    left: 0 !important;
    line-height: 1 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.dx-command-select .dx-checkbox, .ff-view-grid-select-col .dx-checkbox, input[type="checkbox"]) {
    height: var(--ff-view-grid-check-size) !important;
    max-height: var(--ff-view-grid-check-size) !important;
    max-width: var(--ff-view-grid-check-size) !important;
    min-height: var(--ff-view-grid-check-size) !important;
    min-width: var(--ff-view-grid-check-size) !important;
    width: var(--ff-view-grid-check-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    margin: 0 auto 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) > button,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-button, .dx-link, .ff-manifest-view-link) {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    justify-content: center !important;
    line-height: 14px !important;
    margin: 0 !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) .fa,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-button, .dx-link, .ff-manifest-view-link) .fa {
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) > button,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .ff-grid-row-action-button {
    color: var(--primary, #337bf2) !important;
    cursor: pointer !important;
    flex: 0 0 var(--ff-view-grid-cell-line-height) !important;
    max-width: var(--ff-view-grid-cell-line-height) !important;
    min-width: var(--ff-view-grid-cell-line-height) !important;
    width: var(--ff-view-grid-cell-line-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) > button:not(:disabled):is(:hover, :focus-visible),
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .ff-grid-row-action-button:not(:disabled):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--primary, #337bf2) 10%, transparent) !important;
    outline: 1px solid color-mix(in srgb, var(--primary, #337bf2) 32%, transparent) !important;
    outline-offset: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) > button:disabled,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid
    .ff-grid-row-action-button:disabled {
    cursor: default !important;
    opacity: 0.35 !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th) {
    background-color: #fff4bf !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page .ff-shared-view-grid .dx-datagrid-rowsview
    .dx-data-row:hover > :is(td, th) {
    background-color: var(--surface-hover, #eaf2ff) !important;
}

html body.ff-app.ff-app.ff-app[data-ui-density="normal"] .ff-shared-view-grid-page .ff-shared-view-grid {
    --ff-view-grid-data-font-size: 14.4px;
}

html body.ff-app.ff-app.ff-app[data-ui-density="normal"] .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app[data-ui-density="normal"] .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-total-footer .dx-row > :is(td, th) {
    font-size: var(--ff-view-grid-data-font-size) !important;
}

html body.ff-app.ff-app.ff-app[data-ui-density="normal"] .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-headers .dx-header-row > :is(td, th),
html body.ff-app.ff-app.ff-app[data-ui-density="normal"] .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content {
    font-size: 12px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-grid-actions {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-panel {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #cfd6df) !important;
    box-shadow: 0 8px 24px rgba(21, 31, 45, 0.18) !important;
    color: var(--text, #25282d) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 5px) !important;
    white-space: normal !important;
    width: min(430px, calc(100vw - 24px)) !important;
    z-index: 10020 !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-header {
    align-items: center !important;
    border-bottom: 1px solid var(--border, #cfd6df) !important;
    display: flex !important;
    font-size: 17px !important;
    justify-content: space-between !important;
    min-height: 34px !important;
    padding-bottom: 7px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-close {
    align-items: center !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted, #5d6570) !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 34px !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 34px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-close:hover,
html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-close:focus {
    background: var(--surface-hover, #eaf2ff) !important;
    border-color: var(--border, #cfd6df) !important;
    color: var(--text, #25282d) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-row {
    align-items: center !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-row > strong {
    font-size: 13px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-segment {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-segment > button,
html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-columns {
    align-items: center !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border-strong, #8e99a8) !important;
    color: var(--text-muted, #565d67) !important;
    display: inline-flex !important;
    font-size: 13px !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    padding: 0 8px !important;
    white-space: normal !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-segment > button + button {
    border-left: 0 !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-segment > button.active {
    background: var(--primary, #337bf2) !important;
    border-color: var(--primary, #337bf2) !important;
    color: #fff !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-columns {
    align-self: flex-end !important;
    gap: 7px !important;
    min-width: 150px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-columns:hover,
html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-columns:focus {
    background: var(--surface-hover, #eaf2ff) !important;
    color: var(--text, #25282d) !important;
}

@media (max-width: 520px) {
    html body.ff-app.ff-app.ff-app :is(.ff-shared-view-grid-page, .ff-grid-tools-page) .ff-view-grid-options-row {
        align-items: stretch !important;
        grid-template-columns: 1fr !important;
    }
}

/* Final shared density lock. Legacy View-page rules use grid IDs, so this
   #app-scoped contract keeps every migrated grid on one row/control geometry. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview tr.dx-data-row,
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview tr.dx-data-row > :is(td, th) {
    block-size: var(--ff-view-grid-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-view-grid-row-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-block-size: var(--ff-view-grid-row-height) !important;
    max-height: var(--ff-view-grid-row-height) !important;
    min-block-size: var(--ff-view-grid-row-height) !important;
    min-height: var(--ff-view-grid-row-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview tr.dx-data-row > :is(td, th) > * {
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    min-height: var(--ff-view-grid-cell-line-height) !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview :is(.ff-grid-row-action-button, .dx-link, .ff-manifest-view-link) {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    justify-content: center !important;
    line-height: 14px !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    min-height: var(--ff-view-grid-cell-line-height) !important;
}

/* Match View Waybills' 15px action glyphs on every migrated view grid. Keep
   each page's existing button width so wider hit targets are not reduced. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview
    :is(.ff-grid-row-action-buttons, .ff-waybill-row-action-buttons, .ff-manifest-row-action-buttons)
    :is(.fa, .dx-icon, .glyphicon) {
    display: inline-block !important;
    font-size: 15px !important;
    height: auto !important;
    line-height: 1 !important;
    max-height: none !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview tr.dx-data-row > :is(td, th).ff-view-grid-action-col {
    padding-left: 1px !important;
    padding-right: 1px !important;
    text-align: left !important;
}

/* Keep the first action in a fixed horizontal slot even when later actions are
   unavailable. The native waybill grid has an older, higher-specificity rule. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-view-waybills-native-page.ff-view-waybills
    #viewWaybillsGrid#viewWaybillsGrid.ff-waybill-native-grid .ff-waybill-row-action-buttons {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* Native fixed cells already receive their left offset from DevExtreme. Keep
   legacy page rules from replacing sticky positioning after shared migration. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-select-col, .ff-view-grid-action-col, .ff-view-grid-key-col).dx-datagrid-sticky-column-left {
    position: sticky !important;
    right: auto !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-view-grid
    .dx-datagrid-rowsview input[type="checkbox"] {
    display: inline-block !important;
    height: var(--ff-view-grid-check-size) !important;
    line-height: var(--ff-view-grid-check-size) !important;
    max-height: var(--ff-view-grid-check-size) !important;
    min-height: var(--ff-view-grid-check-size) !important;
    width: var(--ff-view-grid-check-size) !important;
}

/* Receiver Master uses a lightweight native checkbox template instead of the
   DevExtreme selection command. Centre that template without adding layout
   work to every data row. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-receivers.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview) :is(td, th).ff-receivers-select-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-receivers.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid .ff-receivers-select-box {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-receivers.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid .ff-receivers-select-box input[type="checkbox"] {
    margin: 0 auto !important;
}

/* Editable grids keep the same density. An active editor must not resize either
   the fixed or scrollable table while DevExtreme commits the cell value. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-editable-grid
    .dx-datagrid-rowsview tr.dx-data-row :is(.dx-editor-cell, .dx-command-edit) {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-editable-grid
    .dx-datagrid-rowsview tr.dx-data-row
    :is(.dx-texteditor, .dx-texteditor-container, .dx-texteditor-input-container, .dx-dropdowneditor, .dx-numberbox) {
    box-sizing: border-box !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    min-height: var(--ff-view-grid-cell-line-height) !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-editable-grid
    .dx-datagrid-rowsview tr.dx-data-row
    :is(.dx-texteditor-input, input:not([type="checkbox"]), .dx-placeholder) {
    box-sizing: border-box !important;
    font-size: inherit !important;
    height: var(--ff-view-grid-cell-line-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-height: var(--ff-view-grid-cell-line-height) !important;
    min-height: var(--ff-view-grid-cell-line-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page .ff-shared-editable-grid
    .dx-datagrid-rowsview tr.dx-data-row :is(.dx-dropdowneditor-button, .dx-clear-button-area) {
    height: var(--ff-view-grid-cell-line-height) !important;
    min-width: var(--ff-view-grid-cell-line-height) !important;
    width: var(--ff-view-grid-cell-line-height) !important;
}

/* The shared profile measures the exact space between View Manifests and the
   app footer. Keep its older #gridContainer height rule from replacing that
   measured value after the page migrated to this profile. */
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-view-manifests-simple.ff-shared-view-grid-page
    .ff-shared-view-grid[data-ff-view-grid-height] {
    box-sizing: border-box !important;
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
    min-height: var(--ff-view-grid-height) !important;
}

/* Debriefing has an older viewport minimum that still matches after its shared
   grid migration. Keep the measured height from shrinking inside the page shell
   so the rows pane uses the full space above the footer. */
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height],
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height] > .dx-datagrid,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-gridbase-container {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
    min-height: var(--ff-view-grid-height) !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview
    :is(.dx-datagrid-content, .dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container, .dx-scrollable-content) {
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-debriefing.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid[data-ff-view-grid-height]
    .dx-gridbase-container > .dx-context-menu:empty {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
}

/* Grid utilities are commands for the complete result set, so keep them at
   the far right whether a page uses a right wrapper or places ff-grid-tools
   directly in the shared toolbar. */
html body.ff-app.ff-app.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    display: flex !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-page .ff-grid-toolbar-row
    > .ff-grid-toolbar-inner > .ff-grid-toolbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-page .ff-grid-toolbar-row
    > .ff-grid-toolbar-inner > :is(.ff-grid-toolbar-right, [ff-grid-tools]) {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

/* Tracking previously hid its header until a legacy data-state class appeared.
   Its shared grid keeps the header and filters adjacent to the options toolbar. */
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page .ff-grid-toolbar-row {
    margin-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-shared-view-grid-page
    #gridContainer.ff-shared-view-grid .dx-datagrid-headers {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* View Waybills keeps named saved views, but its launcher belongs with the
   standard grid utilities rather than among the left-side scan filters. */
html body.ff-app.ff-app.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row
    > .ff-grid-actions-host {
    margin-left: auto !important;
    order: 98 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row
    > .ff-grid-view-toolbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 99 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills .ff-grid-view-toolbar .ff-grid-view-panel {
    left: auto !important;
    right: 0 !important;
}

/* Keep the inline Manifest filter legend clear of the action toolbar. */
html body.ff-app.ff-app.ff-app .ff-view-manifests-simple
    > .container-fluid.container-fullw {
    padding-top: 6px !important;
}

/* Normal density uses the larger portal field text. Give yyyy/MM/dd sixteen
   extra pixels per date while retaining the established compact dimensions. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-manifests-simple .ff-manifest-filter-row > .ff-manifest-date-range {
    box-sizing: border-box !important;
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    padding-left: 0 !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-manifests-simple .ff-manifest-date-range :is(.form-group, .range-picker) {
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-manifests-simple .ff-manifest-date-range .range-picker :is(.start-date, .end-date) {
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    width: 112px !important;
}

/* View Quotes uses the same larger normal-density date value as Manifests.
   Keep the established 96px fields untouched in compact mode. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-quotes .ff-waybill-filter-grid > .ff-filter-date-range {
    box-sizing: border-box !important;
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-quotes .ff-filter-date-range :is(.form-group, .range-picker) {
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-quotes .ff-filter-date-range .range-picker :is(.start-date, .end-date) {
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    width: 112px !important;
}

/* View Invoices uses the same finance date control at normal density. Keep
   both complete yyyy/MM/dd values visible without changing compact mode. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-invoices .ff-sr-card {
    --ff-invoices-date-range-width-final: 248px;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    .ff-view-invoices.ff-view-invoices .ff-sr-card .ff-finance-date-block
    .ff-finance-date-range .range-picker :is(.start-date, .end-date) {
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    width: 112px !important;
}

/* View Invoices has three summary actions and four waybill actions. Retire the
   old single-button 24px width while keeping both command columns fixed left. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #clientGridContainer.ff-shared-view-grid--invoice-clients {
    --ff-view-invoices-command-column-width: 76px;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #waybillGridContainer.ff-shared-view-grid--invoice-waybills {
    --ff-view-invoices-command-column-width: 98px;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #clientGridContainer.ff-shared-view-grid--invoice-clients
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-action-col, .ff-invoice-view-command-col) {
    box-sizing: border-box !important;
    max-width: 76px !important;
    min-width: 76px !important;
    overflow: visible !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    width: 76px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #waybillGridContainer.ff-shared-view-grid--invoice-waybills
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-action-col, .ff-invoice-view-waybill-command-col) {
    box-sizing: border-box !important;
    max-width: 98px !important;
    min-width: 98px !important;
    overflow: visible !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    width: 98px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #clientGridContainer.ff-shared-view-grid--invoice-clients .ff-invoice-row-action-buttons {
    max-width: 72px !important;
    min-width: 72px !important;
    width: 72px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    #waybillGridContainer.ff-shared-view-grid--invoice-waybills .ff-invoice-row-action-buttons {
    max-width: 94px !important;
    min-width: 94px !important;
    width: 94px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-invoices
    :is(#clientGridContainer.ff-shared-view-grid--invoice-clients, #waybillGridContainer.ff-shared-view-grid--invoice-waybills)
    .ff-invoice-row-action-buttons > .ff-grid-row-action-button {
    flex-basis: 22px !important;
    max-width: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

/* The retired quote grid class owned the three-button command layout. Preserve
   that layout on the shared native grid and leave DevExtreme's fixed offset in charge. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-view-quotes
    .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-select-col, .ff-quote-select-col, .dx-command-select) {
    box-sizing: border-box !important;
    max-width: 28px !important;
    min-width: 28px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 28px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-quotes
    .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-action-col, .ff-quote-command-col) {
    box-sizing: border-box !important;
    max-width: 74px !important;
    min-width: 74px !important;
    overflow: visible !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    width: 74px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-quotes
    .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-key-col, .ff-quote-key-col) {
    box-sizing: border-box !important;
    max-width: 72px !important;
    min-width: 72px !important;
    width: 72px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-quotes
    .ff-shared-view-grid .ff-quote-row-action-buttons {
    justify-content: flex-start !important;
    margin: 0 auto 0 0 !important;
    max-width: 72px !important;
    min-width: 72px !important;
    text-align: left !important;
    width: 72px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-quotes
    .ff-shared-view-grid .ff-quote-row-action-buttons > .ff-grid-row-action-button {
    flex-basis: 22px !important;
    max-width: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

/* Normal-density date text needs a little more room than the compact 96px
   control. Apply the same complete-date width to every migrated view page. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    :is(.ff-filter-date-range, .ff-finance-date-range, .ff-image-date-range, .ff-manifest-date-range, .ff-route-date-range, .ff-debtors-date-range) {
    box-sizing: border-box !important;
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    :is(.ff-filter-date-range, .ff-finance-date-range, .ff-image-date-range, .ff-manifest-date-range, .ff-route-date-range, .ff-debtors-date-range)
    :is(.form-group, .range-picker) {
    box-sizing: border-box !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    :is(.ff-filter-date-range, .ff-finance-date-range, .ff-image-date-range, .ff-manifest-date-range, .ff-route-date-range, .ff-debtors-date-range)
    .range-picker :is(.start-date, .end-date) {
    box-sizing: border-box !important;
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    width: 112px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    :is(.ff-filter-date-range, .ff-finance-date-range, .ff-image-date-range, .ff-manifest-date-range, .ff-route-date-range, .ff-debtors-date-range)
    .range-picker > .input-group-addon {
    box-sizing: border-box !important;
    flex: 0 0 24px !important;
    max-width: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
}

/* Credit/Debit Notes needs the normal-density date width so YYYY/MM/DD remains
   visible. Keep this after the shared rule and retain the 12px gap from Date
   Period; compact density continues to use the 216px/96px date standard. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-view-crdr.ff-view-crdr.ff-shared-view-grid-page
    .ff-sr-card.ff-sr-card .ff-finance-primary-filters.ff-finance-primary-filters
    > .ff-finance-date-range.ff-finance-date-range--crdr {
    box-sizing: border-box !important;
    flex: 0 0 248px !important;
    margin-left: 4px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-view-crdr.ff-view-crdr.ff-shared-view-grid-page
    .ff-sr-card.ff-sr-card .ff-finance-primary-filters.ff-finance-primary-filters
    > .ff-finance-date-range.ff-finance-date-range--crdr
    :is(.form-group, .range-picker) {
    box-sizing: border-box !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-view-crdr.ff-view-crdr.ff-shared-view-grid-page
    .ff-sr-card.ff-sr-card .ff-finance-primary-filters.ff-finance-primary-filters
    > .ff-finance-date-range.ff-finance-date-range--crdr
    .range-picker :is(.start-date, .end-date) {
    box-sizing: border-box !important;
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    width: 112px !important;
}

/* The finance date labels use a taller legacy line box than neighbouring
   fields. Normalize it here so the date editors and first-row inputs share the
   same top edge. */
html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-view-crdr.ff-view-crdr.ff-shared-view-grid-page
    .ff-sr-card.ff-sr-card .ff-finance-primary-filters.ff-finance-primary-filters
    > :is(.ff-finance-date-period--crdr, .ff-finance-date-range--crdr)
    > .form-group {
    gap: 1px !important;
    padding-top: 2px !important;
}

html body.ff-app.ff-app.ff-app:not(.ff-ui-density-compact):not([data-ui-density="compact"])
    #app#app#app .ff-view-crdr.ff-view-crdr.ff-shared-view-grid-page
    .ff-sr-card.ff-sr-card .ff-finance-primary-filters.ff-finance-primary-filters
    > :is(.ff-finance-date-period--crdr, .ff-finance-date-range--crdr)
    > .form-group > label {
    line-height: 14px !important;
    min-height: 14px !important;
}

/* Credit/Debit Notes has two row commands. Keep their native fixed column wide
   enough for both standard action buttons after the legacy 32px rule retires. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-view-crdr
    #gridContainer.ff-shared-view-grid--crdr
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-view-grid-action-col, .ff-crdr-command-col) {
    box-sizing: border-box !important;
    max-width: 54px !important;
    min-width: 54px !important;
    overflow: visible !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-crdr
    #gridContainer.ff-shared-view-grid--crdr .ff-crdr-row-action-buttons {
    max-width: 50px !important;
    min-width: 50px !important;
    width: 50px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-view-crdr
    #gridContainer.ff-shared-view-grid--crdr .ff-crdr-row-action-buttons > .ff-grid-row-action-button {
    flex-basis: 22px !important;
    max-width: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

/* Debtors switches between three summary commands and six detail commands.
   Preserve those real widths instead of collapsing every action cell to 32px. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th).ff-debtors-summary-command-col {
    max-width: 76px !important;
    min-width: 76px !important;
    width: 76px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors .ff-shared-view-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th).ff-debtors-detail-command-col {
    max-width: 144px !important;
    min-width: 144px !important;
    width: 144px !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors .ff-shared-view-grid
    :is(.ff-debtors-row-action-buttons, .ff-debtors-detail-row-actions) > .ff-grid-row-action-button {
    flex-basis: 22px !important;
    max-width: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

/* Debtors carries an ID-scoped legacy auto-height reset. Reserve a usable
   viewport before the first shared-grid measurement, then let the measured
   value take over. Short results retain their separate compact contract. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result) {
    box-sizing: border-box !important;
    height: var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px)) !important;
    max-height: var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px)) !important;
    min-height: var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px)) !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result) > .dx-datagrid,
html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result) .dx-gridbase-container {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Give the measured grid one definite rows viewport so only DevExtreme's
   native scroller grows. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result)
    .dx-datagrid-rowsview {
    flex: 1 1 0 !important;
    height: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result)
    .dx-datagrid-rowsview :is(.dx-scrollable-wrapper, .dx-scrollable-container) {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app .ff-debtors.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid:not(.ff-shared-view-grid-short-result)
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow: auto !important;
    scrollbar-gutter: stable !important;
}

/* View-grid tallies must fit the same practical widths as their data values. */
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    .ff-shared-view-grid .dx-datagrid-total-footer .dx-row > :is(td, th),
html body.ff-app.ff-app.ff-app #app#app#app .ff-shared-view-grid-page:not(.ff-capture-page)
    .ff-shared-view-grid .dx-datagrid-total-footer .dx-datagrid-summary-item {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: var(--ff-view-grid-data-font-size) !important;
    font-stretch: semi-condensed !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Image Search still has legacy viewport rules in dx-custom.css that force a
   multi-screen grid and hide its native scroll container. Once migrated to the
   shared grid, keep the measured height authoritative and let only rows scroll. */
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible > .container-fullw,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible > .container-fluid.container-fullw,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible .ff-grid-result-row,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible .ff-grid-result-row > [class*="col-"] {
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height],
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] > .dx-datagrid,
html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-gridbase-container {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
    min-height: var(--ff-view-grid-height) !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview
    :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height]
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

html body.ff-app.ff-app.ff-app #app#app#app
    .ff-imaging-list.ff-shared-view-grid-page.ff-image-results-visible
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height]
    .dx-datagrid-rowsview .dx-scrollable-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* Route and result rendering are deliberately covered until their first stable
   paint. This keeps toolbar locking and DevExtreme sizing work off-screen. */
html body.ff-app .ff-route-render-curtain {
    align-items: center;
    background: var(--page-bg, var(--surface, #fff));
    bottom: var(--ff-route-render-bottom, 32px);
    color: var(--text-muted, #697386);
    display: none;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: var(--ff-route-render-top, 44px);
    z-index: 4000;
}

html body.ff-app.ff-route-render-pending .ff-route-render-curtain {
    display: flex;
}

html body.ff-app.ff-route-render-pending #container {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
    visibility: hidden !important;
}

html body.ff-app.ff-route-render-pending #loading-bar-spinner,
html body.ff-app.ff-route-render-pending .app-content.csspinner::before,
html body.ff-app.ff-route-render-pending .app-content.csspinner::after {
    display: none !important;
}

html body.ff-app .ff-route-render-curtain__spinner,
html body.ff-app .ff-view-grid-render-pending::after {
    animation: ff-render-wait-spin 0.8s linear infinite;
    border: 3px solid color-mix(in srgb, var(--primary, #337bf2) 20%, var(--border, #cfd6df));
    border-radius: 50%;
    border-top-color: var(--primary, #337bf2);
    box-sizing: border-box;
    display: block;
    height: 38px;
    width: 38px;
}

html body.ff-app .ff-route-render-curtain__label {
    color: var(--text-muted, #697386);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 18px;
    margin-top: 10px;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending:not(.ff-shared-view-grid-short-result) {
    cursor: wait !important;
    height: var(--ff-view-grid-pending-height, var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px))) !important;
    isolation: isolate !important;
    max-height: var(--ff-view-grid-pending-height, var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px))) !important;
    min-height: var(--ff-view-grid-pending-height, var(--ff-view-grid-height, clamp(160px, calc(100dvh - 250px), 760px))) !important;
    overflow: hidden !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending::before {
    align-items: center;
    background: var(--surface, #fff);
    color: var(--text-muted, #697386);
    content: attr(data-ff-grid-wait-text);
    display: flex !important;
    font-size: 13px;
    font-weight: 600;
    inset: 0;
    justify-content: center;
    letter-spacing: 0;
    line-height: 18px;
    padding-top: 56px;
    pointer-events: auto;
    position: absolute;
    text-align: center;
    z-index: 10000;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending::after {
    content: "";
    left: 50%;
    margin-left: -19px;
    margin-top: -30px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    z-index: 10001;
}

/* Once complete rows have painted, final DevExtreme sizing may settle without
   keeping the result curtain or wait cursor visible to the user. */
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending.ff-view-grid-results-painted {
    cursor: default !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending.ff-view-grid-results-painted::before,
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending.ff-view-grid-results-painted::after {
    display: none !important;
}

/* Paging can retain already-rendered rows while the replacement page is
   prepared. Keep this fallback curtain transparent so only its spinner shows
   if the singleton wait service has not painted yet. */
html body.ff-app.ff-app.ff-app .ff-imaging-list.ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending.ff-view-grid-page-pending::before {
    background: transparent !important;
    color: transparent !important;
    content: "" !important;
    padding: 0 !important;
}

/* DevExtreme replaces page rows before its option callback on some grids.
   Keep a visual copy of the current rows in place until the replacement page
   has completed a stable paint. */
html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-page-snapshot-host {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-shared-view-grid-page
    .ff-shared-view-grid > .ff-view-grid-page-snapshot {
    background: var(--surface, #fff) !important;
    box-sizing: border-box !important;
    flex: none !important;
    height: var(--ff-view-grid-page-snapshot-height) !important;
    left: var(--ff-view-grid-page-snapshot-left) !important;
    margin: 0 !important;
    max-height: var(--ff-view-grid-page-snapshot-height) !important;
    max-width: var(--ff-view-grid-page-snapshot-width) !important;
    min-height: var(--ff-view-grid-page-snapshot-height) !important;
    min-width: var(--ff-view-grid-page-snapshot-width) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: var(--ff-view-grid-page-snapshot-top) !important;
    width: var(--ff-view-grid-page-snapshot-width) !important;
    z-index: 9998 !important;
}

html body.ff-app .ff-block-ui-active:has(.ff-shared-view-grid.ff-view-grid-render-pending)::before,
html body.ff-app .ff-block-ui-active:has(.ff-shared-view-grid.ff-view-grid-render-pending)::after {
    display: none !important;
}

@keyframes ff-render-wait-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.ff-app .ff-route-render-curtain__spinner,
    html body.ff-app .ff-view-grid-render-pending::after {
        animation: none;
    }
}

/* One foreground wait treatment for route, BlockUI, and grid activity. The
   native timer updates text without starting Angular digests. */
html body.ff-app .ff-portal-wait {
    align-items: center;
    background: rgba(55, 65, 81, 0.34);
    background: color-mix(in srgb, var(--text, #1f2937) 24%, transparent);
    box-sizing: border-box;
    cursor: wait;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: fixed;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
    visibility: hidden;
    z-index: 11050;
}

html body.ff-app.ff-portal-wait-visible .ff-portal-wait {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 120ms ease;
    visibility: visible;
}

html body.ff-app.ff-route-render-pending.ff-portal-wait-visible .ff-portal-wait {
    transition: none;
}

html body.ff-app .ff-portal-wait__content {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d7dee8);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
    color: var(--text, #1f2937);
    display: flex;
    gap: 14px;
    max-width: min(520px, calc(100vw - 40px));
    min-width: 280px;
    padding: 16px 20px;
    pointer-events: none;
}

/* Retained-row paging uses the same singleton wait, but without masking the
   current grid page. The text remains available to assistive technology. */
html body.ff-app.ff-portal-wait-indicator .ff-portal-wait {
    background: transparent !important;
    pointer-events: none !important;
}

html body.ff-app.ff-portal-wait-indicator .ff-portal-wait__content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}

html body.ff-app.ff-portal-wait-indicator .ff-portal-wait__copy {
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

html body.ff-app .ff-portal-wait__icon {
    color: var(--primary, #337bf2);
    flex: 0 0 auto;
    font-size: 34px;
    line-height: 1;
}

html body.ff-app .ff-portal-wait__copy {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

html body.ff-app .ff-portal-wait__title {
    color: var(--text, #1f2937);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}

html body.ff-app .ff-portal-wait__elapsed,
html body.ff-app .ff-portal-wait__detail {
    color: var(--text-muted, #697386);
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.35;
}

html body.ff-app .ff-portal-wait__detail[hidden] {
    display: none !important;
}

/* The singleton overlay replaces legacy block, grid, route, and capture rings
   while it is active, preventing duplicate animations and stacked backdrops. */
html body.ff-app.ff-portal-wait-active
    :is(.csspinner, .loading, .load1, .load2)::before,
html body.ff-app.ff-portal-wait-active
    :is(.csspinner, .loading, .load1, .load2)::after,
html body.ff-app.ff-portal-wait-active .ff-view-grid-render-pending::before,
html body.ff-app.ff-portal-wait-active .ff-view-grid-render-pending::after,
html body.ff-app.ff-portal-wait-active .ff-grid-loading::before,
html body.ff-app.ff-portal-wait-active .ff-grid-loading::after,
html body.ff-app.ff-portal-wait-active .ff-view-search-status,
html body.ff-app.ff-portal-wait-active .ff-capture-wait-indicator,
html body.ff-app.ff-portal-wait-active #loading-bar,
html body.ff-app.ff-portal-wait-active #loading-bar-spinner {
    display: none !important;
}

/* Silent monitors deliberately leave their local progress treatment visible
   when it is the only feedback. If another source raises the singleton page
   wait, suppress those larger local treatments so two page/panel waits cannot
   be painted on top of one another. Compact button and pager spinners are not
   included here. */
html body.ff-app.ff-portal-wait-active
    :is(
        .app-content-loading,
        .scan-busy-overlay,
        .imagingSpinner,
        .ff-image-preview-loading,
        .ff-image-preview-status,
        .ff-external-image-loading,
        .ff-public-grid-state--loading,
        .ff-scan-preview-status,
        .ff-service-rate-details__loading,
        .ff-query-loading-row
    ) {
    display: none !important;
}

/* Shared-grid curtains use a deliberately strong page selector. Match that
   strength so the singleton always wins instead of allowing the opaque local
   curtain to remain above it. */
html body.ff-app.ff-app.ff-app.ff-portal-wait-active .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending::before,
html body.ff-app.ff-app.ff-app.ff-portal-wait-active .ff-shared-view-grid-page
    .ff-shared-view-grid.ff-view-grid-render-pending::after {
    display: none !important;
}

/* The long-wait decision must remain usable above the singleton wait curtain. */
html body .swal2-container.ff-long-wait-dialog-container {
    z-index: 11250 !important;
}

html body .ff-long-wait-dialog .ff-long-wait-dialog__line {
    color: var(--text, #1f2937);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.45;
    margin: 4px 0;
}

/* Keep the opaque route surface present from the initiating click onward.
   The delayed singleton wait panel sits above it once visible; only suppress
   the covered route copy so two indicators are never painted together. */
html body.ff-app.ff-portal-wait-active .ff-route-render-curtain__spinner,
html body.ff-app.ff-portal-wait-active .ff-route-render-curtain__label {
    visibility: hidden !important;
}

html body.ff-app.ff-portal-wait-active
    :is(.dx-loadpanel-wrapper, .dx-loadpanel, .dx-datagrid-bottom-load-panel, .dx-loadindicator),
html body.ff-app.ff-portal-wait-active
    :is(.dx-loadpanel-wrapper, .dx-loadpanel, .dx-datagrid-bottom-load-panel)
    :is(.dx-loadpanel-content, .dx-loadpanel-indicator, .dx-loadindicator, .dx-loadindicator-wrapper),
html body.ff-app.ff-portal-wait-active
    .fa-spinner.fa-spin:not(.ff-portal-wait__icon) {
    animation: none !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

html body.ff-app.ff-invoice-detail-loading::before,
html body.ff-app.ff-invoice-detail-loading::after {
    animation: none !important;
    content: none !important;
    display: none !important;
}

@media (max-width: 480px) {
    html body.ff-app .ff-portal-wait__content {
        align-items: center;
        flex-direction: column;
        min-width: 0;
        text-align: center;
        width: 100%;
    }

    html body.ff-app .ff-portal-wait__copy {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.ff-app .ff-portal-wait,
    html body.ff-app .ff-portal-wait__icon {
        animation: none !important;
        transition: none !important;
    }
}

/* Query previously carried several ID-scoped viewport, density, and pager
   rules. The shared profile now owns all three so native scroll ranges and
   virtual spacer rows remain intact. */
html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid {
    --ff-view-grid-filter-height: 26px;
    --ff-view-grid-row-height: 18px;
    --ff-view-grid-pager-height: 28px;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] {
    height: var(--ff-view-grid-height) !important;
    max-height: var(--ff-view-grid-height) !important;
    min-height: var(--ff-view-grid-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] > .dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-gridbase-container {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height] .dx-datagrid-rowsview
    :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid[data-ff-view-grid-height]
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-headers
    :is(tr.dx-filter-row, tr.dx-datagrid-filter-row),
html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-headers
    :is(tr.dx-filter-row, tr.dx-datagrid-filter-row) > :is(td, th) {
    box-sizing: border-box !important;
    height: var(--ff-view-grid-filter-height) !important;
    line-height: 22px !important;
    max-height: var(--ff-view-grid-filter-height) !important;
    min-height: var(--ff-view-grid-filter-height) !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row)
    :is(.dx-editor-container, .dx-texteditor, .dx-texteditor-container, .dx-texteditor-input-container, .dx-dropdowneditor, .dx-datebox) {
    box-sizing: border-box !important;
    height: 22px !important;
    line-height: 20px !important;
    max-height: 22px !important;
    min-height: 22px !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row)
    :is(.dx-texteditor-input, input:not([type="checkbox"])) {
    box-sizing: border-box !important;
    height: 20px !important;
    line-height: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-rowsview
    :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-datagrid-rowsview
    :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > :is(td, th) {
    block-size: var(--ff-view-grid-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-view-grid-row-height) !important;
    line-height: var(--ff-view-grid-cell-line-height) !important;
    max-block-size: var(--ff-view-grid-row-height) !important;
    max-height: var(--ff-view-grid-row-height) !important;
    min-block-size: var(--ff-view-grid-row-height) !important;
    min-height: var(--ff-view-grid-row-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid
    :is(.dx-datagrid-pager.dx-pager, .dx-pager) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: var(--ff-view-grid-pager-height) !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    max-height: var(--ff-view-grid-pager-height) !important;
    min-height: var(--ff-view-grid-pager-height) !important;
    padding: 0 8px !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-pager
    :is(.dx-page-sizes, .dx-pages) {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-pager .dx-page-sizes .dx-page-size {
    margin: 0 3px !important;
}

html body.ff-app.ff-app.ff-app .ff-query.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid .dx-pager .dx-pages
    :is(.dx-page, .dx-navigate-button) {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

/* Tariffs keeps compact geometry classes in its markup in both display modes,
   so the runtime UI-density marker is the authority for readable grid text. */
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-rates-tariffs.ff-tariffs
    #gridContainer#gridContainer.ff-standard-grid--tariffs {
    --ff-grid-cell-line-height: 20px !important;
    --ff-grid-cell-padding-y: 1px !important;
    --ff-grid-row-height: 24px !important;
    --ff-portal-grid-value-font-size: 18.36px !important;
    --ff-standard-grid-cell-line-height: 20px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-font-size: 18.36px !important;
    --ff-standard-grid-row-height: 24px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-rates-tariffs.ff-tariffs
    #gridContainer#gridContainer.ff-standard-grid--tariffs .dx-datagrid-rowsview
    tr.dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-rates-tariffs.ff-tariffs
    #gridContainer#gridContainer.ff-standard-grid--tariffs .dx-datagrid-total-footer
    .dx-row > :is(td, th) {
    font-size: 18.36px !important;
    line-height: 18.36px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-rates-tariffs.ff-tariffs
    #gridContainer#gridContainer.ff-standard-grid--tariffs .dx-datagrid-rowsview
    tr.dx-data-row > :is(td, th)
    :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, .dx-link, a:not(.btn), span:not(.fa):not(.dx-icon), input:not([type="checkbox"]), select, textarea, .dx-texteditor-input) {
    font-size: inherit !important;
    line-height: 18.36px !important;
}

/* Supplier Invoice uses the capture-page shell for all four modes, so it is
   excluded from the shared view-grid readability rule. Match the accepted
   Tariffs normal-mode typography without enlarging compact mode. */
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-supplier-invoice
    :is(#supplierInvoiceGrid#supplierInvoiceGrid, #supplierInvoiceSearchGrid#supplierInvoiceSearchGrid, #supplierGpGrid#supplierGpGrid, #supplierInvoiceImportGrid#supplierInvoiceImportGrid) {
    --ff-grid-cell-line-height: 20px !important;
    --ff-grid-cell-padding-y: 1px !important;
    --ff-grid-row-height: 24px !important;
    --ff-portal-grid-value-font-size: 18.36px !important;
    --ff-standard-grid-cell-line-height: 20px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-font-size: 18.36px !important;
    --ff-standard-grid-row-height: 24px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-supplier-invoice
    :is(#supplierInvoiceGrid#supplierInvoiceGrid, #supplierInvoiceSearchGrid#supplierInvoiceSearchGrid, #supplierGpGrid#supplierGpGrid, #supplierInvoiceImportGrid#supplierInvoiceImportGrid)
    .dx-datagrid-headers .dx-header-row > :is(td, th) {
    font-size: 14.4px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-supplier-invoice
    :is(#supplierInvoiceGrid#supplierInvoiceGrid, #supplierInvoiceSearchGrid#supplierInvoiceSearchGrid, #supplierGpGrid#supplierGpGrid, #supplierInvoiceImportGrid#supplierInvoiceImportGrid)
    .dx-datagrid-rowsview tr.dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-supplier-invoice
    :is(#supplierInvoiceGrid#supplierInvoiceGrid, #supplierInvoiceSearchGrid#supplierInvoiceSearchGrid, #supplierGpGrid#supplierGpGrid, #supplierInvoiceImportGrid#supplierInvoiceImportGrid)
    .dx-datagrid-total-footer .dx-row > :is(td, th) {
    font-size: 18.36px !important;
    line-height: 18.36px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-normal, [data-ui-density="normal"])
    #app#app#app .ff-page.ff-supplier-invoice
    :is(#supplierInvoiceGrid#supplierInvoiceGrid, #supplierInvoiceSearchGrid#supplierInvoiceSearchGrid, #supplierGpGrid#supplierGpGrid, #supplierInvoiceImportGrid#supplierInvoiceImportGrid)
    .dx-datagrid-rowsview tr.dx-data-row > :is(td, th)
    :is(.dx-template-wrapper, .dx-datagrid-text-content, .dx-datagrid-summary-item, .ff-grid-cell-value, .dx-link, a:not(.btn), span:not(.fa):not(.dx-icon), input:not([type="checkbox"]), select, textarea, .dx-texteditor-input) {
    font-size: inherit !important;
    line-height: 18.36px !important;
}

/* View Images owns taller filter fields than the shared compact grid default.
   Reuse its density-aware row variable so editor borders are never clipped. */
html body.ff-app.ff-app.ff-app .ff-imaging-list.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid--images {
    --ff-view-grid-filter-height: var(--ff-grid-filter-row-height, 28px);
}

html body.ff-app.ff-app.ff-app .ff-imaging-list.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid--images .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row) > :is(td, th) {
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-imaging-list.ff-shared-view-grid-page
    #gridContainer#gridContainer.ff-shared-view-grid--images .dx-datagrid-headers
    :is(.dx-filter-row, .dx-datagrid-filter-row)
    :is(.dx-editor-container, .dx-texteditor, .dx-texteditor-container, .dx-texteditor-input-container, .dx-dropdowneditor, .dx-dropdowneditor-input-wrapper, .dx-texteditor-buttons-container, .dx-dropdowneditor-button, .dx-datebox, input:not([type="checkbox"])) {
    box-sizing: border-box !important;
    height: calc(var(--ff-view-grid-filter-height) - 2px) !important;
    line-height: calc(var(--ff-view-grid-filter-height) - 4px) !important;
    max-height: calc(var(--ff-view-grid-filter-height) - 2px) !important;
    min-height: calc(var(--ff-view-grid-filter-height) - 2px) !important;
}