/*
 * DOFT Dark Mode screenshot fixes — Round 5 (2026-07-28)
 * Grounded in Driver + Shipper screenshots from 22.zip.
 * This file intentionally loads after all page CSS and previous hotfix layers.
 */

/* --------------------------------------------------------------------------
   Structural fixes shared by light and dark themes
   -------------------------------------------------------------------------- */

/* Notifications: the date input and calendar addon are one joined control. */
html[data-refresh] .notifications-settings-page #pauseUntil {
  display: inline-flex !important;
  align-items: stretch !important;
  width: 154px !important;
  max-width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
html[data-refresh] .notifications-settings-page #pauseUntil .until-date {
  flex: 1 1 auto !important;
  width: 116px !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 7px 9px !important;
  border-right: 0 !important;
  border-radius: 5px 0 0 5px !important;
  box-sizing: border-box !important;
}
html[data-refresh] .notifications-settings-page #pauseUntil .input-group-append {
  position: static !important;
  display: flex !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
}
html[data-refresh] .notifications-settings-page #pauseUntil .time-addon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  box-sizing: border-box !important;
}

/* Accordion/card radii: clip child backgrounds so square corners cannot leak. */
/* merge note: NO overflow clip on the notifications accordion — the eonasdan
   datetimepickers (#pauseUntil/#timeFrom/#timeTo) render INSIDE it and an
   overflow:hidden makes the calendar unclickable in both themes. The corner
   leak is handled by the per-child radius rules below. */
html[data-refresh] .notifications-settings-page .accordeon {
  border-radius: 10px !important;
  background-clip: padding-box !important;
}
html[data-refresh] .settings-billing-page .card {
  border-radius: 10px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  isolation: isolate !important;
}
html[data-refresh] .notifications-settings-page .accordeon > .panel-heading {
  border-radius: 10px 10px 0 0 !important;
}
html[data-refresh] .notifications-settings-page .accordeon > .panel-heading.collapsed {
  border-radius: 10px !important;
}
html[data-refresh] .notifications-settings-page .accordeon > .panel-collapse,
html[data-refresh] .notifications-settings-page .accordeon > .panel-collapse > .panel-body {
  border-radius: 0 0 10px 10px !important;
}
html[data-refresh] .settings-billing-page .card > .card-content,
html[data-refresh] .settings-billing-page .card > .card-content > .card-body,
html[data-refresh] .settings-billing-page .card .media {
  min-height: 100% !important;
  border-radius: inherit !important;
  background-clip: padding-box !important;
}

