/**
 * DevExpressGridModern.css
 * Modern, clean, enterprise-ready styling for DevExpress ASPxGridView controls in DocTrac.
 *
 * DESIGN SPECIFICATION:
 * 1. Border-Free Grid Container:
 *    - No outer borders on grid control (.dxgvControl) or tables (.dxgvTable).
 *    - Seamless integration with page content.
 * 2. Unified Grid Dividers:
 *    - Vertical divider lines between columns match the horizontal row lines in style and color across all grids (read-only and editable).
 *    - Data rows: 1px solid #EEF2F6 (both horizontal bottom border and vertical right border).
 *    - Header row: 1px solid #CBD5E1 (both horizontal bottom border and vertical right border).
 *    - Filter row: 1px solid #E2E8F0 (both horizontal bottom border and vertical right border).
 *    - Outer borders (top of headers, left of first column, right of last column) remain border-free.
 * 3. Filter Row:
 *    - Borderless filter cells with rounded, cleanly bordered input boxes (border-radius: 4px).
 * 4. Crisp White Data Rows:
 *    - Pure white data rows with subtle hover (#F8FAFC) and soft sky blue selection (#EFF6FF).
 *    - No heavy left accent border on focused rows.
 * 5. Pager:
 *    - Clean borderless pager with subtle top divider, solid blue active page button, and circular arrows.
 */

/* ==========================================================================
   GRID THEME & TYPOGRAPHY CONFIGURATION (CSS VARIABLES)
   Centralized location for all grid typography and font sizes.
   Edit values here to customize the entire grid font sizing across DocTrac.
   ========================================================================== */
