/* ══════════════════════════════════════════════════════════════════════════
   DevExpressButtonModern.css
   DocTrac Dedicated Modern Button Architecture
   Applies exclusively to .dtr-btn and DevExpress buttons with RenderMode="Secondary".
   Zero page-specific classes, zero grid leakage, pure Fortune 500 performance.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════════════════════
       GLOBAL BUTTON ARCHITECTURE VARIABLES (ONE SINGLE PLACE TO CONFIGURE)
       docTRAC Fortune 500 Enterprise Design System
       Change button height, radius, font, or padding here to apply everywhere.
       ══════════════════════════════════════════════════════════════════════════ */
    --dtr-btn-height: 30px;
    --dtr-btn-line-height: 28px;
    --dtr-btn-padding: 0 14px;
    --dtr-btn-font-size: 13px;
    --dtr-btn-font-weight: 600;
    --dtr-btn-letter-spacing: 0.2px;
    --dtr-btn-border-radius: 6px;

    /* Theme Gradients & Palette */
    --dtr-btn-bg-start: #0a1f36;
    --dtr-btn-bg-mid: #0f2d4e;
    --dtr-btn-bg-end: #163e68;
    --dtr-btn-border-color: #1e3a5f;
    --dtr-btn-shadow: 0 4px 14px rgba(10, 31, 54, 0.22);
}

/* ══════════════════════════════════════════════════════════════════════════
   VISIBILITY SAFEGUARDS (Respect DevExpress ClientVisible & display:none)
   ══════════════════════════════════════════════════════════════════════════ */
.dtr-btn[style*="display:none"],
.dtr-btn[style*="display: none"],
.dxb-secondary[style*="display:none"],
.dxb-secondary[style*="display: none"],
.dxbButton[style*="display:none"],
.dxbButton[style*="display: none"],
.dxbButton_MetropolisBlue[style*="display:none"],
.dxbButton_MetropolisBlue[style*="display: none"],
.dtr-hidden-top-actions,
.dtr-hidden-top-actions * {
    display: none !important;
}

/* 1. Base Button (Normal State) */
.dtr-btn:not([style*="display:none"]):not([style*="display: none"]),
.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
.dxbButton.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
.dxbButton_MetropolisBlue.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]) {
    background: linear-gradient(135deg, var(--dtr-btn-bg-start) 0%, var(--dtr-btn-bg-mid) 50%, var(--dtr-btn-bg-end) 100%) !important;
    background-color: var(--dtr-btn-bg-mid) !important;
    border: 1px solid var(--dtr-btn-border-color) !important;
    border-radius: var(--dtr-btn-border-radius) !important;
    box-shadow: var(--dtr-btn-shadow) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: var(--dtr-btn-font-size) !important;
    font-weight: var(--dtr-btn-font-weight) !important;
    letter-spacing: var(--dtr-btn-letter-spacing) !important;
    height: var(--dtr-btn-height) !important;
    min-height: var(--dtr-btn-height) !important;
    max-height: var(--dtr-btn-height) !important;
    line-height: var(--dtr-btn-line-height) !important;
    padding: var(--dtr-btn-padding) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    outline: none !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
}

/* DevExpress Inner Text & Layout Wrapper */
.dtr-btn .dxb,
.dxb-secondary .dxb,
.dxbButton.dxb-secondary .dxb,
.dxbButton_MetropolisBlue.dxb-secondary .dxb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

.dtr-btn span,
.dxb-secondary span,
.dxbButton.dxb-secondary span,
.dxbButton_MetropolisBlue.dxb-secondary span {
    color: #ffffff !important;
    font-size: var(--dtr-btn-font-size) !important;
    font-weight: var(--dtr-btn-font-weight) !important;
    font-family: inherit !important;
    line-height: normal !important;
    letter-spacing: var(--dtr-btn-letter-spacing) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOVER SHIMMER SHEEN & CLICK RADIAL RIPPLE WAVE SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Hover Shimmer Light-Wave Sheen Layer (::before) */
.dtr-btn::before,
.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::before,
.dxbButton.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::before,
.dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 120% !important;
    height: 100% !important;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.05) 80%, transparent 100%) !important;
    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Hover Trigger: Light-Wave Sheen Sweep */
.dtr-btn:hover::before,
.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):hover::before,
.dxbButton.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):hover::before,
.dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):hover::before {
    left: 120% !important;
}

