/*
 * DOFT UI screenshot hotfix — 2026-07-25.
 * Loaded from footer.jsp AFTER all page-specific styles. This file exists because
 * many JSP pages append their own CSS after refresh.css, so otherwise legacy
 * hard-coded white backgrounds and caret offsets win the cascade.
 */

/* --------------------------------------------------------------------------
   1. Shipper split-button carets: Post Shipment / Edit
   Safari-safe geometric centering, independent of font baseline/line-height.
   -------------------------------------------------------------------------- */
html[data-refresh] .btn-group > :is(.btn-doft, .btn-doft-2).dropdown-toggle-split {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}
html[data-refresh] .btn-group > :is(.btn-doft, .btn-doft-2).dropdown-toggle-split::after {
  content: "\f107" !important;
  font-family: "Font Awesome 5 Pro" !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1 !important;
  vertical-align: initial !important;
  transform: none !important;
}

/* Waypoints -> Pick Up / Drop Off select. Keep the label and chevron in two
   independent regions so the chevron cannot sit on the text baseline. */
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 24px 0 6px !important;
}
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle .filter-option,
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle .filter-option-inner,
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1.2 !important;
}
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle::after {
  content: "\f107" !important;
  font-family: "Font Awesome 5 Pro" !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  bottom: auto !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 12px !important;
  transform: translateY(-50%) !important;
}

/* --------------------------------------------------------------------------
   2. Post Shipment Audience / Placement radios
   The legacy page paints .iradio_minimal white. Draw a real visible control.
   -------------------------------------------------------------------------- */
