/*
 * DOFT UI hotfix — Round 8 (2026-07-30). Loaded after Round 7.
 * 1) Driver "…" more-button: keep the ellipsis in the geometric center.
 * 2) Post-shipments-in-bulk: lower the raised fields; give Truck type room for
 *    ~3 selected types WITHOUT spilling the no-wrap row past the card.
 * 3) Load-page Chat: fix the cropped driver avatar.
 */

/* ==========================================================================
   1. Driver "…" more button — ellipsis in the geometric center
   ==========================================================================
   refresh.js relocates the driver .act-more-toggle into a far-right
   .wow-more-group. Round 6 §19 already flex-centers .load-actions .act-more-toggle
   and zeroes the ::after margin, and the driver row carries that class — so this
   block is a belt-and-suspenders reinforcement scoped tightly to the relocated
   driver toggle (higher specificity), guaranteeing the ellipsis (::after, glyph
   \f141 from .btn-dots) stays dead-center regardless of load order. Harmless if
   Round 6 already handled it. */
html[data-refresh] .load-actions-driver .wow-more-group > .act-more-toggle,
html[data-refresh] .load-actions-driver .act-more-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html[data-refresh] .load-actions-driver .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;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* ==========================================================================
   2. Post Shipments in Bulk — baseline + Truck-type width
   ==========================================================================
   Baseline top-aligned the grouped rows (.truck-type-wrp/.price-wrp are
   inline-block/vertical-align:top), so the shorter inner control floated UP under
   its label. Bottom-align them (Round 7 already bottom-aligns the wrp inside
   .load-inner) so Truck type / Weight / Price / Ref drop to the Date / Pick Up /
   Drop Off baseline. */
@media (min-width: 992px) {
  html[data-refresh] .bulk-post-page .load-inner > .truck-type-wrp,
  html[data-refresh] .bulk-post-page .load-inner > .price-wrp {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 6px !important;
    /* allow the grouped rows to shrink so the no-wrap row never spills over the
       card's delete button / rounded border on a 992–1199px viewport (Round 7
       deliberately has no overflow container — it would clip the open dropdowns). */
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  html[data-refresh] .bulk-post-page .load-inner > .l-block:not(.wp-points-wrp) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* Truck type had only 80px -> a 3-code selection ("V FB R") truncated to 1.
     Widen it modestly and reclaim the space from Pick Up/Drop Off so the overall
     row width barely changes (it is already tight at the ~1140px container). */
  html[data-refresh] .bulk-post-page .load-inner > .wp-points-wrp {
    flex: 1 1 190px !important;
    min-width: 190px !important;
  }
  html[data-refresh] .bulk-post-page .truck-type-block {
    min-width: 118px !important;
    width: 118px !important;
  }
  html[data-refresh] .bulk-post-page .truck-type-block .bootstrap-select {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* NOTE: the TL/LTL (load-size) width is governed by the baseline
     `.weight-block button { width: 53px }` rule (load-post-bulk.css) — it is
     already narrow, so no width override is added here (an extra max-width was
     inert). */
}

/* ==========================================================================
   3. Load-page Chat — driver avatar was cropped
   ==========================================================================
   .chat-avatar a had `margin-top:-10px` (pulling the circle up under the name)
   and the photo was forced to 50x50 without cover-cropping. Make it a clean fixed
   circle. Only mask the PHOTO case (a:has(img)) so the fallback fa-user-circle
   glyph is never clipped. */
html[data-refresh] .chat-application .chats .chat-avatar {
  margin-top: 0 !important;
}
html[data-refresh] .chat-application .chats .chat-avatar a {
  margin-top: 0 !important;
}
html[data-refresh] .chat-application .chats .chat-avatar a:has(img) {
  width: 42px !important;
  height: 42px !important;
  display: inline-block !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  line-height: 0 !important;
}
html[data-refresh] .chat-application .chats .chat-avatar img,
html[data-refresh] .chat-application .chats .chat-avatar img.rounded-circle {
  width: 42px !important;
  height: 42px !important;
  margin-top: 0 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
html[data-refresh] .chat-application .chats .chat-avatar i {
  font-size: 2.5rem !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Driver "…" more button — pink hover, like the neighbor action buttons.
   Round 6 pins .act-more-toggle { background: transparent !important }, which
   was swallowing the standard .btn-doft-2:hover fill; restore it explicitly for
   the driver toggle so it lights up on hover exactly like Complete Job / AI Call.
   -------------------------------------------------------------------------- */
html[data-refresh] .load-actions-driver .act-more-toggle:hover,
html[data-refresh] .load-actions-driver .act-more-toggle:focus-visible {
  background-color: var(--red-50) !important;
  color: var(--red-700) !important;
  border-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] .load-actions-driver .act-more-toggle:hover,
html[data-theme="dark"][data-refresh] .load-actions-driver .act-more-toggle:focus-visible {
  color: var(--text-ondark) !important;
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
}