/* Ultimate Logistics — office screens: CRM, Messages, Commissions, Team, load money/docs/activity.
   Builds on brand.css tokens. */

/* page layout: list on the left, record on the right */
#page { display: none; min-height: 0; min-width: 0; }
main.page-mode { grid-template-columns: 1fr; }
main.page-mode #panel, main.page-mode #mapWrap { display: none; }
main.page-mode #page { display: block; overflow: hidden; }
.split { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; height: 100%; min-height: 0; }
.split-list { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.split-head { padding: 14px 16px 12px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
/* Tasks */
#taskCount.hot { background: var(--bad); }
.tk-list { display: grid; gap: 10px; }
.tk-card { display: grid; gap: 6px; padding: 12px 14px; border-left: 4px solid var(--line); }
.tk-card.urgent { border-left-color: var(--bad); }
.tk-card.done { opacity: .7; }
.tk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tk-title { font-size: 1rem; }
.tk-details { white-space: pre-wrap; }
.tk-ups { list-style: none; margin: 0; padding: 6px 10px; display: grid; gap: 4px; border-left: 2px solid var(--line); font-size: .85rem; }
.tk-sugg { display: grid; gap: 8px; max-height: 55vh; overflow: auto; margin: 8px 0; }
.tk-s { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.tk-s > span { display: grid; gap: 3px; }
.tk-s input { margin-top: 4px; }
/* Team page: one card per employee */
/* 4 across on a wide screen, then 3 / 2 / 1 as it narrows (Team and Company settings → People) */
.emp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 1000px) { .emp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .emp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .emp-grid { grid-template-columns: minmax(0, 1fr); } }
.emp-lines > span, .emp-lines > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long emails on narrow cards */
.emp-card { display: grid; gap: 10px; align-content: start; padding: 14px 16px; text-align: left; color: inherit; font: inherit; width: 100%; }
button.emp-card { cursor: pointer; }
button.emp-card:hover { border-color: var(--brand); }
button.emp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.emp-card.off { opacity: .6; }
.emp-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.emp-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand); color: #fff; font: 700 .85rem/1 var(--f-body); }
.emp-who { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.emp-who b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.emp-lines { display: grid; gap: 4px; font-size: .85rem; min-width: 0; }
.emp-lines > span { overflow: hidden; text-overflow: ellipsis; }
.emp-lines .tag + .hint { margin-left: 6px; }
/* shipment page, Messages tab: people on the shipment with Text / Email / Call */
.msg-people { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 4px; }
.msg-person { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.msg-person:last-child { border-bottom: 0; }
.msg-person .label { display: block; font-size: .66rem; }
/* Reports: Shipments | Commissions switch at the top */
.rpt-switch { margin-bottom: 12px; }
/* Home page: 3-column card grid (month + attention, today + chart, three bar lists) */
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.home-grid > div { min-width: 0; display: grid; }
.home-grid .hg-2 { grid-column: span 2; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-grid .hg-2 { grid-column: 1 / -1; } }
@media (max-width: 700px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.hc { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.hc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hc-h h3 { font-size: 1.05rem; margin: 0; }
.hk-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 900px) { .hk-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
/* the month-to-date card shares the top row with Top salespeople and Needs attention: 2 columns, smaller figures */
.hc-month .hk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hc-month .hk-v { font-size: 1.35rem; }
.hc-month .hk:last-child { grid-column: 1 / -1; }
.hk { display: grid; gap: 4px; align-content: start; }
.hk-l { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.hk-v { font: 800 1.7rem/1.1 var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hk-v small { font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.hc-rows { display: grid; }
.hc-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hc-row:last-child { border-bottom: 0; }
.hc-row:hover { background: var(--bg); }
.hc-n { font: 700 1.05rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.hc-n.warn { color: var(--warn); } .hc-n.bad { color: var(--bad); }
.hc-chev { color: var(--ink-3); font-size: 1.2rem; }
.hc-stops { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.hc-stop { display: grid; gap: 1px; padding: 6px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; font-size: .9rem; }
.hc-stop:hover { background: var(--bg); }
.dz-empty { padding: 4px 0; }
.dz-bars { display: grid; gap: 4px; }
.dz-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1.3fr) auto; align-items: center; gap: 12px; padding: 5px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.dz-bar[data-acct] { cursor: pointer; } .dz-bar[data-acct]:hover .dz-bl { text-decoration: underline; }
.dz-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; display: grid; }
.dz-bl .hint { font-size: .72rem; }
.dz-track { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.dz-track span { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.dz-bv { font: 600 .82rem/1 var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
/* sales per month chart */
.hm-chart { position: relative; height: 220px; padding-left: 58px; }
.hm-grid { position: absolute; inset: 6px 0 24px 58px; border-bottom: 1px solid var(--line); }
.hm-grid span { position: absolute; left: -58px; width: 52px; text-align: right; font: .68rem/1 var(--f-mono); color: var(--ink-3); transform: translateY(50%); }
.hm-grid i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.hm-bars { position: absolute; inset: 6px 0 0 58px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6%; padding: 0 3%; }
.hm-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 24px; outline: none; }
.hm-bar { width: min(64px, 70%); min-height: 2px; background: color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 4px 4px 0 0; transition: filter .15s; }
.hm-bar.cur { background: var(--brand); }
.hm-col:hover .hm-bar, .hm-col:focus .hm-bar { filter: brightness(1.15); }
.hm-x { position: absolute; bottom: 4px; font-size: .75rem; color: var(--ink-2); }
.hm-tip { position: absolute; bottom: calc(100% - 30px); left: 50%; transform: translateX(-50%); z-index: 5; display: none; gap: 3px; min-width: 190px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .78rem; white-space: nowrap; }
.hm-col:hover .hm-tip, .hm-col:focus .hm-tip { display: grid; }
.hm-col:first-child .hm-tip { left: 0; transform: none; } .hm-col:last-child .hm-tip { left: auto; right: 0; transform: none; }
.hm-table summary { cursor: pointer; color: var(--ink-2); }
.home-drill .dash-card { box-shadow: none; }
/* open shipment: PO / pickup / delivery numbers at the top (click to copy) */
.refnums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: stretch; }
.refnum { display: grid; gap: 2px; padding: 6px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 110px; }
.refnum.po { border-left-color: var(--ok); }
.refnum.pu { border-left-color: var(--ink-2, #4A505A); }
.refnum.de { border-left-color: var(--brand); }
.refnum .label { font-size: .68rem; }
.refnum-v { all: unset; cursor: pointer; font-weight: 700; font-size: 1rem; }
.refnum-v:hover { color: var(--accent); text-decoration: underline; }
.refnum-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.refnum .hint { font-size: .72rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refnum-act { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.stop-refs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; margin-top: 2px; }
/* open shipment: Carrier box (dispatcher + drivers with call / text / email) */
.lc-box { display: grid; gap: 10px; }
.lc-carrier { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.lc-name { font-size: 1rem; }
.lc-person { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.lc-who { display: grid; gap: 1px; min-width: 0; }
.lc-who .label { font-size: .68rem; }
.lc-mail { word-break: break-all; }
.lc-more summary { cursor: pointer; padding-top: 6px; }
/* shipment card: carrier box */
.cc-box { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; }
.cc-carrier { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.cc-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.cc-box .label { font-size: .62rem; }
.cc-btns { display: flex; gap: 4px; flex-shrink: 0; }
.cc-btns .ib { padding: 3px 6px; font-size: .75rem; }
.lrow .cc-box { align-self: start; min-width: 0; }
/* Add from email: inbox list */
.fe-list { display: grid; gap: 6px; max-height: 55vh; overflow: auto; }
.fe-mail { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.fe-mail:hover { border-color: var(--brand); }
/* drag-and-drop from Outlook / folders: full-window hint while files are dragged over the TMS */
#dropHint { position: fixed; inset: 10px; z-index: 900; border: 3px dashed var(--brand); border-radius: 16px; background: rgba(0, 102, 255, .08); display: grid; place-items: center; pointer-events: none; }
#dropHint > div { background: var(--panel); color: var(--ink); padding: 18px 26px; border-radius: 12px; box-shadow: var(--shadow); font-size: 1.1rem; display: grid; gap: 4px; text-align: center; }
#dropHint span { font-size: .85rem; color: var(--ink-2); }
.temp-off { color: var(--bad); font-weight: 700; }
.stop-done { margin-top: 6px; font-weight: 700; color: var(--ink); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.stop-done.is-done { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.leg-miles { margin: -2px 0 -2px 10px; padding: 2px 0 2px 18px; border-left: 2px dashed var(--line); font: 600 .78rem/1.4 var(--f-mono, monospace); color: var(--ink-2); }
.trip-total { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.trip-total b { font-size: 1.05rem; }
.xparty { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 8px; }
.xparty-del { align-self: end; justify-self: start; }
.xcovers { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 400; }
.crm-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-loc select { min-width: 0; }
.split-items { overflow: auto; flex: 1; min-height: 0; }
.split-detail { overflow: auto; min-height: 0; min-width: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.page-pad { padding: 20px 24px 40px; display: grid; gap: 18px; max-width: 1280px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.check input { width: auto; margin: 0; accent-color: var(--brand); flex: none; }

/* list rows */
.arow { display: grid; gap: 4px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.arow:hover { background: var(--bg); }
.arow[aria-current="true"] { background: var(--info-bg); }
.arow .nm { font-weight: 700; }
.arow .sub { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.arow .figs { font: 500 .78rem/1.3 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* status chips for CRM */
.tag { display: inline-flex; align-items: center; font: 700 .66rem/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; white-space: nowrap; }
.tag.active { color: var(--ok); background: var(--ok-bg); }
.tag.prospect, .tag.onboarding { color: var(--info); background: var(--info-bg); }
.tag.inactive { color: var(--idle); background: var(--idle-bg); }
.tag.do_not_use, .tag.bad { color: var(--bad); background: var(--bad-bg); }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.tag.info { color: var(--info); background: var(--info-bg); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 .68rem/1 var(--f-body); }
.tab .count { margin-left: 6px; }

/* record header */
.rec-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); background: var(--panel); display: grid; gap: 12px; }
.rec-head h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.rec-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.figrow { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fig { flex: 1 1 130px; background: var(--panel); padding: 10px 12px; display: grid; gap: 2px; }
.fig b { font: 700 1.15rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.fig span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.rec-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding: 18px 24px 40px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.card-h { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-h h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.card-b { padding: 12px 14px; display: grid; gap: 10px; }
.stack { display: grid; gap: 18px; min-width: 0; }

/* contacts */
.contact { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: 0; }
.contact .nm { font-weight: 700; }
.icon-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ib { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 5px 8px; font: 600 .76rem/1 var(--f-body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ib:hover { border-color: var(--brand); color: var(--brand-text); }
.ib svg { width: 14px; height: 14px; flex: none; }
.phone { font-family: var(--f-mono); font-size: .82rem; }

/* activity */
.composer { display: grid; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); color: var(--ink-2); font: 600 .78rem/1 var(--f-body); padding: 7px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--bar); color: var(--bar-ink); }
.composer-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.composer-row > * { flex: 1 1 140px; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.ficon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--idle-bg); color: var(--ink-2); }
.ficon svg { width: 14px; height: 14px; }
.ficon.call { background: var(--info-bg); color: var(--info); }
.ficon.sms { background: #E3EDFF; color: #0057DB; }
.ficon.task { background: var(--warn-bg); color: var(--warn); }
.ficon.task.done { background: var(--ok-bg); color: var(--ok); }
.fmeta { font-size: .76rem; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.fbody.done { text-decoration: line-through; color: var(--ink-3); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.overdue { color: var(--bad); font-weight: 700; }

/* documents */
.docs-drop { border: 2px dashed var(--line); border-radius: 8px; padding: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); }
.docs-drop.over { border-color: var(--brand); background: var(--info-bg); }
.docs-drop select { width: auto; padding: 6px 8px; font-size: .82rem; }
.doc { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: 0; }
.doc-ic { width: 34px; height: 40px; border-radius: 4px; background: var(--charcoal); color: #fff; display: grid; place-items: center; font: 700 .58rem/1 var(--f-body); letter-spacing: .04em; }
.doc-ic.pdf { background: #B42318; } .doc-ic.img { background: #0057DB; }
.doc a { font-weight: 600; overflow-wrap: anywhere; }
.doc select { width: auto; padding: 4px 6px; font-size: .76rem; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th { text-align: left; font: 700 .68rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel); position: sticky; top: 0; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .mono, .tbl .linkbtn.mono, .tbl td:first-child { white-space: nowrap; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--bg); }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.tbl input[type=checkbox] { width: auto; accent-color: var(--brand); }

/* commissions */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.person { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.person[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.person .big { font: 700 1.5rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.person .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: .74rem; color: var(--ink-3); }
.person .mini b { display: block; font: 600 .9rem/1.2 var(--f-mono); color: var(--ink); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.toolbar label.field { min-width: 150px; }
.paid { color: var(--ok); font-weight: 600; }
.pending { color: var(--ink-3); }

/* messages */
.thread-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.thread-row:hover { background: var(--bg); }
.thread-row[aria-current="true"] { background: var(--info-bg); }
.thread-row .nm { font-weight: 700; display: flex; gap: 6px; align-items: center; min-width: 0; }
.thread-row .snip { grid-column: 1 / -1; font-size: .84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row.unread .snip { color: var(--ink); font-weight: 600; }
.thread-row time { font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.udot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.chat-body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bubble { max-width: min(520px, 80%); padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.4; }
.bubble.in { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble-meta { font-size: .7rem; color: var(--ink-3); }
.bubble-meta.out { align-self: flex-end; }
.callline { align-self: center; font-size: .78rem; color: var(--ink-3); background: var(--idle-bg); padding: 4px 10px; border-radius: 999px; }
.chat-compose { border-top: 1px solid var(--line); background: var(--panel); padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.chat-compose .row-between textarea { flex: 1; min-height: 44px; }
.tpls { display: flex; gap: 6px; flex-wrap: wrap; }
.notice-box { margin: 12px 16px; padding: 12px 14px; border-radius: 8px; background: var(--warn-bg); border-left: 4px solid var(--warn); font-size: .86rem; display: grid; gap: 6px; }
.notice-box.info { background: var(--info-bg); border-left-color: var(--info); }
.notice-box.bad { background: var(--bad-bg); border-left-color: var(--bad); margin: 4px 0; }
.blank { display: grid; place-items: center; height: 100%; padding: 40px; color: var(--ink-2); text-align: center; }
.blank p { max-width: 42ch; margin: 0; }

/* office dialogs */
dialog.odlg { width: min(560px, calc(100vw - 32px)); }
dialog.odlg.wide { width: min(760px, calc(100vw - 32px)); }
.plan { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.money-grid div { background: var(--panel); padding: 8px 10px; display: grid; gap: 2px; }
.money-grid span { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.money-grid b { font: 700 1rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.neg { color: var(--bad); }
.comm-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: .86rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
.comm-row:last-child { border-bottom: 0; }
.comm-row b.amt { font-family: var(--f-mono); }
.hint { font-size: .8rem; color: var(--ink-3); }
.inline-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Cards / List switch (top bar). Card view: Customers/Carriers become a grid of account cards (an account opens full
   width with a back button), every table row becomes a card with labelled fields, the Dashboard is unchanged.
   List view: the Dashboard shows one card per row. */
#page.view-cards #crmSplit:not(.show-detail) { grid-template-columns: minmax(0, 1fr); }
#page.view-cards #crmSplit:not(.show-detail) .split-detail { display: none; }
#page.view-cards #crmSplit .split-list { border-right: 0; }
#page.view-cards #crmSplit.show-detail { grid-template-columns: minmax(0, 1fr); }
#page.view-cards #crmSplit.show-detail .split-list { display: none; }
#page.view-cards #crmSplit .back-mobile { display: inline-flex; }
#page.view-cards #crmList { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 12px 16px 24px; align-content: start; background: var(--bg); }
#page.view-cards #crmList .arow { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; align-content: start; }
#page.view-cards #crmList .arow:hover { border-color: var(--brand); }
#page.view-cards #crmList .empty { grid-column: 1 / -1; }
/* quick actions on customer / carrier cards (card view only; the narrow list stays clean) */
.acc-actions { display: none; }
#page.view-cards .acc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); cursor: default; }
#page.view-cards .acc-actions select { width: auto; flex: 1 1 110px; padding: 5px 8px; font-size: .8rem; }
.arow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#page.view-cards .tbl thead { display: none; }
#page.view-cards .tbl, #page.view-cards .tbl tbody, #page.view-cards .tbl tfoot { display: block; }
#page.view-cards .tbl tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 10px; }
#page.view-cards .tbl tbody > tr { display: grid; gap: 5px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
#page.view-cards .tbl tbody > tr.click:hover { border-color: var(--brand); }
#page.view-cards .tbl tbody > tr.click:hover td { background: none; }
#page.view-cards .tbl tbody > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 0; padding: 0; text-align: right; white-space: normal; min-width: 0; }
#page.view-cards .tbl tbody > tr > td[data-label]:not([data-label=""])::before { content: attr(data-label); font: 700 .64rem/1.6 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; flex: none; }
#page.view-cards .tbl tbody > tr > td[colspan] { display: block; text-align: left; grid-column: 1 / -1; }
#page.view-cards .tbl tbody > tr:has(> td[colspan]) { grid-column: 1 / -1; }
#page.view-cards .tbl tfoot tr { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 12px 12px; }
#page.view-cards .tbl tfoot td { border: 0; padding: 0; }
#page.view-cards .tbl-wrap { overflow: visible; }
#page.view-list .dash-grid { grid-template-columns: minmax(0, 1fr); }

/* Customers, Carriers and Locations use the whole screen width. Cards: five across (fewer on narrow screens). */
.page-pad.wide { max-width: none; }
#page.view-cards #crmSplit #crmList, #page.view-cards .loc-tbl tbody { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { #page.view-cards #crmSplit #crmList, #page.view-cards .loc-tbl tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { #page.view-cards #crmSplit #crmList, #page.view-cards .loc-tbl tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #page.view-cards #crmSplit #crmList, #page.view-cards .loc-tbl tbody { grid-template-columns: minmax(0, 1fr); } }
#page.view-cards .loc-tbl tbody > tr > td:first-child { display: block; text-align: left; }
#page.view-cards .loc-tbl .inline-actions { flex-wrap: wrap !important; justify-content: flex-end; }
/* Customers / Carriers list view: one full-width row per account (name · details · 90-day figures · quick actions); an
   opened customer fills the page with a back button, like card view */
#page.view-list #crmSplit:not(.show-detail), #page.view-list #crmSplit.show-detail { grid-template-columns: minmax(0, 1fr); }
#page.view-list #crmSplit:not(.show-detail) .split-detail, #page.view-list #crmSplit.show-detail .split-list { display: none; }
#page.view-list #crmSplit .split-list { border-right: 0; }
#page.view-list #crmSplit .back-mobile { display: inline-flex; }
#page.view-list #crmSplit .split-head { grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; }
#page.view-list #crmSplit .arow { grid-template-columns: minmax(200px, 1.4fr) minmax(160px, 1fr) minmax(220px, 1.2fr) auto; align-items: center; column-gap: 16px; }
#page.view-list #crmSplit .acc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; cursor: default; }
#page.view-list #crmSplit .acc-actions select { width: auto; padding: 5px 8px; font-size: .8rem; }
@media (max-width: 900px) { #page.view-list #crmSplit .arow { grid-template-columns: minmax(0, 1fr); } #page.view-list #crmSplit .split-head { grid-template-columns: minmax(0, 1fr); } }

/* Shipment / Documents tabs on a load */
.dtabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 2; }
.dtabs button { border: 0; background: none; color: var(--ink-2); font: 700 .86rem/1 var(--f-body); padding: 12px 10px; border-bottom: 3px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.dtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.dtabs .n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--idle-bg); color: var(--ink-2); font: 700 .68rem/1 var(--f-body); }
.doc-group { display: grid; gap: 4px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.doc-group:last-child { border-bottom: 0; }

/* 24-hour date + time fields */
.dt24 { display: flex; gap: 6px; min-width: 0; }
.dt24 input[type=date] { flex: 1 1 auto; min-width: 0; }
.dt24 .t24 { flex: 0 0 76px; width: 76px; text-align: center; font-family: var(--f-mono); }
.dt24 .t24:invalid { border-color: var(--bad); }

/* extra stops and commodity lines on a shipment */
.xstop { display: grid; gap: 8px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r); background: var(--bg); }
.xstop select { width: auto; padding: 5px 8px; }
.items-tbl td { padding: 4px 6px; vertical-align: middle; }
.items-tbl input, .items-tbl select { padding: 6px 7px; }
.items-tbl td:first-child { min-width: 180px; white-space: normal; }
.items-tbl input[type=number] { width: 90px; text-align: right; }
.items-tbl input[type=checkbox] { width: auto; }

/* web location search results */
.place-list { display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 4px 0; max-height: 240px; overflow-y: auto; }
.place { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.place:last-child { border-bottom: 0; }
.place:hover, .place:focus-visible { background: var(--info-bg); }
.place span { font-size: .8rem; color: var(--ink-2); }

/* dashboard */
/* dashboard cards: 4 across on a wide screen, then 3 / 2 / 1 as it narrows */
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; align-items: start; } /* dense: a full-width card doesn't leave a gap in the row above */
@media (max-width: 1400px) { .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-grid .dash-wide { grid-column: 1 / -1; min-width: 0; }
/* moving cards: a ⠿ grip on each card's top-right corner */
.dash-move { position: relative; }
.dash-grid:has(.dash-move) { padding-top: 10px; } /* room for the grips on the first row */
.dash-grip { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; width: 34px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: .85rem; line-height: 1; cursor: grab; opacity: .85; }
.dash-move:hover .dash-grip, .dash-grip:focus-visible { opacity: 1; border-color: var(--brand); color: var(--ink); }
.dash-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-grip { touch-action: none; } /* touch: the grip drags instead of scrolling */
.dash-move.dragging { opacity: .45; }
body.dash-dragging, body.dash-dragging * { cursor: grabbing !important; user-select: none; }
.dash-move.drop-on > :not(.dash-grip) { outline: 2px dashed var(--brand); outline-offset: 3px; border-radius: var(--r); }
.dash-grid .dash-cell { min-width: 0; }
.dash-rev { display: grid; gap: 12px; }
.dash-pick { display: grid; gap: 2px; margin-top: 8px; max-height: 60vh; overflow: auto; }
.dash-pick-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dash-card { border-top: 4px solid var(--line); overflow: hidden; }
.dash-card.tone-warn { border-top-color: var(--warn); }
.dash-card.tone-info { border-top-color: var(--info); }
.dash-card.tone-bad { border-top-color: var(--bad); }
.dash-n { font: 700 1.6rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.tone-warn .dash-n { color: var(--warn); } .tone-info .dash-n { color: var(--info); } .tone-bad .dash-n { color: var(--bad); }
.dash-list { max-height: 340px; overflow: auto; }
.drow2 { display: grid; gap: 3px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.drow2:last-child { border-bottom: 0; }
.drow2:hover { background: var(--bg); }
.drow2 .mono { font: 700 .85rem/1.2 var(--f-mono); }
.warn-t { color: var(--warn); }
.bad-t { color: var(--bad); }
.person.total { cursor: default; background: var(--info-bg); border-color: var(--info); }

@media (max-width: 960px) { .rec-body { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  main.page-mode { grid-template-rows: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.show-detail .split-list { display: none; }
  .split:not(.show-detail) .split-detail { display: none; }
  .rec-head, .rec-body { padding-left: 16px; padding-right: 16px; }
  .page-pad { padding: 16px; }
  .money-grid { grid-template-columns: 1fr 1fr 1fr; }
  .plan { grid-template-columns: 1fr 1fr; }
}
.back-mobile { display: none; }
@media (max-width: 820px) { .back-mobile { display: inline-flex; } }

/* task alerts: pop-ups at the bottom right */
#taskAlerts { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; }
.tk-alert { background: var(--panel, #fff); border: 1px solid var(--line, #ddd); border-left: 4px solid var(--accent, #2563eb); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: grid; gap: 6px; animation: tkpop .25s ease-out; }
.tk-alert.urgent { border-left-color: var(--bad, #dc2626); }
.tk-alert .tk-x { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.tk-alert .inline-actions { flex-wrap: nowrap; }
.tk-alert select.btn { width: auto; padding-right: 6px; }
@keyframes tkpop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* on call (Tasks page) */
.oc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 12px 0; }
.oc-h { font-size: .95rem; margin: 14px 0 6px; }
.oc-h .hint { font-weight: 400; margin-left: 6px; }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }

/* Reports: the list of reports (left) and the report (right) */
.rp-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-height: 0; }
.rp-side { overflow: auto; border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 20px; }
.rp-side input[type=search] { width: 100%; margin-bottom: 10px; }
.rp-grp { margin-bottom: 12px; }
.rp-grp .label { padding: 0 8px 4px; }
.rp-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: .9rem; color: inherit; cursor: pointer; line-height: 1.25; }
.rp-item:hover { background: var(--bg); }
.rp-item[aria-current="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.rp-lock { font-size: .7rem; opacity: .7; }
.rp-scope { padding: 4px 8px; }
.rp-main { overflow: auto; padding: 18px 22px 40px; min-width: 0; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rp-pick { display: none; margin-bottom: 8px; max-width: 100%; }
.rp-filters { flex-wrap: wrap; }
.rp-figs .fig b .tag { font-size: .8rem; }
.rp-chart .card-b { display: grid; gap: 6px; }
.rp-bar { display: grid; grid-template-columns: minmax(90px, 220px) 1fr minmax(70px, auto); gap: 10px; align-items: center; font-size: .85rem; }
.rp-bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bt { background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.rp-bf { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.rp-bf.neg { background: var(--bad); }
.rp-bv { text-align: right; font-variant-numeric: tabular-nums; }
.rp-tbl th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.rp-tbl th[data-sort]:hover { text-decoration: underline; }
.rp-tbl td { white-space: nowrap; }
.rp-tbl tfoot td { font-weight: 700; }
.rp-tw { display: inline-block; width: 1em; color: var(--accent); }
.rp-sub > td { padding: 0 !important; background: var(--bg); }
.rp-sub > td > div { padding: 8px 10px; }
.pos { color: var(--ok, #1e8e3e); }
@media (max-width: 900px) {
  .rp-wrap { grid-template-columns: 1fr; }
  .rp-side { display: none; }
  .rp-pick { display: block; }
  .rp-main { padding: 14px 16px 30px; }
  .rp-bar { grid-template-columns: minmax(70px, 120px) 1fr auto; }
}
@media print {
  .brandbar, .tabs, .rp-side, .rp-actions, .rp-pick, #taskAlerts, #toast, .rpt-switch { display: none !important; }
  .rp-wrap { display: block; height: auto; }
  .rp-main { overflow: visible; padding: 0; }
  .rp-filters select, .rp-filters input { border: 0; background: none; appearance: none; }
  .rp-tbl td, .rp-tbl th { font-size: 10px; padding: 3px 5px; }
}
.rp-figs .rp-when b { font: 600 .9rem/1.3 var(--f-body); }
.rp-figs .fig b.pos { color: var(--ok, #1e8e3e); }

/* carrier ratings */
.stars { color: #f5b301; letter-spacing: 1px; white-space: nowrap; }
.rate-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 10px 0 0; display: grid; gap: 8px; }
.rate-box legend { font-weight: 700; padding: 0 4px; }
.star-pick { display: flex; align-items: center; gap: 2px; flex-direction: row; }
.star-pick label { cursor: pointer; font-size: 1.9rem; line-height: 1; color: var(--line); }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label:has(input:focus-visible) { outline: 2px solid var(--accent); border-radius: 4px; }
/* fill up to the picked star (and the hovered one) */
.star-pick:has(input:checked) label { color: #f5b301; }
.star-pick label:has(input:checked) ~ label { color: var(--line); }
.star-pick:hover label { color: #f5b301 !important; }
.star-pick label:hover ~ label { color: var(--line) !important; }
.star-pick .star-word { margin-left: 10px; }
.rate-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.rate-row:first-of-type { border-top: 0; }
.rate-comment { margin-top: 3px; color: var(--ink-2, inherit); font-style: italic; white-space: pre-line; }
.rate-dist { display: grid; gap: 3px; margin-bottom: 10px; }
.rate-dist > div { display: grid; grid-template-columns: 36px 1fr 24px; gap: 8px; align-items: center; font-size: .8rem; }
.rate-dist .rp-bf { background: #f5b301; }
.rate-item { padding: 6px 0; border-top: 1px solid var(--line); }
.tag-btn { cursor: pointer; border: 0; font: inherit; }
.rp-wrap-txt { white-space: normal; display: inline-block; min-width: 200px; max-width: 420px; }
.arow-rating { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; white-space: nowrap; }
.arow-rating b { font-weight: 700; }
.arow-rating.none .stars { color: var(--ink-3); opacity: .6; }

/* customer portal card on a customer's profile */
.portal-user { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.portal-user:first-of-type { border-top: 0; }

/* customer portal conversation on a shipment's Messages tab */
.pm-card { margin-bottom: 14px; border-left: 3px solid var(--accent); }
.pm-thread { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding: 2px 2px 10px; }
.pm-bubble { max-width: 85%; justify-self: start; background: var(--bg); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 8px 12px; }
.pm-bubble.ours { justify-self: end; background: var(--info-bg, rgba(0,87,219,.12)); border-color: var(--accent); border-radius: 12px 12px 4px 12px; }
.pm-who { font-size: .74rem; font-weight: 700; margin-bottom: 2px; }
.pm-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-meta { font-size: .7rem; color: var(--ink-3); margin-top: 3px; }
.pm-reply { display: flex; gap: 8px; align-items: flex-end; margin: 6px 0; }
.pm-reply textarea { flex: 1; min-height: 40px; }
.pm-reply select { width: auto; }
.pm-preview { margin: 2px 0 4px; white-space: pre-wrap; }
.dtabs .n.hot { background: var(--accent); color: #fff; }
.pm-del { color: var(--ink-3); margin-top: 2px; }

/* Settings → Notifications */
.nt-tbl th.c, .nt-tbl td.c { text-align: center; width: 64px; }
.nt-tbl td { vertical-align: middle; }
.nt-tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); }
.nt-log { margin-top: 10px; } .nt-log ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.nt-tbl { table-layout: auto; } .nt-tbl td:first-child { white-space: normal; min-width: 0; } .nt-tbl th.c, .nt-tbl td.c { width: 52px; padding-left: 4px; padding-right: 4px; }

/* CRM (Customers tab) */
.crm-views { margin-bottom: 8px; }
.crm-sort { margin-top: 6px; } .crm-sort select { width: auto; }
.crm-line { display: block; font-size: .76rem; font-weight: 400; margin-top: 2px; }
.hl { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg); color: var(--ink-2); white-space: nowrap; }
.hl.ok { background: rgba(30,142,62,.15); color: var(--ok, #1e8e3e); } .hl.warn { background: rgba(217,119,6,.16); color: #d97706; } .hl.bad { background: var(--bad-bg, rgba(192,57,43,.15)); color: var(--bad); }
.hl.big { font-size: .85rem; padding: 3px 10px; }
.crm-card .card-b { display: grid; gap: 12px; }
.crm-reasons { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .85rem; }
.crm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.crm-facts > div { display: grid; gap: 2px; } .crm-facts b { font-size: .95rem; }
.crm-credit .rp-bt { display: block; margin-top: 3px; }
.crm-sec { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.crm-item { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; align-items: baseline; flex-wrap: wrap; }
.crm-item.click { cursor: pointer; } .crm-item.click:hover { text-decoration: underline; }
.stage, .qst { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; background: var(--bg); color: var(--ink-2); }
.st-won, .q-won { background: rgba(30,142,62,.15); color: var(--ok, #1e8e3e); } .st-lost, .q-lost, .q-expired { background: var(--bad-bg, rgba(192,57,43,.15)); color: var(--bad); }
.st-negotiating, .st-quoting, .q-sent { background: rgba(0,87,219,.14); color: var(--accent); }
.crm-page { height: 100%; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.crm-top { padding: 14px 22px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.crm-top .crm-views { margin: 0; }
.crm-body { overflow: auto; padding: 16px 22px 40px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; min-height: 120px; display: grid; grid-template-rows: auto 1fr; }
.kcol.over { outline: 2px dashed var(--accent); }
.kcol-h { padding: 8px 10px; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; border-bottom: 1px solid var(--line); }
.kcol-b { padding: 8px; display: grid; gap: 8px; align-content: start; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; cursor: grab; }
.kcard:hover { border-color: var(--accent); } .kcard.dragging { opacity: .5; }
.kc-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .75rem; }
.kc-move { width: 100%; font-size: .75rem; padding: 3px 6px; }
.kc-empty { padding: 6px; }
.fu-group { margin-bottom: 12px; }
.fu-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fu-row:first-child { border-top: 0; }
.crm-rules { display: grid; gap: 10px; margin: 10px 0; }
.crm-rule { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
@media (max-width: 760px) { .crm-top, .crm-body { padding-left: 14px; padding-right: 14px; } }
.crm-rhythm { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.crm-rhythm > div { display: grid; gap: 1px; } .crm-rhythm b { font-size: .95rem; }
.m-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding-top: 4px; }
.m-bar { flex: 1; max-width: 18px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8; }
.m-bar.neg { background: var(--bad); }
.hl.neutral { background: var(--bg); color: var(--ink-3); }

/* every phone number dials when clicked; mobiles open Call / Text */
.phone { cursor: pointer; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap; }
.phone:hover { text-decoration-style: solid; }
.phone.nodial, .nodial .phone { cursor: default; color: inherit; text-decoration: none; }
.ph-menu { position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.25); padding: 6px; display: grid; gap: 2px; min-width: 190px; }
.ph-menu .hint { padding: 4px 8px 6px; }
.ph-menu button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ph-menu button:hover, .ph-menu button:focus-visible { background: var(--bg); outline: none; }
.ph-menu svg { width: 16px; height: 16px; }

/* open shipment: Carrier section with the driver assignment, and the equipment badge */
#ldContacts { display: grid; gap: 10px; }
.lc-driverbox { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.eq-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px 5px 5px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: .85rem; }
.eq-badge b { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--ink-3); color: #fff; }
.eq-badge.eq-reefer b { background: #0284c7; } .eq-badge.eq-van b { background: #475569; } .eq-badge.eq-flat b { background: #b45309; }
.eq-badge.eq-power b { background: #7c3aed; } .eq-badge.eq-box b { background: #0f766e; } .eq-badge.eq-tank b { background: #be123c; }
.eq-badge.eq-none { border-style: dashed; color: var(--ink-3); }
.eq-warn { color: var(--bad); font-weight: 600; }
.req { color: var(--bad); font-weight: 700; }

/* open shipment: the Freight strip across the top (equipment, commodity, weight, special instructions) */
.freight-strip { column-span: all; background: var(--panel); border-bottom: 2px solid var(--line); }
.fr-grid { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(140px, 1fr) minmax(110px, .7fr) minmax(220px, 2fr); gap: 10px; }
.fr-cell { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.fr-cell b { font-size: 1.05rem; overflow-wrap: anywhere; }
.fr-eq .fr-type { display: inline-block; justify-self: start; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--ink-3); color: #fff; }
.fr-eq.eq-reefer .fr-type { background: #0284c7; } .fr-eq.eq-van .fr-type { background: #475569; } .fr-eq.eq-flat .fr-type { background: #b45309; }
.fr-eq.eq-power .fr-type { background: #7c3aed; } .fr-eq.eq-box .fr-type { background: #0f766e; } .fr-eq.eq-tank .fr-type { background: #be123c; }
.fr-eq.eq-reefer { border-color: #0284c7; } .fr-temp { font-weight: 700; color: #0284c7; } .fr-temp.neg { color: var(--bad); }
.fr-notes.has { background: rgba(217,119,6,.10); border-color: #d97706; }
.fr-notes-text { white-space: pre-line; font-weight: 600; font-size: .92rem; max-height: 9em; overflow: auto; }
@media (max-width: 900px) { .fr-grid { grid-template-columns: 1fr 1fr; } .fr-notes { grid-column: 1 / -1; } }

/* LTL */
.eq-badge.eq-ltl b, .fr-eq.eq-ltl .fr-type { background: #15803d; }
.fr-eq.eq-ltl { border-color: #15803d; } .fr-ltl { font-weight: 700; color: #15803d; }
.ltl-box { border: 1px solid #15803d; border-radius: 10px; padding: 8px 12px 10px; display: grid; gap: 8px; }
.ltl-box legend { font-weight: 700; padding: 0 4px; color: #15803d; }
.ltl-services { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---- CRM, HighLevel style: menu down the left */
.hl-shell { display: grid; grid-template-columns: 188px minmax(0, 1fr); height: 100%; min-height: 0; }
.hl-nav { background: var(--charcoal); display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; overflow-y: auto; }
.hl-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #C9CDD3; font: 600 .86rem/1 var(--f-body); padding: 10px 10px; border-radius: 6px; cursor: pointer; text-align: left; position: relative; }
.hl-nav button svg { width: 18px; height: 18px; flex: none; }
.hl-nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.hl-nav button[aria-current="page"] { background: var(--brand); color: #fff; }
.hl-badge { margin-left: auto; background: var(--bad); color: #fff; font: 700 .68rem/1 var(--f-body); border-radius: 999px; padding: 3px 6px; min-width: 18px; text-align: center; }
.hl-main { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.hl-main > .split, .hl-main > .crm-page { height: 100%; }
.crm-body.flush { padding: 0; overflow: hidden; }
@media (max-width: 900px) {
  .hl-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .hl-nav { flex-direction: row; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .hl-nav::-webkit-scrollbar { display: none; }
  .hl-main .crm-top .small.muted { display: none; }
  .hl-main .crm-top { padding: 10px 14px 6px; }
  .hl-nav button { flex: none; padding: 8px 10px; }
  .hl-nav button span { white-space: nowrap; }
}
/* tags */
.hl-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.hl-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--info-bg); color: var(--info); border-radius: 999px; padding: 3px 9px; font: 600 .74rem/1.2 var(--f-body); white-space: nowrap; }
.hl-tag.sm { padding: 1px 7px; font-size: .7rem; margin: 1px 2px 1px 0; }
.hl-tag button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: .9rem; line-height: 1; }
.hl-tag-in { border: 1px dashed var(--line); border-radius: 999px; padding: 3px 9px; font: .76rem var(--f-body); width: 90px; background: var(--panel); color: var(--ink); }
.hl-runs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* dashboard */
.hl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hl-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; text-align: left; font: inherit; color: inherit; }
button.hl-kpi { cursor: pointer; } button.hl-kpi:hover { border-color: var(--brand); }
.hl-kpi span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.hl-kpi b { font: 700 1.4rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.hl-kpi em { font-style: normal; font-size: .76rem; color: var(--ink-2); }
.hl-kpi em.pos { color: var(--ok); } .hl-kpi em.neg { color: var(--bad); }
.hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .hl-grid { grid-template-columns: minmax(0, 1fr); } }
.hl-grid .card-h select { font-size: .8rem; }
.hl-fun { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 36px 80px; gap: 8px; align-items: center; padding: 4px 0; }
.hl-fun-l { font-size: .84rem; font-weight: 600; }
.hl-fun-bar { height: 16px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.hl-fun-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.hl-fun b { font-family: var(--f-mono); text-align: right; }
.hl-fun.closed { border-top: 1px dashed var(--line); } .hl-fun.won b { color: var(--ok); } .hl-fun.lost b { color: var(--bad); }
.hl-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.hl-st.ok, .hl-dot.ok { background: var(--ok); } .hl-st.warn, .hl-dot.warn { background: #d97706; } .hl-st.bad, .hl-dot.bad { background: var(--bad); } .hl-st.info, .hl-dot.info { background: var(--info); } .hl-st.idle, .hl-dot.idle { background: var(--idle); }
.hl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; font-size: .8rem; }
.hl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.hl-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 12px 0 6px; }
.hl-row { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 7px 2px; text-align: left; cursor: pointer; font: inherit; color: inherit; flex-wrap: wrap; }
.hl-row:hover { background: var(--bg); }
.hl-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; }
.hl-feed li.neg { color: var(--bad); }
/* conversations: threads | messages | contact */
.hl-conv { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; height: 100%; min-height: 0; }
.hl-threads { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.hl-th-head { padding: 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.hl-th-head .seg { width: 100%; } .hl-th-head .seg button { flex: 1; padding: 6px 4px; font-size: .74rem; }
.hl-th-list { overflow-y: auto; flex: 1; min-height: 0; }
.hl-th { display: flex; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; align-items: flex-start; }
.hl-th:hover { background: var(--bg); } .hl-th[aria-current="true"] { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand); }
.hl-th.unread b { font-weight: 800; }
.hl-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--charcoal); color: #fff; display: grid; place-items: center; font-weight: 700; }
.hl-th-m { min-width: 0; flex: 1; display: grid; gap: 3px; }
.hl-th-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-th-p { font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ch { display: inline-block; font: 700 .62rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; margin-right: 5px; background: var(--idle-bg); color: var(--ink-2); vertical-align: 1px; }
.hl-ch.sms { background: var(--ok-bg); color: var(--ok); } .hl-ch.email { background: var(--info-bg); color: var(--info); } .hl-ch.portal { background: var(--warn-bg); color: var(--warn); }
.hl-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.hl-tt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.hl-tt > div { flex: 1; }
.hl-back { display: none; }
.hl-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.hl-day { align-self: center; font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.hl-msg { max-width: 72%; display: grid; gap: 3px; }
.hl-msg.in { align-self: flex-start; } .hl-msg.out { align-self: flex-end; }
.hl-meta { font-size: .72rem; color: var(--ink-3); }
.hl-msg.out .hl-meta { text-align: right; }
.hl-subj { font-weight: 700; font-size: .84rem; }
.hl-bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; font-size: .9rem; }
.hl-msg.out .hl-bubble { background: var(--brand); color: #fff; border-color: var(--brand); border-radius: 12px 12px 3px 12px; }
.hl-msg.out.email .hl-bubble { background: var(--info-bg); color: var(--ink); border-color: var(--info-bg); }
.hl-msg.out.portal .hl-bubble { background: var(--charcoal); border-color: var(--charcoal); }
.hl-call { align-self: center; font-size: .8rem; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hl-call svg { width: 14px; height: 14px; }
.hl-compose { background: var(--panel); border-top: 1px solid var(--line); padding: 8px 12px 12px; display: grid; gap: 6px; }
.hl-ctabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.hl-ctabs button { border: 0; background: none; padding: 6px 12px; font: 600 .82rem var(--f-body); color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hl-ctabs button[aria-selected="true"] { color: var(--brand-text); border-bottom-color: var(--brand); }
.hl-ctabs button[data-ch="note"][aria-selected="true"] { color: var(--warn); border-bottom-color: var(--warn); }
.hl-crow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hl-crow select, .hl-crow input { flex: 1 1 200px; min-width: 0; }
.hl-cbox textarea { width: 100%; resize: vertical; }
.hl-cact { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.hl-side { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; min-height: 0; }
.hl-side-sec { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.hl-side-name { font-size: 1.05rem; }
.hl-side .label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.hl-pc { padding: 6px 0; border-top: 1px dashed var(--line); display: grid; gap: 2px; }
.hl-pc:first-of-type { border-top: 0; }
@media (max-width: 1200px) { .hl-conv { grid-template-columns: 280px minmax(0, 1fr); } .hl-side { display: none; } }
@media (max-width: 760px) {
  .hl-conv { grid-template-columns: minmax(0, 1fr); }
  .hl-conv.has-thread .hl-threads { display: none; } .hl-conv:not(.has-thread) .hl-thread { display: none; }
  .hl-back { display: inline-flex; } .hl-msg { max-width: 88%; }
}
/* contacts */
.hl-lists { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-ctools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.hl-ctools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.hl-cfilters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; align-items: end; }
.hl-cfilters[hidden] { display: none; }
.hl-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--charcoal); color: #fff; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; }
.hl-bulk[hidden] { display: none; }
.hl-ctbl td { vertical-align: top; }
.hl-ctbl td:first-child, .hl-ctbl th:first-child { width: 32px; }
/* pipelines dialog */
.hl-pipe { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 12px; margin: 0 0 12px; display: grid; gap: 6px; }
.hl-pipe legend input { font-weight: 700; font-size: .95rem; }
/* workflows */
.hl-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.hl-recipe { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: left; display: grid; gap: 4px; cursor: pointer; font: inherit; color: inherit; }
.hl-recipe:hover { border-color: var(--brand); }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--idle); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + span { background: var(--ok); } .switch input:checked + span::before { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; }
.hl-wf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .hl-wf { grid-template-columns: minmax(0, 1fr); } }
.hl-flow { display: flex; flex-direction: column; align-items: center; }
.hl-node { width: min(620px, 100%); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; box-shadow: var(--shadow); }
.hl-node.trig { border-left-color: var(--warn); padding: 10px 14px 12px; display: grid; gap: 8px; }
.hl-node.cond { border-left-color: #7c3aed; } .hl-node.wait { border-left-color: var(--idle); }
.hl-node.end { width: auto; padding: 6px 16px; border-left-width: 1px; font-size: .8rem; color: var(--ink-3); border-radius: 999px; }
.hl-node-h { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.hl-node.trig .hl-node-h { color: var(--warn); }
.hl-node-t { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 10px 12px; font: 700 .9rem var(--f-body); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-node-t .hint { font-weight: 400; }
.hl-node-a { display: flex; gap: 2px; padding-right: 8px; }
.hl-node-b { padding: 0 14px 14px; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.hl-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); font-size: .72rem; margin-right: 4px; }
.hl-plus { display: flex; flex-direction: column; align-items: center; }
.hl-plus::before, .hl-plus::after { content: ''; width: 2px; height: 10px; background: var(--line); }
.hl-plus button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--brand-text); font: 700 1rem/1 var(--f-body); cursor: pointer; }
.hl-plus button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.hl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.hl-pick-b { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 12px; text-align: left; font: 600 .88rem var(--f-body); cursor: pointer; color: var(--ink); }
.hl-pick-b:hover { border-color: var(--brand); background: var(--info-bg); }
/* calendars */
.hl-cal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .hl-cal { grid-template-columns: minmax(0, 1fr); } .hl-cals { order: -1; } }
.hl-agenda { display: grid; gap: 10px; }
.hl-aday { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hl-aday.today { border-color: var(--brand); }
.hl-aday-h { padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.hl-aday.today .hl-aday-h { background: var(--info-bg); }
.hl-none { padding: 8px 12px; }
.hl-appt { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); border-left: 4px solid var(--c, var(--brand)); align-items: start; }
.hl-aday-h + .hl-appt { border-top: 0; }
.hl-appt.cancelled { opacity: .55; } .hl-appt.cancelled .hl-appt-m b { text-decoration: line-through; }
.hl-appt-t { display: grid; } .hl-appt-a { display: grid; gap: 4px; justify-items: end; }
.hl-appt-a select { width: auto; font-size: .8rem; padding: 4px 6px; }
@media (max-width: 600px) { .hl-appt { grid-template-columns: minmax(0, 1fr); } .hl-appt-a { justify-items: start; grid-auto-flow: column; } }
.hl-cals { display: grid; gap: 10px; }
.hl-calc { border-left: 4px solid var(--c, var(--brand)); }
.hl-calc .card-b, .hl-formc { display: grid; gap: 6px; }
.hl-link { overflow-wrap: anywhere; color: var(--ink-2); }
.hl-slug { display: flex; align-items: center; gap: 2px; font-size: .8rem; color: var(--ink-3); font-weight: 400; }
.hl-slug input { flex: 1; }
.hl-fs { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.hl-fs legend { font-weight: 700; font-size: .85rem; padding: 0 4px; }
.hl-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hl-hrs { display: grid; grid-template-columns: 80px 1fr auto 1fr; gap: 8px; align-items: center; }
.hl-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-dot[style] { vertical-align: 1px; }
/* forms */
.hl-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hl-fields { display: grid; gap: 8px; }
.hl-fld { border-left: 4px solid var(--brand); }
.hl-fld .hl-node-b { padding-top: 10px; }
/* campaigns */
.hl-cform { display: grid; gap: 10px; }
.hl-cform textarea { font-family: var(--f-body); }
.hl-aud { background: var(--bg); border-radius: 8px; padding: 10px; margin-top: 6px; }
.hl-prog { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; } .hl-prog span { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.hl-immap { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px; }
.hl-immap .field { font-size: .8rem; }
.hl-consent-ok { margin-top: 10px; padding: 10px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-bg); }
.hl-smsprev { display: grid; gap: 6px; background: var(--bg); border-radius: 10px; padding: 12px; }
.hl-bubble-prev { justify-self: start; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.hl-pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; color: var(--ink-2); }
/* load boards line under the shipment's Carrier box (On DAT · since 2h · call for rate) */
.lb-line { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }