/* ============================================================================
   DOFT Loadboard — Round 8 screenshot-driven UI hotfixes (2026-07-30)
   Base: doftlb_web_darkmode_screenshot_round7_fixed_20260729.zip
   Scope: additive overrides only; loaded last in footer.jsp.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) Footer dark-mode switch (moved from header into footer Appearance block)
   -------------------------------------------------------------------------- */
html[data-refresh] .doft-theme-footer-slot {
  min-width: 0;
}
html[data-refresh] .doft-theme-footer-slot .theme-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
html[data-refresh] .doft-theme-footer-slot .theme-footer-copy {
  min-width: 0;
}
html[data-refresh] .doft-theme-footer-slot .theme-footer-title {
  font-weight: 600;
  color: #3d4a59;
  line-height: 1.2;
}
html[data-refresh] .doft-theme-footer-slot .theme-footer-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #7a8696;
}
html[data-refresh] .doft-theme-footer-slot .theme-footer-switch-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
html[data-refresh] .doft-theme-footer-slot .wow-theme-switch {
  position: static !important;
  margin: 0 !important;
}
html[data-refresh] .wow-theme-item {
  display: none !important;
}

html[data-theme="dark"][data-refresh] .doft-theme-footer-slot .theme-footer-title {
  color: #eef2f8;
}
html[data-theme="dark"][data-refresh] .doft-theme-footer-slot .theme-footer-subtitle {
  color: #a4afbf;
}

/* --------------------------------------------------------------------------
   2) Header right-side alignment: Balance / notifications / user name
   -------------------------------------------------------------------------- */
/* REVERTED (verify-pass 2026-07-30): the flex-column + line-height:1.1 overlapped
   the "BALANCE" label onto the $ value, and the min-height re-heights pushed the
   "John D." dropdown chevron down. Leave the header exactly as it was before. */

/* --------------------------------------------------------------------------
   3) Login form input icons should remain visible on focus / autofill
   -------------------------------------------------------------------------- */
html[data-refresh] .form-group .form-control-position,
html[data-refresh] .input-group .form-control-position {
  z-index: 4 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html[data-refresh] .form-group:focus-within .form-control-position,
html[data-refresh] .input-group:focus-within .form-control-position,
html[data-refresh] input:-webkit-autofill ~ .form-control-position,
html[data-refresh] textarea:-webkit-autofill ~ .form-control-position {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   4) Loads count spacing + loads-count placement polish
   -------------------------------------------------------------------------- */
html[data-refresh] #loadsCount,
html[data-refresh] #trucksCount,
html[data-refresh] #driversCount {
  display: inline-block;
  margin-right: 4px;
}
html[data-refresh] .loads-page #loadsCountBlock,
html[data-refresh] .my-loads-page #loadsCountBlock,
html[data-refresh] .shipments-page #loadsCountBlock {
  letter-spacing: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5) Loads / trucks tables: column alignment, centered headers, cell sizing
   Fixes: header drift after select-all, gold-row width mismatch, broken row grid
   -------------------------------------------------------------------------- */
/* REVERTED (verify-pass 2026-07-30): the box-sizing/min-width/stretch tweaks and
   especially the CENTERED header cells (justify-content:center + text-align:center
   + padding) broke the column alignment — headers must stay LEFT-aligned and sit
   directly over their body columns, exactly as before Round 8. Only the sort-arrow
   nudge below is kept. */
html[data-refresh] #dTable .t-head .sorting::after,
html[data-refresh] #dTable .t-head .sorting_asc::after,
html[data-refresh] #dTable .t-head .sorting_desc::after {
  margin-left: 4px !important;
}
/* REVERTED (verify-pass 2026-07-30): making body cells inline-flex + forcing
   company/origin/destination to width:100% shifted the values off their columns
   (they must sit under their headers). Leave body cells as the base layout. */
html[data-refresh] #dTable .b-load.gold,
html[data-refresh] #dTable .b-truck.gold {
  border-left-width: 4px !important;
}
html[data-refresh] #dTable .b-load.gold .c-age,
html[data-refresh] #dTable .b-load.gold .c-pu,
html[data-refresh] #dTable .b-truck.gold .c-age,
html[data-refresh] #dTable .b-truck.gold .c-pu {
  margin-left: 0 !important;
}
html[data-refresh] #dTable .b-load .time-ago span,
html[data-refresh] #dTable .b-load .time-ago-f span,
html[data-refresh] #dTable .b-truck .time-ago span,
html[data-refresh] #dTable .b-truck .time-ago-f span {
  border-radius: 5px;
}
html[data-refresh] #dTable .t-head .sorting_desc::after {
  top: -1px !important;
}
html[data-refresh] #dTable .t-head .sorting_asc::after {
  top: 0 !important;
}

/* --------------------------------------------------------------------------
   6) Phone/bookmark/action hover cleanup
   -------------------------------------------------------------------------- */
