/* Logistics page (js/logistics.js): track, in transit, carriers, our addresses. Classes all start with lx. */
.lxpage { max-width: 1240px; }
.lxpage .hbar { margin-bottom: 12px; }
.lxh, .lxsh h2 { margin: 0; font-size: var(--fs-16); font-weight: 700; color: var(--ink); }
.lxsec { margin-top: 28px; }
.lxsh { margin-bottom: 10px; }
.lxsh p { margin: 2px 0 0; }
.lxshr { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.lxn { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 7px; border-radius: var(--r-pill); background: var(--chip-bg); font-size: var(--fs-13); font-weight: 650; color: var(--grey-ink); text-align: center; vertical-align: 2px; }

/* Missing returns address */
.lxbanner { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--red); border-left-width: 4px; border-radius: var(--r-ctl); background: var(--red-bg); color: var(--red); }
.lxbanner p { margin: 0; }
.lxbanner .btn { flex: none; }

/* Track */
.lxtrack { padding: 18px 20px; }
.lxtf { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; max-width: 760px; }
.lxtf .searchbar { flex: 1; margin: 0; max-width: none; }
.lxtf .btn { min-height: 48px; padding: 0 22px; }
.lxmsg { margin: 14px 0 0; font-size: var(--fs-14); }
.lxnote { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface2, var(--chip-bg)); font-size: var(--fs-14); }
.lxnote p { margin: 0 0 4px; }
.lxmatch { list-style: none; margin: 14px 0 0; padding: 0; }
.lxmatch li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--divider); font-size: var(--fs-14); }
.lxmatch li:first-child { border-top: 0; padding-top: 0; }
.lxlive { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); }
.lxlh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lxev { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--divider); font-size: var(--fs-14); }
.lxev li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 12px; padding: 4px 0; }
.lxev li:first-child { font-weight: 600; }
.lxevt { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tables */
.lxtable { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); overflow: hidden; }
.lxhead, .lxrow { display: grid; grid-template-columns: 140px minmax(0, 1.3fr) 120px minmax(170px, 1.1fr) 110px minmax(0, 1fr) 76px; gap: 4px 12px; align-items: center; padding: 10px 16px; }
.lxhead { font-size: var(--fs-12); font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--divider); }
.lxrow { min-height: 52px; font-size: var(--fs-14); border-top: 1px solid var(--divider); }
.lxhead + .lxrow { border-top: 0; }
.lxrow > span { min-width: 0; overflow-wrap: anywhere; }
.lxrow.lxbad { box-shadow: inset 3px 0 0 var(--red); }
.lxref { font-weight: 650; color: var(--ink); text-decoration: none; }
.lxref:hover { text-decoration: underline; color: var(--link); }
.lxkind { display: block; font-size: var(--fs-12); color: var(--muted); }
.lxcons { display: inline-flex; align-items: center; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.lxcons a, .lxcb { color: var(--link); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.lxcons a:hover { text-decoration: underline; }
.lxcp { width: 28px; height: 28px; color: var(--muted); }
.lxcp .ic { width: 14px; height: 14px; }
.lxc6 { color: var(--grey-ink); font-variant-numeric: tabular-nums; }

.lxcar .lxhead, .lxcar .lxrow { grid-template-columns: 150px 150px minmax(0, 1fr) 100px minmax(0, 1fr) minmax(0, 1.3fr) 36px; }
.lxcar .lxrow { align-items: start; }
.lxcar .lxrow > span { padding-top: 4px; }
.lxurl { display: block; color: var(--grey-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxnotes { display: block; color: var(--grey-ink); }
.lxedit { color: var(--muted); }
.lxedit svg, .lxsm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lxppl { margin-top: 2px; }
.lxppl summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: var(--fs-13); min-height: 28px; display: inline-flex; align-items: center; }
.lxppl ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-13); }
.lxppl li { padding: 3px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.lxppl a { color: var(--link); }
.lxcar .lxformrow { display: block; padding: 12px; background: var(--row-sel); }
.lxform { max-width: 820px; }
.lxform > .sechead { margin-top: 0; }
.lxmore { margin: 8px 0 4px; }
.lxmore > summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: 32px; display: inline-flex; align-items: center; }
.lxsec > .lxform { margin-bottom: 12px; }

/* Addresses */
.lxaddrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lxaddr { min-width: 0; }
.lxah { display: flex; align-items: center; gap: 8px; }
.lxah h3 { flex: 1; margin: 0; font-size: var(--fs-16); font-weight: 700; }
.lxsm { min-height: 34px; padding: 0 12px; font-size: var(--fs-14); }
.lxsm .ic { width: 15px; height: 15px; }
.lxaddr > .small { margin: 2px 0 10px; }
.lxad { margin: 0; font-style: normal; font-size: var(--fs-15); line-height: 1.5; }
.lxaddr.lxmissing { border-color: var(--red); }
.lxsites { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--fs-14); }
.lxsites li { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lxsites span { color: var(--grey-ink); }

@media (max-width: 899px) {
  .lxhead { display: none; }
  .lxrow, .lxcar .lxrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .lxrow > span[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-weight: 500; }
  .lxrow > span.lxc0[data-l]::before, .lxrow > span.lxc1[data-l]::before, .lxrow > span.lxc6[data-l]::before, .lxcar .lxrow > span[data-l]::before { content: none; }
  .lxrow > .lxc1 { font-weight: 600; }
  .lxrow > span:empty { display: none; }
  .lxrow > .lxc0 { grid-column: 1; }
  .lxrow > .lxc6 { grid-column: 2; grid-row: 1; text-align: right; }
  .lxrow > .lxc1, .lxrow > .lxc2, .lxrow > .lxc3, .lxrow > .lxc4, .lxrow > .lxc5 { grid-column: 1 / -1; }
  /* Carriers as cards: name and edit on top, then the details */
  .lxcar .lxrow > span { grid-column: 1 / -1; padding-top: 0; }
  .lxcar .lxrow > .lxc0 { grid-column: 1; grid-row: 1; font-size: var(--fs-15); }
  .lxcar .lxrow > .lxc6 { grid-column: 2; grid-row: 1; }
  .lxcar .lxrow > span.lxc1[data-l]::before, .lxcar .lxrow > span.lxc2[data-l]::before, .lxcar .lxrow > span.lxc3[data-l]::before, .lxcar .lxrow > span.lxc4[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-weight: 500; }
  .lxcar .lxrow > span:has(> .lxdash:only-child) { display: none; }
  .lxurl { white-space: normal; overflow-wrap: anywhere; }
  .lxaddrs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .lxtrack { padding: 14px; }
  .lxtf { flex-direction: column; }
  .lxtf .btn { min-height: 44px; justify-content: center; }
  .lxev li { grid-template-columns: minmax(0, 1fr); }
  .lxbanner .btn { width: 100%; justify-content: center; }
  .lxpage { padding-bottom: 72px; } /* clear of the assistant button */
}
.lxc5 .kind, .lxlh .kind { white-space: normal; align-items: baseline; }
.lxc5 .kind i, .lxlh .kind i { position: relative; top: -1px; }
.lxaddrs { align-items: start; }

/* Freight chasing: Needs chasing, Active chases, Chasing rules */
.lxchase:first-of-type, .lxpage .hbar + .lxchase { margin-top: 8px; }
.lxchase + .lxtrack, .lxbanner + .lxtrack { margin-top: 28px; }
.lxn.red { background: var(--red-bg); color: var(--red); }
.lxchip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 650; white-space: nowrap; }
.lxchip.red { background: var(--red-bg); color: var(--red); }
.lxchip.amber { background: var(--amber-bg); color: var(--amber); }
.lxchip.blue { background: var(--blue-bg); color: var(--blue); }
.lxchip.good { background: var(--chip-bg); color: var(--good); }
.lxchip.grey { background: var(--chip-bg); color: var(--grey-ink); }
.lxchip.demo { min-height: 20px; padding: 0 7px; font-size: var(--fs-12); background: var(--amber-bg); color: var(--amber); vertical-align: 1px; }
.lxrefx { font-weight: 650; }
.lxcl { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); overflow: hidden; }
.lxci { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 8px 20px; padding: 14px 16px; border-top: 1px solid var(--divider); }
.lxci:first-child { border-top: 0; }
.lxci.lxbad { box-shadow: inset 3px 0 0 var(--red); }
.lxcim { min-width: 0; }
.lxcit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.lxage { font-size: var(--fs-14); color: var(--grey-ink); }
.lxage b { color: var(--ink); font-weight: 700; }
.lxlate { color: var(--amber); font-weight: 650; }
.lxcimeta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: var(--fs-14); color: var(--grey-ink); }
.lxcimeta > * { min-width: 0; overflow-wrap: anywhere; }
.lxcimeta .lxcons b { color: var(--ink); }
.lxwhy { margin: 4px 0 0; font-size: var(--fs-14); color: var(--ink); overflow-wrap: anywhere; }
.lxtl { margin-top: 4px; }
.lxtl > summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: var(--fs-13); min-height: 28px; display: inline-flex; align-items: center; }
.lxtl .lxev { margin-top: 4px; }
.lxtl .lxev li:first-child { font-weight: 400; }
.lxacts { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lxacts .btn.lxsm { min-height: 36px; padding: 0 12px; text-align: left; line-height: 1.2; margin-bottom: 2px; }
.lxacts .link.quiet { min-height: 30px; font-size: var(--fs-14); }
.lxrules { margin-top: 28px; max-width: 820px; }
.lxrules .lxah h3 { font-size: var(--fs-16); }
.lxrules > .small { margin: 6px 0 0; }
.lxrf { margin-top: 8px; }
.lxrfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.lxrfg input { width: 100%; max-width: 140px; }
.lxrchk { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.lxrchk input { width: 18px; height: 18px; }
.lxrf .small { margin: 4px 0 0; }
.lxdemobar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }
.lxdemobar > span { flex: 1 1 260px; }
.lxdemobar .link.quiet { font-size: var(--fs-14); }
.swdlg.lxdlg { top: 6vh; width: min(580px, calc(100% - 32px)); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
.lxdlg p { margin: 0; }
.lxdlg textarea { width: 100%; min-height: 180px; font: inherit; font-size: var(--fs-14); line-height: 1.45; }
.lxdlg .fld { display: flex; flex-direction: column; gap: 6px; }
.lxdlg .fld input { width: 100%; }
.lxdlg .btn .ic, .lxdlgb .ic { width: 16px; height: 16px; }
.lxdlgb { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .lxci { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .lxacts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .lxrfg { grid-template-columns: minmax(0, 1fr); }
}

/* Track: one summary per consignment (logistics.js summaryCard) */
.lxsum { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card, 12px); background: var(--surface); }
.lxsumh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lxsumm { margin: 6px 0 0; }
.lxsumt { margin: 8px 0 0; line-height: 1.5; }
.lxsum .lxacts.lxsumacts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; width: auto; }
.lxpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.lxpk { min-height: 32px; padding: 0 12px; border: 1px solid var(--input-strong, var(--line)); border-radius: var(--r-pill, 999px); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
.lxpk:hover, .lxpk:focus-visible { border-color: var(--ink); }
.lxsumev { margin-top: 10px; }
.lxsumev summary { cursor: pointer; color: var(--blue-btn); font-size: 0.875rem; }

/* Carriers as buttons with a white-on-blue badge, and their profile (logistics.js) */
.lxcarriers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lxcarbtn { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card, 12px); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lxcarbtn:hover, .lxcarbtn:focus-visible { border-color: var(--blue-btn); box-shadow: 0 0 0 1px var(--blue-btn); }
.lxcarname { display: flex; flex-direction: column; min-width: 0; }
.lxcarname small { color: var(--muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxbadge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blue-btn); color: #fff; overflow: hidden; }
.lxbadge.big { width: 64px; height: 64px; border-radius: 16px; }
.lxbadge b { font-size: 0.875rem; letter-spacing: 0.02em; }
.lxbadge.big b { font-size: 1.125rem; }
.lxbadge img { width: 78%; height: 78%; object-fit: contain; filter: brightness(0) invert(1); }
.lxprof.swdlg { width: min(760px, calc(100% - 32px)); }
.lxprofh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 12px; }
.lxprofh h2 { margin: 0; }
.lxprofh p { margin: 2px 0 0; }
.lxproffacts { margin: 0 0 12px; }
.lclogorow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lclogorow .fileb input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lclogorow .fileb { position: relative; }
.lxcontacts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
/* Carrier contacts as a table, grouped by team */
.lxctwrap { overflow-x: auto; margin: 0 0 8px; }
.lxct { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lxct thead th { text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lxct td, .lxct tbody th { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--line); font-weight: 400; }
.lxct tbody th small { display: block; color: var(--muted); font-size: 0.8125rem; }
.lxct tr.lxctg th { padding: 12px 8px 4px; font-size: 0.8125rem; font-weight: 600; color: var(--blue-ink); background: var(--blue-tint); border-bottom: 0; }
.lxct .lxctp { white-space: nowrap; }
.lxct .lxcte { word-break: break-all; }
@media (max-width: 560px) {
  .lxct thead { display: none; }
  .lxct tbody tr:not(.lxctg) { display: grid; grid-template-columns: 1fr; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .lxct tbody tr:not(.lxctg) > * { border: 0; padding: 2px 8px; }
}

/* Mainfreight milestones: six steps, done / now / to come */
.lxms { display: flex; align-items: center; gap: 4px; margin: 8px 0 2px; flex-wrap: wrap; }
.lxms .lxmsd { width: 26px; height: 6px; border-radius: 3px; background: var(--line, #d9ddd9); }
.lxms .lxmsd.done { background: var(--blue, #2f6fb5); opacity: .55; }
.lxms .lxmsd.now { background: var(--blue, #2f6fb5); }
.lxms.bad .lxmsd.now, .lxms.bad .lxmsd.done { background: var(--red, #b3261e); }
.lxms .lxmsl { margin-left: 6px; font-size: var(--fs-13); font-weight: 650; }
.lxms.sm { margin: 4px 0 0; gap: 3px; }
.lxms.sm .lxmsd { width: 12px; height: 4px; }
.lxchip.urgent { background: var(--red, #b3261e); color: #fff; gap: 4px; }
.lxchip.urgent .lxtri { width: 14px; height: 14px; }
.lxchip.urgent .lxtri path:first-child { fill: #fff; }
.lxchip.urgent .lxtri path:last-child { stroke: var(--red, #b3261e); }
.lxci.lxurgent { box-shadow: inset 4px 0 0 var(--red, #b3261e); }