/* Dark Mode Theme for LendingWise */
/* Applied when body has class 'dark-mode' */

body.dark-mode {
    background-color: #1a1a2e !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Layout: Do not override overflow or position
   to avoid breaking Metronic fixed header/scroll
   ========================================== */

/* Main content area */
body.dark-mode .content {
    background-color: #1a1a2e !important;
}

body.dark-mode .wrapper {
    background-color: #1a1a2e !important;
}

body.dark-mode .container-fluid {
    background-color: transparent !important;
}

/* ==========================================
   Header
   ========================================== */
body.dark-mode .header {
    background-color: #16213e !important;
    border-bottom: 1px solid #2a2a4a;
}

body.dark-mode .header-fixed .header {
    background-color: #16213e !important;
}

body.dark-mode .topbar {
    background-color: #16213e !important;
}

body.dark-mode .header-mobile {
    background-color: #16213e !important;
}

/* ==========================================
   Cards - general
   ========================================== */
body.dark-mode .card {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .card-header {
    background-color: #16213e !important;
    border-bottom-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .card-header .card-title,
body.dark-mode .card-header .card-title h3,
body.dark-mode .card-header .card-label,
body.dark-mode .card-header h3.card-label {
    color: #ffffff !important;
}

body.dark-mode .card-body {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
}

body.dark-mode .card-footer {
    background-color: #16213e !important;
    border-top-color: #2a2a4a !important;
}

/* ==========================================
   Dashboard - File Status tiles
   ========================================== */
body.dark-mode .card-spacer.bg-white,
body.dark-mode .bg-white {
    background-color: #1c2a45 !important;
}

body.dark-mode .card-spacer .font-size-h5,
body.dark-mode .card-spacer .font-size-h4,
body.dark-mode .card-spacer .font-size-h6-sm {
    color: #d4d4e0 !important;
}

body.dark-mode .card-spacer .font-size-h5.text-muted {
    color: #93a3c0 !important;
}

body.dark-mode #fileStatusCards .font-size-h4.font-weight-bold {
    color: #ffffff !important;
}

body.dark-mode #fileStatusCards .font-size-sm.text-muted {
    color: #93a3c0 !important;
}

body.dark-mode .box-shadow-css {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dashboard chart card headers (collapsed) */
body.dark-mode .card-collapsed .card-header {
    background-color: #1c2a45 !important;
}

body.dark-mode .card-collapsed .card-header .card-label,
body.dark-mode .card-collapsed .card-header h3 {
    color: #ffffff !important;
}

/* ==========================================
   Tables
   ========================================== */
body.dark-mode .table {
    color: #d4d4e0 !important;
}

body.dark-mode .table thead th {
    background-color: #0f3460 !important;
    color: #ffffff !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .table tbody tr {
    background-color: #16213e !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #1c2a45 !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #253a5e !important;
}

body.dark-mode .table-bordered {
    border-color: #2a2a4a !important;
}

/* Bootstrap's .thead-light (light grey header) overrides our generic
   .table thead th rule because it targets the class explicitly. Override it
   in dark mode so all table headers render dark. */
body.dark-mode .thead-light,
body.dark-mode .thead-light th,
body.dark-mode .table thead.thead-light th,
body.dark-mode .table-bordered thead.thead-light th {
    background-color: #0f3460 !important;
    color: #ffffff !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .thead-light th .text-primary,
body.dark-mode .table thead.thead-light th .text-primary {
    color: #5dade2 !important;
}

/* Required Docs page: public/backoffice/DocsForm/css/fileChecklistConditions.css
   hardcodes light-grey on the table header via an ID selector that beats our
   .thead-light override (ID specificity > class). Match the ID selector here. */
body.dark-mode #fileCheckListTableId thead th,
body.dark-mode #uploadPortalFileCheckListTableId thead th {
    background-color: #0f3460 !important;
    color: #ffffff !important;
    border-color: #2a2a4a !important;
}

/* Category folder header rows in the same table: light gradient + dark text
   in light mode — invert in dark mode so the folder strip reads as a darker
   accent than the surrounding rows. */
body.dark-mode tr.condGroupHeader > td {
    background: linear-gradient(180deg, #1c2a45 0%, #16213e 100%) !important;
    border-top-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode tr.condGroupHeader .condGroupName,
body.dark-mode tr.condGroupHeader .condGroupToggle,
body.dark-mode tr.condGroupHeader .condGroupCaret {
    color: #ffffff !important;
}

/* Required Docs page — condition drawer (rendered by
   DocsForm::renderConditionDrawer). Light-mode values come from
   public/backoffice/DocsForm/css/fileChecklistConditions.css; invert
   backgrounds and lift text so the drawer reads cleanly on a dark page. */
body.dark-mode .condDrawer {
    background: #16213e !important;
    border-left-color: #ffa800 !important;
    color: #d4d4e0 !important;
}

body.dark-mode .condDrawerHead {
    color: #d4d4e0 !important;
}

body.dark-mode .condEmpty {
    color: #a0a8c0 !important;
}

/* Each condition is a card on the drawer's panel — lift one tone above the
   drawer background so cards read as raised, mirroring the white-on-grey
   contrast used in light mode. */
body.dark-mode .condRow {
    background: #1c2a45 !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .condRow .condText {
    color: #d4d4e0 !important;
}

/* "Done" condition text — keep strikethrough but use a muted light tone
   instead of the light-mode #b5b5c3 which is too dim on dark. */
body.dark-mode .condRow .condText.cond-done {
    color: #7a8095 !important;
}

/* Edit / remove icon affordances — use the same muted tone as other dark
   icon buttons so they don't disappear into the card. */
body.dark-mode .condRow .condEdit {
    color: #a0a8c0 !important;
}

/* Broker list: keep select-all header cell transparent so parent header color shows through */
body.dark-mode .broker-select-header-table,
body.dark-mode .broker-select-header-table tbody tr,
body.dark-mode .broker-select-header-table td,
body.dark-mode .broker-select-header-table th {
    background-color: transparent !important;
}

/* Loan File Task tab - keep status colors aligned with legend in dark mode */
body.dark-mode .task-status-legend .task-status-legend-item {
    color: #e8efff !important;
    border: 1px solid transparent;
}

body.dark-mode .task-status-legend .task-status-not-started {
    background-color: rgba(127, 58, 93, 0.58) !important;
    border-color: rgba(127, 58, 93, 0.75) !important;
}

body.dark-mode .task-status-legend .task-status-completed {
    background-color: rgba(42, 133, 120, 0.58) !important;
    border-color: rgba(42, 133, 120, 0.75) !important;
}

body.dark-mode .task-status-legend .task-status-in-progress {
    background-color: rgba(143, 115, 56, 0.58) !important;
    border-color: rgba(143, 115, 56, 0.75) !important;
}

body.dark-mode .task-status-legend .task-status-not-applicable {
    background-color: rgba(62, 103, 159, 0.58) !important;
    border-color: rgba(62, 103, 159, 0.75) !important;
}

body.dark-mode .task-status-legend .task-status-past-due {
    background-color: rgba(197, 57, 79, 0.94) !important;
    border-color: rgba(197, 57, 79, 1) !important;
    color: #ffffff !important;
}

body.dark-mode #taskTableInfo tbody tr.task-status-not-started td,
body.dark-mode #taskListDiv tbody tr.task-status-not-started td {
    background-color: rgba(127, 58, 93, 0.58) !important;
}

body.dark-mode #taskTableInfo tbody tr.task-status-completed td,
body.dark-mode #taskListDiv tbody tr.task-status-completed td {
    background-color: rgba(42, 133, 120, 0.58) !important;
}

body.dark-mode #taskTableInfo tbody tr.task-status-in-progress td,
body.dark-mode #taskListDiv tbody tr.task-status-in-progress td {
    background-color: rgba(143, 115, 56, 0.58) !important;
}

body.dark-mode #taskTableInfo tbody tr.task-status-not-applicable td,
body.dark-mode #taskListDiv tbody tr.task-status-not-applicable td {
    background-color: rgba(62, 103, 159, 0.58) !important;
}

body.dark-mode #taskTableInfo tbody tr.task-status-past-due td,
body.dark-mode #taskListDiv tbody tr.task-status-past-due td {
    background-color: rgba(197, 57, 79, 0.94) !important;
    color: #ffffff !important;
}

