/*
 * DOFT UI screenshot hotfix — review pass 2, 2026-07-25.
 * Keep this file LAST, after page-specific CSS and the first hotfix layer.
 * Scope: remaining waypoint geometry and dark-mode regressions visible in QA set 11.
 */

/* ==========================================================================
   1. Waypoints: Pick Up / Drop Off must be a real, self-contained control.
   Legacy load-post.css gives .wp-type max-width:80px and margin-left:-7px;
   bootstrap-select then absolutely positions .filter-option at width:100%.
   The result is text/caret collision and a label that visually overlaps the
   address field. Give the generated bootstrap-select wrapper explicit geometry.
   ========================================================================== */
html[data-refresh] .waypoint .bootstrap-select.wp-type {
  display: block !important;
  position: relative !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 0 7px 0 !important;
  overflow: visible !important;
  vertical-align: top !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 28px 0 8px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line, #d9dde3) !important;
  border-radius: 6px !important;
  background: var(--surface-alt, #f5f6f8) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle .filter-option {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle :is(.filter-option-inner, .filter-option-inner-inner) {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle::after {
  top: 50% !important;
  right: 9px !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
html[data-refresh] .waypoint [id$="lpTypeBlock"] {
  min-height: 37px !important;
}

/* ==========================================================================
   2. Dark form fields: remove bright white rings and use one quiet gray system.
   This is deliberately scoped to working forms/filters, not every button/link.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .tbl-filter,
  .search-filter,
  .ctrl-block,
  .waypoint,
  .price,
  .add-card-block,
  .chat-app-form,
  .filter-block,
  .filters-block
) :is(
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle,
  .input-group-text
) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html[data-theme="dark"][data-refresh] :is(
  .tbl-filter,
  .search-filter,
  .ctrl-block,
  .waypoint,
  .price,
  .add-card-block,
  .chat-app-form,
  .filter-block,
  .filters-block
) :is(
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle
):focus {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 0 0 2px rgba(241, 41, 8, .12) !important;
}
html[data-theme="dark"][data-refresh] :is(.input-group-prepend, .input-group-append) :is(.btn, .input-group-text) {
  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] input::placeholder,
html[data-theme="dark"][data-refresh] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] select option {
  color: var(--text) !important;
  background: var(--surface) !important;
}

/* ==========================================================================
   3. Bootstrap Select / multiselect / native option popups.
   Page CSS was recoloring only the closed button, leaving the opened menu white.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .bootstrap-select .dropdown-menu,
  .bootstrap-select .dropdown-menu.inner,
  .multiselect-container.dropdown-menu,
  .dropdown-menu.show
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-select, .multiselect-container) :is(.bs-searchbox, .bs-actionsbox, .bs-donebutton) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .bootstrap-select .bs-searchbox .form-control {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-select .dropdown-menu, .multiselect-container) :is(li, a, label, span.text) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-select .dropdown-menu, .multiselect-container) a {
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-select .dropdown-menu, .multiselect-container) :is(li.active > a, a.active, a:hover, a:focus) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .bootstrap-select :is(.no-results, .notify) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .dropdown-divider {
  border-color: var(--line) !important;
}

/* ==========================================================================
   4. iCheck controls: replace the bright sprite/glare with true CSS controls.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .icheckbox_minimal,
  .icheckbox_square-red,
  .iradio_minimal,
  .iradio_square-red
) {
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--surface-sunken) !important;
  background-image: none !important;
  border: 1.5px solid #697381 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_minimal, .icheckbox_square-red) {
  border-radius: 4px !important;
}
html[data-theme="dark"][data-refresh] :is(.iradio_minimal, .iradio_square-red) {
  border-radius: 50% !important;
}
html[data-theme="dark"][data-refresh] :is(
  .icheckbox_minimal.hover,
  .icheckbox_square-red.hover,
  .iradio_minimal.hover,
  .iradio_square-red.hover
) {
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] :is(
  .icheckbox_minimal.checked,
  .icheckbox_square-red.checked,
  .iradio_minimal.checked,
  .iradio_square-red.checked
) {
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_minimal.checked, .icheckbox_square-red.checked)::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
html[data-theme="dark"][data-refresh] :is(.iradio_minimal.checked, .iradio_square-red.checked)::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  background: #fff !important;
  border-radius: 50% !important;
}

/* ==========================================================================
   5. Post/Edit Shipment feature cards: Reach, Audience, Placement, Price,
   Extra Options. Remove white islands, inset white fields and heavy shadows.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(.feature, .feature.static) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .feature :is(.f-ttl, .f-block, .f-r-block) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .feature .f-ttl {
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .feature :is(.f-ttl-lbl, .f-desc, .f-desc p, .f-desc li, label) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .feature :is(small, .sub-desc) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .feature hr {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.feature:hover, .feature.checked) {
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .feature.checked .f-ttl {
  box-shadow: inset 3px 0 0 var(--red-600) !important;
}
/* NB: bare `.price` removed — it is a heavily reused token (Premium $/mo pills,
   the loads "Average rate:" figure, the trucks price filter) and directly
   coloring it boxed/dimmed those price figures in dark. The load-post Delivery
   Price is a bare <div class="price"> with no light background of its own (its
   INPUTS are already covered by section 2's `.price` ancestor), so dropping it
   here loses nothing and kills the leak. */
html[data-theme="dark"][data-refresh] :is(.price-block, .delivery-price, .extra-options) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.dropzone, .dropzone-box, .dz-message) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   6. Rate Forecast + Fuel Costs: all computed values and labels must be legible.
   Replace boxed white grid with quiet row separators.
   ========================================================================== */
html[data-theme="dark"][data-refresh] .res-table {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}
html[data-theme="dark"][data-refresh] .res-table :is(tbody, tr) {
  color: var(--text-body) !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] .res-table :is(th, td) {
  color: var(--text-body) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .res-table tr:last-child > :is(th, td) {
  border-bottom: 0 !important;
}
html[data-theme="dark"][data-refresh] .res-table th {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .res-table td,
html[data-theme="dark"][data-refresh] :is(#distInf, #dateInf, #sizeInf, #rateInf, #priceInf, #fuelInf, #totalInf, #mpgInf) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] #rateInf {
  color: #ff7259 !important;
}
html[data-theme="dark"][data-refresh] #totalInf {
  color: #58d68d !important;
}
html[data-theme="dark"][data-refresh] .res-table :is(.sub-desc, .mpg) {
  color: var(--text-muted) !important;
}

/* Rate Forecast's embedded datepicker, including its plain calendar cells. */
html[data-theme="dark"][data-refresh] :is(
  .bootstrap-datetimepicker-widget,
  .bootstrap-datetimepicker-widget .datepicker,
  .bootstrap-datetimepicker-widget table,
  .rc-dp,
  .rc-dp .datepicker,
  .rc-dp table
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .bootstrap-datetimepicker-widget table :is(th, td),
html[data-theme="dark"][data-refresh] .rc-dp table :is(th, td) {
  color: var(--text-body) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp) table thead tr:first-child th {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp) table :is(th:hover, td.day:hover, td span:hover) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp) table :is(td.active, td.active:hover, span.active) {
  color: #fff !important;
  background: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp) table :is(.old, .new, .disabled) {
  color: var(--text-muted) !important;
  opacity: .45 !important;
}
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp) td.today::before {
  border-bottom-color: var(--red-600) !important;
}

/* Date-range picker used in Search Loads/Trucks. */
html[data-theme="dark"][data-refresh] .daterangepicker,
html[data-theme="dark"][data-refresh] .daterangepicker :is(.calendar-table, .drp-calendar, .drp-buttons, .ranges) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker::before {
  border-bottom-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker::after {
  border-bottom-color: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker :is(th, td) {
  color: var(--text-body) !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker :is(td.available:hover, th.available:hover, .ranges li:hover) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker td.in-range {
  color: var(--text) !important;
  background: rgba(241, 41, 8, .15) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker :is(td.active, td.active:hover, .ranges li.active) {
  color: #fff !important;
  background: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker :is(td.off, td.off.in-range, td.off.start-date, td.off.end-date) {
  color: var(--text-muted) !important;
  background: var(--surface-sunken) !important;
  opacity: .55 !important;
}
html[data-theme="dark"][data-refresh] .daterangepicker :is(select, input) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}

/* ==========================================================================
   7. Desktop result tables: remove the white cell-by-cell grid (“Christmas tree”).
   Keep only one header separator and one subtle separator between records.
   Mobile cards are intentionally untouched.
   ========================================================================== */
@media (min-width: 992px) {
  html[data-theme="dark"][data-refresh] #dTable {
    color: var(--text-body) !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-head {
    color: var(--text-muted) !important;
    background: var(--surface-sunken) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-head :is(.cb, .c),
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver) :is(.cb, .c) {
    border: 0 !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver) {
    color: var(--text-body) !important;
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  /* the de-grid `border: 0` above also wiped the featured/gold left-edge marker
     (loads.css `.b-load.gold { border-left: 4px gold }`, not !important) — restore
     it for gold rows so the featured affordance survives in dark desktop. */
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).gold { border-left: 4px solid gold !important; }
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver):last-child {
    border-bottom: 0 !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver):hover {
    background: var(--surface-alt) !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver).expanded {
    background: var(--surface-alt) !important;
    border-color: var(--line) !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck, .b-driver).expanded + * {
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] #dTable :is(.t-head, .t-body) :is(.c, .cb, span, label, a:not(.btn)) {
    border-color: var(--line) !important;
  }
}

/* ==========================================================================
   8. Payment methods + Add Card + Stripe Element.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(.payment-methods, .pm-list, .add-card-block, #pm_wrapper) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] .payment-methods :is(.change-pm, .pm-item, .nav-link),
html[data-theme="dark"][data-refresh] .pm-list :is(.pm-item, .nav-link) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.payment-methods, .pm-list) :is(.nav-link.active, .show > .nav-link, .pm-item.active, .change-pm:hover, .pm-item:hover) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] :is(.payment-methods, .pm-list) :is(.pm-def, .pm-default, .expire, small) {
  color: var(--text-muted) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .add-card-block h4 {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .add-card-block fieldset {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .add-card-block fieldset label {
  color: var(--text-body) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .add-card-block :is(span.hdr, .payment-info, .card-info, .help-text) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .add-card-block :is(
  .field,
  input,
  select,
  .country-block,
  .us-states-block,
  #card-element,
  [id^="card-element"]
) {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .jconfirm .jconfirm-bg {
  background: #05070a !important;
  opacity: .78 !important;
}
html[data-theme="dark"][data-refresh] .jconfirm .jconfirm-box {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55) !important;
}

/* ==========================================================================
   9. Questions & Answers: legacy load.css hard-codes the whole app window white.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .chat-application,
  .chat-application .content-body,
  .chat-application .content-wrapper,
  .chat-application .app-content,
  .chat-application .content-right,
  .chat-application .chat-app-window,
  .qas-wrp
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .chat-application :is(.content-shadow, .chat-app-window) {
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chat-app-form {
  color: var(--text-body) !important;
  background: var(--surface-sunken) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats.qas .chat-content {
  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] .chat-application .chats.qas .chat-content::before {
  border-right-color: var(--surface-alt) !important;
  border-left-color: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats.qas .qas-item {
  color: var(--text-body) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats.qas .qas-item :is(.item-ttl, .item-ttl-label, .item-text) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats.qas .qas-item :is(.item-ttl-time, .msg-time) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chat-app-input :is(input, textarea, .form-control) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   10. HERE map chrome. Tile darkness is selected in map-theme.js; this section
   prevents the map controls/bubbles themselves from remaining bright white.
   ========================================================================== */
/* NOTE: .H_ui and .H_l_left/.H_l_right must stay UNPAINTED — they are
   full-size/full-height LAYOUT containers, not widgets; giving them a surface
   background blacked out a slab of the map (2026-07-27 shipper screenshots).
   Only the actual controls/bubbles get dark chrome. */
html[data-theme="dark"][data-refresh] :is(
  .H_ui .H_btn,
  .H_ui .H_ctl,
  .H_ui .H_mapsettings,
  .H_ui .H_rdo_buttons,
  .H_ui .H_bubble,
  .H_ui .H_ib_body,
  .gm-style .gm-style-iw-c,
  .gm-style .gm-style-iw-d
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.H_ui, .gm-style) button {
  color: var(--text-body) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .gm-style .gm-style-iw-tc::after {
  background: var(--surface) !important;
}

/* Safari/WebKit autofill itself, unlike the browser-owned suggestion popup. */
html[data-theme="dark"][data-refresh] input:-webkit-autofill,
html[data-theme="dark"][data-refresh] input:-webkit-autofill:hover,
html[data-theme="dark"][data-refresh] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface-alt) inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* Remaining native/custom checks that are not converted by iCheck. */
html[data-theme="dark"][data-refresh] input[type="checkbox"],
html[data-theme="dark"][data-refresh] input[type="radio"] {
  color-scheme: dark !important;
  accent-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] .custom-control-label::before {
  background: var(--surface-sunken) !important;
  border-color: #697381 !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] :is(.badge-light, .badge-secondary, .label-default) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] #estFuelCostsInf {
  color: var(--text) !important;
}

/* Search Trucks recent-search table uses .recent-tbl instead of #dTable. */
@media (min-width: 992px) {
  html[data-theme="dark"][data-refresh] .recent-tbl {
    color: var(--text-body) !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] .recent-tbl .t-head {
    color: var(--text-muted) !important;
    background: var(--surface-sunken) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  html[data-theme="dark"][data-refresh] .recent-tbl :is(.t-head, .r-item) :is(.cb, .c) {
    border: 0 !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] .recent-tbl .r-item {
    color: var(--text-body) !important;
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  html[data-theme="dark"][data-refresh] .recent-tbl .r-item:last-child {
    border-bottom: 0 !important;
  }
  html[data-theme="dark"][data-refresh] .recent-tbl .r-item:hover {
    background: var(--surface-alt) !important;
  }
}