/* ==========================================================================
   DOFT dark-mode QA round 4 — screenshot-grounded remediation.
   Evidence set: /Users/dmitri/Downloads/19, 31 screenshots, 2026-07-27.
   This file must stay LAST after round3 and all page styles.
   Presentation only: no data flow or form behavior is changed.
   ========================================================================== */

/* 1. Post Truck / Preferred Lanes — the state multiselect's right segment was
   still white (#fff/#e6e6e6 in pages/driver/post-truck.css). */
html[data-theme="dark"][data-refresh] .addr-states-block :is(
  .multiselect-native-select,
  .multiselect-native-select > .btn,
  button.btn-st,
  .input-group-addon,
  .input-group-btn .btn,
  .multiselect-reset .btn
) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .addr-states-block :is(
  .multiselect-native-select,
  .multiselect-native-select > .btn,
  button.btn-st,
  .input-group-addon,
  .input-group-btn .btn,
  .multiselect-reset .btn
):is(:hover, :focus, :active, .active) {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .addr-states-block input.form-control {
  border-right-color: var(--line-strong) !important;
}

/* 2. Home — feature titles and the box/clock/bills artwork inherited the
   light-only --text-heading / black SVG fill and disappeared on #0c0e12. */
html[data-theme="dark"][data-refresh] .doft-home-features :is(
  .features-title,
  .features-title span,
  .main-features .features .row > div > span,
  .main-features .features .row > div > span p,
  .main-features .features .row > div li
) {
  color: var(--text-body) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"][data-refresh] .doft-home-features .features-title,
html[data-theme="dark"][data-refresh] .doft-home-features .features-title span {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .doft-home-features .features-title img {
  filter: brightness(0) invert(88%) sepia(6%) saturate(238%) hue-rotate(177deg) brightness(91%) contrast(91%) !important;
  opacity: .96 !important;
}
html[data-theme="dark"][data-refresh] .doft-home-features .free-trial {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* 3. Marketing documents stored in DB (Factoring / Auto Transport /
   Household Moving). The JSPs now supply a stable scope so legacy content can
   be recolored without touching unrelated application cards. */
html[data-theme="dark"][data-refresh] .doft-marketing-document {
  color: var(--text-body) !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(
  h1, h2, h3, h4, h5, h6,
  .title, .heading, .card-title, .accordion-title,
  .card-header, .card-header button, .card-header a,
  .accordion button, .accordion a
) {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(
  p, li, td, th, small, .lead, .subtitle, .description, .card-body
) {
  color: var(--text-body) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(
  .card, .card-header, .card-body, .accordion, .accordion-item,
  .collapse, .faq-item, .faq-question, .faq-answer,
  .bg-white, .bg-light, .light-section, .white-section, .jumbotron,
  [style*="background: white"], [style*="background:white"],
  [style*="background-color: white"], [style*="background-color:white"],
  [style*="background: #fff"], [style*="background:#fff"],
  [style*="background-color: #fff"], [style*="background-color:#fff"],
  [style*="background: #ffffff"], [style*="background:#ffffff"],
  [style*="background-color: #ffffff"], [style*="background-color:#ffffff"],
  [style*="background: #f8f9fa"], [style*="background:#f8f9fa"],
  [style*="background-color: #f8f9fa"], [style*="background-color:#f8f9fa"],
  [style*="background: #f7f7f7"], [style*="background:#f7f7f7"]
) {
  color: var(--text-body) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(
  .card, .accordion-item, .faq-item
) {
  border: 1px solid var(--line) !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(
  i[class*="fa-"], i[class^="fa"], svg
) {
  color: var(--text-body) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document img[src*="/assets/images/icons/"]:not([src*="app_"]):not([src*="store"]):not([src*="logo"]) {
  filter: brightness(0) invert(86%) sepia(8%) saturate(247%) hue-rotate(177deg) brightness(91%) contrast(91%) !important;
  opacity: .95 !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(a, .btn-link) {
  color: var(--text-link) !important;
}
html[data-theme="dark"][data-refresh] .doft-marketing-document :is(a, .btn-link):hover {
  color: var(--text-link-hover) !important;
}

/* 4. AI Support widget — screenshot showed a large white panel on an otherwise
   dark marketing page. Preserve the blue brand header/user bubble only. */
html[data-theme="dark"] .doft-aichat .dac-panel {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55) !important;
}
html[data-theme="dark"] .doft-aichat .dac-body {
  background: var(--surface-sunken) !important;
}
html[data-theme="dark"] .doft-aichat .dac-bot .dac-bubble {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .doft-aichat .dac-bubble :is(.dac-hr, th, td) {
  border-color: var(--line) !important;
}
html[data-theme="dark"] .doft-aichat .dac-bubble .dac-tbl :is(th, td),
html[data-theme="dark"] .doft-aichat .dac-bubble .dac-tbl tr:nth-child(even) td {
  color: var(--text-body) !important;
  background: var(--surface) !important;
}
html[data-theme="dark"] .doft-aichat .dac-chip {
  color: #78afff !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .doft-aichat .dac-chip:hover {
  color: #9bc4ff !important;
  background: var(--surface) !important;
  border-color: #2e7ff1 !important;
}
html[data-theme="dark"] .doft-aichat :is(.dac-form, .dac-disclaimer) {
  color: var(--text-muted) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .doft-aichat .dac-input {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .doft-aichat .dac-fb button:hover {
  background: var(--surface-alt) !important;
}

/* 5. Public Find Loads suggestions — pages/findloads.css hardcodes #fcfcfc. */
html[data-theme="dark"][data-refresh] :is(.srch-results, .states-list, .info-block) {
  color: var(--text-body) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .srch-results li a {
  color: var(--text-body) !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] .srch-results li a:is(:hover, :focus) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}

/* 6. Shared autocomplete + multiselect surfaces. Fixes Rate Forecast, Post
   Shipment, Find Loads and the white Reset bar in the shipper filter. */
html[data-theme="dark"][data-refresh] :is(.ac-container, .pac-container, .ui-autocomplete) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.ac-item, .pac-item, .ui-menu-item, .ui-menu-item-wrapper) {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.ac-item-query, .pac-item-query, .ui-menu-item-wrapper strong, .ac-matched) {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"][data-refresh] :is(.ac-item, .pac-item, .ui-menu-item-wrapper):is(:hover, .active, .ui-state-active) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .multiselect-container :is(
  .multiselect-filter,
  .multiselect-reset,
  .multiselect-all,
  .input-group,
  .btn
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
/* the filter INPUT + adorners follow the app-wide dark input treatment
   (--surface-alt, darkmode.css §4) so it doesn't blend into the popup. */
html[data-theme="dark"][data-refresh] .multiselect-container :is(
  .form-control,
  .input-group-addon,
  .input-group-btn
) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .multiselect-container .multiselect-reset .btn {
  width: 100% !important;
  color: var(--text-muted) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .multiselect-container li label {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .multiselect-container input[type="checkbox"] {
  accent-color: var(--red-600);
}

/* 7. Load/truck rows and expanded details. These selectors close the exact
   black-on-dark city/address and black Full/LTL glyph failures in screenshots. */
html[data-theme="dark"][data-refresh] :is(.iload, .linfo, .load-info, .truck-info) :is(
  .lp-addr, .l-addr, .c-addr, .addr, .origin, .destination,
  .l-date, .l-way, .lp-info, .hdr, .val, .backhauls, .backhaul
) {
  color: var(--text-body) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.iload, .linfo, .load-info, .truck-info) :is(
  .lp-addr, .l-addr, .c-addr, .addr
) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] :is(#dTable, #lTable, .recent-tbl) .c-sz {
  color: #bcc4cf !important;
  background-color: currentColor !important;
  filter: none !important;
  opacity: .95 !important;
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  html[data-theme="dark"][data-refresh] :is(#dTable, #lTable, .recent-tbl) .c-sz {
    background-image: none !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 11px 11px;
    mask-size: 11px 11px;
  }
  html[data-theme="dark"][data-refresh] :is(#dTable, #lTable, .recent-tbl) .c-sz.full {
    -webkit-mask-image: url(/assets/images/icons/box_full.svg) !important;
    mask-image: url(/assets/images/icons/box_full.svg) !important;
  }
  html[data-theme="dark"][data-refresh] :is(#dTable, #lTable, .recent-tbl) .c-sz.part {
    -webkit-mask-image: url(/assets/images/icons/box_partial.svg) !important;
    mask-image: url(/assets/images/icons/box_partial.svg) !important;
  }
}

/* Empty search: remove the #eee rectangle rather than merely recoloring it. */
html[data-theme="dark"][data-refresh] :is(#dTable, #lTable) :is(
  .tbl-progress, .dt-empty, .dt-error, .dataTables_empty, .recent-nothing
) {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(#dTable, #lTable):has(.dt-empty, .dt-error, .dataTables_empty, .tbl-progress) {
  border-color: var(--line) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 8. Maps — CSS fallback prevents the white rectangle while HERE/Google tiles
   are loading. map-theme.js handles the actual dark base layer. */
html[data-theme="dark"][data-refresh] :is(
  #map, #map-pu, #drivers_map, [id^="map_"],
  .trucks-map, .map-wrp, .map-block, .map-container,
  .H_map, .H_map canvas, .H_map > div, .gm-style
) {
  background-color: #0c0e12 !important;
}
html[data-theme="dark"][data-refresh] :is(.H_ui, .H_ui *, .H_ib, .H_ib *, .gm-style .gm-style-iw, .gm-style .gm-style-iw *) {
  border-color: var(--line) !important;
}

/* 9. Settings/Billing/Profile — dark gray card/withdraw icons and the oversized
   white avatar placeholder were visually detached from the dark card. */
html[data-theme="dark"][data-refresh] .payments-block :is(i, svg, .pm-icon, .icon),
html[data-theme="dark"][data-refresh] .withdraw :is(i, svg, .pm-icon, .icon) {
  color: var(--text-body) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] .dropzone-box :is(.dropzone, .dz-preview, .dz-image, .dz-image-preview) {
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .dropzone-box .dz-image img[src*="default"],
html[data-theme="dark"][data-refresh] .dropzone-box .dz-image img:not([src]) {
  opacity: .78 !important;
}

/* 10. Signup — unselected role/business pills, password requirements and the
   OR separator were still literal white/light gray. */
html[data-theme="dark"][data-refresh] .doft-signup-page .nav-pills.select-radio .nav-item .nav-link:not(.active) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .nav-pills.select-radio .nav-item .nav-link:not(.active):hover {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .separator-txt {
  border-color: var(--line-strong) !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .separator-txt span {
  color: var(--text-muted) !important;
  background: var(--canvas) !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .password-strength .bullets {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .password-strength .bullets li {
  color: #ff8d7a !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .password-strength .bullets li.done {
  color: #75d49e !important;
}
html[data-theme="dark"][data-refresh] .doft-signup-page .social-login button {
  background: var(--surface-alt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* 11. Login — the footer was a large white bar; social providers were white
   islands. Brand logos remain untouched inside subdued dark buttons. */
html[data-theme="dark"][data-refresh] .doft-login-page :is(.card, .card-body, .card-content, .card-footer, .login-box) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .card-footer {
  border-top: 1px solid var(--line) !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .social-login button {
  background: var(--surface-alt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .social-login button:is(:hover, :focus, :active) {
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .line-on-side {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .line-on-side span {
  color: var(--text-muted) !important;
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] .doft-login-page .card-title img {
  filter: brightness(0) invert(88%) !important;
  opacity: .88 !important;
}

/* 12. Private Loadboard — How-to-embed instructions and code block were a
   large bright sheet. */
html[data-theme="dark"][data-refresh] .doft-private-loadboard-page :is(
  .how-to-embed-block, .how-to-embed-block ol, .how-to-embed-block li,
  .how-to-embed-block pre, .how-to-embed-block code, #code-block
) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-private-loadboard-page .how-to-embed-block pre {
  border: 1px solid var(--line-strong) !important;
}
html[data-theme="dark"][data-refresh] .doft-private-loadboard-page .how-to-embed-block :is(strong, code, #code-block) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .doft-private-loadboard-page .checked-icon {
  background-color: var(--surface) !important;
}

/* 13. Post Shipment wizard — inactive step discs and neutral actions were
   literal white; active buttons also retained a red glow on :active. */
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .steps .step {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .steps li.current .step {
  color: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .steps li.done .step {
  color: var(--text-ondark) !important;
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .actions > ul > li:not(.disabled) > a:not([href="#next"]):not([href="#finish"]) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .actions > ul > li:not(.disabled) > a:not([href="#next"]):not([href="#finish"]):is(:hover, :focus, :active) {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .actions > ul > li > a:is(:active, :focus) {
  box-shadow: none !important;
  outline: 0 !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .actions > ul > li.disabled > a {
  color: var(--text-muted) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  opacity: .55 !important;
}
html[data-theme="dark"][data-refresh] #wizard.wizard-circle > .content > .body {
  border-color: var(--line) !important;
}

/* 14. Final icon contrast guard. Scope only legacy monochrome UI assets and
   font icons; do not invert logos, app badges, avatars, flags or card brands. */
html[data-theme="dark"][data-refresh] :is(
  .content-body, #dTable, #lTable, .settings-block, .form-body, #wizard
) :is(i[class*=" fa-"], i[class^="fa-"], i[class*=" ft-"], i[class^="ft-"]) {
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(
  .content-body, #dTable, #lTable, .settings-block, .form-body, #wizard
) img[src*="/assets/images/icons/ic_"]:not([src*="ic_si_"]):not([src*="app_"]):not([src*="logo"]):not([src*="flag"]):not([src*="card"]) {
  filter: brightness(0) invert(84%) sepia(7%) saturate(239%) hue-rotate(177deg) brightness(92%) contrast(90%) !important;
  opacity: .95 !important;
}