/* ============================================================================
   DOFT Loadboard — Round 9 screenshot / production-parity fixes (2026-07-30)
   Base: web2.zip (current dev after Round 8)
   Reference: web2 2.zip / good = production, bad = current dev.
   Loaded last; visual/layout overrides only.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) Production-parity table grid on desktop
   Keep every header boundary over the exact same body boundary. The good/prod
   screenshots are LEFT-aligned; only icon/action columns are centered.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html[data-refresh] #dTable,
  html[data-refresh] #dTable * {
    box-sizing: border-box !important;
  }

  html[data-refresh] #dTable .t-head,
  html[data-refresh] #dTable .t-body > .b-load,
  html[data-refresh] #dTable .t-body > .b-truck {
    width: 100% !important;
  }

  html[data-refresh] #dTable .t-head .c {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 6px !important;
    padding-right: 3px !important;
  }

  /* Restore the compact production widths. Round 8's 78px price cells squeezed
     the flexible Origin/Destination/Company region and made all later columns
     appear shifted. */
  html[data-refresh] #dTable .c-price,
  html[data-refresh] #dTable .c-permile {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
  }

  html[data-refresh] #dTable .c-contactlinks {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  html[data-refresh] #dTable .cb-contactlinks {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
  }

  html[data-refresh] #dTable :is(.c-bid, .c-book, .c-bookmark) {
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  html[data-refresh] #dTable :is(.cb-bid, .cb-book, .cb-bookmark) {
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    flex: 0 0 23px !important;
  }

  /* Action headers use icons, so these are the only header cells centered. */
  html[data-refresh] #dTable .t-head :is(.c-contactlinks, .c-bid, .c-book, .c-bookmark, .c-select) {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Origin and destination remain two equal flex groups. City and state stay
     inside the same group and share the same boundary in header and body. */
  html[data-refresh] #dTable .cb-addr {
    min-width: 0 !important;
  }
  html[data-refresh] #dTable :is(.c-orig, .c-dest) {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  html[data-refresh] #dTable :is(.c-orig, .c-dest) > .c-addr {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  html[data-refresh] #dTable :is(.c-orig, .c-dest) > .c-state {
    flex: 0 0 42px !important;
    width: 42px !important;
  }
  /* no divider inside the ORIGIN/DESTINATION header cell (prod has none) */
  html[data-refresh] #dTable .t-head :is(.c-orig, .c-dest) > .c-state {
    border-right: 0 !important;
  }

  /* A featured/gold row must not become wider than its header. Draw the yellow
     marker inside the row box instead of adding 4px to the outside width. */
  html[data-refresh] #dTable :is(.b-load, .b-truck).gold {
    /* keep the 1px border normal rows + header have (verify-pass 2026-07-30) — a
       0-width border would start the gold row 1px left of every other row. The
       yellow marker is the inset shadow, not an added-width border. */
    border-left: 1px solid transparent !important;
    box-shadow: inset 4px 0 0 #c39a39 !important;
  }

  /* Sorting arrow sits on the header baseline, matching production. */
  html[data-refresh] #dTable .t-head .c.sorting::after,
  html[data-refresh] #dTable .t-head .c.sorting_asc::after,
  html[data-refresh] #dTable .t-head .c.sorting_desc::after {
    top: 50% !important;
    transform: translateY(-54%) !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   2) Forecast/show value is a compact neutral pill, aligned to PRICE/$MI.
   -------------------------------------------------------------------------- */
/* Desktop-gated (verify-pass 2026-07-30): on the mobile card the reveal <a> is a
   full 1rem plain link (refresh-loads.css); clamping it to a 56px pill overflows.
   Only pill it on the ≥768px production grid, matching §1. */
@media (min-width: 768px) {
  html[data-refresh] #dTable .premium-show-price,
  html[data-refresh] #dTable :is(.c-price, .c-permile) > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 56px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 1px 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #e6e9ed !important;
    color: #68717d !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-refresh] #dTable .premium-show-price,
  html[data-theme="dark"][data-refresh] #dTable :is(.c-price, .c-permile) > a {
    background: #2a323d !important;
    color: #d4dce7 !important;
  }
}

/* Phone/AI robot share one centered contact column. (.ai-call-btn is the real
   robot class; the old .ai-call-load-btn never existed.) */
html[data-refresh] #dTable .c-contactlinks :is(.phone-link, .ai-call-btn, a) {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   3) Shipper My Shipments select-all checkbox must share the row checkbox X.
   -------------------------------------------------------------------------- */