html[data-refresh] #dTable .c-contactlinks,
html[data-refresh] #dTable .c-bookmark,
html[data-refresh] #dTable .c-book,
html[data-refresh] #dTable .c-bid {
  overflow: visible !important;
}
html[data-refresh] #dTable .phone-link,
html[data-refresh] #dTable .email-link,
html[data-refresh] #dTable .c-bookmark a,
html[data-refresh] #dTable .c-book a,
html[data-refresh] #dTable .c-bid a,
html[data-refresh] #dTable .c-contactlinks a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
html[data-refresh] #dTable .phone-link:hover,
html[data-refresh] #dTable .email-link:hover,
html[data-refresh] #dTable .c-bookmark a:hover,
html[data-refresh] #dTable .c-book a:hover,
html[data-refresh] #dTable .c-bid a:hover,
html[data-refresh] #dTable .c-contactlinks a:hover {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   7) Forecast pills / reveal links: remove bright white stroke
   -------------------------------------------------------------------------- */
html[data-refresh] #dTable .c-price a,
html[data-refresh] #dTable .c-permile a {
  border-color: #8f98a3 !important;
  background: transparent !important;
}
html[data-theme="dark"][data-refresh] #dTable .c-price a,
html[data-theme="dark"][data-refresh] #dTable .c-permile a,
html[data-theme="dark"][data-refresh] .premium-show-price {
  border-color: #566170 !important;
  color: #dce3ed !important;
  background: #202834 !important;
}
html[data-theme="dark"][data-refresh] #dTable .c-price a:hover,
html[data-theme="dark"][data-refresh] #dTable .c-permile a:hover,
html[data-theme="dark"][data-refresh] .premium-show-price:hover {
  background: #2a3442 !important;
  border-color: #6a7686 !important;
}

/* --------------------------------------------------------------------------
   8) Harmonize dark-mode row colors (fresh / premium) so the list is calmer
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] #dTable .b-load.new,
html[data-theme="dark"][data-refresh] #dTable .b-truck.new {
  background: #15241d !important;
}
html[data-theme="dark"][data-refresh] #dTable .b-load.gold,
html[data-theme="dark"][data-refresh] #dTable .b-truck.gold {
  background: #2a2414 !important;
  border-left-color: #c39a39 !important;
}
html:not([data-theme="dark"])[data-refresh] #dTable .b-load.gold,
html:not([data-theme="dark"])[data-refresh] #dTable .b-truck.gold {
  background: #f6f0d8 !important;
  border-left-color: #d9b55a !important;
}

/* --------------------------------------------------------------------------
   9) Bids panel/card restyle (dark + light)
   -------------------------------------------------------------------------- */
html[data-refresh] .bids-wrp .bid {
  border-radius: 14px !important;
}
html[data-refresh] .bids-wrp .bid.own-bid {
  border-color: #8ea2b8 !important;
  background: #f5f8fc !important;
}
html[data-refresh] .bids-wrp .bid .top-badge-b .top-badge {
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
}
html[data-refresh] .bids-wrp .bid .top-badge-b .top-badge.date {
  background: #7a8798 !important;
  margin-left: -6px !important;
  border-radius: 0 0 10px 10px !important;
}
html[data-refresh] .bids-wrp .bid.own-bid .top-badge-b .top-badge.date {
  background: #58708b !important;
}
html[data-refresh] .bids-wrp .bid .top-badge-b .top-badge.lowest {
  background: #9ba7b4 !important;
}
html[data-refresh] .bids-wrp .bid .amount {
  color: #243343 !important;
}
html[data-refresh] .bids-wrp .bid .amount-dif {
  color: #5f7083 !important;
}