html[data-refresh] :is(.audience-group, .privatelb-group, .audience-matching-group, .bids-group, .booknow-group) .iradio_minimal {
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 2px solid #77818e !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 2px var(--surface, #fff) !important;
}
html[data-refresh] :is(.audience-group, .privatelb-group, .audience-matching-group, .bids-group, .booknow-group) .iradio_minimal.hover {
  border-color: var(--red-600, #f12908) !important;
}
html[data-refresh] :is(.audience-group, .privatelb-group, .audience-matching-group, .bids-group, .booknow-group) .iradio_minimal.checked {
  background: var(--red-600, #f12908) !important;
  border-color: var(--red-600, #f12908) !important;
  box-shadow: none !important;
}
html[data-refresh] :is(.audience-group, .privatelb-group, .audience-matching-group, .bids-group, .booknow-group) .iradio_minimal.checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

/* --------------------------------------------------------------------------
   3. Shipper mobile width: support a 299px CSS viewport without document-level
   horizontal overflow. Individual wide controls scroll/wrap inside the page.
   SCOPED to the shipper loads page (:has(.shipper-loads-page)) so the
   document-level `overflow-x:hidden` + filter reflow can NOT clip a wide
   widget on driver/dispatch/settings/factoring pages — those have their own
   mobile layouts. (Android's baseline CSS width is ~360px, so this block DOES
   fire on real phones; keeping it shipper-only is what makes that safe.)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  html[data-refresh]:has(.shipper-loads-page),
  html[data-refresh]:has(.shipper-loads-page) body,
  html[data-refresh]:has(.shipper-loads-page) .dft-wrapper,
  html[data-refresh]:has(.shipper-loads-page) .wide-container,
  html[data-refresh] .shipper-loads-page,
  html[data-refresh]:has(.shipper-loads-page) .content-wrapper,
  html[data-refresh]:has(.shipper-loads-page) .content-body,
  html[data-refresh]:has(.shipper-loads-page) .app-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-refresh]:has(.shipper-loads-page) body { overflow-x: hidden !important; }
  html[data-refresh]:has(.shipper-loads-page) .wide-container { margin-left: 0 !important; margin-right: 0 !important; padding-left: 6px !important; padding-right: 6px !important; }
  html[data-refresh] .shipper-loads-page, html[data-refresh] .shipper-loads-page .tbl-filter, html[data-refresh] .shipper-loads-page #dTable { min-width: 0 !important; max-width: 100% !important; }
  html[data-refresh] .shipper-loads-page .tbl-filter { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 4px !important; }
  html[data-refresh] .shipper-loads-page .tbl-filter .f-block { min-width: 0 !important; margin-right: 0 !important; }
  html[data-refresh] .shipper-loads-page ul.status-pills {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: calc(100vw - 12px) !important;
  }
  html[data-refresh] .shipper-loads-page #dTable .t-body :is(.b-load, .b-truck),
  html[data-refresh] .shipper-loads-page #dTable .t-body :is(.b-load, .b-truck) > * { min-width: 0 !important; max-width: 100% !important; }
  html[data-refresh]:has(.shipper-loads-page) footer .col,
  html[data-refresh]:has(.shipper-loads-page) footer .col.copyright { min-width: 0 !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; }
  html[data-refresh]:has(.shipper-loads-page) .jconfirm.jconfirm-modern .jconfirm-box,
  html[data-refresh]:has(.shipper-loads-page) .jconfirm-box-container { min-width: 0 !important; width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; }
}

/* --------------------------------------------------------------------------
   4. Dark mode final cascade pass — driver + shipper.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] {
  color-scheme: dark;
}

/* Header/account bars and common page bands that are not always .navbar. */
html[data-theme="dark"][data-refresh] :is(.header-navbar, .header-navbar.navbar-light, .top-menu, .top-menu.header-navbar, .content-header, .breadcrumb-wrapper, .breadcrumb, .tab-block),
html[data-theme="dark"][data-refresh] .header-navbar :is(.navbar-wrapper, .navbar-header, .navbar-container, #navbar-mobile) {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.header-navbar, .top-menu) a:not(.btn) { color: var(--text-body) !important; }
html[data-theme="dark"][data-refresh] :is(.header-navbar, .top-menu) a:not(.btn):hover { color: var(--text) !important; background: var(--surface-alt) !important; }
html[data-theme="dark"][data-refresh] .header-navbar :is(.balance-hdr, .balance-val, .user-name, .nav-link, .open-navbar-container) { color: var(--text-body) !important; }

/* Footer: headings stay bright, links no longer disappear into the background. */
html[data-theme="dark"][data-refresh] footer.footer,
html[data-theme="dark"][data-refresh] footer.footer-light { background: var(--surface-sunken) !important; color: var(--text-body) !important; border-top-color: var(--line) !important; }
html[data-theme="dark"][data-refresh] footer :is(h1,h2,h3,h4,h5,h6,.ttl) { color: var(--text) !important; }
html[data-theme="dark"][data-refresh] footer .col a { color: var(--text-body) !important; opacity: 1 !important; }
html[data-theme="dark"][data-refresh] footer .col a:hover,
html[data-theme="dark"][data-refresh] footer .col.copyright a { color: var(--text-link) !important; }
html[data-theme="dark"][data-refresh] footer :is(.subscribe .ttl, .copyright span) { color: var(--text-muted) !important; }

/* Mobile side drawer — including the nested Tools & Services list which remained white. */
html[data-theme="dark"][data-refresh] .main-menu.menu-light :is(.main-menu-content, .navigation, .navigation-main, ul, ul.menu-popout),
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li > ul {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li ul li,
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li ul li > a,
html[data-theme="dark"][data-refresh] .main-menu.menu-light ul.menu-popout li > a { color: var(--text-body) !important; background: transparent !important; }
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li ul li:hover > a,
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li ul .active > a,
html[data-theme="dark"][data-refresh] .main-menu.menu-light ul.menu-popout li:hover > a { color: var(--text) !important; background: var(--surface-alt) !important; }

/* All input append/prepend buttons must share the input surface; fixes the white
   state selectors, calendar square, plus tab and deadhead append controls. */
html[data-theme="dark"][data-refresh] :is(.input-group-text, .input-group-addon, .time-addon, .btn-st, .tab-btn.add),
html[data-theme="dark"][data-refresh] .tbl-filter :is(.input-group-text, .input-group-addon, .time-addon, .btn-st, .tab-btn.add),
html[data-theme="dark"][data-refresh] .tbl-filter .show > .btn-light.dropdown-toggle,
html[data-theme="dark"][data-refresh] .tbl-filter .dropdown-item.active,
html[data-theme="dark"][data-refresh] .tbl-filter .dropdown-item:active {
  background: var(--surface-alt) !important;
  color: var(--text-body) !important;
  border-color: var(--line-strong) !important;
}
/* hover ONLY on interactive addons: the state-search toggle (.btn-st), the
   +tab button (.tab-btn.add), the datepicker trigger (.time-addon, opens the
   calendar), and the map-pin picker (.pin-select — otherwise loses the hover it
   got via .input-group-text). The bare static labels .input-group-text /
   .input-group-addon must NOT show a button-like hover. */
html[data-theme="dark"][data-refresh] :is(.time-addon, .btn-st, .tab-btn.add, .pin-select):hover { background: #20252d !important; color: var(--text) !important; }

/* Autocomplete: custom Doft address list + Google Places + jQuery UI. */
html[data-theme="dark"][data-refresh] :is(.ac-container, .pac-container, .ui-autocomplete) {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"][data-refresh] :is(.ac-item, .pac-item, .ui-menu-item, .ui-menu-item-wrapper) {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.ac-item.active, .ac-item:hover, .pac-item:hover, .ui-state-active, .ui-menu-item-wrapper:hover) {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] :is(.pac-item-query, .ac-matched) { color: var(--text) !important; }
html[data-theme="dark"][data-refresh] .pac-matched { color: var(--text-link) !important; }

/* Page cards/forms that have hard-coded #fff/#fafafa in page-level styles. */
html[data-theme="dark"][data-refresh] :is(.waypoint, .feature, .feature.static, .form-section, .form-block, .ctrl-block, .result-block, .res-block, .recent-tbl, .notif-block, .settings-block, .truck-info, .carrier-info, .iload .wrp, .itruck .wrp, .idriver .wrp) {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.waypoint .wp-hdr, .waypoint .filter-option-inner-inner, .feature .f-ttl, .feature .f-ttl-lbl, .feature label, .form-section, .brok-ttl, .truck-info strong, .carrier-info strong) { color: var(--text) !important; }
html[data-theme="dark"][data-refresh] :is(.feature .f-desc, .feature .f-desc p, .waypoint-dist label, .waypoint-stops label, .brok-val) { color: var(--text-body) !important; }
html[data-theme="dark"][data-refresh] .waypoint .wp-type .btn-light,
html[data-theme="dark"][data-refresh] .waypoint .wp-type .btn-light:is(:active,.active),
html[data-theme="dark"][data-refresh] .waypoint .wp-type .show > .btn-light.dropdown-toggle { background: var(--surface) !important; color: var(--text) !important; }

/* Settings accordion: page CSS is appended after refresh.css and hard-codes a
   white heading plus #555 labels, making the heading glare and labels vanish. */
html[data-theme="dark"][data-refresh] :is(.panel-heading, .panel-body, .accordeon .panel-heading, .accordeon .panel-body) {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.panel-heading.clickable, .accordeon .panel-heading.clickable) { background: var(--surface-alt) !important; }
html[data-theme="dark"][data-refresh] :is(.panel-heading span, .panel-heading .row, .accordeon .conf .ttl, .accordeon .conf label, .accordeon .info-block, .accordeon .info-block li) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .accordeon .conf .ttl { color: var(--text-muted) !important; }

/* iCheck in dark mode: clearly visible empty circle and high-contrast checked dot. */
html[data-theme="dark"][data-refresh] :is(.icheckbox_minimal, .iradio_minimal, .icheckbox_flat, .iradio_flat) {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: #aab2be !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_minimal.checked, .iradio_minimal.checked, .icheckbox_flat.checked, .iradio_flat.checked) {
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
}

/* Load/truck cards: refresh-loads.css is appended after refresh.css and used
   light-only gray tokens. Override hover/focus/viewed backgrounds and text LAST. */
html[data-theme="dark"][data-refresh] #dTable,
html[data-theme="dark"][data-refresh] #dTable .t-body,
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck),
html[data-theme="dark"][data-refresh] #dTable .t-body > div.iload {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck):is(:hover,.expanded,.wow-rowfocus) {
  background: var(--surface-alt) !important;
  color: var(--text-body) !important;
  border-color: var(--line-strong) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).viewed { background: var(--surface-sunken) !important; color: var(--text-muted) !important; opacity: 1 !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).unposted { background: #171a1f !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).new { background: rgba(20,184,166,.10) !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).gold { background: rgba(245,183,49,.10) !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck) :is(.c-addr, .c-company, .c-contact, .c-rate, .c-price, .c-price span, .c-eq, .c-weight, .c-length, .c-dist, .c-refnum, .c-pu, .c-age, .c-state) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck) :is(.c-addr, .c-rate, .c-price, .c-price span) { color: var(--text) !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck) :is(.cb-disteq, .cb-size, .cb-pudh, .cb-company, .cb-eq-rate, .cb-weight-length, .cb-dot-mc, .cb-contact) { color: var(--text-muted) !important; }
html[data-theme="dark"][data-refresh] #dTable .t-body :is(.b-load, .b-truck).expanded + * { background: var(--surface) !important; color: var(--text-body) !important; border-color: var(--line) !important; }
/* forecast / show-price chip: refresh.css draws a LIGHT var(--gray-100) pill on
   the DESKTOP grid (>=992px; the mobile card de-boxes it to background:none), so
   in dark mode it was a bright island. Dark-tint it, desktop-only so the mobile
   de-box is untouched. */
@media (min-width: 992px) {
  html[data-theme="dark"][data-refresh] #dTable .t-body a.premium-show-price { background: var(--surface-alt) !important; color: var(--text-body) !important; }
  html[data-theme="dark"][data-refresh] #dTable .t-body a.premium-show-price:hover { background: var(--line-strong) !important; color: var(--text) !important; }
}

/* Loading transition: remove the giant light skeleton on My Loads and use dark
   semantic shimmer elsewhere. refresh.js marks My Loads progress as native. */
html[data-theme="dark"][data-refresh] :is(#progrBlock, .tbl-progress)::before {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--line-strong) 37%, var(--surface-alt) 63%) !important;
}
html[data-refresh] .my-loads-page :is(#progrBlock, .tbl-progress)::before,
html[data-refresh] :is(#progrBlock, .tbl-progress).wow-native-progress::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html[data-refresh] :is(#progrBlock, .tbl-progress).wow-native-progress img {
  display: inline-block !important;
  opacity: .7 !important;
}
/* owner 2026-07-28: the native dots loader must sit CENTERED like prod —
   refresh.css's generic progress block sets text-align:left for the shimmer
   layout, which pinned the gif to the left edge on tab switches. Applies to
   BOTH themes (dev refresh mode); prod is untouched (no data-refresh there). */
html[data-refresh] .my-loads-page :is(#progrBlock, .tbl-progress),
html[data-refresh] :is(#progrBlock, .tbl-progress).wow-native-progress {
  text-align: center !important;
}

/* Rate Forecast calendar: neutral days were bright white cards. Keep heat-map
   meaning, but use dark neutral cells and dark-friendly red/green tints. */
html[data-theme="dark"][data-refresh] :is(.bootstrap-datetimepicker-widget, .rc-dp .datepicker) { background: var(--surface) !important; color: var(--text-body) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .bootstrap-datetimepicker-widget table td.day { color: var(--text-muted) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf { background: var(--surface-alt) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf .rate { color: var(--text-muted) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf.highest { background: rgba(34,197,94,.30) !important; border-color: rgba(34,197,94,.55) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf.high { background: rgba(34,197,94,.17) !important; border-color: rgba(34,197,94,.35) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf.low { background: rgba(244,114,94,.18) !important; border-color: rgba(244,114,94,.36) !important; }
html[data-theme="dark"][data-refresh] .rc-dp .day .inf.lowest { background: rgba(244,114,94,.30) !important; border-color: rgba(244,114,94,.55) !important; }

/* Neutral pills/counters that page CSS hard-codes light-gray (a bright island on
   dark): Post-Truck preferred-lane number badge (.badge-lpnum, post-truck.css
   #cccccc — refresh.css only sized it, never colored it) and the My-Truck
   "Unposted" status pill (.itruck .unposted, truck.css #c0c0c0). Scoped to
   .itruck so it can't touch the loadboard row rule (.b-truck.unposted). The
   green .posted / gold .suspended pills are intentional semantic colors — left
   alone. (Prior selectors .badge-secondary/.badge-light/.lane-num/.route-num/
   .st.unposted matched NO markup — dead, dropped.) */
html[data-theme="dark"][data-refresh] :is(.badge-lpnum, .itruck .unposted) {
  background: var(--surface-alt) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}

/* Dialogs: title/content text must not retain hard-coded #333/#404040. */
html[data-theme="dark"][data-refresh] :is(.jconfirm-title, .jconfirm-content, .modal-title, .modal-body) { color: var(--text-body) !important; }
/* bootstrap-select option subtext: its hard-coded .text-muted #404E67 is ~1.7:1
   on the dark menu (invisible). Re-tint to the dark-tuned muted so the subtext
   hierarchy is preserved, not flattened. Narrowed to the ONLY producer — a
   generic .dropdown-menu label/small rule was redundant with refresh.css:1336
   (labels) and over-broad. */
html[data-theme="dark"][data-refresh] .bootstrap-select .dropdown-menu small { color: var(--text-muted) !important; }