/* ==========================================================================
   DOFT dark-mode QA round 3 — load routes, map chrome, icons and empty states.
   Loaded after every page stylesheet and every earlier dated hotfix.
   ========================================================================== */

/* 1. Load-card route typography. refresh-loads.css historically used the
   light-only --gray-900 token, making origin/destination effectively black on
   dark cards. Keep the city, state and route arrow explicit and opaque. */
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) .cb-addr,
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) .cb-addr :is(.c-orig, .c-dest) {
  color: var(--text-body) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) .cb-addr .c-addr {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) .cb-addr .c-state {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) .cb-addr .c-dest::before {
  color: var(--red-600) !important;
  opacity: 1 !important;
}
/* Viewed rows must remain subdued but readable, never black-on-black. */
html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck).viewed .cb-addr .c-addr {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* 2. Full/LTL size glyphs. loads.css now uses SVG masks; these are the dark
   foreground and contrast guards. This removes the solid black square effect. */
html[data-theme="dark"][data-refresh] #dTable .c-sz,
html[data-theme="dark"][data-refresh] .recent-tbl .c-sz {
  color: #b8c0cb !important;
  background-color: currentColor !important;
  opacity: .92 !important;
  filter: none !important;
}
html[data-theme="dark"][data-refresh] #dTable :is(.viewed, .unposted) .c-sz {
  color: var(--text-muted) !important;
  opacity: .72 !important;
}

/* 3. Action/status icons on result rows. Legacy #555 and black SVG/font glyphs
   nearly disappear against #14171c. Neutral actions use body text; phone and
   AI actions retain the brand accent. */
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.c-bid, .c-book, .c-bookmark, .c-status) i,
html[data-theme="dark"][data-refresh] #dTable .t-head :is(.c-bid, .c-book, .c-bookmark, .c-status) i {
  color: var(--text-body) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}
/* ...but VIEWED/unposted rows keep the approved muted ink (darkmode.css 14.1). */
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck):is(.viewed, .unposted) :is(.c-bid, .c-book, .c-bookmark, .c-status) i {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body .c-contactlinks .phone-link {
  color: var(--red-600) !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body .c-contactlinks .phone-link :is(i, svg) {
  color: currentColor !important;
  fill: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body .c-contactlinks .phone-link:hover {
  color: #ff765c !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

/* Common legacy image icons that are monochrome-dark. Do not touch logos,
   avatars, card brands, flags or photos. */
html[data-theme="dark"][data-refresh] :is(.loads-page, .my-loads-page, .shipper-loads-page, .truck-page, .driver-page, .load-page)
  img[src*="/assets/images/icons/ic_"]:not([src*="si_"]):not([src*="app_"]):not([src*="pin_"]) {
  filter: brightness(0) invert(84%) sepia(7%) saturate(239%) hue-rotate(177deg) brightness(92%) contrast(90%) !important;
  opacity: .94 !important;
}

/* 4. Empty/loading result states. The legacy .tbl-progress has #eee borders,
   producing a bright rectangular frame when a search returns no loads. */
html[data-theme="dark"][data-refresh] #dTable .t-body > .tbl-progress,
html[data-theme="dark"][data-refresh] #dTable .tbl-progress,
html[data-theme="dark"][data-refresh] :is(.recent-nothing, .recent-progress, .dataTables_empty, .dt-empty, .dt-error) {
  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] #dTable .t-body:has(> .tbl-progress:only-child) {
  min-height: 54px;
  color: var(--text-muted) !important;
  background: var(--surface) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #dTable:has(.t-body > .tbl-progress:only-child) {
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* 5. Mobile result cards: no bright halo around each card or its expanded
   panel. Keep a quiet border as the only separation. */
@media (max-width: 991px) {
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck) {
    color: var(--text-body) !important;
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck):not(.expanded):is(:hover, :active, .wow-rowfocus) {
    background: var(--surface-alt) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck).expanded,
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck).expanded + * {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  /* VIEWED mobile cards: approved 14.1 semantics (muted = lighter surface-alt);
     without this, 0725's --surface-sunken wins and inverts the shades. */
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck).viewed {
    background: var(--surface-alt) !important;
    color: var(--text-muted) !important;
  }
}

/* 6. HERE/Google map canvas and chrome. The actual HERE base layer is selected
   by map-theme.js; these rules prevent white flashes, white bubbles and dark
   control glyphs while tiles are loading or when controls are opened. */
html[data-theme="dark"][data-refresh] :is(
  #map,
  #map-pu,
  #drivers_map,
  [id^="map_"],
  .wow-mappane,
  .H_map,
  .gm-style
) {
  background-color: #0c0e12 !important;
}
/* NOTE (2026-07-27, merge): .H_ui / .H_l_left / .H_l_right deliberately
   EXCLUDED from this paint list — they are full-size layout containers and an
   opaque background here hides the map (the "black slab" regression fixed in
   ce8a35f8). Only real widgets are painted. */
html[data-theme="dark"][data-refresh] :is(
  .H_ui .H_btn,
  .H_ui .H_mapsettings,
  .H_ui .H_rdo_buttons,
  .H_ui .H_bubble,
  .H_ib,
  .H_ib_body,
  .H_ib_content,
  .gm-style .gm-style-iw,
  .gm-style .gm-style-iw-c,
  .gm-style .gm-style-iw-d
) {
  color: var(--text-body) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .H_ib_tail :is(svg, polygon, path) {
  fill: var(--surface) !important;
  stroke: var(--line) !important;
  /* no background here: it would paint the svg root's rectangular CSS box
     over the map (same slab family as the .H_ui paint bug). */
}
html[data-theme="dark"][data-refresh] .gm-style .gm-style-iw-tc::after {
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] .H_ui .H_btn :is(svg, path, polygon, circle, line),
html[data-theme="dark"][data-refresh] .gm-style button :is(svg, path, polygon, circle, line) {
  color: var(--text-body) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] .H_ui .H_btn img,
html[data-theme="dark"][data-refresh] .gm-style button img {
  filter: brightness(0) invert(85%) !important;
  opacity: .95 !important;
}
html[data-theme="dark"][data-refresh] .H_ui :is(.H_btn:hover, .H_btn:focus, .H_btn:active),
html[data-theme="dark"][data-refresh] .gm-style button:is(:hover, :focus, :active) {
  color: var(--text) !important;
  background-color: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.map-content, .doft-map-popup, .doft-map-popup *) {
  border-color: var(--line) !important;
  text-shadow: none !important;
}

/* 7. Final anti-glare guard for the affected load/map surfaces only. */
html[data-theme="dark"][data-refresh] :is(.loads-page, .my-loads-page, .shipper-loads-page, .load-page, .truck-page, .driver-page)
  :is(.card, .panel, .wrp, .tbl-filter, .map-wrp, .map-block, .modal-content, .dropdown-menu) {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .my-loads-page, .shipper-loads-page, .load-page, .truck-page, .driver-page)
  :is(button, .btn, a, input, select, textarea, .form-control):is(:focus, :active, :focus-visible) {
  box-shadow: none !important;
  text-shadow: none !important;
}