/* Click / Touch Radial Ripple Wave Layer (::after) - Excludes Dropdown Toggles so Caret is preserved */
.dtr-btn:not(.dropdown-toggle):not(.mdr-dropdown-btn)::after,
.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::after,
.dxbButton.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::after,
.dxbButton_MetropolisBlue.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *)::after {
    content: '' !important;
    position: absolute !important;
    top: var(--ripple-y, 50%) !important;
    left: var(--ripple-x, 50%) !important;
    width: 220px !important;
    height: 220px !important;
    margin-top: -110px !important;
    margin-left: -110px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.08) 60%, transparent 75%) !important;
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Click Trigger: Radial Ripple Wave Animation */
.dtr-btn:not(.dropdown-toggle):not(.mdr-dropdown-btn):active::after,
.dtr-btn:not(.dropdown-toggle):not(.mdr-dropdown-btn).is-rippling::after,
.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):active::after,
.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn).is-rippling::after,
.dxbButton.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):active::after,
.dxbButton.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn).is-rippling::after,
.dxbButton_MetropolisBlue.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn):not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):not(.dxgvFilterRow *):not(.dxpControl *):active::after,
.dxbButton_MetropolisBlue.dxb-secondary:not(.dropdown-toggle):not(.mdr-dropdown-btn).is-rippling::after {
    animation: btnWaveClickAnim 0.55s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

@keyframes btnWaveClickAnim {
    0% {
        transform: scale(0.1);
        opacity: 0.85;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0.15) 60%, transparent 75%);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(2.0);
        opacity: 0;
    }
}