:root {
    /* --- Centralized Grid Font Size (Single primary control) --- */
    --grid-font-size: 13px;                                /* Primary centralized grid font size */

    /* --- Component Font Sizes (default to --grid-font-size) --- */
    --dtr-grid-font-size: var(--grid-font-size, 13px);     /* Base grid container & table font size */
    --dtr-grid-header-font-size: var(--grid-font-size, 13px); /* Column header font size */
    --dtr-grid-cell-font-size: var(--grid-font-size, 13px);   /* Data row cell font size */
    --dtr-grid-filter-font-size: var(--grid-font-size, 13px); /* Filter row input text font size */
    --dtr-grid-group-font-size: var(--grid-font-size, 13px);  /* Group row font size */
    --dtr-grid-footer-font-size: var(--grid-font-size, 13px); /* Footer & summary row font size */
    --dtr-grid-caption-font-size: 14px;                    /* Caption & title panel font size */
    --dtr-grid-pager-font-size: 12px;                      /* Pager container font size */
    --dtr-grid-pager-btn-font-size: 11.5px;                /* Pager page numbers & button font size */
    --dtr-grid-pager-summary-font-size: 11.5px;            /* Pager summary label font size */
    --dtr-grid-btn-font-size: 11.5px;                      /* Command column buttons font size */

    /* --- Centralized Border Colors --- */
    --dtr-grid-row-border: #EEF2F6;                        /* Row divider: clean subtle horizontal line */
    --dtr-grid-header-border: #CBD5E1;                     /* Header divider line (horizontal bottom & vertical right) */
    --dtr-grid-filter-border: #E2E8F0;                     /* Filter row divider line (horizontal bottom & vertical right) */
    --dtr-grid-input-border: #ffffff;                      /* Filter input box border */
    --dtr-grid-cell-border-v: var(--dtr-grid-row-border, #EEF2F6); /* Vertical cell divider line (matches horizontal row border) */
}

/* ==========================================================================
   1. BASE GRID CONTAINER & TABLES (NO OUTER BORDERS)
   ========================================================================== */
.dxgvControl_MetropolisBlue,
.dxgvControl,
.dxgvDisabled_MetropolisBlue {
    border: none !important;
    border-width: 0 !important;
    background-color: #FFFFFF !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: var(--dtr-grid-font-size, var(--grid-font-size, 13px)) !important;
    color: #1E293B !important;
    box-sizing: border-box;
    box-shadow: none !important;
}

.dxgvTable_MetropolisBlue,
.dxgvTable {
    border: none !important;
    border-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: var(--dtr-grid-font-size, var(--grid-font-size, 13px)) !important;
}

/* ==========================================================================
   1A. CENTRALIZED MASTER RULE: ELIMINATE TOP AND LEFT BORDERS
   Outer borders strictly removed; prevents double borders when using border-bottom and border-right.
   ========================================================================== */
.dxgvControl_MetropolisBlue td,
.dxgvControl_MetropolisBlue th,
.dxgvControl td,
.dxgvControl th,
.dxgvTable_MetropolisBlue td,
.dxgvTable_MetropolisBlue th,
.dxgvTable td,
.dxgvTable th,
.dxgvDataRow_MetropolisBlue td,
.dxgvDataRowAlt_MetropolisBlue td,
.dxgvDataRow td,
.dxgvDataRowAlt td,
.dxgvFilterRow_MetropolisBlue td,
.dxgvFilterRow td,
.dxgvEditFormDisplayRow_MetropolisBlue td,
.dxgvDetailCell_MetropolisBlue td,
.dxgvDetailRow_MetropolisBlue td,
td.dxgv_MetropolisBlue,
td.dxgv,
th.dxgvHeader_MetropolisBlue,
td.dxgvHeader_MetropolisBlue,
th.dxgvHeader,
td.dxgvHeader,
.dxgvHeader_MetropolisBlue,
.dxgvHeader,
td.dxgvFilterRow_MetropolisBlue,
td.dxgvFilterRow,
td.dxgvCommandColumn_MetropolisBlue,
td.dxgvCommandColumn,
td.dxgvFixedColumn_MetropolisBlue,
td.dxgvFixedColumn,
th.dxgvFixedColumn_MetropolisBlue,
th.dxgvFixedColumn {
    border-left: none !important;
    border-top: none !important;
}

/* Content Scroll Container */
.dxgvCSD {
    background-color: #FFFFFF !important;
    border: none !important;
}

/* Header Scroll Container & Header Tables */
.dxgvHSD,
.dxgvHSD table,
table.dxgvHeaderTable_MetropolisBlue,
table.dxgvHeaderTable,
table[id*="DXHeaderTable"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
}

/* ==========================================================================
   2. HEADER (NO VERTICAL BORDER, ONLY BOTTOM BORDER)
   ========================================================================== */
tr.dxgvHeaderRow_MetropolisBlue,
tr.dxgvHeaderRow,
tr[id*="HeadersRow"],
tr[id*="HeaderRow"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
}

th.dxgvHeader_MetropolisBlue,
td.dxgvHeader_MetropolisBlue,
th.dxgvHeader,
td.dxgvHeader,
.dxgvHeader_MetropolisBlue,
.dxgvHeader,
th.dxgvBandHeader_MetropolisBlue,
td.dxgvBandHeader_MetropolisBlue,
th.dxgvBandHeader,
td.dxgvBandHeader,
.dxgvBandHeader_MetropolisBlue,
.dxgvBandHeader,
th.dxgvFixedColumn_MetropolisBlue,
th.dxgvFixedColumn {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
    border-bottom: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
    color: #334155 !important;
    font-weight: bold !important;
    font-size: var(--dtr-grid-header-font-size, var(--grid-font-size, 13px)) !important;
    line-height: normal !important;
    padding: 4px 8px 5px 8px !important;
    text-transform: none;
    letter-spacing: 0.01em;
    vertical-align: middle !important;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

/* Header empty filler cells and end spacer cells (eliminate white patches) */
td.dxgvHEC,
th.dxgvHEC,
.dxgvHEC,
td.dxgvEmptyHeader_MetropolisBlue,
th.dxgvEmptyHeader_MetropolisBlue,
td.dxgvEmptyHeader,
th.dxgvEmptyHeader {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
}

/* Inner tables and content containers within header cells (must be transparent) */
th.dxgvHeader_MetropolisBlue table,
td.dxgvHeader_MetropolisBlue table,
th.dxgvHeader table,
td.dxgvHeader table,
th.dxgvBandHeader_MetropolisBlue table,
td.dxgvBandHeader_MetropolisBlue table,
th.dxgvBandHeader table,
td.dxgvBandHeader table,
.dxgvHeader_MetropolisBlue table,
.dxgvHeader table,
.dxgvBandHeader_MetropolisBlue table,
.dxgvBandHeader table,
.dxgvHCEC,
table.dxgvHCEC,
.dxgvHeader_MetropolisBlue .dxgvHCEC,
.dxgvHeader .dxgvHCEC {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* Header link and text styling */
th.dxgvHeader_MetropolisBlue a,
td.dxgvHeader_MetropolisBlue a,
th.dxgvHeader a,
td.dxgvHeader a,
th.dxgvHeader_MetropolisBlue span,
td.dxgvHeader_MetropolisBlue span,
th.dxgvHeader span,
td.dxgvHeader span,
th.dxgvHeader_MetropolisBlue *,
td.dxgvHeader_MetropolisBlue *,
th.dxgvHeader *,
td.dxgvHeader *,
.dxgvBandHeader_MetropolisBlue *,
.dxgvBandHeader * {
    color: #334155 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* ==========================================================================
   2A. GRID CAPTION & TITLE PANEL
   ========================================================================== */
caption,
.dxgvCaption_MetropolisBlue,
.dxgvCaption,
caption.dxgvCaption_MetropolisBlue,
caption.dxgvCaption,
table.dxgvTable_MetropolisBlue > caption,
table.dxgvTable > caption,
.dxgvControl_MetropolisBlue caption,
.dxgvControl caption,
.dxgvTitlePanel_MetropolisBlue,
.dxgvTitlePanel,
tr.dxgvTitlePanel_MetropolisBlue td,
tr.dxgvTitlePanel td,
td.dxgvTitlePanel_MetropolisBlue,
td.dxgvTitlePanel {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    font-weight: bold !important;
    color: #1E293B !important;
    font-size: var(--dtr-grid-caption-font-size, 14px) !important;
    padding: 6px 8px !important;
    text-align: left;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
}

caption *,
.dxgvCaption_MetropolisBlue *,
.dxgvCaption *,
.dxgvTitlePanel_MetropolisBlue *,
.dxgvTitlePanel * {
    font-weight: bold !important;
}

/* Hover state on sortable header columns */
th.dxgvHeader_MetropolisBlue:hover,
td.dxgvHeader_MetropolisBlue:hover,
th.dxgvHeader:hover,
td.dxgvHeader:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

/* Header sort indicator glyphs */
th.dxgvHeader_MetropolisBlue img,
td.dxgvHeader_MetropolisBlue img,
th.dxgvHeader img,
td.dxgvHeader img {
    vertical-align: middle !important;
    margin-left: 4px;
}

/* Header filter button */
.dxgvFilterRowButton_MetropolisBlue,
.dxgvHeader_MetropolisBlue .dxgvFilterRowButton,
.dxgvHeader .dxgvFilterRowButton {
    opacity: 0.6;
    transition: opacity 0.15s ease;
    vertical-align: middle !important;
}

.dxgvFilterRowButton_MetropolisBlue:hover,
.dxgvHeader_MetropolisBlue .dxgvFilterRowButton:hover,
.dxgvHeader .dxgvFilterRowButton:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   3. FILTER ROW (NO VERTICAL BORDER, ONLY BOTTOM BORDER)
   ========================================================================== */
tr.dxgvFilterRow_MetropolisBlue,
tr.dxgvFilterRow {
    background-color: #FFFFFF !important;
}

td.dxgvFilterRow_MetropolisBlue,
td.dxgvFilterRow,
.dxgvFilterRow_MetropolisBlue td,
.dxgvFilterRow td {
    background-color: #FFFFFF !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-filter-border, #E2E8F0) !important;
    border-bottom: 1px solid var(--dtr-grid-filter-border, #E2E8F0) !important;
    padding: 3px 6px !important;
    vertical-align: middle !important;
    height: 26px !important;
    box-sizing: border-box;
}

/* Filter Input Container & Editor Styling */
.dxgvFilterRow_MetropolisBlue .dxeTextBoxSys,
.dxgvFilterRow_MetropolisBlue table.dxeTextBox_MetropolisBlue,
.dxgvFilterRow_MetropolisBlue table.dxeButtonEdit_MetropolisBlue,
.dxgvFilterRow .dxeTextBoxSys,
.dxgvFilterRow table.dxeTextBox,
.dxgvFilterRow table.dxeButtonEdit {
    border: 1px solid var(--dtr-grid-input-border, #CBD5E1) !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.dxgvFilterRow_MetropolisBlue .dxeTextBoxSys:focus-within,
.dxgvFilterRow_MetropolisBlue table.dxeTextBox_MetropolisBlue:focus-within,
.dxgvFilterRow_MetropolisBlue table.dxeButtonEdit_MetropolisBlue:focus-within,
.dxgvFilterRow .dxeTextBoxSys:focus-within {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* Filter input text area */
.dxgvFilterRow_MetropolisBlue input.dxeEditArea_MetropolisBlue,
.dxgvFilterRow_MetropolisBlue input.dxeEditAreaSys,
.dxgvFilterRow input.dxeEditArea {
    padding: 1px 5px !important;
    font-size: var(--dtr-grid-filter-font-size, var(--grid-font-size, 13px)) !important;
    line-height: normal !important;
    height: 20px !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box;
}

/* Filter button cell inside filter editor */
.dxgvFilterRow_MetropolisBlue .dxeButtonEditButton_MetropolisBlue,
.dxgvFilterRow .dxeButtonEditButton {
    border: none !important;
    background: transparent !important;
    padding: 0 2px !important;
    cursor: pointer;
}

/* ==========================================================================
   4. DATA ROWS & CELLS (CELL - ONLY BOTTOM BORDER)
   ========================================================================== */
tr.dxgvDataRow_MetropolisBlue,
tr.dxgvDataRow,
tr.dxgvDataRowAlt_MetropolisBlue,
tr.dxgvDataRowAlt {
    background-color: #FFFFFF !important;
    transition: background-color 0.1s ease;
}

/* Grid cell - Vertical and bottom borders (style matches horizontal lines) */
.dxgvDataRow_MetropolisBlue td.dxgv,
.dxgvDataRowAlt_MetropolisBlue td.dxgv,
.dxgvDataRow td.dxgv,
.dxgvDataRowAlt td.dxgv,
.dxgvTable_MetropolisBlue td.dxgv,
.dxgvTable td.dxgv,
.dxgvControl_MetropolisBlue td.dxgv,
.dxgvControl td.dxgv,
td.dxgv_MetropolisBlue,
td.dxgv,
.dxgvEditFormDisplayRow_MetropolisBlue td.dxgv,
.dxgvDetailCell_MetropolisBlue td.dxgv,
.dxgvDetailRow_MetropolisBlue td.dxgv {
    padding: 4px 8px !important;
    font-size: var(--dtr-grid-cell-font-size, var(--grid-font-size, 13px)) !important;
    line-height: normal !important;
    color: #1E293B !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    border-bottom: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    vertical-align: middle !important;
    box-sizing: border-box;
}

/* Empty data row styling */
tr.dxgvEmptyDataRow_MetropolisBlue td,
tr.dxgvEmptyDataRow td,
td.dxgvEmptyDataRow_MetropolisBlue,
td.dxgvEmptyDataRow {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    padding: 16px 8px !important;
    text-align: center !important;
    color: #64748B !important;
    background-color: #FFFFFF !important;
}

/* Grid cell hyperlinks */
td.dxgv a,
td.dxgv_MetropolisBlue a,
td.dxgv .dxeHyperlink_MetropolisBlue {
    color: #0284C7;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

td.dxgv a:hover,
td.dxgv_MetropolisBlue a:hover,
td.dxgv .dxeHyperlink_MetropolisBlue:hover {
    color: #0369A1;
    text-decoration: underline;
}

/* ==========================================================================
   5. HOVER STATE
   ========================================================================== */
tr.dxgvDataRow_MetropolisBlue:hover > td.dxgv,
tr.dxgvDataRow:hover > td.dxgv,
tr.dxgvDataRowAlt_MetropolisBlue:hover > td.dxgv,
tr.dxgvDataRowAlt:hover > td.dxgv,
tr.dxgvDataRow_MetropolisBlue:hover > td.dxgvCommandColumn_MetropolisBlue,
tr.dxgvDataRow:hover > td.dxgvCommandColumn {
    background-color: #F8FAFC !important;
}

/* ==========================================================================
   6. FOCUSED / SELECTED ROW (CLEAN SKY BLUE, NO LEFT ACCENT LINE)
   ========================================================================== */
tr.dxgvFocusedRow_MetropolisBlue,
tr.dxgvFocusedRow,
tr.dxgvSelectedRow_MetropolisBlue,
tr.dxgvSelectedRow {
    background-color: #EFF6FF !important;
}

tr.dxgvFocusedRow_MetropolisBlue > td.dxgv,
tr.dxgvFocusedRow > td.dxgv,
tr.dxgvSelectedRow_MetropolisBlue > td.dxgv,
tr.dxgvSelectedRow > td.dxgv,
tr.dxgvFocusedRow_MetropolisBlue > td.dxgvCommandColumn_MetropolisBlue,
tr.dxgvFocusedRow > td.dxgvCommandColumn,
tr.dxgvSelectedRow_MetropolisBlue > td.dxgvCommandColumn_MetropolisBlue,
tr.dxgvSelectedRow > td.dxgvCommandColumn {
    background-color: #EFF6FF !important;
    color: #0F172A !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #BFDBFE !important;
    border-bottom: 1px solid #BFDBFE !important;
}

/* Ensure no left accent line on first cell to preserve border-free design */
tr.dxgvFocusedRow_MetropolisBlue > td.dxgv:first-child,
tr.dxgvFocusedRow > td.dxgv:first-child,
tr.dxgvSelectedRow_MetropolisBlue > td.dxgv:first-child,
tr.dxgvSelectedRow > td.dxgv:first-child {
    border-left: none !important;
}

/* Links inside focused row */
tr.dxgvFocusedRow_MetropolisBlue td.dxgv a,
tr.dxgvFocusedRow td.dxgv a,
tr.dxgvSelectedRow_MetropolisBlue td.dxgv a,
tr.dxgvSelectedRow td.dxgv a {
    color: #1D4ED8 !important;
    font-weight: 500;
}

/* Hover state on focused/selected row */
tr.dxgvFocusedRow_MetropolisBlue:hover > td.dxgv,
tr.dxgvFocusedRow:hover > td.dxgv,
tr.dxgvSelectedRow_MetropolisBlue:hover > td.dxgv,
tr.dxgvSelectedRow:hover > td.dxgv {
    background-color: #E2ECFE !important;
}

/* ==========================================================================
   6A. EDITABLE GRIDS (BATCH EDIT) SPECIFIC STYLES
   - Remove focused/selected row highlight so individual cell editing is clean.
   - Apply vertical divider lines between cells ONLY in editable grids.
   ========================================================================== */

/* 1. Neutralize Focused & Selected Row Highlights in Batch Edit Grids ONLY */
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow_MetropolisBlue,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow_MetropolisBlue,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow,
.dtr-grid-editable tr.dxgvFocusedRow_MetropolisBlue,
.dtr-grid-editable tr.dxgvFocusedRow,
.dxgvControl:has(.dxBEC) tr.dxgvFocusedRow,
.dxgvControl:has([id*="DXBEsC"]) tr.dxgvFocusedRow,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvSelectedRow_MetropolisBlue,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvSelectedRow,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvSelectedRow_MetropolisBlue,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvSelectedRow,
.dtr-grid-editable tr.dxgvSelectedRow_MetropolisBlue,
.dtr-grid-editable tr.dxgvSelectedRow {
    background-color: transparent !important;
}

.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow_MetropolisBlue > td.dxgv,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow_MetropolisBlue > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow > td.dxgv,
.dtr-grid-editable tr.dxgvFocusedRow_MetropolisBlue > td.dxgv,
.dtr-grid-editable tr.dxgvFocusedRow > td.dxgv,
.dxgvControl:has(.dxBEC) tr.dxgvFocusedRow > td.dxgv,
.dxgvControl:has([id*="DXBEsC"]) tr.dxgvFocusedRow > td.dxgv,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvSelectedRow_MetropolisBlue > td.dxgv,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvSelectedRow > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvSelectedRow_MetropolisBlue > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvSelectedRow > td.dxgv,
.dtr-grid-editable tr.dxgvSelectedRow_MetropolisBlue > td.dxgv,
.dtr-grid-editable tr.dxgvSelectedRow > td.dxgv,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow_MetropolisBlue > td.dxgvCommandColumn_MetropolisBlue,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow > td.dxgvCommandColumn,
.dtr-grid-editable tr.dxgvFocusedRow_MetropolisBlue > td.dxgvCommandColumn_MetropolisBlue,
.dtr-grid-editable tr.dxgvFocusedRow > td.dxgvCommandColumn {
    background-color: transparent !important;
    color: #1E293B !important;
    border-right: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    border-bottom: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
}

/* Neutralize hover on focused row in batch edit grids */
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow_MetropolisBlue:hover > td.dxgv,
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow:hover > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow_MetropolisBlue:hover > td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow:hover > td.dxgv,
.dtr-grid-editable tr.dxgvFocusedRow_MetropolisBlue:hover > td.dxgv,
.dtr-grid-editable tr.dxgvFocusedRow:hover > td.dxgv {
    background-color: #F8FAFC !important;
}

/* Neutralize links inside focused row in batch edit grids */
.dxgvControl_MetropolisBlue:has(.dxBEC) tr.dxgvFocusedRow_MetropolisBlue td.dxgv a,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) tr.dxgvFocusedRow_MetropolisBlue td.dxgv a,
.dtr-grid-editable tr.dxgvFocusedRow_MetropolisBlue td.dxgv a {
    color: #0284C7 !important;
    font-weight: normal !important;
}

/* 2. Vertical Cell Lines across ALL Grids (Read-Only & Editable)
   Ensures vertical lines match horizontal row/header dividers exactly. */
.dxgvControl_MetropolisBlue td.dxgv,
.dxgvControl td.dxgv,
td.dxgv,
td.dxgv_MetropolisBlue,
.dxgvControl_MetropolisBlue:has(.dxBEC) td.dxgv,
.dxgvControl_MetropolisBlue:has([id*="DXBEsC"]) td.dxgv,
.dtr-grid-editable td.dxgv,
.dxgvControl:has(.dxBEC) td.dxgv,
.dxgvControl:has([id*="DXBEsC"]) td.dxgv {
    border-right: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
}

.dxgvControl_MetropolisBlue th.dxgvHeader,
.dxgvControl_MetropolisBlue td.dxgvHeader,
.dxgvControl_MetropolisBlue th.dxgvBandHeader,
.dxgvControl_MetropolisBlue td.dxgvBandHeader,
.dxgvControl th.dxgvHeader,
.dxgvControl td.dxgvHeader,
.dxgvControl th.dxgvBandHeader,
.dxgvControl td.dxgvBandHeader,
th.dxgvHeader,
td.dxgvHeader,
th.dxgvBandHeader,
td.dxgvBandHeader,
th.dxgvHeader_MetropolisBlue,
td.dxgvHeader_MetropolisBlue,
th.dxgvBandHeader_MetropolisBlue,
td.dxgvBandHeader_MetropolisBlue {
    border-right: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
}

/* Ensure no right border on the last cell in the row across all grids (preserves border-free outer container) */
.dxgvControl_MetropolisBlue td:last-child,
.dxgvControl_MetropolisBlue th:last-child,
.dxgvControl td:last-child,
.dxgvControl th:last-child,
.dxgvTable_MetropolisBlue td:last-child,
.dxgvTable_MetropolisBlue th:last-child,
.dxgvTable td:last-child,
.dxgvTable th:last-child,
td.dxgv:last-child,
td.dxgv_MetropolisBlue:last-child,
th.dxgvHeader:last-child,
td.dxgvHeader:last-child,
th.dxgvHeader_MetropolisBlue:last-child,
td.dxgvHeader_MetropolisBlue:last-child,
th.dxgvBandHeader:last-child,
td.dxgvBandHeader:last-child,
th.dxgvBandHeader_MetropolisBlue:last-child,
td.dxgvBandHeader_MetropolisBlue:last-child,
td.dxgvFilterRow:last-child,
td.dxgvFilterRow_MetropolisBlue:last-child,
td.dxgvCommandColumn:last-child,
td.dxgvCommandColumn_MetropolisBlue:last-child,
td.dxgvFixedColumn:last-child,
td.dxgvFixedColumn_MetropolisBlue:last-child,
th.dxgvFixedColumn:last-child,
th.dxgvFixedColumn_MetropolisBlue:last-child,
td.dxgvFooter:last-child,
td.dxgvFooter_MetropolisBlue:last-child,
td.dxgvGroupFooter:last-child,
td.dxgvGroupFooter_MetropolisBlue:last-child,
td.dxgvHEC,
th.dxgvHEC,
.dxgvHEC {
    border-right: none !important;
}

/* ==========================================================================
   7. GROUP ROW
   ========================================================================== */
tr.dxgvGroupRow_MetropolisBlue,
tr.dxgvGroupRow {
    background-color: #F1F5F9 !important;
    font-weight: bold !important;
    color: #334155 !important;
}

td.dxgvGroupRow_MetropolisBlue,
td.dxgvGroupRow,
.dxgvGroupRow_MetropolisBlue td.dxgv,
.dxgvGroupRow td.dxgv,
.dxgvGroupRow_MetropolisBlue *,
.dxgvGroupRow * {
    background-color: #F1F5F9 !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #CBD5E1 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 4px 8px !important;
    color: #334155 !important;
    font-weight: bold !important;
    font-size: var(--dtr-grid-group-font-size, var(--grid-font-size, 13px)) !important;
    line-height: normal !important;
}

/* Group row expand/collapse button */
.dxgvGroupRow_MetropolisBlue img,
.dxgvGroupRow img {
    vertical-align: middle !important;
    margin-right: 6px;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.dxgvGroupRow_MetropolisBlue img:hover,
.dxgvGroupRow img:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   8. COMMAND COLUMN & ACTION BUTTONS
   ========================================================================== */
td.dxgvCommandColumn_MetropolisBlue,
td.dxgvCommandColumn {
    padding: 2px 4px !important;
    text-align: center;
    vertical-align: middle !important;
    white-space: nowrap;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    border-bottom: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
}

/* Custom action buttons (Edit, View, Delete) */
td.dxgvCommandColumn_MetropolisBlue a,
td.dxgvCommandColumn a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px 4px !important;
    margin: 0 1px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
    vertical-align: middle !important;
}

td.dxgvCommandColumn_MetropolisBlue a:hover,
td.dxgvCommandColumn a:hover {
    background-color: #E2E8F0 !important;
}

td.dxgvCommandColumn_MetropolisBlue img,
td.dxgvCommandColumn img {
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Standard DevExpress command buttons (Update, Cancel) */
.dxgvCommandColumn_MetropolisBlue .dxbButton_MetropolisBlue,
.dxgvCommandColumn .dxbButton {
    border-radius: 3px !important;
    font-size: var(--dtr-grid-btn-font-size, 11.5px) !important;
    font-weight: 500 !important;
    margin: 1px !important;
}

/* ==========================================================================
   9. CHECKBOXES
   ========================================================================== */
.dxICheckBox_MetropolisBlue,
.dxICheckBox {
    vertical-align: middle !important;
    cursor: pointer;
}

/* ==========================================================================
   10. PAGER (CLEAN BORDERLESS FOOTER)
   ========================================================================== */
.dxgvPagerBottom_MetropolisBlue,
.dxgvPagerBottom {
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--dtr-grid-filter-border, #E2E8F0) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 6px 8px !important;
}

.dxpControl_MetropolisBlue,
.dxpControl,
.dxpLite_MetropolisBlue {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    font-family: inherit !important;
    font-size: var(--dtr-grid-pager-font-size, 12px) !important;
    color: #475569 !important;
    padding: 0 !important;
}

/* Pager Table Cells */
.dxpControl_MetropolisBlue td,
.dxpControl td {
    padding: 2px 2px !important;
    vertical-align: middle !important;
}

/* Page Numbers */
.dxpPageNumber_MetropolisBlue,
.dxpPageNumber {
    display: inline-block !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: var(--dtr-grid-pager-btn-font-size, 11.5px) !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    min-width: 14px;
    text-align: center;
}

.dxpPageNumber_MetropolisBlue:hover,
.dxpPageNumber:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
    text-decoration: none !important;
}

/* Current Page Number */
.dxpCurrentPageNumber_MetropolisBlue,
.dxpCurrentPageNumber {
    display: inline-block !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: #2563EB !important;
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    font-size: var(--dtr-grid-pager-btn-font-size, 11.5px) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    min-width: 14px;
    text-align: center;
}

/* Pager Prev / Next Buttons */
.dxpButton_MetropolisBlue,
.dxpButton {
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    color: #475569 !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dxpButton_MetropolisBlue:hover,
.dxpButton:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

.dxpDisabledButton_MetropolisBlue,
.dxpDisabledButton {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* Pager Summary Text */
.dxpSummary_MetropolisBlue,
.dxpSummary {
    color: #64748B !important;
    font-size: var(--dtr-grid-pager-summary-font-size, 11.5px) !important;
    padding: 2px 8px !important;
    white-space: nowrap;
}

/* Page Size Selector Combo */
.dxpPageSize_MetropolisBlue,
.dxpPageSize {
    padding-left: 6px !important;
}

/* ==========================================================================
   11. FIXED COLUMNS & SCROLLING
   ========================================================================== */
/* Keep fixed column backgrounds solid to prevent see-through artifacts during horizontal scroll */
td.dxgvFixedColumn_MetropolisBlue,
td.dxgvFixedColumn {
    background-color: #FFFFFF !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    border-bottom: 1px solid var(--dtr-grid-row-border, #EEF2F6) !important;
    position: relative;
    z-index: 1;
}

tr.dxgvDataRowAlt_MetropolisBlue td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvDataRowAlt td.dxgvFixedColumn {
    background-color: #FFFFFF !important;
}

tr.dxgvDataRow_MetropolisBlue:hover > td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvDataRow:hover > td.dxgvFixedColumn {
    background-color: #F8FAFC !important;
}

tr.dxgvFocusedRow_MetropolisBlue > td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvFocusedRow > td.dxgvFixedColumn,
tr.dxgvSelectedRow_MetropolisBlue > td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvSelectedRow > td.dxgvFixedColumn {
    background-color: #EFF6FF !important;
    border-right: 1px solid #BFDBFE !important;
    border-bottom: 1px solid #BFDBFE !important;
}

/* Fixed column header */
th.dxgvFixedColumn_MetropolisBlue,
th.dxgvFixedColumn {
    background-color: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
    border-bottom: 1px solid var(--dtr-grid-header-border, #CBD5E1) !important;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   12. FOOTER (Total Summary, Group Summary, and Fixed Columns)
   ========================================================================== */
tr.dxgvFooter_MetropolisBlue,
tr.dxgvFooter,
.dxgvFooter_MetropolisBlue,
.dxgvFooter,
td.dxgvFooter_MetropolisBlue,
td.dxgvFooter,
tr.dxgvFooter_MetropolisBlue td,
tr.dxgvFooter td,
.dxgvFooter_MetropolisBlue td.dxgv,
.dxgvFooter td.dxgv,
tr.dxgvFooter_MetropolisBlue td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvFooter_MetropolisBlue td.dxgvFixedColumn,
tr.dxgvFooter td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvFooter td.dxgvFixedColumn,
td.dxgvFooter_MetropolisBlue.dxgvFixedColumn,
td.dxgvFooter.dxgvFixedColumn,
/* Group Footers */
tr.dxgvGroupFooter_MetropolisBlue,
tr.dxgvGroupFooter,
.dxgvGroupFooter_MetropolisBlue,
.dxgvGroupFooter,
td.dxgvGroupFooter_MetropolisBlue,
td.dxgvGroupFooter,
tr.dxgvGroupFooter_MetropolisBlue td,
tr.dxgvGroupFooter td,
.dxgvGroupFooter_MetropolisBlue td.dxgv,
.dxgvGroupFooter td.dxgv,
tr.dxgvGroupFooter_MetropolisBlue td.dxgvFixedColumn,
tr.dxgvGroupFooter td.dxgvFixedColumn,
td.dxgvGroupFooter_MetropolisBlue.dxgvFixedColumn,
td.dxgvGroupFooter.dxgvFixedColumn,
/* Standard HTML/ASP.NET Grid Footers */
tfoot,
tfoot tr,
tfoot td,
tfoot th,
tr.footer,
tr.footer td,
.grid-footer,
.grid-footer td {
    background-color: #F8FAFC !important;
    border-top: 1px solid #CBD5E1 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid #CBD5E1 !important;
    font-weight: bold !important;
    color: #334155 !important;
    padding: 4px 8px !important;
    font-size: var(--dtr-grid-footer-font-size, var(--grid-font-size, 13px)) !important;
}

/* Footer text & summary items inside all footer cells */
tr.dxgvFooter_MetropolisBlue td *,
tr.dxgvFooter td *,
.dxgvFooter_MetropolisBlue td *,
.dxgvFooter td *,
tr.dxgvGroupFooter_MetropolisBlue td *,
tr.dxgvGroupFooter td *,
.dxgvGroupFooter_MetropolisBlue td *,
.dxgvGroupFooter td *,
.dxgvFooter_MetropolisBlue *,
.dxgvFooter *,
.dxgvGroupFooter_MetropolisBlue *,
.dxgvGroupFooter *,
.dxgvSummaryItem_MetropolisBlue,
.dxgvSummaryItem,
.dxgvTotalSummary_MetropolisBlue,
.dxgvTotalSummary,
.dxgvGroupSummaryItem_MetropolisBlue,
.dxgvGroupSummaryItem,
tfoot td *,
tfoot th *,
tr.footer *,
.grid-footer * {
    font-weight: bold !important;
    color: #334155 !important;
}

/* ==========================================================================
   13. SEARCH PANEL & GROUP PANEL
   ========================================================================== */
.dxgvSearchPanel_MetropolisBlue,
.dxgvSearchPanel {
    background-color: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 6px 8px !important;
}

.dxgvSearchPanel_MetropolisBlue .dxeTextBoxSys {
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.dxgvGroupPanel_MetropolisBlue,
.dxgvGroupPanel {
    background-color: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 6px 10px !important;
    color: #64748B !important;
}

/* ==========================================================================
   14. BATCH EDIT / INLINE EDIT HIGHLIGHTS
   ========================================================================== */
.dxgvBatchEditCell_MetropolisBlue,
.dxgvBatchEditCell {
    background-color: #FEF3C7 !important; /* Soft Amber highlight */
}

.dxgvBatchEditModifiedCell_MetropolisBlue,
.dxgvBatchEditModifiedCell {
    background-color: #ECFDF5 !important; /* Soft Emerald highlight */
}

/* ==========================================================================
   14A. GLOBAL DROPDOWN, POPUP & LIST STACKING ORDER
   Ensures dropdown windows always render above all grid elements,
   footers, status bars, subsequent grids, and surrounding cards across the entire application.
   ========================================================================== */
.dxpcDropDown_MetropolisBlue,
.dxpcDropDown,
.dxeDropDownWindow_MetropolisBlue,
.dxeDropDownWindow,
div[id*="_DDD_PW-1"],
div[id*="_DDD_PW"] {
    z-index: 200000 !important;
}

/* Elevate batch edit grids so their dropdowns render above subsequent sections and grids */
.dxgvControl_MetropolisBlue:has([id*="_DXBEsC"]),
.dxgvControl_MetropolisBlue:has(.dxBEC),
.dxgvControl:has([id*="_DXBEsC"]),
.dxgvControl:has(.dxBEC),
.dtr-grid-editable {
    position: relative;
    z-index: 100 !important;
}

/* Ensure Status Bar / Action Bar never covers overflowing dropdowns from rows above */
.dxgvControl_MetropolisBlue .dxgvStatusBar_MetropolisBlue,
.dxgvControl_MetropolisBlue tr[id*="DXStatusRow"],
.dxgvControl .dxgvStatusBar,
.dxgvControl tr[id*="DXStatusRow"],
.dxgvStatusBar_MetropolisBlue,
.dxgvStatusBar,
.ercl-status-bar,
.ecrcl-status-bar {
    position: relative;
    z-index: 1 !important;
}

/* ==========================================================================
   14B. GLOBAL BATCH EDIT GRID CONTAINER OVERFLOW SAFEGUARD
   Dynamically targets ONLY Batch Edit grids across the application (via CSS :has()
   and .dtr-grid-editable class) so dropdowns and pickers on any row (especially
   the last row) never get clipped, while keeping standard data list grids'
   scroll containers and pagination strictly intact.
   ========================================================================== */
.dtr-grid-editable .dxgvCSD,
.dtr-grid-editable table[id*="DXMainTable"],
.dtr-grid-editable .dxgvTable_MetropolisBlue,
.dtr-grid-editable .dxgvTable,
.dxgvControl_MetropolisBlue:has([id*="_DXBEsC"]) .dxgvCSD,
.dxgvControl_MetropolisBlue:has([id*="_DXBEsC"]) table[id*="DXMainTable"],
.dxgvControl_MetropolisBlue:has([id*="_DXBEsC"]) .dxgvTable_MetropolisBlue,
.dxgvControl_MetropolisBlue:has(.dxBEC) .dxgvCSD,
.dxgvControl_MetropolisBlue:has(.dxBEC) table[id*="DXMainTable"],
.dxgvControl_MetropolisBlue:has(.dxBEC) .dxgvTable_MetropolisBlue,
.dxgvControl:has([id*="_DXBEsC"]) .dxgvCSD,
.dxgvControl:has([id*="_DXBEsC"]) table[id*="DXMainTable"],
.dxgvControl:has(.dxBEC) .dxgvCSD,
.dxgvControl:has(.dxBEC) table[id*="DXMainTable"],
div[id*="_DXBEsC"],
div[id*="_DXBEC"],
.dxBEC {
    overflow: visible !important;
}