html[data-refresh] .shipper-loads-page #dTable :is(.t-head, .t-body) .cb-select {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  flex: 0 0 32px !important;
  overflow: visible !important;
}
html[data-refresh] .shipper-loads-page #dTable :is(.t-head, .t-body) .cb-select .c-select {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 0 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
html[data-refresh] .shipper-loads-page #dTable :is(.t-head, .t-body) .cb-select :is(input[type="checkbox"], .icheckbox_square-red) {
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   4) Trusted Drivers: count belongs on the List/Map line, near the table.
   -------------------------------------------------------------------------- */
html[data-refresh] .trucks-page #dTable_wrapper:has(#driversCountBlock) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  align-items: center !important;
}
html[data-refresh] .trucks-page #dTable_wrapper:has(#driversCountBlock) > .wow-maptoggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 8px 0 12px !important;
}
html[data-refresh] .trucks-page #driversCountBlock {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 8px 0 12px !important;
  padding: 0 !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}
html[data-refresh] .trucks-page #dTable_wrapper:has(#driversCountBlock) > :is(#dTable, .wow-mappane) {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   5) Footer Appearance: label and switch on one row; glyphs dead-center.
   -------------------------------------------------------------------------- */
html[data-refresh] .doft-theme-footer-slot {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
}
html[data-refresh] .doft-theme-footer-slot > .ttl {
  grid-column: 1 !important;
  margin: 0 !important;
  align-self: center !important;
}
html[data-refresh] .doft-theme-footer-slot > .theme-footer-row {
  grid-column: 2 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
html[data-refresh] .doft-theme-footer-slot .wow-theme-switch {
  margin: 0 !important;
}
html[data-refresh] .wow-theme-switch .wts-side,
html[data-refresh] .wow-theme-switch .wts-side i,
html[data-refresh] .wow-theme-switch .wts-side i::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html[data-refresh] .wow-theme-switch .wts-side i {
  width: 100% !important;
  height: 100% !important;
}

/* --------------------------------------------------------------------------
   6) Billing Transaction History: current DataTables page is visible in dark.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] :is(
  .dataTables_paginate .paginate_button.current,
  .dataTables_paginate .paginate_button.current:hover,
  .dataTables_paginate a.paginate_button.current,
  .dataTables_paginate li.active > .paginate_button,
  .dataTables_paginate [aria-current="page"],
  .pagination .page-item.active > .page-link
) {
  background: var(--red-600, #f12908) !important;
  border-color: var(--red-600, #f12908) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   7) Rate Forecast / Estimated Fuel Costs: keep result card off the footer.
   -------------------------------------------------------------------------- */
html[data-refresh] #resultBlock {
  margin-bottom: 34px !important;
}
html[data-refresh] #resultBlock + * {
  margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   8) Table bottom corners and clean separators across carrier + shipper grids.
   -------------------------------------------------------------------------- */
html[data-refresh] #dTable {
  border-radius: 14px !important;
  /* NO overflow:hidden (verify-pass 2026-07-30 P1): the round7 F4b fix
     (refresh.css:952) sets #dTable{overflow:visible} on desktop precisely so the
     expanded-load "…" dropdown (Rate Confirmation / Rate Shipper) + HERE map
     tooltips are not clipped. Re-clipping here re-breaks it. Corners are rounded
     via the header (top) + last row (bottom) below instead. */
}
html[data-refresh] #dTable .t-head {
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden !important;   /* header has no menus — safe to clip TOP corners */
}
html[data-refresh] #dTable .t-body {
  border-radius: 0 0 14px 14px !important;
  /* NO overflow:hidden — would clip the expanded-load dropdown / map tooltips. */
}
html[data-refresh] #dTable .t-body > :last-child:not(.iload):not(.itruck),
html[data-refresh] #dTable .t-body > .iload:last-child .wrp,
html[data-refresh] #dTable .t-body > .itruck:last-child .wrp {
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* --------------------------------------------------------------------------
   9) Dark table separators remain subtle, never bright white.
   -------------------------------------------------------------------------- */
html[data-theme="dark"][data-refresh] #dTable :is(.c, .cb),
html[data-theme="dark"][data-refresh] #dTable :is(.t-head, .b-load, .b-truck) {
  border-color: rgba(116, 132, 151, .23) !important;
}

/* --------------------------------------------------------------------------
   10) Notification-settings time inputs: the clock addon was TALLER than the
   time field and stuck out top/bottom. Strip its vertical padding and let it
   stretch to the input's height so the button matches the field exactly.
   -------------------------------------------------------------------------- */
html[data-refresh] :is(#timeFrom, #timeTo).input-group.date {
  align-items: stretch !important;
}
html[data-refresh] :is(#timeFrom, #timeTo).input-group.date > .input-group-append {
  align-items: stretch !important;
}
html[data-refresh] :is(#timeFrom, #timeTo).input-group.date .input-group-text.time-addon {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}