/* Driver load list: equal-size action buttons with a shared visual baseline. */
html[data-refresh] body #dTable .t-body .b-load .cb-contactlinks,
html[data-refresh] body #dTable .t-body .b-load .c-contactlinks {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
html[data-refresh] body #dTable .t-body .b-load .c-contactlinks .phone-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
html[data-refresh] body #dTable .t-body .b-load .c-contactlinks .phone-link > i {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Expanded load: Contact and Phone headers/values align; AI stays beside Phone. */
html[data-refresh] .linfo-row.contact-phone-row {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px 28px !important;
}
html[data-refresh] .linfo-row.contact-phone-row > .linfo {
  align-self: flex-start !important;
  margin-top: 0 !important;
}
html[data-refresh] .linfo-row.contact-phone-row .hdr {
  min-height: 20px !important;
  margin: 0 0 4px !important;
  line-height: 20px !important;
}
html[data-refresh] .linfo-row.contact-phone-row .val {
  min-height: 32px !important;
  margin-top: 0 !important;
}
html[data-refresh] .linfo-row.contact-phone-row .phone-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html[data-refresh] .linfo-row.contact-phone-row .phone-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 31px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Post Truck destination state selector: one clean rectangular end-cap. */
html[data-refresh] .post-truck-page .addr-states-block {
  align-items: stretch !important;
}
html[data-refresh] .post-truck-page .addr-states-block > .form-control,
html[data-refresh] .post-truck-page .addr-states-block input.form-control {
  border-right: 0 !important;
  border-radius: 5px 0 0 5px !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-native-select {
  position: relative !important;
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 38px !important;
  margin: 0 !important;
  border: 1px solid var(--line, #cfd2d8) !important;
  border-left-width: 1px !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--surface, #fff) !important;
  box-sizing: border-box !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-native-select > .btn-group,
html[data-refresh] .post-truck-page .addr-states-block .multiselect-native-select button.btn-st,
html[data-refresh] .post-truck-page .addr-states-block .multiselect-native-select .multiselect-selected-text {
  width: 100% !important;
  height: 100% !important;
}
html[data-refresh] .post-truck-page .addr-states-block button.btn-st {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  box-shadow: none !important;
}
html[data-refresh] .post-truck-page .addr-states-block .caret-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html[data-refresh] .post-truck-page .addr-states-block .caret-container .caret {
  margin: 0 !important;
}

/* Post Load option cards: reserve a real checkbox column before icon/text. */
html[data-refresh] .shipper-post-load-page .feature .f-ttl {
  position: relative !important;
  min-height: 62px !important;
  padding-left: 14px !important;
}
html[data-refresh] .shipper-post-load-page .feature .icheckbox_square-red {
  position: absolute !important;
  top: 16px !important;
  left: 14px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2 !important;
}
html[data-refresh] .shipper-post-load-page .feature .f-r-block {
  min-width: 0 !important;
  padding-left: 42px !important;
}
html[data-refresh] .shipper-post-load-page .feature .f-ttl-lbl,
html[data-refresh] .shipper-post-load-page .feature .f-desc {
  min-width: 0 !important;
}

/* Bulk weight + TL/LTL selector: keep the caret in its own right-side space. */
html[data-refresh] .bulk-post-page .weight-block .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 150px !important;
}
html[data-refresh] .bulk-post-page .weight-block .weight {
  flex: 1 1 auto !important;
  width: 88px !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 4px 0 0 4px !important;
}
html[data-refresh] .bulk-post-page .weight-block .bootstrap-select,
html[data-refresh] .bulk-post-page .weight-block .load-size {
  flex: 0 0 62px !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  margin: 0 !important;
}
html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle,
html[data-refresh] .bulk-post-page .load-size button {
  position: relative !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 24px 0 10px !important;
  border-radius: 0 4px 4px 0 !important;
  box-shadow: none !important;
}
html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle::after,
html[data-refresh] .bulk-post-page .load-size button::after {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
html[data-refresh] .bulk-post-page .weight-block .filter-option,
html[data-refresh] .bulk-post-page .weight-block .filter-option-inner,
html[data-refresh] .bulk-post-page .weight-block .filter-option-inner-inner {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Shipper mobile trucks: truncate long company/contact names instead of clipping. */
@media (max-width: 767px) {
  html[data-refresh] body #dTable .t-body .b-truck .cb-contact {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: calc(100% - 42px) !important;
    overflow: hidden !important;
  }
  html[data-refresh] body #dTable .t-body .b-truck .c-company,
  html[data-refresh] body #dTable .t-body .b-truck .c-contact {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-refresh] body #dTable .t-body .b-truck .cb-contactlinks {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
  }
}

/* My Shipments header checkbox aligns to the visual center of the row. */
html[data-refresh] body #dTable .t-head .cb-select,
html[data-refresh] body #dTable .t-head .cb-select .c-select {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-refresh] body #dTable .t-head .cb-select input[type="checkbox"],
html[data-refresh] body #dTable .t-head .cb-select .icheckbox_square-red {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
}

/* Mobile Driver cards: clean selection header, centered checkbox, intact radii.
   merge note: 991px, not 767 — the select-all header exists up to 991px
   (pages/loads.css @media max-width:991px paints the #eee border there). */
@media (max-width: 991px) {
  html[data-refresh] body.ai-call-enabled .loads-page #dTable {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-refresh] body.ai-call-enabled .loads-page #dTable .t-head:has(.ai-call-selall) {
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  html[data-refresh] body #dTable .t-body .b-load {
    border-radius: 14px !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
  }
  html[data-refresh] body #dTable .t-body .b-load .cb-time {
    align-items: center !important;
  }
  html[data-refresh] body #dTable .t-body .b-load .ai-call-cb-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[data-refresh] body #dTable .t-body .b-load .ai-call-cb {
    margin: 0 !important;
    vertical-align: middle !important;
  }
}