/* 2. Hover State */
.dtr-btn:hover,
.dxb-secondary:hover,
.dxbButton.dxb-secondary:hover,
.dxbButton_MetropolisBlue.dxb-secondary:hover,
.dxbButtonHover.dxb-secondary,
.dxbButtonHover_MetropolisBlue.dxb-secondary {
    background: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 6px 18px rgba(10, 31, 54, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* 3. Click / Active State */
.dtr-btn:active,
.dxb-secondary:active,
.dxbButton.dxb-secondary:active,
.dxbButton_MetropolisBlue.dxb-secondary:active,
.dxbButtonPressed.dxb-secondary,
.dxbButtonPressed_MetropolisBlue.dxb-secondary {
    background: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(10, 31, 54, 0.2) !important;
    transform: translateY(0) !important;
    color: #ffffff !important;
}

/* 4. Focus State (Tab Focus from Git History) */
.dtr-btn:focus,
.dtr-btn:focus-visible,
.dtr-btn:focus-within,
.dtr-btn.dxbButtonFocused,
.dtr-btn.dtr-btn-focused,
.dxb-secondary:focus,
.dxb-secondary:focus-visible,
.dxb-secondary:focus-within,
.dxb-secondary.dxbButtonFocused_MetropolisBlue,
.dxb-secondary.dtr-btn-focused,
.dxbButton.dxb-secondary:focus,
.dxbButton.dxb-secondary:focus-visible,
.dxbButton.dxb-secondary:focus-within,
.dxbButtonFocused.dxb-secondary,
.dxbButton_MetropolisBlue.dxb-secondary:focus,
.dxbButton_MetropolisBlue.dxb-secondary:focus-visible,
.dxbButton_MetropolisBlue.dxb-secondary:focus-within,
.dxbButtonFocused_MetropolisBlue.dxb-secondary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #0284c7, 0 8px 24px rgba(2, 132, 199, 0.5) !important;
    outline: none !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
    z-index: 10 !important;
}

.dtr-btn:focus *,
.dtr-btn:focus-visible *,
.dxb-secondary:focus *,
.dxb-secondary:focus-visible *,
.dxbButton.dxb-secondary:focus *,
.dxbButton_MetropolisBlue.dxb-secondary:focus * {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. DROPDOWN SUBMENU CARET & HOVER TRIGGER SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Inner layout fix for DevExpress button dropdown toggles */
.dropdown-toggle.dxbButton .dxb,
.dropdown-toggle.dxbButton_MetropolisBlue .dxb,
.dropdown-toggle.dtr-btn .dxb,
.dropdown-toggle.dxb-secondary .dxb,
.mdr-dropdown-btn.dxbButton .dxb,
.mdr-dropdown-btn.dxb-secondary .dxb,
.mdr-dropdown-group .dxbButton .dxb {
    min-width: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Caret Arrow Icon */
.dropdown-toggle::after,
.dtr-btn.dropdown-toggle::after,
.dxbButton.dropdown-toggle::after,
.dxbButton_MetropolisBlue.dropdown-toggle::after,
.dxb-secondary.dropdown-toggle::after,
.dxbButton.dxb-secondary.dropdown-toggle::after,
.dxbButton_MetropolisBlue.dxb-secondary.dropdown-toggle::after,
.mdr-dropdown-btn::after,
.btn.dropdown-toggle::after,
button.dropdown-toggle::after,
.actionRow .dropdown-toggle::after,
.btn-group > .dropdown-toggle::after,
.btn-group > .dxbButton.dropdown-toggle::after,
.mdr-dropdown-group .dxbButton.dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    margin-left: 8px !important;
    vertical-align: 0.15em !important;
    border-top: 0.38em solid #ffffff !important;
    border-right: 0.32em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.32em solid transparent !important;
    position: relative !important;
    z-index: 3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Dropdown Submenu Trigger on Hover */
.btn-group:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu,
.mdr-dropdown-group:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-group:hover > .dropdown-toggle,
.dropdown:hover > .dropdown-toggle,
.mdr-dropdown-group:hover > .dropdown-toggle,
.btn-group:hover > .dxbButton.dropdown-toggle,
.dropdown:hover > .dxbButton.dropdown-toggle,
.mdr-dropdown-group:hover > .dxbButton.dropdown-toggle {
    background: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 6px 18px rgba(10, 31, 54, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWN SUBMENU ITEMS (MATCHING TOP MENU STYLE)
   Matches HeaderModern.css top menu popup submenu design:
   - Clean white rounded container with elevation shadow
   - Slate dark text (#334155) in default state
   - Dark Navy (#111726) background with White (#ffffff) text on Hover/Active
   ══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu,
.mdr-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 6px 0 !important;
    margin-top: 4px !important;
    min-width: 210px !important;
    width: auto !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    z-index: 20000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dropdown-menu.show,
.show > .dropdown-menu,
.mdr-dropdown-group.show > .dropdown-menu,
.btn-group.show > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Reset button styling inside dropdown menus */
.dropdown-menu .dxbButton,
.dropdown-menu .dxbButton_MetropolisBlue,
.dropdown-menu .dtr-btn,
.dropdown-menu .mdr-dropdown-menu-item,
.dropdown-menu .dropdown-item,
.dropdown-menu a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 32px !important;
    height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    padding: 7px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    outline: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Remove ::before & ::after shimmer/ripple inside dropdown menus */
.dropdown-menu .dxbButton::before,
.dropdown-menu .dxbButton::after,
.dropdown-menu .dxbButton_MetropolisBlue::before,
.dropdown-menu .dxbButton_MetropolisBlue::after,
.dropdown-menu .dtr-btn::before,
.dropdown-menu .dtr-btn::after,
.dropdown-menu a::before,
.dropdown-menu a::after,
.dropdown-menu .dropdown-item::before,
.dropdown-menu .dropdown-item::after {
    display: none !important;
    content: none !important;
}

/* Inner DevExpress text wrapper inside dropdown menu items */
.dropdown-menu .dxb,
.dropdown-menu .dxbButton .dxb,
.dropdown-menu .dxbButton_MetropolisBlue .dxb,
.dropdown-menu .dtr-btn .dxb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

/* Default Text Color: Dark Slate (#334155), font-weight 600 */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item *,
.dropdown-menu .dropdown-item span,
.dropdown-menu .mdr-dropdown-menu-item,
.dropdown-menu .mdr-dropdown-menu-item *,
.dropdown-menu .mdr-dropdown-menu-item span,
.dropdown-menu a,
.dropdown-menu a *,
.dropdown-menu a span,
.dropdown-menu .dxbButton,
.dropdown-menu .dxbButton *,
.dropdown-menu .dxbButton span,
.dropdown-menu .dxbButton_MetropolisBlue,
.dropdown-menu .dxbButton_MetropolisBlue *,
.dropdown-menu .dxbButton_MetropolisBlue span,
.dropdown-menu .dxb,
.dropdown-menu .dxb span {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: normal !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu a.dropdown-item i,
.dropdown-menu a i {
    width: 16px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Hover & Focus State: Dark Navy (#111726) with White Text (#ffffff) matching Top Menu */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .mdr-dropdown-menu-item:hover,
.dropdown-menu .mdr-dropdown-menu-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu .dxbButton:hover,
.dropdown-menu .dxbButton:focus,
.dropdown-menu .dxbButtonHover,
.dropdown-menu .dxbButtonHover_MetropolisBlue,
.dropdown-menu .dxbButtonPressed,
.dropdown-menu .dxbButtonPressed_MetropolisBlue {
    background-color: #111726 !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item:hover *,
.dropdown-menu .dropdown-item:focus *,
.dropdown-menu .mdr-dropdown-menu-item:hover *,
.dropdown-menu .mdr-dropdown-menu-item:focus *,
.dropdown-menu a:hover *,
.dropdown-menu a:focus *,
.dropdown-menu .dxbButton:hover *,
.dropdown-menu .dxbButton:focus *,
.dropdown-menu .dxbButtonHover *,
.dropdown-menu .dxbButtonHover_MetropolisBlue *,
.dropdown-menu .dxbButtonPressed *,
.dropdown-menu .dxbButtonPressed_MetropolisBlue *,
.dropdown-menu .dropdown-item:hover span,
.dropdown-menu .mdr-dropdown-menu-item:hover span,
.dropdown-menu a:hover span,
.dropdown-menu .dxbButton:hover span,
.dropdown-menu .dxbButtonHover span,
.dropdown-menu .dxbButtonHover_MetropolisBlue span,
.dropdown-menu .dxbButtonPressed span,
.dropdown-menu .dxbButtonPressed_MetropolisBlue span,
.dropdown-menu .dxbButton:hover .dxb span,
.dropdown-menu .dxbButtonHover_MetropolisBlue .dxb span {
    color: #ffffff !important;
}

/* 6. Disabled State */
.dtr-btn[disabled],
.dtr-btn.dxbDisabled,
.dtr-btn.dxbDisabled_MetropolisBlue,
.dxb-secondary[disabled],
.dxb-secondary.dxbDisabled,
.dxb-secondary.dxbDisabled_MetropolisBlue,
.dxbButton.dxb-secondary.dxbDisabled,
.dxbButtonDisabled.dxb-secondary,
.dxbButton_MetropolisBlue.dxb-secondary.dxbDisabled_MetropolisBlue,
.dxbButtonDisabled_MetropolisBlue.dxb-secondary {
    background: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    color: #ffffff !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

.dtr-btn[disabled]::before,
.dtr-btn[disabled]::after,
.dtr-btn.dxbDisabled::before,
.dtr-btn.dxbDisabled::after,
.dtr-btn.dxbDisabled_MetropolisBlue::before,
.dtr-btn.dxbDisabled_MetropolisBlue::after,
.dxb-secondary[disabled]::before,
.dxb-secondary[disabled]::after,
.dxb-secondary.dxbDisabled::before,
.dxb-secondary.dxbDisabled::after,
.dxb-secondary.dxbDisabled_MetropolisBlue::before,
.dxb-secondary.dxbDisabled_MetropolisBlue::after,
.dxbButton.dxb-secondary.dxbDisabled::before,
.dxbButton.dxb-secondary.dxbDisabled::after,
.dxbButtonDisabled.dxb-secondary::before,
.dxbButtonDisabled.dxb-secondary::after,
.dxbButton_MetropolisBlue.dxb-secondary.dxbDisabled_MetropolisBlue::before,
.dxbButton_MetropolisBlue.dxb-secondary.dxbDisabled_MetropolisBlue::after,
.dxbButtonDisabled_MetropolisBlue.dxb-secondary::before,
.dxbButtonDisabled_MetropolisBlue.dxb-secondary::after {
    display: none !important;
}

.dtr-btn[disabled] span,
.dtr-btn.dxbDisabled span,
.dtr-btn.dxbDisabled_MetropolisBlue span,
.dxb-secondary[disabled] span,
.dxb-secondary.dxbDisabled span,
.dxb-secondary.dxbDisabled_MetropolisBlue span,
.dxbButton.dxb-secondary.dxbDisabled span,
.dxbButtonDisabled.dxb-secondary span,
.dxbButton_MetropolisBlue.dxb-secondary.dxbDisabled_MetropolisBlue span,
.dxbButtonDisabled_MetropolisBlue.dxb-secondary span {
    color: #ffffff !important;
}

/* 7. Action Button Variants (Overrides) */
.dtr-btn-primary,
.dxb-secondary.dtr-btn-primary,
.dxbButton.dtr-btn-primary,
.dxbButton_MetropolisBlue.dtr-btn-primary,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%) !important;
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.dtr-btn-primary:hover,
.dxb-secondary.dtr-btn-primary:hover,
.dxbButton.dtr-btn-primary:hover,
.dxbButton_MetropolisBlue.dtr-btn-primary:hover,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-primary:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%) !important;
    background-color: #1d4ed8 !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

.dtr-btn-danger,
.dxb-secondary.dtr-btn-danger,
.dxbButton.dtr-btn-danger,
.dxbButton_MetropolisBlue.dtr-btn-danger,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-danger,
[id*="DeleteBatchButton"],
[id*="RejectButton"],
.dtr-popup-actions .dtr-btn-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%) !important;
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.dtr-btn-danger:hover,
.dxb-secondary.dtr-btn-danger:hover,
.dxbButton.dtr-btn-danger:hover,
.dxbButton_MetropolisBlue.dtr-btn-danger:hover,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-danger:hover,
[id*="DeleteBatchButton"]:hover,
[id*="RejectButton"]:hover,
.dtr-popup-actions .dtr-btn-danger:hover {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #dc2626 100%) !important;
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
}