/*
 * DOFT Dark Mode + layout QA fixes — Round 6 (2026-07-28)
 * Scope: remaining desktop dark-mode regressions from screenshot set 23.
 * Rules are additive and dev-only; no handlers/data contracts are changed.
 * This file is the FINAL css layer — keep it last in footer.jsp.
 */

/* --------------------------------------------------------------------------
   1) Driver/dispatch/shipper result grids: replace bright white grid lines with
      softer neutral separators in dark mode.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable {
  border-top-color: var(--line, #343a44) !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) .recent-tbl .t-head,
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-head {
  background: var(--surface-alt, #1a1e25) !important;
  border-bottom-color: var(--line, #343a44) !important;
  border-left-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable :is(.cb, .c) {
  border-right-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-head .cb,
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-head .c {
  border-color: var(--line, #343a44) !important;
}
/* merge note: LONGHANDS only — a border-color shorthand here would wipe the
   gold Featured-Listing left marker (round2 restored it once already). */
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-body :is(.b-load, .b-truck) {
  border-top-color: var(--line, #343a44) !important;
  border-right-color: var(--line, #343a44) !important;
  border-bottom-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-body :is(.b-load, .b-truck):not(:last-child) {
  border-bottom: 1px solid var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] :is(.loads-page, .shipper-loads-page, .trucks-page) #dTable .t-body :is(.b-load, .b-truck):last-child {
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2) Forecast / rate / fuel informational blocks: remove white cards in dark
      mode, keep quiet gray surfaces with readable text.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(blockquote.blockquote, .blockquote) {
  background: var(--surface, #15191f) !important;
  color: var(--text-body, #d7dce4) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(blockquote.blockquote, .blockquote) :is(.media-body, p, span, div) {
  color: var(--text-body, #d7dce4) !important;
}

/* --------------------------------------------------------------------------
   3) Rate Forecast / Fuel Costs tables: add horizontal breathing room so
      labels/values no longer hug the left/right borders.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .res-table th {
  padding: 12px 18px 12px 20px !important;
  text-align: left !important;
}
html[data-theme="dark"][data-refresh] .res-table td {
  padding: 12px 20px 12px 18px !important;
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   4) Breadcrumb area: remove residual gray slab under Home / Settings /
      Profile and similar breadcrumb rows.
   -------------------------------------------------------------------------- */
/* merge note: :is() args carry a 2-class/descendant member so the whole rule
   reaches (0,4,1) and out-cascades 0725's painted (0,4,1) rule by order. */
html[data-theme="dark"][data-refresh] :is(.content-header, .content-header.row, .content-header-left, .breadcrumbs-top, .content-header .breadcrumb-wrapper, .content-header .breadcrumb, .breadcrumb-wrapper, .breadcrumb) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   5) Post Truck destination-state dropdown (Texas end-cap): make the right
      dropdown segment match the field height and align its caret vertically.
   -------------------------------------------------------------------------- */
html[data-refresh] .post-truck-page .addr-states-block {
  align-items: stretch !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-native-select {
  align-self: stretch !important;
  min-height: 40px !important;
  height: auto !important;
}
html[data-refresh] .post-truck-page .addr-states-block button.btn-st {
  min-height: calc(2.2rem + 2px) !important;
  height: 100% !important;
}
/* merge note: .caret-container exists only inside the OPEN menu (round5 styles
   it) — the closed end-cap caret is the button's own glyph. */
html[data-refresh] .post-truck-page .addr-states-block button.btn-st {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* the open menu must track the stretched cap, not round5's fixed 39px */
html[data-refresh] .post-truck-page .addr-states-block .dropdown-menu {
  top: 100% !important;
}

/* --------------------------------------------------------------------------
   6) Shipper bulk post: widen date/time columns so Date and PM are not clipped.
   -------------------------------------------------------------------------- */
/* merge note (owner round-2): widened columns pushed Desc/Features to a 2nd
   line — net-zero rebalance: date/time/truck grow +33px, desc/ref give -32px. */
html[data-refresh] .bulk-post-page .pu-date {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}
html[data-refresh] .bulk-post-page .pu-time {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
html[data-refresh] .bulk-post-page .desc-ctrl {
  width: 110px !important;
}
html[data-refresh] .bulk-post-page .ref-num {
  width: 68px !important;
}

/* --------------------------------------------------------------------------
   7) Shipper bulk post: truck type multiselect must reserve caret space and
      ellipsize long selections instead of letting text run under the arrow.
   -------------------------------------------------------------------------- */
html[data-refresh] .bulk-post-page .truck-type-block {
  width: 96px !important;
}
html[data-refresh] .bulk-post-page .truck-type-block .bootstrap-select,
html[data-refresh] .bulk-post-page .truck-type-block .btn.dropdown-toggle {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}
html[data-refresh] .bulk-post-page .truck-type-block .btn.dropdown-toggle {
  position: relative !important;
  padding-right: 24px !important;
}
html[data-refresh] .bulk-post-page .truck-type-block .btn.dropdown-toggle::after {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
html[data-refresh] .bulk-post-page .truck-type-block :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   8) Shipper bulk post: Full/LTL dropdown — center label + caret vertically.
   -------------------------------------------------------------------------- */
html[data-refresh] .bulk-post-page .load-size,
html[data-refresh] .bulk-post-page .load-size .bootstrap-select,
html[data-refresh] .bulk-post-page .load-size button,
html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle {
  min-height: calc(2.2rem + 2px) !important;
}
html[data-refresh] .bulk-post-page .load-size button,
html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
html[data-refresh] .bulk-post-page .load-size :is(.filter-option, .filter-option-inner, .filter-option-inner-inner),
html[data-refresh] .bulk-post-page .weight-block :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 100% !important;
}
html[data-refresh] .bulk-post-page .load-size button::after,
html[data-refresh] .bulk-post-page .weight-block button.dropdown-toggle::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* --------------------------------------------------------------------------
   9) My Shipments bulk-action button: center the "Selected N loads" caret.
   -------------------------------------------------------------------------- */
/* merge note (owner round-2): absolute caret still sat low — an inline-flex
   button centers a STATIC ::after by itself; also the 25px-high .bulk-block
   let the button overlap the List/Map pill below. */
html[data-refresh] .shipper-loads-page .bulk-block {
  height: auto !important;
  min-height: 25px !important;
  margin: 2px 0 10px 0 !important;
}
html[data-refresh] .shipper-loads-page .bulk-block .btn-group > .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
html[data-refresh] .shipper-loads-page .bulk-block .btn-group > .dropdown-toggle::after {
  position: static !important;
  margin: 0 0 0 8px !important;
  top: auto !important;
  transform: none !important;
  align-self: center !important;
}

/* --------------------------------------------------------------------------
   10) My Shipments row checkboxes: vertically center both header and row-level
       red checkboxes relative to their text rows.
   -------------------------------------------------------------------------- */
html[data-refresh] .shipper-loads-page #dTable :is(.t-head, .t-body) .cb-select .c-select {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-refresh] .shipper-loads-page #dTable .t-body .cb-select {
  display: flex !important;
  align-items: center !important;
}
html[data-refresh] .shipper-loads-page #dTable :is(.t-head, .t-body) .cb-select :is(input[type="checkbox"], .icheckbox_square-red) {
  margin-top: 0 !important;
  top: auto !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   11) Trucks list selection state in dark mode: default rows stay dark/black;
       only viewed/selected rows turn muted gray.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck {
  background: transparent !important;
  color: var(--text-body, #d7dce4) !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck :is(.c-addr, .c-state, .c-company, .c-contact, .c-rate, .c-price, .c-price a, .c-length, .c-weight, .c-dist, .c-eq, .c-refnum, .c-pu, .c-age) {
  color: var(--text-body, #d7dce4) !important;
}
/* merge note: viewed = LIGHTER muted gray (approved semantics) — the bundle
   used --surface-sunken, which is DARKER than the base row and would invert
   the shades again. */
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck.viewed {
  background: var(--surface-alt, #232833) !important;
  color: var(--text-muted, #98a1ad) !important;
}
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck.viewed :is(.c-addr, .c-state, .c-company, .c-contact, .c-rate, .c-price, .c-price a, .c-length, .c-weight, .c-dist, .c-eq, .c-refnum, .c-pu, .c-age) {
  color: var(--text-muted, #98a1ad) !important;
}
/* merge note: interaction states survive the base blanket (frozen hover was
   rejected in round5's merge for loads — same rule here). */
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck:not(.viewed):is(:hover, .expanded, .wow-rowfocus) {
  background: var(--surface-alt, #1a1e25) !important;
}
html[data-theme="dark"][data-refresh] .trucks-page #dTable .t-body .b-truck.viewed:hover {
  background: var(--line, #262b33) !important;
}

/* --------------------------------------------------------------------------
   12) Day/night pill switch (speedtest-style). Active side = white disc.
       Desktop: left of the DOFT logo. Mobile: right of the hamburger.
   -------------------------------------------------------------------------- */
html[data-refresh] .wow-theme-item {
  display: flex !important;
  align-items: center !important;
}
html[data-refresh] .wow-theme-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: #d9d9d9 !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 14px 0 0 !important;
  vertical-align: middle !important;
}
html[data-theme="dark"][data-refresh] .wow-theme-switch {
  background: var(--surface-alt, #232833) !important;
  border: 1px solid var(--line, #343a44) !important;
}
html[data-refresh] .wow-theme-switch .wts-side {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  color: #8a8a8a !important;
  background: transparent !important;
  transition: background-color .15s, color .15s !important;
}
html[data-theme="dark"][data-refresh] .wow-theme-switch .wts-side {
  color: var(--text-muted, #8b929c) !important;
}
/* active side: white disc + dark glyph — sun in light, moon in dark */
html:not([data-theme="dark"])[data-refresh] .wow-theme-switch .wts-sun,
html[data-theme="dark"][data-refresh] .wow-theme-switch .wts-moon {
  background: #ffffff !important;
  color: #4a4a4a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}
html[data-refresh] .wow-theme-switch:focus-visible {
  outline: 2px solid var(--red-600, #f12908) !important;
  outline-offset: 2px !important;
}
/* mobile: hug the hamburger on its right, keep the pill compact */
@media (max-width: 767.98px) {
  html[data-refresh] .wow-theme-item.d-md-none .wow-theme-switch {
    margin: 0 0 0 4px !important;
  }
}

/* --------------------------------------------------------------------------
   13) Header vertical centering (owner 2026-07-28): the DOFT logo and the
       day/night pill must sit ON the horizontal centerline. Root causes:
       .navbar-brand { padding:15px 0 } + .brand-logo { vertical-align:sub }
       + no align-items on the flex-row. Mobile-scoped: the desktop
       navbar-brand-center header is display:none and must stay that way.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html[data-refresh] .header-navbar .navbar-header {
    display: flex !important;
    align-items: center !important;
  }
  html[data-refresh] .header-navbar .navbar-header .navbar-nav.flex-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }
  html[data-refresh] .header-navbar .navbar-header .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
  }
  html[data-refresh] .header-navbar .navbar-header .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html[data-refresh] .header-navbar .navbar-header .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
html[data-refresh] .header-navbar .brand-logo {
  vertical-align: middle !important;
  display: block !important;
  margin: 0 !important;
}
/* desktop: the left nav that holds pill + logo centers its items too */
html[data-refresh] #navbar-mobile .navbar-nav.float-left {
  display: flex !important;
  align-items: center !important;
}
html[data-refresh] #navbar-mobile .navbar-nav.float-left .brand-wrp {
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 13b) Sun/moon glyphs dead-center in their discs (they hugged the left edge:
   the slots stretched inside the pill and FA icons carry their own metrics). */
html[data-refresh] .wow-theme-switch {
  flex: none !important;
}
html[data-refresh] .wow-theme-switch .wts-side {
  flex: 0 0 26px !important;
  max-width: 26px !important;
}
html[data-refresh] .wow-theme-switch .wts-side i {
  margin: 0 !important;
  line-height: 1 !important;
  width: auto !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   14) DataTables pagination in dark: the 0727 dark layer repaints every
       .paginate_button and flattened the red .current highlight (light was
       fine). Re-assert it from the LAST layer.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"][data-refresh] .dataTables_paginate .paginate_button.current:hover {
  background: var(--red-600, #f12908) !important;
  border-color: var(--red-600, #f12908) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   15) Load page "Rate Your Shipper Experience" inline card (owner screenshot
       2026-07-29): load.css paints .rating-load-wrp as a white panel
       (#fafafa bg, #e0e0e0 border) with light-only ink (.rating-subttl
       #707070, style.css .rating-subtitle #ccc). Repaint ONLY the card's own
       panel + text — never the surrounding layout containers (gray-slab
       regression class). The shipper-side mirror ("Rate Your Driver
       Experience") is the same BLOCK_reviewInline markup with identical
       classes, so one set of overrides covers both. Star icons keep their
       accent/selected colors and the Save button keeps .btn-doft brand red —
       neither is repainted here. Inline title/review inputs are already
       darkened by the 0727 layer's generic form-control rules.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .rating-load .rating-load-wrp {
  background: var(--surface, #15191f) !important;
  border-color: var(--line, #343a44) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .rating-load .rating-ttl {
  color: var(--text, #f3f5f7) !important;
}
html[data-theme="dark"][data-refresh] .rating-load .rating-subttl {
  color: var(--text-body, #d7dce4) !important;
}
html[data-theme="dark"][data-refresh] .rating-load .rating-subtitle {
  color: var(--text-muted, #8b929c) !important;
}

/* --------------------------------------------------------------------------
   16) Load-card action row (owner 2026-07-29): the More-menu toggle sits
       AFTER the AI Call button, with a visible label instead of the bare
       caret that read as a floating line. Flex ordering is dev-layer only —
       prod has no AI Call button, so its order is already correct there.
   -------------------------------------------------------------------------- */
html[data-refresh] .load-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html[data-refresh] .load-actions > * {
  order: 1;
}
html[data-refresh] .load-actions .btn-group {
  order: 3 !important;
}
/* the relocated group is always LAST; match the AI Call button's outline look
   and vertical metrics exactly, and center the ellipsis glyph. */
html[data-refresh] .load-actions .wow-more-group {
  order: 4 !important;
}
html[data-refresh] .load-actions .act-more-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  width: auto !important;
  height: auto !important;
  padding: 0.55rem 0.9rem !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  background: transparent !important;
}
html[data-refresh] .load-actions .act-more-toggle::after {
  position: static !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
html[data-refresh] .load-actions .act-more-toggle::after {
  position: static !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   17) Cancel-job dialog: the "I agree to Terms of Use" box was a light pill
       (#f0f0f0) with light label text — dark surface + readable ink; the
       Terms link keeps the brand red.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .confirm-cb-block {
  background-color: var(--surface-alt, #232833) !important;
  border-color: var(--line, #343a44) !important;
}
html[data-theme="dark"][data-refresh] .confirm-cb-block,
html[data-theme="dark"][data-refresh] .confirm-cb-block label {
  color: var(--text-body, #d7dce4) !important;
}
html[data-theme="dark"][data-refresh] .confirm-cb-block a {
  color: var(--text-link, #ff6a4d) !important;
}

/* --------------------------------------------------------------------------
   18) Load chat bubbles in dark (owner 2026-07-29): own = #ebebff lavender,
       other side = #f2f2f2 — both flip to dark surfaces with light ink; the
       little arrow tails follow their bubble color.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .chat-application .chats .chat-body .chat-content {
  color: var(--text-body, #d7dce4) !important;
  background-color: var(--surface-alt, #232833) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats .chat-body .chat-content::before {
  border-left-color: var(--surface-alt, #232833) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats .chat-left .chat-content {
  color: var(--text-body, #d7dce4) !important;
  background-color: var(--surface, #15191f) !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats .chat-left .chat-content::before {
  border-right-color: var(--surface, #15191f) !important;
  border-left-color: transparent !important;
}
html[data-theme="dark"][data-refresh] .chat-application .chats .chat-content a:not(.btn) {
  color: var(--text-link, #ff6a4d) !important;
}

/* --------------------------------------------------------------------------
   19) Load-card action row, acceptance pass (owner ТЗ 2026-07-29): one flex
       row, equal 16px gaps, ALL buttons exactly 38px tall on one baseline,
       the "..." pill 52px wide with the glyph dead-center, no manual offsets.
       Later-in-file: overrides the earlier §16 metrics.
   -------------------------------------------------------------------------- */
html[data-refresh] .load-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
html[data-refresh] .load-actions > *,
html[data-refresh] .load-actions .btn-group {
  margin: 0 !important;
}
html[data-refresh] .load-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  top: auto !important;
  transform: none !important;
}
html[data-refresh] .load-actions .wow-more-group {
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
}
html[data-refresh] .load-actions .act-more-toggle {
  width: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  background: transparent !important;
}
html[data-refresh] .load-actions .act-more-toggle::after {
  position: static !important;
  display: inline-block !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  top: auto !important;
  vertical-align: middle !important;
}