/* Dashboard task legend pills + status column pills */
body.dark-mode .label.label-inline.not_started,
body.dark-mode .dash-task-status-pill.not_started {
    background-color: rgba(127, 58, 93, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .label.label-inline.in_progress,
body.dark-mode .dash-task-status-pill.in_progress {
    background-color: rgba(143, 115, 56, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .label.label-inline.past_due,
body.dark-mode .dash-task-status-pill.past_due {
    background-color: rgba(197, 57, 79, 0.94) !important;
    color: #ffffff !important;
}

/* Workflow tab - align legend and step row colors in dark mode */
body.dark-mode .workflow-status-legend-item {
    color: #e8efff !important;
    border: 1px solid transparent;
}

body.dark-mode .workflow-status-legend-item.workflow-status-pending {
    background-color: rgba(143, 115, 56, 0.58) !important;
    border-color: rgba(143, 115, 56, 0.75) !important;
}

body.dark-mode .workflow-status-legend-item.workflow-status-completed {
    background-color: rgba(42, 133, 120, 0.58) !important;
    border-color: rgba(42, 133, 120, 0.75) !important;
}

body.dark-mode .workflow-status-legend-item.workflow-status-needs-manager {
    background-color: rgba(127, 58, 93, 0.58) !important;
    border-color: rgba(127, 58, 93, 0.75) !important;
}

body.dark-mode .workflow-status-legend-item.workflow-status-needs-legal {
    background-color: rgba(197, 57, 79, 0.94) !important;
    border-color: rgba(197, 57, 79, 1) !important;
    color: #ffffff !important;
}

body.dark-mode .workflow-status-legend-item.workflow-status-not-applicable {
    background-color: rgba(62, 103, 159, 0.58) !important;
    border-color: rgba(62, 103, 159, 0.75) !important;
}

body.dark-mode .WorkflowCard .workflow-status-row.workflow-status-pending td {
    background-color: rgba(143, 115, 56, 0.58) !important;
}

body.dark-mode .WorkflowCard .workflow-status-row.workflow-status-completed td {
    background-color: rgba(42, 133, 120, 0.58) !important;
}

body.dark-mode .WorkflowCard .workflow-status-row.workflow-status-needs-manager td {
    background-color: rgba(127, 58, 93, 0.58) !important;
}

body.dark-mode .WorkflowCard .workflow-status-row.workflow-status-needs-legal td {
    background-color: rgba(197, 57, 79, 0.94) !important;
    color: #ffffff !important;
}

body.dark-mode .WorkflowCard .workflow-status-row.workflow-status-not-applicable td {
    background-color: rgba(62, 103, 159, 0.58) !important;
}

/* Pipeline accordion workflow status rows (chk* classes used in myWFList.php) */
body.dark-mode .chkYellow,
body.dark-mode .chkYellow td {
    background-color: rgba(143, 115, 56, 0.58) !important;
    border-color: rgba(143, 115, 56, 0.75) !important;
    color: #e8efff !important;
}

body.dark-mode .chkDarkGrn,
body.dark-mode .chkDarkGrn td {
    background-color: rgba(42, 133, 120, 0.58) !important;
    border-color: rgba(42, 133, 120, 0.75) !important;
    color: #e8efff !important;
}

body.dark-mode .chkLightRed,
body.dark-mode .chkLightRed td {
    background-color: rgba(127, 58, 93, 0.58) !important;
    border-color: rgba(127, 58, 93, 0.75) !important;
    color: #e8efff !important;
}

body.dark-mode .chkRed,
body.dark-mode .chkRed td {
    background-color: rgba(197, 57, 79, 0.94) !important;
    border-color: rgba(197, 57, 79, 1) !important;
    color: #ffffff !important;
}

body.dark-mode .chkGrey,
body.dark-mode .chkGrey td {
    background-color: rgba(62, 103, 159, 0.58) !important;
    border-color: rgba(62, 103, 159, 0.75) !important;
    color: #e8efff !important;
}

/* Pipeline workflow text color fix for dark mode */
body.dark-mode #pipelineTable .text-dark,
body.dark-mode .card-body .chkDarkGrn td.text-dark,
body.dark-mode .card-body .chkYellow td.text-dark,
body.dark-mode .card-body .chkLightRed td.text-dark,
body.dark-mode .card-body .chkRed td.text-dark,
body.dark-mode .card-body .chkGrey td.text-dark {
    color: #e8efff !important;
}

/* ==========================================
   Text color overrides - HIGH CONTRAST
   ========================================== */
body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .text-dark-75 {
    color: #e0e0ec !important;
}

body.dark-mode .text-dark-50 {
    color: #b0b0c8 !important;
}

body.dark-mode .text-muted {
    color: #93a3c0 !important;
}

body.dark-mode .font-weight-bold:not([style*="lumen"]),
body.dark-mode .font-weight-bolder:not([style*="lumen"]) {
    color: #e8e8f0 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode p {
    color: #d4d4e0 !important;
}

body.dark-mode span:not(.btn):not([class*="label-"]):not([class*="badge-"]):not(.switch):not([class*="svg-icon"]):not([class*="bullet"]):not([class*="spinner"]) {
    color: inherit;
}

/* Links - exclude menu-link so aside menu items keep their native colors */
/* Also exclude text-danger and text-success so file type icons (PDF=red, Excel=green) keep their colors */
body.dark-mode a:not(.btn):not(.nav-link):not(.menu-link):not(.menu-toggle):not([class*="label-"]):not(.text-danger):not(.text-success) {
    color: #5dade2 !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.menu-link):not(.menu-toggle):not([class*="label-"]):not(.text-danger):not(.text-success):hover {
    color: #85c1e9 !important;
}

/* Pipeline + file status reload icons in dark mode */
body.dark-mode #pipelineTable .folderIconClass i,
body.dark-mode #pipelineTable i.flaticon2-reload,
body.dark-mode .btn i.flaticon2-reload.text-success {
    color: #5dade2 !important;
}

/* Notes popup badges (Pipeline + LMRequest) */
body.dark-mode #processorCommentsDiv .bg-warning-o-50,
body.dark-mode [id^="divListNotes"] .bg-warning-o-50 {
    background-color: rgb(15 52 96) !important;
    color: #ffffff !important;
}

body.dark-mode #processorCommentsDiv .bg-warning-o-50 .text-dark,
body.dark-mode [id^="divListNotes"] .bg-warning-o-50 .text-dark {
    color: #ffffff !important;
}

/* Status banners using bg-warning-o-20 (e.g. Servicing OnBoard status strip) */
body.dark-mode .bg-warning-o-20 {
    background-color: rgba(255, 168, 0, 0.18) !important;
    color: #f5d27a !important;
}

body.dark-mode .bg-warning-o-20 .text-dark,
body.dark-mode .bg-warning-o-20 .text-muted {
    color: #f5d27a !important;
}

/* ==========================================
   Forms
   ========================================== */
body.dark-mode .form-control {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-control:focus {
    background-color: #253a5e !important;
    border-color: #3699FF !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-control::placeholder {
    color: #8890a8 !important;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
    /*background-color: #141c30 !important;*/
    color: #8890a8 !important;
}

body.dark-mode select.form-control {
    background-color: #1e2a4a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .input-group-text {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode label:not([style*="lumen"]) {
    color: #c8c8d8 !important;
}

/* ==========================================
   Dropdowns
   ========================================== */
body.dark-mode .dropdown-menu {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .dropdown-item {
    color: #d4d4e0 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #253a5e !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-divider {
    border-top-color: #2a2a4a !important;
}

/* Bootstrap-select (used in Add Task popup) */
body.dark-mode .bootstrap-select > .dropdown-toggle.btn-light,
body.dark-mode .bootstrap-select > .dropdown-toggle.btn-secondary {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .bootstrap-select > .dropdown-toggle .filter-option,
body.dark-mode .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
body.dark-mode .bootstrap-select .dropdown-toggle:not(.bs-placeholder) .filter-option-inner-inner {
    color: #d4d4e0 !important;
}

body.dark-mode .bootstrap-select .dropdown-menu.inner li a {
    color: #d4d4e0 !important;
}

body.dark-mode .bootstrap-select .dropdown-menu.inner li.selected a {
    background-color: #253a5e !important;
}

body.dark-mode .bootstrap-select .dropdown-menu.inner li.selected a span.text {
    color: #ffffff !important;
}

/* ==========================================
   Modals
   ========================================== */
body.dark-mode .modal-content {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #2a2a4a !important;
}

body.dark-mode .modal-header .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-footer {
    border-top-color: #2a2a4a !important;
}

/* ==========================================
   Sidebar / Aside  (overrides aside/dark.css #3c4858)
   ========================================== */
body.dark-mode .aside {
    background-color: #1a1a2e !important;
}

body.dark-mode .aside-menu {
    background-color: #16213e !important;
}

body.dark-mode .aside-menu-wrapper {
    background-color: #16213e !important;
}

/* Brand / Logo area  (overrides brand/light.css #fff) */
body.dark-mode .brand,
body.dark-mode #kt_brand {
    background-color: #16213e !important;
}

/* ==========================================
   Offcanvas panels
   ========================================== */
body.dark-mode .offcanvas {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
}

body.dark-mode #kt_quick_user {
    background-color: #16213e !important;
}

body.dark-mode #kt_quick_user .navi-text .font-weight-bold {
    color: #e0e0e0 !important;
}

/* ==========================================
   Separators
   ========================================== */
body.dark-mode .separator {
    border-bottom-color: #2a2a4a !important;
}

body.dark-mode .separator-dashed {
    border-bottom-color: #2a2a4a !important;
}

/* ==========================================
   Backgrounds
   ========================================== */
body.dark-mode .bg-light {
    background-color: #1c2a45 !important;
}

body.dark-mode .bg-secondary {
    background-color: #1c2a45 !important;
}

/* Page loader */
body.dark-mode .page-loader {
    background-color: #1a1a2e !important;
}

/* ==========================================
   Scrollbar styling (cosmetic only)
   ========================================== */
body.dark-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode *::-webkit-scrollbar-track {
    background: #1a1a2e;
}

body.dark-mode *::-webkit-scrollbar-thumb {
    background: #3a3a5a;
    border-radius: 4px;
}

body.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #4a4a6a;
}

/* ==========================================
   Tabs
   ========================================== */
body.dark-mode .nav-tabs {
    border-bottom-color: #2a2a4a !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #93a3c0 !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: #16213e !important;
    border-color: #2a2a4a #2a2a4a #16213e !important;
    color: #3699FF !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #2a2a4a !important;
    color: #ffffff !important;
}

body.dark-mode .nav-bold .nav-link {
    color: #93a3c0 !important;
}

body.dark-mode .nav-bold .nav-link.active {
    color: #3699FF !important;
}

body.dark-mode .tab-content {
    background-color: #16213e !important;
}

/* ==========================================
   Alerts
   ========================================== */
body.dark-mode .alert {
    border-color: #2a2a4a !important;
}

body.dark-mode .alert-light {
    background-color: #1e2a4a !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .alert-light h6,
body.dark-mode .alert-light small {
    color: #d4d4e0 !important;
}

/* Metronic alert-light-* family — tinted backgrounds break the dark theme.
   Reuse semantic hues at low alpha so the alert "color cue" is preserved. */
body.dark-mode .alert.alert-light-primary {
    background-color: rgba(54, 153, 255, 0.15) !important;
    border-color: rgba(54, 153, 255, 0.35) !important;
    color: #cfe4ff !important;
}

body.dark-mode .alert.alert-light-success {
    background-color: rgba(27, 197, 189, 0.15) !important;
    border-color: rgba(27, 197, 189, 0.35) !important;
    color: #b8ece8 !important;
}

body.dark-mode .alert.alert-light-info {
    background-color: rgba(110, 113, 145, 0.20) !important;
    border-color: rgba(110, 113, 145, 0.40) !important;
    color: #d4d4e0 !important;
}

body.dark-mode .alert.alert-light-warning {
    background-color: rgba(255, 168, 0, 0.15) !important;
    border-color: rgba(255, 168, 0, 0.35) !important;
    color: #f5d27a !important;
}

body.dark-mode .alert.alert-light-danger {
    background-color: rgba(246, 78, 96, 0.15) !important;
    border-color: rgba(246, 78, 96, 0.35) !important;
    color: #f5b5bd !important;
}

body.dark-mode .alert.alert-light-warning span,
body.dark-mode .alert.alert-light-primary span,
body.dark-mode .alert.alert-light-success span,
body.dark-mode .alert.alert-light-info span,
body.dark-mode .alert.alert-light-danger span {
    color: inherit !important;
}

/* ==========================================
   Breadcrumbs / Subheader
   ========================================== */
body.dark-mode .subheader {
    background-color: #16213e !important;
}

body.dark-mode.header-fixed.subheader-fixed .subheader {
    border-top: 1px solid #3a3a5a !important;
}

/* ==========================================
   Pagination
   ========================================== */
body.dark-mode .page-link {
    background-color: #1e2a4a !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
}

/* ==========================================
   Select2
   ========================================== */
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #d4d4e0 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #c0c8d8 transparent transparent transparent !important;
}

body.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #c0c8d8 transparent !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8890a8 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #253a5e !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #93a3c0 !important;
}

body.dark-mode .select2-dropdown {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .select2-results__option {
    color: #d4d4e0 !important;
}

body.dark-mode .select2-results__option--highlighted {
    background-color: #253a5e !important;
}

body.dark-mode .select2-search__field {
    background-color: #1e2a4a !important;
    color: #e0e0e0 !important;
}

/* ==========================================
   DataTables
   ========================================== */
body.dark-mode .dataTables_wrapper {
    color: #d4d4e0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #e0e0e0 !important;
}

/* ==========================================
   Chosen plugin - full dark mode support
   ========================================== */
body.dark-mode .chosen-container .chosen-single {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .chosen-container-single .chosen-single span {
    color: #d4d4e0 !important;
}

body.dark-mode .chosen-container-single .chosen-default {
    color: #8890a8 !important;
}

/* Arrow container background */
body.dark-mode .chosen-container-single .chosen-single div {
    background-color: #1e2a4a !important;
}

/* Arrow SVG - light color for dark mode */
body.dark-mode .chosen-container-single .chosen-single div:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c0c8d8' d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E%3C/svg%3E") !important;
}

body.dark-mode .chosen-container .chosen-drop {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .chosen-container .chosen-results li {
    color: #d4d4e0 !important;
}

body.dark-mode .chosen-container .chosen-results li.highlighted {
    background-color: #253a5e !important;
    color: #ffffff !important;
}

body.dark-mode .chosen-container .chosen-results li.result-selected {
    background-color: #1c2a45 !important;
    color: #93a3c0 !important;
}

body.dark-mode .chosen-container .chosen-search input[type="text"] {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

/* Multi-select chosen */
body.dark-mode .chosen-container-multi .chosen-choices {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .chosen-container-multi .chosen-choices .search-choice {
    background-color: #253a5e !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .chosen-container-multi .chosen-choices .search-field input[type="text"] {
    color: #d4d4e0 !important;
}

body.dark-mode .chzn-select {
    background-color: #1e2a4a !important;
    color: #d4d4e0 !important;
}

/* Native select dropdown arrow fix */
body.dark-mode select.form-control {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c0c8d8' d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 1.5rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 2rem !important;
}

/* ==========================================
   Accordion
   ========================================== */
body.dark-mode .accordion .card-header {
    background-color: #1c2a45 !important;
}

/* ==========================================
   Tooltips & Popovers
   ========================================== */
body.dark-mode .tooltip-inner {
    background-color: #0f3460 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .popover {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .popover-header {
    background-color: #0f3460 !important;
    border-bottom-color: #1a4a7a !important;
    color: #ffffff !important;
}

body.dark-mode .popover .arrow::after {
    border-top-color: #16213e !important;
    border-bottom-color: #16213e !important;
}

body.dark-mode .popover .arrow::before {
    border-top-color: #2a2a4a !important;
    border-bottom-color: #2a2a4a !important;
}

body.dark-mode .popover-body {
    color: #d4d4e0 !important;
}

/* ==========================================
   List groups
   ========================================== */
body.dark-mode .list-group-item {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Borders
   ========================================== */
body.dark-mode .border {
    border-color: #2a2a4a !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: #2a2a4a !important;
}

body.dark-mode .border-top {
    border-top-color: #2a2a4a !important;
}

/* ==========================================
   Symbols & Icons
   ========================================== */
body.dark-mode .symbol .symbol-label {
    background-color: #1c2a45 !important;
}

body.dark-mode .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #c0c0d0;
}

/* ==========================================
   Navi items
   ========================================== */
body.dark-mode .navi .navi-item .navi-link:hover {
    background-color: #1c2a45 !important;
}

/* ==========================================
   Footer
   ========================================== */
body.dark-mode .footer {
    background-color: #16213e !important;
    border-top-color: #2a2a4a !important;
}

body.dark-mode .footer .text-dark-75 {
    color: #93a3c0 !important;
}

/* ==========================================
   Sticky notes
   ========================================== */
body.dark-mode .stickynote {
    background-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Dark mode toggle in quick user panel
   ========================================== */
.dark-mode-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.dark-mode-toggle-wrapper .toggle-label {
    font-weight: 500;
    font-size: 1rem;
}

.dark-mode-toggle-wrapper .toggle-desc {
    font-size: 0.85rem;
}

/* ==========================================
   Switches / toggles - improve OFF visibility in dark mode
   ========================================== */
body.dark-mode .switch input:empty ~ span:before {
    background-color: #2f3f60 !important;
    border: 1px solid #4d638f !important;
    box-shadow: inset 0 0 0 1px rgba(10, 20, 40, 0.45);
}

body.dark-mode .switch input:empty ~ span:after {
    background-color: #c8d2e8 !important;
    opacity: 1 !important;
}

body.dark-mode .switch input:checked ~ span:before {
    background-color: #2f3f60 !important;
    border-color: #5eaef4 !important;
}

body.dark-mode .switch input:checked ~ span:after {
    background-color: #3699ff !important;
    color: #ffffff !important;
}

/* ==========================================
   jQuery Confirm
   ========================================== */
body.dark-mode .jconfirm .jconfirm-box {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Pipeline specific
   ========================================== */
body.dark-mode .pipeline-row:hover {
    background-color: #253a5e !important;
}

/* Pipeline status filter buttons */
body.dark-mode .btn-outline-primary {
    color: #5dade2 !important;
    border-color: #3a5a8a !important;
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary.active {
    background-color: #3699FF !important;
    color: #ffffff !important;
}

/* ==========================================
   Misc
   ========================================== */
body.dark-mode hr {
    border-top-color: #2a2a4a !important;
}

body.dark-mode code {
    color: #e88bcc !important;
    background-color: #1e2a4a !important;
}

body.dark-mode pre {
    background-color: #1e2a4a !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

/* ==========================================
   Labels / Badges / Pills - make readable on dark
   ========================================== */
body.dark-mode .label-light-danger {
    background-color: rgba(246, 78, 96, 0.2) !important;
    color: #f77d8e !important;
}

body.dark-mode .label-light-primary {
    background-color: rgba(54, 153, 255, 0.2) !important;
    color: #5dade2 !important;
}

body.dark-mode .label-light-success {
    background-color: rgba(27, 197, 189, 0.2) !important;
    color: #48d1cc !important;
}

body.dark-mode .label-light-warning {
    background-color: rgba(255, 168, 0, 0.2) !important;
    color: #ffc44d !important;
}

body.dark-mode .label-light-info {
    background-color: rgba(137, 80, 252, 0.2) !important;
    color: #a98bfc !important;
}

body.dark-mode .label-light-dark {
    background-color: rgba(214, 214, 224, 0.15) !important;
    color: #d4d4e0 !important;
}

/* btn-light-primary (Log Out button, etc.) */
body.dark-mode .btn-light-primary {
    background-color: rgba(54, 153, 255, 0.15) !important;
    color: #5dade2 !important;
    border-color: transparent !important;
}

body.dark-mode .btn-light-primary:hover {
    background-color: #3699FF !important;
    color: #ffffff !important;
}

/* btn-light (icon action buttons in dark mode) */
body.dark-mode .btn.btn-light {
    background-color: transparent !important;
    border: solid #3a3a5a 1px !important;
}

/* ==========================================
   Pipeline status pills / nav tabs
   ========================================== */
body.dark-mode .bg-gray-100 {
    background-color: #1c2a45 !important;
}

body.dark-mode .bg-gray-200 {
    background-color: #1e2a4a !important;
}

body.dark-mode .bg-gray-300 {
    background-color: #253a5e !important;
}

body.dark-mode .nav-item .nav-link {
    color: #d4d4e0 !important;
}

body.dark-mode .nav-item .nav-link.active {
    color: #ffffff !important;
    background-color: #3699FF !important;
}

/* Servicing sub-navigation pills (public/backoffice/loan/masterpages/sections/servicing3Navigation.php).
   Inactive anchor uses "nav-link border btn-light" without .btn, so the existing
   .btn.btn-light override does not match. Active anchor uses bg-radial-gradient-primary
   (Metronic pale gradient) which is washed out on dark backgrounds. */
body.dark-mode .nav-pills .nav-link.btn-light {
    background-color: transparent !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .nav-pills .nav-link.btn-light:hover {
    background-color: #253a5e !important;
    border-color: #3699FF !important;
    color: #ffffff !important;
}

body.dark-mode .nav-pills .nav-link.active,
body.dark-mode .nav-pills .nav-link.bg-radial-gradient-primary {
    background-image: none !important;
    background-color: #3699FF !important;
    color: #ffffff !important;
    border-color: #3699FF !important;
}

body.dark-mode .nav-pills .nav-link.active:hover,
body.dark-mode .nav-pills .nav-link.bg-radial-gradient-primary:hover {
    background-color: #2a86e8 !important;
    color: #ffffff !important;
}

/* Dashboard tabs (nav-tabs-line) — use underline style, not filled background */
body.dark-mode .nav-tabs-line .nav-item .nav-link.active {
    background-color: transparent !important;
    color: #3699FF !important;
    border-bottom: 2px solid #3699FF !important;
}

body.dark-mode .nav-tabs-line .nav-item .nav-link {
    color: #93a3c0 !important;
}

body.dark-mode .nav-tabs-line .nav-item .nav-link:hover {
    color: #ffffff !important;
    border-bottom-color: #93a3c0 !important;
}

body.dark-mode .nav-item.bg-gray-100 {
    border: 1px solid #2a2a4a !important;
    border-radius: .42rem;
}
body.dark-mode .nav-item.bg-gray-100:hover {
    border-color: #3699FF !important;
}

body.dark-mode .pipelineNavigation .nav-pills .nav-link {
    border: none !important;
    border-radius: .42rem !important;
}

body.dark-mode .pipelineNavigation .nav.nav-pills .nav-item {
    border-color: #3a3a5a !important;
}

body.dark-mode .pipelineNavigation .nav.nav-pills .nav-item:hover {
    border-color: #3699FF !important;
    box-shadow: none !important;
}

/* Inline styles that use style="color: ..." or style="background-color: ..." won't be caught,
   but general text should be readable everywhere */
body.dark-mode [style*="background-color: #ECEEF6"],
body.dark-mode [style*="background-color: #eceef6"],
body.dark-mode [style*="background-color:#ECEEF6"],
body.dark-mode [style*="background-color:#eceef6"] {
    background-color: #1a1a2e !important;
}

body.dark-mode [style*="background-color: rgb(236, 238, 246)"] {
    background-color: #1a1a2e !important;
}

/* Loan master-page wrapper hardcodes background-color: #fff inline
   (see public/backoffice/loan/masterpages/origination.php). Override
   for dark mode using attribute selector since inline styles outrank classes. */
body.dark-mode .row[style*="background-color: #fff"],
body.dark-mode .row[style*="background-color:#fff"],
body.dark-mode .row[style*="background-color: #FFF"],
body.dark-mode .row[style*="background-color:#FFF"] {
    background-color: #1a1a2e !important;
}

/* Servicing master page (public/backoffice/loan/masterpages/servicing3.php:36-44)
   hardcodes white on the pills tab-pane IDs via a <style> block, which inline-
   attribute selectors cannot reach. Override the IDs directly. */
body.dark-mode #pills-tabContent,
body.dark-mode #pills-servicing,
body.dark-mode #pills-fanniemae,
body.dark-mode #pills-origination {
    background-color: #1a1a2e !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Autocomplete dropdowns (Lead Source, etc.)
   ========================================== */
body.dark-mode .autocomplete {
    background: #1c2a45 !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .autocomplete div {
    color: #d4d4e0 !important;
}

body.dark-mode .autocomplete .selected,
body.dark-mode .autocomplete .selected:hover {
    background: #3699ff !important;
    color: #ffffff !important;
}

body.dark-mode .autocomplete strong {
    color: #5dade2 !important;
}

/* jQuery UI autocomplete */
body.dark-mode .ui-autocomplete {
    background: #1c2a45 !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .ui-menu-item-wrapper {
    color: #d4d4e0 !important;
}

body.dark-mode .ui-state-focus,
body.dark-mode .ui-state-active {
    background: #3699ff !important;
    border-color: #3699ff !important;
    color: #ffffff !important;
}

/* Twitter Typeahead dropdown */
body.dark-mode .tt-menu {
    background: #1c2a45 !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .tt-menu .tt-suggestion {
    color: #d4d4e0 !important;
}

body.dark-mode .tt-menu .tt-suggestion:hover,
body.dark-mode .tt-menu .tt-suggestion.tt-cursor {
    background: #253a5e !important;
    color: #ffffff !important;
}

body.dark-mode .tt-menu .tt-suggestion .tt-highlight {
    color: #5dade2 !important;
}

body.dark-mode .form-control.tt-hint {
    color: #6c7293 !important;
}

/* ==========================================
   Loan / Property tab specific dark mode fixes
   ========================================== */
/* Loan Info -> Additional Terms editor (TinyMCE) */
body.dark-mode .tox.tox-tinymce,
body.dark-mode .tox .tox-editor-header,
body.dark-mode .tox .tox-toolbar,
body.dark-mode .tox .tox-toolbar__primary,
body.dark-mode .tox .tox-toolbar__overflow,
body.dark-mode .tox .tox-menubar,
body.dark-mode .tox .tox-statusbar {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .tox .tox-tbtn svg {
    fill: #c0c8d8 !important;
}

body.dark-mode .tox .tox-tbtn:hover,
body.dark-mode .tox .tox-tbtn:focus,
body.dark-mode .tox .tox-tbtn--enabled {
    background-color: #253a5e !important;
}

body.dark-mode .tox .tox-edit-area::before {
    border-color: #3a3a5a !important;
}

/* TinyMCE editable area lives in iframe; this makes fallback textarea dark too */
body.dark-mode textarea.tinyMceClass {
    background-color: #1e2a4a !important;
    color: #d4d4e0 !important;
    border-color: #3a3a5a !important;
}

/* TinyMCE — toolbar button text + select labels (toolbar chrome is dark,
   labels were inheriting near-black and disappearing) */
body.dark-mode .tox .tox-tbtn,
body.dark-mode .tox .tox-tbtn__select-label,
body.dark-mode .tox .tox-tbtn__select-chevron svg {
    color: #d4d4e0 !important;
    fill: #c0c8d8 !important;
}

body.dark-mode .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    color: #d4d4e0 !important;
}

body.dark-mode .tox .tox-split-button:hover {
    box-shadow: none !important;
    background-color: #253a5e !important;
}

/* TinyMCE — floating dropdown panel (font/size/format menus, color pickers).
   Lives under .tox-tinymce-aux which TinyMCE appends to <body>, so it is NOT
   inside .tox.tox-tinymce — selectors must be top-level. */
body.dark-mode .tox-tinymce-aux,
body.dark-mode .tox .tox-menu,
body.dark-mode .tox .tox-collection,
body.dark-mode .tox .tox-collection--list,
body.dark-mode .tox .tox-collection--toolbar,
body.dark-mode .tox .tox-collection__group {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .tox .tox-collection__item,
body.dark-mode .tox .tox-collection__item-label {
    color: #d4d4e0 !important;
    background-color: transparent !important;
}

body.dark-mode .tox .tox-collection__item-icon svg,
body.dark-mode .tox .tox-collection__item-checkmark svg,
body.dark-mode .tox .tox-collection__item-caret svg {
    fill: #c0c8d8 !important;
}

body.dark-mode .tox .tox-collection__item--active,
body.dark-mode .tox .tox-collection__item--enabled,
body.dark-mode .tox .tox-collection__item:hover {
    background-color: #253a5e !important;
    color: #ffffff !important;
}

body.dark-mode .tox .tox-collection__group-heading {
    background-color: #1a2440 !important;
    color: #a0a8b8 !important;
    border-color: #3a3a5a !important;
}

/* Color picker swatches (ForeColor / BackColor) */
body.dark-mode .tox .tox-swatches,
body.dark-mode .tox .tox-swatches-flow {
    background-color: #1e2a4a !important;
}

body.dark-mode .tox .tox-swatch {
    border-color: #3a3a5a !important;
}

/* TinyMCE dialogs (Insert Link, Image, Code, Table props, etc.) */
body.dark-mode .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(0, 0, 0, 0.55) !important;
}

body.dark-mode .tox .tox-dialog,
body.dark-mode .tox .tox-dialog__header,
body.dark-mode .tox .tox-dialog__body,
body.dark-mode .tox .tox-dialog__footer,
body.dark-mode .tox .tox-dialog__body-content {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .tox .tox-dialog__title,
body.dark-mode .tox .tox-label,
body.dark-mode .tox .tox-form__group label {
    color: #d4d4e0 !important;
}

body.dark-mode .tox .tox-textfield,
body.dark-mode .tox .tox-textarea,
body.dark-mode .tox .tox-selectfield select,
body.dark-mode .tox .tox-listboxfield .tox-listbox--select {
    background-color: #14213d !important;
    color: #d4d4e0 !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .tox .tox-button {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
    color: #ffffff !important;
}

body.dark-mode .tox .tox-button--secondary,
body.dark-mode .tox .tox-button--naked {
    background-color: transparent !important;
    color: #d4d4e0 !important;
    border-color: #3a3a5a !important;
}

/* Property Info -> metric summary boxes and Loan Info Key Ratios tiles.
   Preserve the light-mode pale green (custom.css:705) in dark mode so the
   tiles read as the same "calculated value" visual cue across themes. */
body.dark-mode .bg-light-green {
    background-color: #C6D9B7 !important;
    color: #1a1a2e !important;
    border-color: #8aa57a !important;
}

body.dark-mode .bg-light-green i {
    color: #3f4254 !important;
}

/* ==========================================
   PC List + all tables: force cell-level dark bg
   so Metronic's style.bundle TD rules don't
   bleed through the TR-level dark override
   ========================================== */
/* :not([style*="lumen:"]) excludes Document Status cells whose
   inline style ("lumen: <Y>; color: ...; background-color: #...")
   carries the tenant-configured status color. Without this exclusion
   the !important author rule beats the inline bg-color and the
   status color band disappears in dark mode. */
body.dark-mode .table tbody tr td:not([style*="lumen:"]),
body.dark-mode .table tbody tr th {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) td:not([style*="lumen:"]),
body.dark-mode .table-striped tbody tr:nth-of-type(odd) th {
    background-color: #1c2a45 !important;
}

body.dark-mode .table-hover tbody tr:hover td:not([style*="lumen:"]),
body.dark-mode .table-hover tbody tr:hover th {
    background-color: #253a5e !important;
}

/* ==========================================
   Accordion solid — ensure inner card and
   card-body get dark background (Metronic's
   accordion-solid uses higher-specificity rules)
   ========================================== */
body.dark-mode .accordion-solid .card,
body.dark-mode .accordion-solid > .card {
    background-color: #16213e !important;
    border-color: #3a3a5a !important;
}

/* Metronic sets .card-title bg to #f3f6f9 inside accordion-solid */
body.dark-mode .accordion-solid .card .card-header {
    background-color: transparent !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .accordion-solid .card .card-header .card-title,
body.dark-mode .accordion-solid .card .card-header .card-title.collapsed {
    background-color: #0f3460 !important;
    color: #ffffff !important;
    border-color: #3a3a5a !important;
}

body.dark-mode .accordion-solid .card .card-body,
body.dark-mode .accordion-solid .card .collapse .card-body {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
    border: 1px solid #3a3a5a !important;
}

/* ==========================================
   3rd Party Integrations — checkbox group
   area uses inline style bg; !important in
   external CSS overrides inline styles
   ========================================== */
body.dark-mode .pad5 {
    background-color: #1e2a4a !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   File Substatus — list rows have hardcoded
   odd/even backgrounds in an inline <style>
   ========================================== */
body.dark-mode .clnreFields,
body.dark-mode .clnreFields:nth-of-type(odd),
body.dark-mode .clnreFields:nth-of-type(even) {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   Notice boxes (Web Forms / Logins tab +
   other pages that use .notice.notice-info)
   ========================================== */
body.dark-mode .notice {
    background-color: #1c2a45 !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .notice.notice-info {
    background-color: #1a2a45 !important;
    border-color: #3699FF !important;
}

body.dark-mode .notice.notice-warning {
    background-color: #2a2010 !important;
    border-color: #FFA800 !important;
}

body.dark-mode .notice.notice-danger {
    background-color: #2a1010 !important;
    border-color: #F64E60 !important;
}

/* ==========================================
   Draw Management tab — drawManagement.css
   hardcodes white backgrounds on component
   classes
   ========================================== */
body.dark-mode .category-item {
    background-color: #1e2a4a !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .category-item:hover {
    background-color: #253a5e !important;
}

body.dark-mode .category-details .category-name {
    color: #d4d4e0 !important;
}

/* Step wizard circles */
body.dark-mode .step {
    background: #16213e !important;
    color: #d4d4e0 !important;
}

/* Budget sidebar */
body.dark-mode .budget-sidebar-content {
    background: #1e2a4a !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .budget-header h5 {
    color: #d4d4e0 !important;
}

body.dark-mode .budget-item {
    background: #253a5e !important;
}

/* Template config */
body.dark-mode .template-config-card {
    background: #1e2a4a !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .template-mapping-list {
    background: #16213e !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .template-summary-table {
    background: #1e2a4a !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .template-summary-header {
    background: #0f3460 !important;
    color: #c0c8d8 !important;
    border-color: #2a2a4a !important;
}

body.dark-mode .template-summary-list {
    background: #16213e !important;
}

body.dark-mode .template-summary-row {
    border-top-color: #2a2a4a !important;
}

body.dark-mode .template-summary-row.is-active {
    background: #1c2a45 !important;
    border-left-color: #3699FF !important;
}

body.dark-mode .template-summary-title {
    color: #d4d4e0 !important;
}

body.dark-mode .template-summary-badge {
    background: #1a3a2a !important;
    color: #1BC5BD !important;
}

body.dark-mode .template-summary-active-badge {
    background: #1a2a45 !important;
    color: #5dade2 !important;
}

body.dark-mode .template-summary-tag {
    background: #253a5e !important;
    color: #d4d4e0 !important;
}

body.dark-mode .template-program-label {
    color: #d4d4e0 !important;
}

body.dark-mode .template-program-item:hover {
    background-color: #253a5e !important;
}

body.dark-mode .template-program-indicator {
    background: #2a2010 !important;
    color: #FFA800 !important;
}

/* Property Info -> Appraiser/AVM alternating rows */
body.dark-mode .alternativeColor:nth-of-type(odd),
body.dark-mode .alternativeColor:nth-of-type(even) {
    background-color: #1c2a45 !important;
}

/* Property Info -> keep file upload controls readable in dark mode */
body.dark-mode input[type="file"].form-control {
    background-color: #1e2a4a !important;
    color: #d4d4e0 !important;
    border-color: #3a3a5a !important;
}

body.dark-mode input[type="file"].form-control::file-selector-button {
    background-color: #253a5e !important;
    color: #d4d4e0 !important;
    border: 1px solid #3a5a8a !important;
}

/* Bootstrap custom-file-input (used on Import Files, Server Xfer Loan, etc.) */
body.dark-mode .custom-file-label {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #8890a8 !important;
}

body.dark-mode .custom-file-label::after {
    background-color: #253a5e !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .custom-file-input:focus ~ .custom-file-label {
    border-color: #3699FF !important;
    box-shadow: 0 0 0 0.2rem rgba(54, 153, 255, 0.25) !important;
}

/* ==========================================
   Insurance section alternating rows
   ========================================== */
body.dark-mode .additionalInsurance:nth-of-type(odd) {
    background-color: #1c2a45 !important;
}

body.dark-mode .additionalInsurance:nth-of-type(even) {
    background-color: #16213e !important;
}

/* ==========================================
   Terms & Conditions inline background override
   ========================================== */
body.dark-mode #termsAndConditionsDiv {
    background-color: transparent !important;
}

/* ==========================================
   Chosen multi-select - chzn-selectShowSelectAll
   (Pipeline workflow dropdowns)
   ========================================== */
body.dark-mode .chosen-container-multi .chosen-choices,
body.dark-mode .chzn-selectShowSelectAll + .chosen-container-multi .chosen-choices {
    background-color: #1e2a4a !important;
    background-image: none !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .chosen-container-multi .chosen-choices li.search-choice,
body.dark-mode .chzn-selectShowSelectAll + .chosen-container-multi .chosen-choices li.search-choice {
    background-color: #253a5e !important;
    background-image: none !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
    box-shadow: none !important;
}

body.dark-mode .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    filter: invert(0.7) !important;
}

body.dark-mode .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #d4d4e0 !important;
}

/* Chosen "Select All / Deselect All" buttons */
body.dark-mode .chosen-select-all,
body.dark-mode .chosen-deselect-all {
    background-color: #253a5e !important;
    color: #d4d4e0 !important;
    border-color: #3a5a8a !important;
}

/* ==========================================
   Doc Status pills - preserve inline status
   color (set via docStatusArray::getStyle) and
   keep text legible against it
   ========================================== */
body.dark-mode .docStatus {
    opacity: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

/* Lumen-styled label buttons - reduce background opacity in dark mode */
body.dark-mode .label.label-inline[style*="lumen"] {
    opacity: 0.7 !important;
}

body.dark-mode #kt_quick_user_toggle {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

body.dark-mode #kt_quick_user_toggle:hover {
    background-color: #3699ff;
}

/* ==========================================
   Acqualify "Powered by" badge - Credit Screening
   ========================================== */
body.dark-mode .acqualify-badge {
    border: 1px solid #000000;
}

/* ============================================================
   FOLLOW-UP FIXES (CU-868jc3u9d) - PR #8973 dark mode follow-up
   ============================================================ */

/* ==========================================
   [Fix 1] Mandatory / required fields -
   preserve the yellow highlight (#ffa80024)
   that custom.css applies in light mode.
   Higher specificity than .form-control rule
   above so this wins without specificity war.
   ========================================== */
body.dark-mode input.form-control.mandatory,
body.dark-mode select.form-control.mandatory,
body.dark-mode textarea.form-control.mandatory,
body.dark-mode .mandatory.form-control,
body.dark-mode .brokerMandatoryField.form-control,
body.dark-mode .form-control.brokerMandatoryField {
    background-color: #ffa80024 !important;
    color: #1a1a2e !important;
    border-color: #b88a00 !important;
}

body.dark-mode input.form-control.mandatory::placeholder,
body.dark-mode textarea.form-control.mandatory::placeholder,
body.dark-mode .brokerMandatoryField::placeholder {
    color: #4a4a2e !important;
}

/* Radio / checkbox mandatory span backgrounds */
body.dark-mode .radio > input.mandatory ~ span {
    background-color: #ffa80024 !important;
}

body.dark-mode .checkbox > input.mandatory ~ span {
    border: 1px solid #f64e60 !important;
}

/* Select2 multi mandatory */
body.dark-mode .js-example-basic-multiple.mandatory ~ span .select2-selection.select2-selection--multiple {
    background-color: #ffa80024 !important;
}

/* ==========================================
   [Fix 2] Docs tab - container backgrounds.
   (.docStatus pill rule lives above and has
   already been adjusted to preserve color.)
   ========================================== */
body.dark-mode .docsContainer,
body.dark-mode #docContainer,
body.dark-mode #docsContainer,
body.dark-mode #docsTabContent,
body.dark-mode .uploadedDocsList,
body.dark-mode .requiredDocsList,
body.dark-mode .docs-tab-wrapper {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

/* Doc list table cells inside the docs tab (cell-level overrides
   so DataTables striping doesn't fight us) */
body.dark-mode #lmrDocsTable td,
body.dark-mode #lmrDocsTable th,
body.dark-mode .lmrDocsTable td,
body.dark-mode .lmrDocsTable th,
body.dark-mode table.docsTable td,
body.dark-mode table.docsTable th {
    background-color: transparent !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

/* ==========================================
   [Fix 3] Account Setup (Onboarding Checklist)
   status dropdowns. Markup in
   public/backoffice/onBoardingChecklist.php +
   onBoardingAdminChecklist.php emits inline
   style="background-color: <colorPerStatus>"
   on the <select> AND inline backgrounds on
   each <option>. The default .form-control
   rule overrides those - we restore them per
   status via attribute selectors.
   ========================================== */

/* The select itself: preserve inline status color, force white text */
body.dark-mode select.form-control[style*="#1bc5bd"] {
    background-color: #1bc5bd !important;
    color: #ffffff !important;
    border-color: #1bc5bd !important;
}
body.dark-mode select.form-control[style*="orange"] {
    background-color: #f57c00 !important;
    color: #ffffff !important;
    border-color: #f57c00 !important;
}
body.dark-mode select.form-control[style*=": red"],
body.dark-mode select.form-control[style*=":red"] {
    background-color: #c0392b !important;
    color: #ffffff !important;
    border-color: #c0392b !important;
}
body.dark-mode select.form-control[style*="#8950fc"] {
    background-color: #8950fc !important;
    color: #ffffff !important;
    border-color: #8950fc !important;
}

/* Override the inline option background colors so the dropdown
   list is readable instead of white-on-white */
body.dark-mode select.form-control option[style*="#e0d8d8"],
body.dark-mode select.form-control option[style*="white"],
body.dark-mode select.form-control option[style*="#fff"] {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 4] Update File Status modal (Pipeline).
   Markup in models/pops/updateFileStatus.php
   uses Chosen plugin (.chzn-select). Header
   options have class="optnGrp" disabled.
   ========================================== */

/* Mandatory yellow override: this select has class="mandatory"
   AND class="primaryStatus chosen-container". Light mode shows
   the chosen-single transparent. In dark mode we need the chosen
   wrapper to render dark, not yellow. So we explicitly *exclude*
   .chzn-select.mandatory from the Fix 1 yellow tint. The Fix 1
   selectors above already only target real <select> elements with
   .form-control - the rendered chosen-single anchor is not styled
   by them, so no override is needed. */

/* Chosen dropdown panel inside this modal */
body.dark-mode .primaryStatus.chosen-container .chosen-single,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-single {
    background: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
    box-shadow: none !important;
}

body.dark-mode .primaryStatus.chosen-container .chosen-single div b,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-single div b {
    filter: invert(0.85);
}

body.dark-mode .primaryStatus.chosen-container .chosen-drop,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-drop {
    background-color: #16213e !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .primaryStatus.chosen-container .chosen-search input[type="text"],
body.dark-mode #updateFileStatusForm .chosen-container .chosen-search input[type="text"] {
    background-color: #1e2a4a !important;
    border-color: #3a3a5a !important;
    color: #d4d4e0 !important;
}

body.dark-mode .primaryStatus.chosen-container .chosen-results,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results {
    color: #d4d4e0 !important;
}

/* Selectable items */
body.dark-mode .primaryStatus.chosen-container .chosen-results li.active-result,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results li.active-result {
    color: #d4d4e0 !important;
    background-color: transparent !important;
}

/* Hover / keyboard-highlighted item */
body.dark-mode .primaryStatus.chosen-container .chosen-results li.highlighted,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results li.highlighted {
    background-color: #253a5e !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Optgroup labels - keep prominent */
body.dark-mode .primaryStatus.chosen-container .chosen-results li.group-result,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results li.group-result {
    background-color: #0f3460 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Disabled header rows (module names rendered as
   <option class="optnGrp" disabled>) - already shown
   red by inline style; ensure they stay readable */
body.dark-mode .primaryStatus.chosen-container .chosen-results li.disabled-result,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results li.disabled-result {
    background-color: #2a1010 !important;
    color: #f77d8e !important;
    font-style: italic !important;
}

/* Currently selected item */
body.dark-mode .primaryStatus.chosen-container .chosen-results li.result-selected,
body.dark-mode #updateFileStatusForm .chosen-container .chosen-results li.result-selected {
    background-color: #0f3460 !important;
    color: #ffffff !important;
}

/* Modal body background sanity (already covered by .modal-content
   but the updateFileStatus modal sets inline .modal-content height
   via JS; the .card-body wrapper inside the form needs to match) */
body.dark-mode #updateFileStatusForm,
body.dark-mode #updateFileStatusForm .card-body,
body.dark-mode #updateFileStatusForm .form-group label {
    background-color: transparent !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 5] Quick View Loan File Preview -
   restore color in Workflows + Required Docs
   sections inside the preview popover.
   Container class verified via myPipelineRow
   not pinned; using broad-but-scoped selectors
   ⚠️ NEEDS VERIFICATION on container class
   ========================================== */
body.dark-mode #fileQuickView,
body.dark-mode .fileQuickView,
body.dark-mode #quickViewPopover,
body.dark-mode .popover.quickViewPopover,
body.dark-mode .popover.quickViewPopover .popover-body,
body.dark-mode .file-quick-view,
body.dark-mode .file-quick-view .card,
body.dark-mode .file-quick-view .card-body {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

/* Workflow status rows inside the preview reuse the established
   workflow-status-* class names from WorkflowCard */
body.dark-mode .file-quick-view .workflow-status-pending,
body.dark-mode #fileQuickView .workflow-status-pending,
body.dark-mode .quickViewPopover .workflow-status-pending {
    background-color: rgba(143, 115, 56, 0.58) !important;
    color: #e8efff !important;
}
body.dark-mode .file-quick-view .workflow-status-completed,
body.dark-mode #fileQuickView .workflow-status-completed,
body.dark-mode .quickViewPopover .workflow-status-completed {
    background-color: rgba(42, 133, 120, 0.58) !important;
    color: #e8efff !important;
}
body.dark-mode .file-quick-view .workflow-status-needs-manager,
body.dark-mode #fileQuickView .workflow-status-needs-manager,
body.dark-mode .quickViewPopover .workflow-status-needs-manager {
    background-color: rgba(127, 58, 93, 0.58) !important;
    color: #e8efff !important;
}
body.dark-mode .file-quick-view .workflow-status-needs-legal,
body.dark-mode #fileQuickView .workflow-status-needs-legal,
body.dark-mode .quickViewPopover .workflow-status-needs-legal {
    background-color: rgba(197, 57, 79, 0.94) !important;
    color: #ffffff !important;
}
body.dark-mode .file-quick-view .workflow-status-not-applicable,
body.dark-mode #fileQuickView .workflow-status-not-applicable,
body.dark-mode .quickViewPopover .workflow-status-not-applicable {
    background-color: rgba(62, 103, 159, 0.58) !important;
    color: #e8efff !important;
}

/* Required Docs section title + pills inside the preview */
body.dark-mode .file-quick-view .docStatus,
body.dark-mode #fileQuickView .docStatus,
body.dark-mode .quickViewPopover .docStatus {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* ==========================================
   [Fix 6] Loan Info tab - LTV/LTC fields and
   surrounding metric block. The HMLO web form
   renders LTV/LTC inputs as plain .form-control
   wrapped in .form-group inside a .card. Default
   form rules already give the inputs the dark
   bg; this block targets the wrapping card-body
   header banner and any metric summary tiles so
   the LTV/LTC region has a visible contrast band.
   ⚠️ NEEDS VERIFICATION on exact wrapper class
   ========================================== */
body.dark-mode #loanTermsTab .card,
body.dark-mode #loanTermsTab .card-body,
body.dark-mode .HMLOLoanTerms .card,
body.dark-mode .HMLOLoanTerms .card-body,
body.dark-mode .loanTermsSection,
body.dark-mode .ltvLtcSection,
body.dark-mode #ltvLtcSection {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
    border-color: #2a2a4a !important;
}

/* Key Ratios tiles in the Loan Info > Loan Terms section
   (loanTermsSection.php emits <div class="card card-custom bg-light-green">
   on each tile). Preserve the light-mode pale green for visual parity. */
body.dark-mode #loanTermsTab .bg-light-green,
body.dark-mode .HMLOLoanTerms .bg-light-green {
    background-color: #C6D9B7 !important;
    color: #1a1a2e !important;
    border: 1px solid #8aa57a !important;
}

body.dark-mode #loanTermsTab .bg-light-green .font-size-h3,
body.dark-mode #loanTermsTab .bg-light-green .font-size-h4,
body.dark-mode #loanTermsTab .bg-light-green .card-label,
body.dark-mode #loanTermsTab .bg-light-green span,
body.dark-mode .HMLOLoanTerms .bg-light-green .card-label,
body.dark-mode .HMLOLoanTerms .bg-light-green span {
    color: #1a1a2e !important;
}

/* .loanCalcSummary / .calc-metric-box are used in non-Key-Ratios contexts
   (Loan Calc Summary sidebar) where a dark band reads better - keep their
   dark-tinted treatment. */
body.dark-mode .loanCalcSummary,
body.dark-mode .calc-metric-box {
    background-color: #1c2a45 !important;
    color: #d4d4e0 !important;
    border: 1px solid #2a4a3a !important;
}
body.dark-mode .calc-metric-box .metric-value,
body.dark-mode .loanCalcSummary .font-size-h3 {
    color: #ffffff !important;
}

/* ==========================================
   [Fix 7] Tasks - extend status color coverage
   to dashboard / branch widgets and beat
   DataTables striped row backgrounds.
   ========================================== */
body.dark-mode .dashTaskList tbody tr.task-status-not-started td,
body.dark-mode .table-striped tbody tr.task-status-not-started td,
body.dark-mode .table-striped tbody tr.task-status-not-started:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr.task-status-not-started:nth-of-type(even) td,
body.dark-mode #branchTaskList tbody tr.task-status-not-started td,
body.dark-mode tr.task-status-not-started td {
    background-color: rgba(127, 58, 93, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .dashTaskList tbody tr.task-status-completed td,
body.dark-mode .table-striped tbody tr.task-status-completed td,
body.dark-mode .table-striped tbody tr.task-status-completed:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr.task-status-completed:nth-of-type(even) td,
body.dark-mode #branchTaskList tbody tr.task-status-completed td,
body.dark-mode tr.task-status-completed td {
    background-color: rgba(42, 133, 120, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .dashTaskList tbody tr.task-status-in-progress td,
body.dark-mode .table-striped tbody tr.task-status-in-progress td,
body.dark-mode .table-striped tbody tr.task-status-in-progress:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr.task-status-in-progress:nth-of-type(even) td,
body.dark-mode #branchTaskList tbody tr.task-status-in-progress td,
body.dark-mode tr.task-status-in-progress td {
    background-color: rgba(143, 115, 56, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .dashTaskList tbody tr.task-status-not-applicable td,
body.dark-mode .table-striped tbody tr.task-status-not-applicable td,
body.dark-mode .table-striped tbody tr.task-status-not-applicable:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr.task-status-not-applicable:nth-of-type(even) td,
body.dark-mode #branchTaskList tbody tr.task-status-not-applicable td,
body.dark-mode tr.task-status-not-applicable td {
    background-color: rgba(62, 103, 159, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .dashTaskList tbody tr.task-status-past-due td,
body.dark-mode .table-striped tbody tr.task-status-past-due td,
body.dark-mode .table-striped tbody tr.task-status-past-due:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr.task-status-past-due:nth-of-type(even) td,
body.dark-mode #branchTaskList tbody tr.task-status-past-due td,
body.dark-mode tr.task-status-past-due td {
    background-color: rgba(197, 57, 79, 0.94) !important;
    color: #ffffff !important;
}

/* Task status pills used in Add/Edit Task modal + dashboard */
body.dark-mode .taskStatusBadge.not_started,
body.dark-mode .label.label-inline.completed,
body.dark-mode .dash-task-status-pill.completed {
    background-color: rgba(42, 133, 120, 0.58) !important;
    color: #e8efff !important;
}

body.dark-mode .label.label-inline.not_applicable,
body.dark-mode .dash-task-status-pill.not_applicable {
    background-color: rgba(62, 103, 159, 0.58) !important;
    color: #e8efff !important;
}

/* ==========================================
   [Discovery Pass] Additional surfaces found
   while auditing
   ========================================== */

/* Bootstrap tooltips */
body.dark-mode .tooltip-inner {
    background-color: #0f3460 !important;
    color: #ffffff !important;
}
body.dark-mode .bs-tooltip-top .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #0f3460 !important;
}
body.dark-mode .bs-tooltip-bottom .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #0f3460 !important;
}
body.dark-mode .bs-tooltip-left .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #0f3460 !important;
}
body.dark-mode .bs-tooltip-right .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #0f3460 !important;
}

/* Bootstrap popovers (used by quick view preview) */
body.dark-mode .popover {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}
body.dark-mode .popover-header {
    background-color: #0f3460 !important;
    border-bottom-color: #2a2a4a !important;
    color: #ffffff !important;
}
body.dark-mode .popover-body {
    background-color: #16213e !important;
    color: #d4d4e0 !important;
}
body.dark-mode .popover .arrow::before,
body.dark-mode .popover .arrow::after {
    border-color: transparent !important;
}
body.dark-mode .bs-popover-top > .arrow::after,
body.dark-mode .bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: #16213e !important;
}
body.dark-mode .bs-popover-bottom > .arrow::after,
body.dark-mode .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: #16213e !important;
}
body.dark-mode .bs-popover-right > .arrow::after,
body.dark-mode .bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: #16213e !important;
}
body.dark-mode .bs-popover-left > .arrow::after,
body.dark-mode .bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-left-color: #16213e !important;
}

/* Bootstrap badge variants that default to white background */
body.dark-mode .badge.badge-light,
body.dark-mode .badge-light {
    background-color: #1c2a45 !important;
    color: #d4d4e0 !important;
    border: 1px solid #2a2a4a !important;
}
body.dark-mode .badge.badge-secondary,
body.dark-mode .badge-secondary {
    background-color: #253a5e !important;
    color: #ffffff !important;
}

/* jQuery Confirm - extend coverage beyond container */
body.dark-mode .jconfirm .jconfirm-title,
body.dark-mode .jconfirm .jconfirm-content,
body.dark-mode .jconfirm .jconfirm-content-pane {
    color: #d4d4e0 !important;
}
body.dark-mode .jconfirm .jconfirm-buttons .btn-default {
    background-color: #253a5e !important;
    color: #d4d4e0 !important;
    border-color: #3a5a8a !important;
}
body.dark-mode .jconfirm .jconfirm-buttons .btn-default:hover {
    background-color: #3a5a8a !important;
    color: #ffffff !important;
}

/* Form validation states - keep red/green visible on dark inputs */
body.dark-mode .form-control.is-invalid,
body.dark-mode .is-invalid .form-control {
    border-color: #f64e60 !important;
    background-color: #1e2a4a !important;
}
body.dark-mode .form-control.is-valid,
body.dark-mode .is-valid .form-control {
    border-color: #1bc5bd !important;
    background-color: #1e2a4a !important;
}
body.dark-mode .invalid-feedback {
    color: #f77d8e !important;
}
body.dark-mode .valid-feedback {
    color: #48d1cc !important;
}

/* DataTables pagination button states */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #d4d4e0 !important;
    background: transparent !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #3699FF !important;
    color: #ffffff !important;
    border-color: #3699FF !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #253a5e !important;
    color: #ffffff !important;
    border-color: #3a5a8a !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #6a7290 !important;
    background: transparent !important;
}
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter {
    color: #d4d4e0 !important;
}

/* text-warning needs to be brighter on dark bg for legibility */
body.dark-mode .text-warning {
    color: #FFD54F !important;
}

/* Generic read-only / disabled inputs not caught by .form-control */
body.dark-mode input[readonly]:not(.form-control),
body.dark-mode input[disabled]:not(.form-control),
body.dark-mode textarea[readonly]:not(.form-control),
body.dark-mode textarea[disabled]:not(.form-control) {
    background-color: #1e2a4a !important;
    color: #8890a8 !important;
}

/* Bootstrap switch (other than the quick-user toggle which has its
   own rule above) - ensure off-state pill is visible */
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
body.dark-mode .bootstrap-switch .bootstrap-switch-label {
    background-color: #253a5e !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 9] Document Status td (lumen-styled).
   Inline style is emitted by docStatusArray::style()
   as: "lumen: <Y>; color: <#000|#fff>; background-color: #<tenantHex>".
   The hex is tenant-configurable (tblDocumentStatus.color)
   so we anchor on the unique "lumen:" token rather than
   enumerating colors. The .table td { color: #d4d4e0 !important }
   rule above was overriding the inline contrast color,
   washing out the status text; the .form-control rule was
   covering the td color band with a dark blue select.
   Restore the inline contrast color and make the inner
   select translucent so the tenant color band shows through.
   ========================================== */

/* Re-assert the inline contrast color on the td and its content */
body.dark-mode td[style*="lumen:"][style*="color: #000"],
body.dark-mode td[style*="lumen:"][style*="color: #000"] b,
body.dark-mode td[style*="lumen:"][style*="color: #000"] span:not(.btn):not([class*="text-"]),
body.dark-mode td[style*="lumen:"][style*="color: #000"] a:not(.btn) {
    color: #000 !important;
}

body.dark-mode td[style*="lumen:"][style*="color: #fff"],
body.dark-mode td[style*="lumen:"][style*="color: #fff"] b,
body.dark-mode td[style*="lumen:"][style*="color: #fff"] span:not(.btn):not([class*="text-"]),
body.dark-mode td[style*="lumen:"][style*="color: #fff"] a:not(.btn) {
    color: #ffffff !important;
}

/* Inner status <select>: fully transparent so the tenant color band
   shows through unobstructed (matches light-mode behaviour where the
   .mandatory yellow tint is ~9% alpha). Deliberately overrides Fix 1's
   yellow mandatory tint for this specific cell - the status color is
   the more important signal than the required-field hint. */
body.dark-mode td[style*="lumen:"] select.form-control,
body.dark-mode td[style*="lumen:"] select.form-control.mandatory {
    background-color: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow: none !important;
}

/* Match the select text color to the inline lumen-contrast color */
body.dark-mode td[style*="lumen:"][style*="color: #000"] select.form-control,
body.dark-mode td[style*="lumen:"][style*="color: #000"] select.form-control.mandatory {
    color: #000 !important;
}
body.dark-mode td[style*="lumen:"][style*="color: #fff"] select.form-control,
body.dark-mode td[style*="lumen:"][style*="color: #fff"] select.form-control.mandatory {
    color: #ffffff !important;
}

/* Tooltip / info icons inside the status td (.fa-info-circle, .fa-clock)
   keep the inline contrast color and a subtle outline for legibility */
body.dark-mode td[style*="lumen:"] .fa,
body.dark-mode td[style*="lumen:"] i[class*="fa-"] {
    color: inherit !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   [Fix 9b] Doc Status cell fallback for the
   Pipeline / Dashboard checklist view
   (myChecklistItems.php). When the inline
   "lumen: ...; background-color: #..." style
   is missing/empty (PHP opcache, tenant-data
   gap, or getStyle() returning ""), the cell
   still needs a visible color band. Default
   to the Pending Submission color so the cell
   matches the legend at the top of the view.
   Has no effect when the inline lumen style
   IS present - that case is handled by the
   Addendum 2 :not([style*="lumen:"]) exclusion
   on the L1269 .table td bg-color rule.
   ========================================== */
body.dark-mode td.docStatusCell:not([style*="lumen:"]) {
    background-color: #bff0f7 !important;
    color: #000 !important;
}

/* Cosmetic guard: when the inline lumen color is configured very
   dark (tenant config), draw a 1px inset hairline so the cell
   boundary is always discernible against the dark page bg. Does
   not override the inline background-color. */
body.dark-mode td.docStatusCell[style*="lumen:"] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* ==========================================
   [Fix 10] Workflow status row color bands
   (myWFList.php). Wrapping selectors in
   .card-body raises specificity to (0,4,4) so
   they unambiguously beat the L1269 .table td
   override (0,3,4) and tie the L1281
   .table-hover :hover override (0,4,4) - Fix 10
   then wins by source order. :hover variants
   stabilize the cell color so hovering does not
   repaint to #253a5e. Color values mirror the
   light-mode hex from custom.css:10-37 for
   visual parity. Workflow tables are wrapped in
   <div class="card-body p-0"> at myWFList.php
   L246, so the .card-body anchor matches.
   ========================================== */
body.dark-mode .card-body .table tbody tr.chkYellow td,
body.dark-mode .card-body .table tbody tr.chkYellow:hover td,
body.dark-mode .card-body .table tbody tr.workflow-status-pending td,
body.dark-mode .card-body .table tbody tr.workflow-status-pending:hover td {
    background-color: #fae8c1 !important;
    color: #1a1a2e !important;
    border-color: #d4ba6f !important;
}

body.dark-mode .card-body .table tbody tr.chkDarkGrn td,
body.dark-mode .card-body .table tbody tr.chkDarkGrn:hover td,
body.dark-mode .card-body .table tbody tr.workflow-status-completed td,
body.dark-mode .card-body .table tbody tr.workflow-status-completed:hover td {
    background-color: #a8f9c5 !important;
    color: #1a1a2e !important;
    border-color: #4ca570 !important;
}

body.dark-mode .card-body .table tbody tr.chkLightRed td,
body.dark-mode .card-body .table tbody tr.chkLightRed:hover td,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-manager td,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-manager:hover td {
    background-color: #fbb5b5 !important;
    color: #1a1a2e !important;
    border-color: #c97070 !important;
}

body.dark-mode .card-body .table tbody tr.chkRed td,
body.dark-mode .card-body .table tbody tr.chkRed:hover td,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal td,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal:hover td {
    background-color: #fa3434 !important;
    color: #ffffff !important;
    border-color: #c41818 !important;
}

body.dark-mode .card-body .table tbody tr.chkGrey td,
body.dark-mode .card-body .table tbody tr.chkGrey:hover td,
body.dark-mode .card-body .table tbody tr.workflow-status-not-applicable td,
body.dark-mode .card-body .table tbody tr.workflow-status-not-applicable:hover td {
    background-color: #cccccc !important;
    color: #1a1a2e !important;
    border-color: #888888 !important;
}

/* Inner spans, .text-dark, <b>, and links - also wrapped in .card-body for
   matching (0,4,*) specificity so they win against the dark-mode default
   text color rule at L132-136. */
body.dark-mode .card-body .table tbody tr.workflow-status-row td .text-dark,
body.dark-mode .card-body .table tbody tr.workflow-status-row td b,
body.dark-mode .card-body .table tbody tr.workflow-status-row td span:not(.btn):not([class*="text-"]) {
    color: #1a1a2e !important;
}
body.dark-mode .card-body .table tbody tr.workflow-status-row td a:not(.btn) {
    color: #0066cc !important;
}
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal td .text-dark,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal td b,
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal td span:not(.btn):not([class*="text-"]),
body.dark-mode .card-body .table tbody tr.workflow-status-needs-legal td a:not(.btn) {
    color: #ffffff !important;
}

/* ==========================================
   [Fix 11] Key Ratios tiles - paint nested
   .card-header / .card-body transparent so
   the .bg-light-green parent shows through.
   Without this, the universal L56/L69 dark
   .card-header rules cover the green parent
   leaving only a thin edge of green visible.
   Specificity (0,3,1) outranks L56/L69 (0,2,1).
   Also forces inner text dark for readability
   on the pale green band.
   ========================================== */
body.dark-mode .bg-light-green .card-header,
body.dark-mode .bg-light-green .card-body,
body.dark-mode .bg-light-green .card-title,
body.dark-mode .bg-light-green .card-footer {
    background-color: transparent !important;
    color: #1a1a2e !important;
    border-color: #8aa57a !important;
}

body.dark-mode .bg-light-green .card-label,
body.dark-mode .bg-light-green h3,
body.dark-mode .bg-light-green h4,
body.dark-mode .bg-light-green span,
body.dark-mode .bg-light-green b,
body.dark-mode .bg-light-green .font-size-h3,
body.dark-mode .bg-light-green .font-size-h4 {
    color: #1a1a2e !important;
}

body.dark-mode .bg-light-green .text-primary,
body.dark-mode .bg-light-green i.text-primary {
    color: #3f4254 !important;
}

/* ==========================================
   [Fix 12] Mandatory fields — light text in dark mode.
   Supersedes Fix 1's dark text (#1a1a2e), which was
   unreadable through the 9%-alpha amber tint on a
   dark page. Tint alpha bumped to ~18% so the
   "required" cue survives the dark background.
   ========================================== */
body.dark-mode input.form-control.mandatory,
body.dark-mode select.form-control.mandatory,
body.dark-mode textarea.form-control.mandatory,
body.dark-mode .mandatory.form-control,
body.dark-mode .brokerMandatoryField.form-control,
body.dark-mode .form-control.brokerMandatoryField {
    background-color: rgba(255, 168, 0, 0.18) !important;
    color: #f4e6c5 !important;
    border-color: #b88a00 !important;
}
body.dark-mode input.form-control.mandatory::placeholder,
body.dark-mode textarea.form-control.mandatory::placeholder,
body.dark-mode .brokerMandatoryField::placeholder {
    color: #d4c08a !important;
}

/* ==========================================
   [Fix 13] bg-light-green tile labels — extend Fix 11
   so caption <label> elements pick up the dark text
   color (Fix 11 covered span/b/h*, missed label).
   ========================================== */
body.dark-mode .bg-light-green label,
body.dark-mode .bg-light-green .col-form-label,
body.dark-mode .bg-light-green .form-label {
    color: #1a1a2e !important;
}

/* ==========================================
   [Fix 14] Custom Fields builder — three column
   panels (#custom_field_form .main-form-section /
   .file-types-section / .loan-programs-section)
   are hardcoded to white/grey in customFields.css
   (lines 1415-1452). Override in dark mode so the
   middle MANDATORY panel matches the flanking
   panels and the surrounding cards.
   ========================================== */
body.dark-mode #custom_field_form .main-form-section,
body.dark-mode #custom_field_form .file-types-section,
body.dark-mode #custom_field_form .loan-programs-section {
    background: #16213e !important;
    border-color: #2a2a4a !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .main-form-section h4,
body.dark-mode #custom_field_form .file-types-section h4,
body.dark-mode #custom_field_form .loan-programs-section h4 {
    color: #d4d4e0 !important;
    border-bottom-color: #3699FF !important;
}
body.dark-mode #custom_field_form .scrollable-container {
    background: transparent !important;
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 15] Equipment Financing section — alternating
   .vendorEquipment row backgrounds. The inline
   <style> in public/backoffice/equipmentFinancingForm.php
   (~L562-570) hardcodes #f3f6f9 / #fff, which leaks
   into dark mode. Repaint the stripes in our dark
   palette and force inner labels/h5 to light text.
   ========================================== */
body.dark-mode .vendorEquipment:nth-of-type(odd) {
    background-color: #1c2a45 !important;
}
body.dark-mode .vendorEquipment:nth-of-type(even) {
    background-color: #16213e !important;
}
body.dark-mode .vendorEquipment,
body.dark-mode .vendorEquipment label,
body.dark-mode .vendorEquipment h5 {
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 16] Mandatory <select> option list — dark
   bg + light text so the open dropdown popup is
   readable. Fix 12 only styled the closed select;
   the inherited amber tint on <option> elements
   was rendering pale-on-light when the list opened.
   ========================================== */
body.dark-mode select.form-control.mandatory option,
body.dark-mode .mandatory.form-control option,
body.dark-mode .brokerMandatoryField.form-control option,
body.dark-mode .form-control.brokerMandatoryField option,
body.dark-mode select.form-control.mandatory optgroup,
body.dark-mode .mandatory.form-control optgroup {
    background-color: #16213e !important;
    color: #f4e6c5 !important;
}
body.dark-mode select.form-control.mandatory option:checked,
body.dark-mode select.form-control.mandatory option:hover,
body.dark-mode .mandatory.form-control option:checked,
body.dark-mode .mandatory.form-control option:hover {
    background-color: #253a5e !important;
    color: #ffffff !important;
}

/* ==========================================
   [Fix 17a] Custom Fields edit form — "Active"
   toggle status container. Light gradient
   (customFields.css:2418) repainted to dark navy
   so the wrapper and inner Active/description
   text stay legible in dark mode.
   ========================================== */
body.dark-mode .active-status-container {
    background: linear-gradient(135deg, #16213e 0%, #1c2a45 100%) !important;
    border-color: #2a2a4a !important;
}
body.dark-mode .active-status-container:hover {
    border-color: #3699FF !important;
    box-shadow: 0 4px 12px rgba(54, 153, 255, 0.25) !important;
}
body.dark-mode .active-text {
    color: #d4d4e0 !important;
}
body.dark-mode .active-description,
body.dark-mode .active-icon {
    color: #8890a8 !important;
}
body.dark-mode .active-checkbox:checked + .active-label .active-text {
    color: #34d399 !important;
}
body.dark-mode .active-checkbox:checked + .active-label .active-description,
body.dark-mode .active-checkbox:checked + .active-label .active-icon {
    color: #6ee7b7 !important;
}

/* ==========================================
   [Fix 17b] Custom Fields — file-type & loan-
   program checkbox label "pills". customFields.css
   :1997+ and :2054+ hardcode light pill bgs;
   override for dark mode with a navy default and
   bright-blue checked state so selections still
   stand out.
   ========================================== */
body.dark-mode .file-types-section .file-type + label,
body.dark-mode .loan-program-section-content .section-child + label {
    background: #1c2a45 !important;
    border-color: #2a4a6e !important;
    color: #d4d4e0 !important;
}
body.dark-mode .file-types-section .file-type + label:hover,
body.dark-mode .loan-program-section-content .section-child + label:hover {
    background: #253a5e !important;
    border-color: #3a5a8a !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}
body.dark-mode .file-types-section .file-type:checked + label,
body.dark-mode .loan-program-section-content .section-child:checked + label {
    background: #0f3460 !important;
    border-color: #3699FF !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(54, 153, 255, 0.4) !important;
}
body.dark-mode .file-types-section .file-type:checked + label::before {
    color: #3699FF !important;
}

/* ==========================================
   [Fix 17c] Custom Fields — loan-program section
   outer card (customFields.css:1757). The black
   header reads fine; only the white body needs
   darkening.
   ========================================== */
body.dark-mode .loan-program-section {
    background: #16213e !important;
    border-color: #2a2a4a !important;
}
body.dark-mode .loan-program-section:hover,
body.dark-mode .loan-program-section.has-selected {
    border-color: #3699FF !important;
    box-shadow: 0 2px 12px rgba(54, 153, 255, 0.25) !important;
}

/* ==========================================
   [Fix 17d] DISPLAY / MANDATORY / FEATURES
   configuration table (.custom-modern-table) at
   customFields.css:23+. White body → dark navy;
   header band slightly lighter for separation;
   alternating row + hover shades adjusted.
   ========================================== */
body.dark-mode .custom-modern-table {
    background: #16213e !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}
body.dark-mode .custom-modern-table th,
body.dark-mode .custom-modern-table td {
    border-color: #2a2a4a !important;
}
body.dark-mode .custom-modern-table th {
    background: #1c2a45 !important;
    color: #d4d4e0 !important;
}
body.dark-mode .custom-modern-table td {
    background: #16213e !important;
    color: #d4d4e0 !important;
}
body.dark-mode .custom-modern-table td:not(.cell-highlight):nth-child(even) {
    background: #1c2a45 !important;
}
body.dark-mode .custom-modern-table td:not(.cell-highlight):hover {
    background: #253a5e !important;
}
body.dark-mode .custom-modern-table label {
    color: #d4d4e0 !important;
}

/* ==========================================
   [Fix 18a] Custom Fields — Loan Programs initial
   helper panel ("Please select the file types…").
   customFields.css:1641 hardcodes #f8f9fa bg +
   dashed light grey border.
   ========================================== */
body.dark-mode #custom_field_form .loan-programs-helper .helper-text {
    background: #1c2a45 !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .loan-programs-helper .helper-text i {
    color: #3699FF !important;
}

/* ==========================================
   [Fix 18b] Checked checkbox label pills — flatten
   the bright "glow" from Fix 17b. The selection
   cue now comes from a deeper blue body + subtler
   mid-blue border, no light shadow.
   ========================================== */
body.dark-mode .file-types-section .file-type:checked + label,
body.dark-mode .loan-program-section-content .section-child:checked + label {
    background: #143b6e !important;
    border-color: #1e6fbb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.dark-mode .file-types-section .file-type:checked + label::before {
    color: #6ec1ff !important;
}

/* ==========================================
   [Fix 18c] Active toggle — when checked, tint the
   whole status container green so the "Active"
   state is unmistakable. Uses :has() to react to
   the descendant checkbox state.
   ========================================== */
body.dark-mode .active-status-container:has(.active-checkbox:checked) {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.10) 100%) !important;
    border-color: #34d399 !important;
}

/* ==========================================
   [Fix 19] Cascade hardening — customFields.css is
   loaded INSIDE the modal (custom_field.php:322),
   so it cascades AFTER dark-mode.css. At equal
   specificity+!important the later-loaded rule
   wins. Re-issue the Custom Fields checked-pill
   and helper-text rules prefixed with
   #custom_field_form to raise specificity to
   (0,4,2)/(0,4,3) and guarantee they win.
   Also replace Fix 18c's :has() with a direct
   sibling selector for the Active toggle.
   ========================================== */

/* [Fix 19a] Pills default + hover + checked, with #custom_field_form prefix */
body.dark-mode #custom_field_form .file-types-section .file-type + label,
body.dark-mode #custom_field_form .loan-program-section-content .section-child + label {
    background: #1c2a45 !important;
    border-color: #2a4a6e !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .file-types-section .file-type + label:hover,
body.dark-mode #custom_field_form .loan-program-section-content .section-child + label:hover {
    background: #253a5e !important;
    border-color: #3a5a8a !important;
}
body.dark-mode #custom_field_form .file-types-section .file-type:checked + label,
body.dark-mode #custom_field_form .loan-program-section-content .section-child:checked + label {
    background: #143b6e !important;
    border-color: #1e6fbb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.dark-mode #custom_field_form .file-types-section .file-type:checked + label::before {
    color: #6ec1ff !important;
}

/* [Fix 19b] Loan Programs helper text with .loan-programs-section prefix
   for higher specificity than customFields.css:1641 */
body.dark-mode #custom_field_form .loan-programs-section .loan-programs-helper .helper-text {
    background: #1c2a45 !important;
    border-color: #3a5a8a !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .loan-programs-section .loan-programs-helper .helper-text i {
    color: #3699FF !important;
}

/* [Fix 19c] Active toggle "lit-up" state — sibling-
   selector replacement for Fix 18c's :has() rule. */
body.dark-mode .active-checkbox:checked + .active-label {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0.10) 100%) !important;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0 0 1px #34d399 inset;
}

/* ==========================================
   [Fix 20b] DISPLAY / MANDATORY / FEATURES table
   cell-highlight overlay — customFields.css:282
   paints a light-blue gradient via ::before when
   a cell's checkbox is checked. Repaint dark.
   ========================================== */
body.dark-mode .custom-modern-table .cell-highlight::before {
    background: linear-gradient(90deg, rgba(54, 153, 255, 0.18) 0%, rgba(54, 153, 255, 0.10) 100%) !important;
}

/* ==========================================
   [Fix 20c] Native checkbox tint — accent-color
   tints the actual checkbox chrome so the Active /
   Display / Mandatory inputs are no longer raw
   white boxes in dark mode.
   ========================================== */
body.dark-mode #custom_field_form input[type="checkbox"] {
    accent-color: #3699FF;
}
body.dark-mode .active-checkbox,
body.dark-mode .active-checkbox:checked {
    accent-color: #34d399 !important;
}

/* ==========================================
   [Fix 21] Loan program section CONTENT — inner
   wrapper holding the pill rows is hardcoded to
   white in customFields.css:1964. Override so the
   strip behind the pills matches the outer card.
   ========================================== */
body.dark-mode #custom_field_form .loan-program-section-content {
    background: #16213e !important;
    border-top-color: #2a2a4a !important;
}

/* ==========================================
   [Fix 22a] #custom_field_form outer form —
   customFields.css:502+ hardcodes a white form
   background, dark label colors, white inputs,
   and a dark-stroke select-arrow SVG. Override
   everything for dark mode.
   ========================================== */
body.dark-mode #custom_field_form {
    background: transparent !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form label {
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .form-control {
    background-color: #1e2a4a !important;
    border-color: #2a4a6e !important;
    color: #d4d4e0 !important;
}
body.dark-mode #custom_field_form .form-control:focus {
    border-color: #3699FF !important;
    box-shadow: 0 0 0 2px rgba(54, 153, 255, 0.15) !important;
}
body.dark-mode #custom_field_form .form-control::placeholder {
    color: #8890a8 !important;
}
/* Select-arrow SVG: swap the dark #374151 stroke for a light #d4d4e0 */
body.dark-mode #custom_field_form select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d4d4e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
}
body.dark-mode #custom_field_form h4 {
    color: #d4d4e0 !important;
    border-bottom-color: #3699FF !important;
}
body.dark-mode #custom_field_form .text-muted,
body.dark-mode #custom_field_form small.text-muted,
body.dark-mode #custom_field_form .form-text.text-muted {
    color: #8890a8 !important;
}

/* ==========================================
   [Fix 22b] .form-check.active-checkbox-wrapper —
   tint the entire .form-check wrapper green when
   the descendant Active checkbox is checked. Uses
   :has() to react to descendant state.
   ========================================== */
body.dark-mode .form-check.active-checkbox-wrapper:has(.active-checkbox:checked) {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #34d399 inset;
}

/* ==========================================
   [Fix 23] .form-check.active-checkbox-wrapper —
   baseline dark styling so the wrapper itself is
   a clearly themed pill in the default unchecked
   state. Fix 22b layers a green tint on top when
   the Active checkbox is checked.
   ========================================== */
body.dark-mode .form-check.active-checkbox-wrapper {
    background: #1c2a45 !important;
    border: 1px solid #2a4a6e !important;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

/* ==========================================
   [Fix 24] bg-light-green Key-Ratio tile labels
   in loanTermsSection.php (~L1167+). The global
   .card-header .card-title h3 rule at L62-67
   has specificity (0,3,2) and was beating the
   earlier (0,2,2) Fix 11 .bg-light-green h3
   selector, so the label text inside green tiles
   stayed white. Adding .card-header .card-title
   in the chain bumps specificity to (0,4,2)/
   (0,5,2) and lets the dark text win.
   ========================================== */
body.dark-mode .bg-light-green .card-header .card-title,
body.dark-mode .bg-light-green .card-header .card-title h3,
body.dark-mode .bg-light-green .card-header .card-title h3.card-label,
body.dark-mode .bg-light-green .card-header .card-label,
body.dark-mode .bg-light-green .card-header h3.card-label {
    color: #1a1a2e !important;
}
body.dark-mode .bg-light-green .card-header .card-title h3 span,
body.dark-mode .bg-light-green .card-header h3.card-label span {
    color: #1a1a2e !important;
}

/* ==========================================
   [Fix 25] bg-light-green tile labels in
   propertyAnalysis.php (L614+) — defeat the
   global .font-weight-bold light-grey rule at
   dark-mode.css:357-360 by matching its
   :not([style*="lumen"]) attribute trick inside
   a .bg-light-green ancestor (specificity 0,4,1
   beats L357's 0,3,1). Also paint direct child
   divs dark so bare text and trailing "%"
   inherit the correct color.
   ========================================== */
body.dark-mode .bg-light-green .font-weight-bold:not([style*="lumen"]),
body.dark-mode .bg-light-green .font-weight-bolder:not([style*="lumen"]) {
    color: #1a1a2e !important;
}
body.dark-mode .bg-light-green > .col-md-3,
body.dark-mode .bg-light-green > .col-md-4,
body.dark-mode .bg-light-green > .col-md-8,
body.dark-mode .bg-light-green > .col-md-9 {
    color: #1a1a2e !important;
}