/* --------------------------------------------------------------------------
   Dark theme visual fixes
   -------------------------------------------------------------------------- */

html[data-theme="dark"][data-refresh] .notifications-settings-page #pauseUntil .until-date,
html[data-theme="dark"][data-refresh] .notifications-settings-page #pauseUntil .time-addon {
  color: var(--text, #f3f5f7) !important;
  -webkit-text-fill-color: var(--text, #f3f5f7) !important;
  background: var(--surface-sunken, #111419) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}

/* Password suggestions in Profile and public reset/recovery pages. */
html[data-theme="dark"][data-refresh] .settings-profile-page .password-strength .bullets,
html[data-theme="dark"][data-refresh] .doft-password-page .password-strength .bullets {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-raised, #1a1e25) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .settings-profile-page .password-strength .bullets li,
html[data-theme="dark"][data-refresh] .doft-password-page .password-strength .bullets li {
  color: var(--text-muted, #aeb5c0) !important;
}
html[data-theme="dark"][data-refresh] .settings-profile-page .password-strength .bullets li.done,
html[data-theme="dark"][data-refresh] .doft-password-page .password-strength .bullets li.done {
  color: var(--text, #f3f5f7) !important;
}
/* merge note: .doft-password-page sits ON .content-body — page scaffold is
   NEVER opaque-painted (the gray-slab regression class); only true cards. */
html[data-theme="dark"][data-refresh] .doft-password-page .login-box,
html[data-theme="dark"][data-refresh] .doft-password-page .card,
html[data-theme="dark"][data-refresh] .doft-password-page .card-title,
html[data-theme="dark"][data-refresh] .doft-password-page .card-content,
html[data-theme="dark"][data-refresh] .doft-password-page .card-body,
html[data-theme="dark"][data-refresh] .doft-password-page .card-footer {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-password-page .card {
  border-radius: 12px !important;
  overflow: hidden !important;
}
html[data-theme="dark"][data-refresh] .doft-password-page .line-on-side::before,
html[data-theme="dark"][data-refresh] .doft-password-page .line-on-side::after {
  border-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] .doft-password-page .line-on-side > span {
  color: var(--text-muted, #aeb5c0) !important;
  background: var(--surface, #15191f) !important;
}
html[data-theme="dark"][data-refresh] .doft-password-page .card-title img {
  filter: brightness(0) invert(1) !important;
  opacity: .88 !important;
}

/* Accordion and billing panels: no square child backgrounds or bright seams. */
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon,
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon > .panel-heading,
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon .panel-collapse,
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon .panel-body,
html[data-theme="dark"][data-refresh] .settings-billing-page .card,
html[data-theme="dark"][data-refresh] .settings-billing-page .card-content,
html[data-theme="dark"][data-refresh] .settings-billing-page .card-body,
html[data-theme="dark"][data-refresh] .settings-billing-page .card .media {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon .info-block,
html[data-theme="dark"][data-refresh] .notifications-settings-page .accordeon .conf,
/* merge note: the bundle's .settings-billing-page .pm-info/.debit-card-desc
   rules were INERT (those live in dialogs included outside the scope) —
   dropped; darkmode.css 14.5/14.6 already themes the dialogs. */

/* Fresh loads are darkest; viewed loads become visibly lighter/gray. */
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed),
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed).new,
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed).selected {
  color: var(--text, #f3f5f7) !important;
  background-color: #0d1014 !important;
  opacity: 1 !important;
}
/* merge note: hover keeps a subtle lift WITHOUT crossing the viewed shade —
   the bundle froze hover entirely, which killed the row affordance. */
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed):hover {
  color: var(--text, #f3f5f7) !important;
  background-color: #14181e !important;
  opacity: 1 !important;
}
/* merge note: semantic tints survive the fresh-row blanket — gold (paid
   Featured Listing) and new (teal) re-asserted over #0d1014. */
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed).new {
  background-color: #0d1014 !important;
  background-image: linear-gradient(rgba(20, 184, 166, .10), rgba(20, 184, 166, .10)) !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed).gold {
  background-color: #0d1014 !important;
  background-image: linear-gradient(rgba(245, 183, 49, .10), rgba(245, 183, 49, .10)) !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load.viewed,
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load.viewed.selected {
  color: var(--text-muted, #b4bbc5) !important;
  background-color: #252a32 !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load.viewed:hover {
  color: var(--text-muted, #b4bbc5) !important;
  background-color: #2a303a !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load.viewed :is(.c-addr,.c-state,.c-company,.c-pu,.c-dist,.c-weight,.c-eq,.c-price,.c-date,.c-size),
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load.viewed :is(.c-addr,.c-state,.c-company,.c-pu,.c-dist,.c-weight,.c-eq,.c-price,.c-date,.c-size) a {
  color: var(--text-muted, #b4bbc5) !important;
  -webkit-text-fill-color: var(--text-muted, #b4bbc5) !important;
}
/* merge note: only PRIMARY cells go full-bright on fresh rows — .c-state,
   .c-company etc keep round3/0725's muted hierarchy. */
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed) :is(.c-addr, .c-price),
html[data-theme="dark"][data-refresh] body #dTable .t-body .b-load:not(.viewed) :is(.c-addr, .c-price) a {
  color: var(--text, #f3f5f7) !important;
  -webkit-text-fill-color: var(--text, #f3f5f7) !important;
}

/* Multi-shipper +N badge. */
html[data-theme="dark"][data-refresh] .company-ms-block.multiselect-selected-count,
html[data-theme="dark"][data-refresh] .multiselect-selected-count {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-raised, #20252d) !important;
  border: 1px solid var(--line, #343a44) !important;
  box-shadow: none !important;
}

/* Notification detail HTML is server-authored and may carry light inline styles. */
html[data-theme="dark"][data-refresh] .doft-notification-page,
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content,
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content :is(section, article, div, table, tbody, tr, td, th, p, span) {
  color: var(--text, #f3f5f7) !important;
  border-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content :is(section, article, div, table, tbody, tr, td, th)[style*="background"],
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content :is(.bg-white, .bg-light, .card, .panel, .well) {
  background: var(--surface, #15191f) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content input,
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content textarea,
html[data-theme="dark"][data-refresh] .doft-notification-page .notification-content select {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-sunken, #111419) !important;
  border-color: var(--line, #343a44) !important;
}

/* Household marketing document: eliminate inherited white slabs; keep icons legible. */
html[data-theme="dark"][data-refresh] .doft-household-document,
html[data-theme="dark"][data-refresh] .doft-household-document :is(section, article, .container, .container-fluid, .row, .bg-white, .bg-light),
html[data-theme="dark"][data-refresh] .doft-household-document :is(section, article, div)[style*="background-color: white"],
html[data-theme="dark"][data-refresh] .doft-household-document :is(section, article, div)[style*="background-color:#fff"],
html[data-theme="dark"][data-refresh] .doft-household-document :is(section, article, div)[style*="background-color: #fff"] {
  color: var(--text, #f3f5f7) !important;
  background: transparent !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-household-document :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,b) {
  color: inherit !important;
}
html[data-theme="dark"][data-refresh] .doft-household-document :is(.card, .feature, .service, .service-box, .feature-box) {
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .doft-household-document img[src*="icon"],
html[data-theme="dark"][data-refresh] .doft-household-document img[src*="/icons/"] {
  filter: brightness(0) invert(1) !important;
  opacity: .86 !important;
}

/* Public Find Loads ad/result panels. */
html[data-theme="dark"][data-refresh] .find-results,
html[data-theme="dark"][data-refresh] .find-results .doft-findloads-ad,
html[data-theme="dark"][data-refresh] .find-results .doft-findloads-ad :is(section, article, div, table),
html[data-theme="dark"][data-refresh] .find-results .find-loads-page,
html[data-theme="dark"][data-refresh] .find-results #lTable,
html[data-theme="dark"][data-refresh] .find-results #lTable .t-head,
html[data-theme="dark"][data-refresh] .find-results #lTable .t-body,
html[data-theme="dark"][data-refresh] .find-results #lTable .b-load,
html[data-theme="dark"][data-refresh] .gray-wrapper,
html[data-theme="dark"][data-refresh] .other-ct .accordion {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .find-results .doft-findloads-ad :is(section, article, div)[style*="background"],
html[data-theme="dark"][data-refresh] .find-results .doft-findloads-ad :is(.bg-white, .bg-light) {
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] .find-results :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,b),
html[data-theme="dark"][data-refresh] .find-results #lTable .c,
html[data-theme="dark"][data-refresh] .find-results #lTable .c * {
  color: var(--text, #f3f5f7) !important;
  -webkit-text-fill-color: var(--text, #f3f5f7) !important;
}
html[data-theme="dark"][data-refresh] .find-results .eq-block a,
html[data-theme="dark"][data-refresh] .find-results .srch-results,
html[data-theme="dark"][data-refresh] .find-results .srch-results li {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-raised, #1b2028) !important;
  border-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] .find-results .eq-block a.active,
html[data-theme="dark"][data-refresh] .find-results .eq-block a:hover,
html[data-theme="dark"][data-refresh] .find-results .srch-results li:hover,
html[data-theme="dark"][data-refresh] .find-results .srch-results li a:is(:hover, :focus) {
  background: var(--surface-hover, #272d36) !important;
}

/* Shipper loading skeletons must not flash white during tab changes. */
html[data-theme="dark"][data-refresh] .skeleton-rows .sk-row {
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .skeleton-rows .sk-cell,
html[data-theme="dark"][data-refresh] #progrBlock::before,
html[data-theme="dark"][data-refresh] .tbl-progress::before {
  border-color: var(--line, #343a44) !important;
  background-color: #171b21 !important;
  background-image: linear-gradient(90deg, #171b21 0, #252b34 48%, #171b21 100%) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .tbl-progress,
html[data-theme="dark"][data-refresh] #progrBlock {
  color: var(--text-muted, #aeb5c0) !important;
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}

/* Shipper notification and bulk post surfaces. */
html[data-theme="dark"][data-refresh] .bulk-post-page .load-inner,
html[data-theme="dark"][data-refresh] .bulk-post-page .input-group-text,
html[data-theme="dark"][data-refresh] .bulk-post-page .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"][data-refresh] .bulk-post-page .load-size button,
html[data-theme="dark"][data-refresh] .shipper-post-load-page .feature,
html[data-theme="dark"][data-refresh] .shipper-post-load-page .feature .f-block {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .shipper-post-load-page .feature .f-ttl {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-alt, #1a1e25) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .shipper-post-load-page .feature .f-desc,
html[data-theme="dark"][data-refresh] .shipper-post-load-page .feature .f-ttl-lbl small,
html[data-theme="dark"][data-refresh] .bulk-post-page label {
  color: var(--text-muted, #aeb5c0) !important;
}

/* Remove all red/white focus glows introduced by legacy option controls. */
html[data-refresh] .shipper-post-load-page .feature:focus,
html[data-refresh] .shipper-post-load-page .feature:focus-within,
html[data-refresh] .bulk-post-page :is(input,select,button):focus,
html[data-refresh] .post-truck-page .addr-states-block button:focus {
  outline: none !important;
  box-shadow: none !important;
}