html[data-theme="dark"][data-refresh] .bids-wrp .bid {
  background: #111821 !important;
  border-color: #263141 !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid.own-bid {
  background: #17202b !important;
  border-color: #52657b !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid .top-badge-b .top-badge.date {
  background: #5d738a !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid .top-badge-b .top-badge.lowest {
  background: #6e7f92 !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid .top-badge-b .bid-hdr,
html[data-theme="dark"][data-refresh] .bids-wrp .bid .l-driver,
html[data-theme="dark"][data-refresh] .bids-wrp .bid .bid-time {
  color: #d7dfeb !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid .amount {
  color: #ffffff !important;
}
html[data-theme="dark"][data-refresh] .bids-wrp .bid .amount-dif {
  color: #a6b4c6 !important;
}

/* --------------------------------------------------------------------------
   10) Map area fill on load / truck cards (reduce black frame around the map)
   -------------------------------------------------------------------------- */
html[data-refresh] .map-wrp {
  padding: 4px !important;
}
html[data-refresh] .iload .map,
html[data-refresh] .itruck .map {
  background: transparent !important;
}
html[data-refresh] .iload .map > div,
html[data-refresh] .itruck .map > div {
  width: 100% !important;
  height: 100% !important;
}
html[data-theme="dark"][data-refresh] .map-wrp {
  background: #0d131b;
}

/* --------------------------------------------------------------------------
   11) Section labels / badges / vetting blocks / no-vetting / unposted
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(.top-lbl, .top-badge, .deadhead-map-lbl, .badge-lpnum) {
  background: #2b3441 !important;
  color: #e8eef8 !important;
}
html[data-theme="dark"][data-refresh] :is(.vetting-empty, .no-vetting, .vetting .val-info) {
  color: #d3dce8 !important;
}
/* No gray band under "No vetting available" (verify-pass 2026-07-30): keep it as
   plain readable text on the dark background, as it was before Round 8. */
html[data-theme="dark"][data-refresh] .vetting-empty {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-theme="dark"][data-refresh] :is(.itruck .unposted, .iload .unposted, .driver .unposted, .truck .unposted) {
  background: #5b6472 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   12) AI Calls / My Loads / Bookmarks / generic tables — remove bright seams,
       center header labels, restore bottom corners
   -------------------------------------------------------------------------- */
html[data-refresh] #dTable,
html[data-refresh] #dTable .wrp,
html[data-refresh] #dTable .t-body {
  border-radius: 0 !important;
}
/* Round the table corners WITHOUT a body-wide overflow:hidden (verify-pass
   2026-07-30). overflow on .t-body would chop the expanded-load "…" dropdown
   (Rate Confirmation / Rate Shipper) + HERE map tooltips — round7 F4b. So clip
   only the HEADER for the TOP corners (no menus there), and round the LAST body
   row's own background for the BOTTOM corners (no overflow, so a dropdown in it
   still escapes). Middle rows stay square. */
html[data-refresh] #dTable .t-head {
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden !important;
}
/* Bottom-corner rounding moved to round9 §8 (verify-pass 2026-07-30): the
   `:last-of-type` rule above rounded the EXPANDED last .b-load, which then sits
   mid-stack above its .iload panel — a rounded row in the middle. round9 rounds
   the true last child (`.t-body > :last-child` / `.iload:last-child .wrp`). */
html[data-refresh] #dTable .t-head .c,
html[data-refresh] #dTable .t-body .c,
html[data-refresh] #dTable .t-head .cb,
html[data-refresh] #dTable .t-body .cb {
  border-right-color: rgba(127, 140, 155, 0.18) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-head .c,
html[data-theme="dark"][data-refresh] #dTable .t-body .c,
html[data-theme="dark"][data-refresh] #dTable .t-head .cb,
html[data-theme="dark"][data-refresh] #dTable .t-body .cb {
  border-right-color: rgba(111, 128, 148, 0.22) !important;
}
html[data-theme="dark"][data-refresh] #dTable .t-head,
html[data-theme="dark"][data-refresh] #dTable .b-load,
html[data-theme="dark"][data-refresh] #dTable .b-truck,
html[data-theme="dark"][data-refresh] #dTable .iload + .b-load,
html[data-theme="dark"][data-refresh] #dTable .itruck + .b-truck {
  border-color: rgba(111, 128, 148, 0.22) !important;
}
html[data-theme="dark"][data-refresh] .aicalls-page #dTable .t-head,
html[data-theme="dark"][data-refresh] .aicalls-page #dTable .t-body,
html[data-theme="dark"][data-refresh] .aicalls-page #dTable .b-load,
html[data-theme="dark"][data-refresh] .aicalls-page #dTable .b-truck {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   13) Small-screen footer layout
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html[data-refresh] .doft-theme-footer-slot .theme-footer-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   14) Footer theme switch — sun/moon dead-center in their circular slots
   (verify-pass 2026-07-30): the FA glyph metrics left them slightly off-center.
   -------------------------------------------------------------------------- */
html[data-refresh] .wow-theme-switch .wts-side {
  line-height: 1 !important;
}
html[data-refresh] .wow-theme-switch .wts-side i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   15) Rate-forecast box (#rateBlock) — gray border in dark mode, not white
   (verify-pass 2026-07-30): the dark override set the bg but left the theme's
   light border, so the box read as a bright white outline.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(#rateBlock, .rate-block) {
  border-color: var(--line-strong, #454c58) !important;
}

/* --------------------------------------------------------------------------
   16) My Loads → AI Calls tab: soften the bright white seams (the ACTIVE/EXPIRED
   `.tbl-section` separators + the row cell dividers) to the same subtle gray the
   other tables use (verify-pass 2026-07-30). Color-only — no layout change.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] .my-loads-page #dTable .tbl-section,
html[data-theme="dark"][data-refresh] .my-loads-page #dTable .b-load,
html[data-theme="dark"][data-refresh] .my-loads-page #dTable .b-load .c,
html[data-theme="dark"][data-refresh] .my-loads-page #dTable .b-load .cb {
  border-color: rgba(111, 128, 148, 0.22) !important;
}