/*
 * DOFT screenshot QA — Dark Mode / layout Round 7 (2026-07-29)
 * Source: screenshot set 26 (Shipper bug/correct + Driver).
 * Loaded after Round 6. All rules are scoped to the refresh layer.
 */

/* ==========================================================================
   1. Expanded-load action rows
   ========================================================================== */

/* Driver: keep Ask / Bid / Cancel Bid / Book Now / AI Call on one desktop row. */
@media (min-width: 768px) {
  html[data-refresh] .load-actions-driver {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  html[data-refresh] .load-actions-driver > *,
  html[data-refresh] .load-actions-driver .btn-group {
    flex: 0 0 auto !important;
  }
  html[data-refresh] .load-actions-driver .btn {
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap !important;
  }
}
/* A 1440-CSS-pixel Safari viewport is "wide" but the action column is only
   7/12 of the load card. Compact the expendable words before allowing wrap. */
@media (min-width: 768px) and (max-width: 1599.98px) {
  html[data-refresh] .load-actions-driver .btn .btn-ttl-xtra {
    display: none !important;
  }
}

/* Shipper: keep Edit + arrow/ellipsis as one true split-button. The server
   already nests both controls in one btn-group; Round 6's generic relocation
   is now driver-only, and these rules restore the production geometry. */
html[data-refresh] .load-actions-shipper .btn-group:has(> .act-more-toggle) {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}
html[data-refresh] .load-actions-shipper .btn-group:has(> .act-more-toggle) > .btn:not(.act-more-toggle) {
  border-radius: 18px 0 0 18px !important;
  border-right-width: 1px !important;
  margin: 0 !important;
}
html[data-refresh] .load-actions-shipper .btn-group:has(> .act-more-toggle) > .act-more-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 0 0 -1px !important;
  border-radius: 0 18px 18px 0 !important;
  border-left: 1px solid currentColor !important;
  line-height: 1 !important;
  transform: none !important;
}
html[data-refresh] .load-actions-shipper .btn-group:has(> .act-more-toggle) > .act-more-toggle::after {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
  line-height: 1 !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   2. My Shipments bulk selector
   ========================================================================== */
html[data-refresh] .shipper-loads-page .bulk-block .btn-group > .dropdown-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding-right: 34px !important;
  line-height: 1 !important;
}
html[data-refresh] .shipper-loads-page .bulk-block .btn-group > .dropdown-toggle::after {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 11px !important;
  width: 12px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

/* ==========================================================================
   3. Post Shipments in Bulk — one desktop row + centered carets
   ========================================================================== */
@media (min-width: 992px) {
  html[data-refresh] .bulk-post-page .load-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 6px !important;
    /* NO overflow container here (verify-pass 2026-07-29 P1). An
       `overflow-x:auto` paired with `overflow-y:visible` is coerced by the CSS
       Overflow spec to `auto` on BOTH axes, so .load-inner became a clip box
       and chopped off the open Truck-type / TL-LTL bootstrap-select menus,
       which render in-flow inside .load-inner (container:false). The min-widths
       below keep the fields on one row at >=992px; a pathologically narrow case
       spills visibly instead of clipping every dropdown. */
    padding-bottom: 5px !important;
  }
  html[data-refresh] .bulk-post-page .load-inner > :is(.l-block, .truck-type-wrp, .price-wrp) {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
  html[data-refresh] .bulk-post-page .load-inner > .wp-points-wrp {
    flex: 1 1 250px !important;
    min-width: 230px !important;
  }
  html[data-refresh] .bulk-post-page .load-inner > .features-block {
    flex: 0 0 64px !important;
    min-width: 64px !important;
    white-space: nowrap !important;
  }
}

/* Truck Type: selected names ellipsize before the dedicated caret lane. */
html[data-refresh] .bulk-post-page .truck-type-block .bootstrap-select > .dropdown-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: calc(2.2rem + 2px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 26px !important;
}
html[data-refresh] .bulk-post-page .truck-type-block .bootstrap-select > .dropdown-toggle :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html[data-refresh] .bulk-post-page .truck-type-block .bootstrap-select > .dropdown-toggle::after {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 9px !important;
  width: 12px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

/* TL/LTL: both the label and chevron sit on the same vertical centerline. */
html[data-refresh] .bulk-post-page .weight-block .bootstrap-select > .dropdown-toggle,
html[data-refresh] .bulk-post-page .load-size > .dropdown-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: calc(2.2rem + 2px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 24px !important;
  line-height: 1 !important;
}
html[data-refresh] .bulk-post-page .weight-block .bootstrap-select > .dropdown-toggle :is(.filter-option, .filter-option-inner, .filter-option-inner-inner),
html[data-refresh] .bulk-post-page .load-size > .dropdown-toggle :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 100% !important;
  line-height: 1 !important;
}
html[data-refresh] .bulk-post-page .weight-block .bootstrap-select > .dropdown-toggle::after,
html[data-refresh] .bulk-post-page .load-size > .dropdown-toggle::after {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  width: 12px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

/* ==========================================================================
   4. Driver bid card — correct corners + centered inner content
   ========================================================================== */
html[data-refresh] .bids-wrp .bid {
  border-radius: 14px !important;
}
html[data-refresh] .bids-wrp .bid > .col-12 {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html[data-refresh] .bids-wrp .bid.own-bid .top-badge-b .top-badge.date {
  border-radius: 0 10px 10px 10px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   5. Loads found aligned with List / Map
   ========================================================================== */
html[data-refresh] .loads-page #dTable_wrapper {
  position: relative !important;
}
html[data-refresh] .loads-page #loadsCountBlock {
  float: right !important;
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 8px 0 18px 16px !important;
  line-height: 1.2 !important;
}
html[data-refresh] .loads-page #dTable {
  clear: both !important;
}

/* ==========================================================================
   6. Mini survey / quiz in Dark Mode
   ========================================================================== */
html[data-theme="dark"][data-refresh] .jconfirm .jconfirm-content:has(#quiz-wrp),
html[data-theme="dark"][data-refresh] .jconfirm .jconfirm-content #quiz-wrp {
  color: var(--text-body, #d7dce4) !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] .jconfirm .jconfirm-content:has(#quiz-wrp) :is(h1,h2,h3,h4,h5,h6,.title,strong),
html[data-theme="dark"][data-refresh] #quiz-wrp :is(h1,h2,h3,h4,h5,h6,.title,strong) {
  color: var(--text, #f3f5f7) !important;
}
html[data-theme="dark"][data-refresh] #quiz-wrp :is(p,.description,.sub-title,.rating-subtitle,small) {
  color: var(--text-muted, #aeb5c0) !important;
}
html[data-theme="dark"][data-refresh] #quiz-wrp .doft-choice-block li {
  color: var(--text-body, #d7dce4) !important;
  background: var(--surface-alt, #1a1e25) !important;
  border: 1px solid var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #quiz-wrp .doft-choice-block li label {
  color: var(--text-body, #d7dce4) !important;
}
html[data-theme="dark"][data-refresh] #quiz-wrp .doft-choice-block li.checked,
html[data-theme="dark"][data-refresh] #quiz-wrp .doft-choice-block li:has(input:checked) {
  color: #fff !important;
  background: var(--red-600, #f12908) !important;
  border-color: var(--red-600, #f12908) !important;
}
html[data-theme="dark"][data-refresh] #quiz-wrp :is(textarea,input[type="text"],input[type="email"],select) {
  color: var(--text, #f3f5f7) !important;
  background: var(--surface-alt, #1a1e25) !important;
  border-color: var(--line-strong, #454c58) !important;
}

/* ==========================================================================
   7. Bulk AI Call selector slot — rows without phone keep the same columns
   ========================================================================== */
html[data-refresh] #dTable .t-body .b-load .ai-call-cb-slot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 29px !important;
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
html[data-refresh] #dTable .t-body .b-load .ai-call-cb-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ==========================================================================
   8. Single dark-mode switch — left of Login/Balance in the right header nav
   ========================================================================== */
html[data-refresh] #navbar-mobile .navbar-nav.float-right > .wow-theme-item {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
}
html[data-refresh] #navbar-mobile .navbar-nav.float-right > .wow-theme-item .wow-theme-switch {
  margin: 0 !important;
}