/*
 * DOFT Web — screenshot pass 2026-08-18 (folder 1(4) + the 08-17 desktop shots).
 *
 * LAST sheet of the refresh hotfix stack: it loads after
 * refresh-hotfix-20260817-regression.css and may only override, never
 * re-litigate, what that pass fixed (sticky header, split buttons, canvas).
 *
 * Every block below names the rule it is correcting. Read that rule before
 * changing anything here: most of these are two-owner problems where an older
 * sheet is right about one state and wrong about another.
 */

/* ============================================================================
   1) My Truck -> Edit / Post Truck — Destination is ONE control, so it takes
      focus as one control.
      round5 (refresh-hotfix-20260728-darkmode-round5.css:156) removes the
      input's right border and hands the seam to the 42px state cap, which owns
      a full 1px border of its own. post-truck.css:193 then darkens ONLY the
      input on :focus, so the frame changed colour up to the seam and stopped.
      Focus the composite: input + cap, the cap's left border included — that
      line IS the seam between the two halves.
   ============================================================================ */
html[data-refresh] .post-truck-page .addr-states-block:focus-within > input.form-control,
html[data-refresh] .post-truck-page .addr-states-block:focus-within > .form-control,
html[data-refresh] .post-truck-page .addr-states-block:focus-within .multiselect-native-select {
  border-color: #707070 !important;
}
html[data-theme="dark"][data-refresh] .post-truck-page .addr-states-block:focus-within > input.form-control,
html[data-theme="dark"][data-refresh] .post-truck-page .addr-states-block:focus-within > .form-control,
html[data-theme="dark"][data-refresh] .post-truck-page .addr-states-block:focus-within .multiselect-native-select {
  border-color: var(--line-strong, #59616d) !important;
}

/* ----------------------------------------------------------------------------
   2) …and its US / Canada / Mexico rows get a normal hit area.
   post-truck.css:283 gives the group label `padding: 3px 0 3px 12px` on a 1.5
   line-height — a 27px row, visibly tighter than every other list in the app.
   The 08-15 pass fixed the caret dropping under its label (flex row + auto
   sizing); that repair is load-bearing and stays. Only the height changes.
   ---------------------------------------------------------------------------- */
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a {
  min-height: 34px !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a > label {
  min-height: 34px !important;
  padding: 6px 0 6px 12px !important;
  line-height: 22px !important;
}
html[data-refresh] .post-truck-page .addr-states-block .multiselect-container li.multiselect-group > a > .caret-container {
  min-height: 34px !important;
}

/* ============================================================================
   3) My Loads -> AI Calls — the phone is the left action, the robot the right.
      round5:90 justifies `.b-load .c-contactlinks` to flex-END, so a row that
      has only a phone parks it under the column's robot slot and the red
      handsets zig-zag down the page. Two 30px icons also do not fit round9's
      48px column (round9:44) — they overlap by design because the search grid
      widens the column to 60px (round10:76) and My Loads never did.
      Pin the slots instead: phone at the left edge, robot at the right, and
      size the two icons so both fit the column that is actually there.
      Desktop only — the narrow card lays these out itself (refresh-loads.css).
   ============================================================================ */
@media (min-width: 992px) {
  html[data-refresh] body #dTable .t-body .b-load:has(.cb-aicall-del) .c-contactlinks {
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  html[data-refresh] body #dTable .t-body .b-load:has(.cb-aicall-del) .c-contactlinks .phone-link {
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
  }
  html[data-refresh] body #dTable .t-body .b-load:has(.cb-aicall-del) .c-contactlinks .call-shipper-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  html[data-refresh] body #dTable .t-body .b-load:has(.cb-aicall-del) .c-contactlinks .ai-call-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* ============================================================================
   4) Expanded load — CONTACT value and the Call / AI Call buttons share one
      axis.
      The 08-17 pass gave the phone column its label row back (the hidden
      spacer), so both columns now START at the same y. They still do not LOOK
      aligned: the contact value is a 20px line box and the buttons are 31px, and
      round5:133 top-aligns both inside a 32px value box, so the buttons hang
      ~11px below the name. `.val.phone-actions` is also inline-flex, which adds
      the line-box strut under it.
      Centre both value boxes instead of nudging one with a transform: the text
      and the button then share a centre line whatever their heights are.
   ============================================================================ */
html[data-refresh] .linfo-row.contact-phone-row > .linfo > .val {
  display: flex !important;
  align-items: center !important;
}

/* ----------------------------------------------------------------------------
   …and the direct-dial Call button is an <a>, not a <button> (GetLoadPageAjax:
   the showCallBtn=false branch). The 08-15 pass pinned every `.phone-actions > a`
   to inline-block/vertical-align:top back when that anchor WAS the raw phone
   number; a button-shaped anchor needs the button's own box instead, or its icon
   and label sit on different lines from the green button beside it.
   ---------------------------------------------------------------------------- */
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 31px !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions > a.btn-green,
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions > a.btn-green:hover,
html[data-refresh] .linfo-row.contact-phone-row .phone-linfo .phone-actions > a.btn-green:focus {
  color: #fff !important;
}

/* ============================================================================
   5) Dark mobile drawer — ONE scarlet accent, not two.
      style.css:357 paints a 4px #F12908 border-left on the open <li>; refresh.css:1487
      paints another 3px inset shadow on the <a> inside it, but only in dark — which
      is why light has one line and dark has two 4px apart.
      Keep the <li> border (same position and width as light mode) and let it
      follow the dark palette; drop the second line.
   ============================================================================ */
html[data-theme="dark"][data-refresh] .main-menu.menu-light .navigation > li.open {
  border-left-color: var(--red-600, #ff4524) !important;
}
html[data-theme="dark"][data-refresh] .main-menu .navigation-main > li.active > a,
html[data-theme="dark"][data-refresh] .main-menu .navigation-main > li.open > a,
html[data-theme="dark"][data-refresh] .main-menu .navigation-main > li:hover > a {
  box-shadow: none !important;
}

/* ============================================================================
   6) Narrow load list — an OPENED card is subdued immediately.
      loads-page.js adds `.viewed` only when the card is CLOSED again, so while
      the detail panel is open the card still reads as untouched. Give
      `.expanded` the subdued surface a viewed card has.
      Dark takes round5:463's viewed shade verbatim. Light does NOT, on purpose:
      there `.viewed` is carried by `opacity: .5` (loads.css:560) over a
      background one step off white (`--surface-alt`, #fcfcfd) that is invisible
      on its own — and dimming the card you are currently READING is the opposite
      of the point. Light therefore uses the app's own recessed surface, which
      reads as subdued against the card white without touching opacity.
      NOT applied to the detail panel next to it: round3:130 deliberately keeps
      `.expanded + *` on `--surface` so the panel stays joined to its card.
   ============================================================================ */
@media (max-width: 991px) {
  html[data-refresh] body #dTable .t-body :is(.b-load, .b-truck).expanded {
    background: var(--gray-50, #f7f8fa) !important;
  }
  html[data-theme="dark"][data-refresh] body #dTable .t-body :is(.b-load, .b-truck).expanded {
    background: #252a32 !important;
  }
}

/* ============================================================================
   7) Settings -> AI Calls -> Transaction history on a phone.
      settings-aicalls.css:901 already gives the wrapper `overflow-x:auto` — the
      right infrastructure. round10:174 then re-fixed the table to the viewport
      and let NOTE wrap to two lines, which is what collapses the row into an
      unreadable stack. Give the table its natural width back and let it scroll
      inside its own rounded card instead of squeezing five columns into 375px.
   ============================================================================ */
@media (max-width: 767px) {
  html[data-refresh] #aicTxWrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  html[data-refresh] #aicTxTable {
    table-layout: fixed !important;
    width: 620px !important;
    min-width: 620px !important;
  }
  html[data-refresh] #aicTxTable th,
  html[data-refresh] #aicTxTable td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* round10:186 turned the NOTE <td> into a display:block box, which is what let it
     wrap under its own row. It is a cell; say so. */
  html[data-refresh] #aicTxTable .aic-tx-note {
    display: table-cell !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: none !important;
    max-width: none !important;
  }
  /* 126px is what "07/28/2026 14:02" actually measures at 13px + the cell's
     20px padding (ai-calls-settings.js fmtDate prints a 4-digit year). The
     remaining four add up to the 620px above; Note gives up the slack because
     it is the only column with a title tooltip behind the ellipsis. */
  html[data-refresh] #aicTxTable th:nth-child(1) { width: 126px !important; }
  html[data-refresh] #aicTxTable th:nth-child(2) { width: 74px !important; }
  html[data-refresh] #aicTxTable th:nth-child(3) { width: 164px !important; }
  html[data-refresh] #aicTxTable th:nth-child(4) { width: 86px !important; }
  html[data-refresh] #aicTxTable th:nth-child(5) { width: 170px !important; }
}