*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;color:#1a1a18;font-size:14px;line-height:1.5;
  /* Dark slate gutter so the content "card column" floats on an HTL-brand background.
     Cards / nav / tables inside .app keep their light surfaces — only the outer
     gutter (margins on either side of the 1140px column) gets the dark treatment. */
  background:#2a2e36;
  min-height:100vh;
  background-image:linear-gradient(180deg, #2a2e36 0%, #1e2128 100%);
  background-attachment:fixed;}
/* Dev-only "Test as Role" fixed footer needs body bottom padding so content
   never hides under it. Class added via media query on body when the
   .dev-test-as block is present — kept simple via :has(). */
body:has(.dev-test-as){padding-bottom:54px;}
:root {
  /* HTL parent-brand palette (mirrors gohtl.com) */
  --brand: #c60001;
  --brand-dark: #3a3f47;
  --brand-bgtint: #fdf2f2;

  /* Base surfaces */
  --bg: #f4f3f0;
  --bgp: #ffffff;
  --bgs: #f8f7f4;
  --bgi: #eef4ff;
  --bgsc: #edfaf3;
  --bgw: #fffbf0;
  --bgd: #fff4f4;

  /* Text */
  --t: #18181b;
  --ts: #71717a;
  --ti: #1d4ed8;
  --tsc: #15803d;
  --tw: #92400e;
  --td: #b91c1c;

  /* Borders */
  --b: #e4e4e7;
  --bi: #bfdbfe;
  --bsc: #bbf7d0;
  --bw: #fde68a;
  --bd: #fecaca;

  /* Radius */
  --r: 6px;
  --rl: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);
}
.app{
  max-width:1140px;
  margin:0 auto;
  padding:1rem 1.25rem;
  /* The .app column sits on the dark gutter — give it a faint white tint so
     content cards have a subtle backdrop instead of meeting raw slate. */
  background:rgba(244, 243, 240, .55);
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 0 60px rgba(0,0,0,.18);
}
.nav{
  background:var(--bgp);
  border-radius:var(--rl);
  padding:10px 16px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--b);
  box-shadow:var(--shadow-sm);
}
.nav-logo{
  display:inline-flex;align-items:center;gap:7px;
  font-size:18px;
  font-weight:800;
  color:var(--brand-dark);
  letter-spacing:-.02em;
  margin-right:14px;
  text-transform:none;
  font-family:'DM Sans',system-ui,sans-serif;
}
.nav-logo .mark{
  display:inline-block;width:22px;height:22px;flex-shrink:0;
}
.nav-logo span{color:var(--brand);}
.nav-tabs{display:flex;gap:4px;align-items:center;}
.nav-tab{
  padding:6px 13px;
  border-radius:6px;
  border:none;
  background:transparent;
  font-size:12px;
  font-weight:600;
  color:var(--brand-dark);
  cursor:pointer;
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:all .12s;
  position:relative;
  /* 2026-05-29 — Force single-line so multi-word labels (CARRIER SEARCH,
     MY CARRIERS, MANAGER DASHBOARD, etc.) don't wrap and create a jagged
     baseline next to single-word ones (LOADS, TOUR). All tabs sit on
     the same line; the .nav-tabs flex container's align-items:center
     keeps them visually centered. */
  white-space:nowrap;
  line-height:1.2;
}
.nav-tab:hover{background:var(--bgs);color:var(--t);}
.nav-tab.active{
  color:var(--brand);
  background:var(--brand-bgtint);
}
.nav-tab.active:after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--brand);
}
.rep-chip-wrap{position:relative;flex-shrink:0;}
.rep-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 8px 3px 3px;border-radius:99px;
  background:transparent;border:1px solid transparent;
  font-family:inherit;font-size:12px;color:var(--brand-dark);
  cursor:pointer;white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.rep-chip:hover:not(:disabled){background:var(--bgs);border-color:var(--b);}
.rep-chip:disabled{cursor:default;}
/* 2026-05-29 — Hide the name + role text in the chip; just show the
   avatar circle + the caret as a hint of the dropdown. The full name
   is still announced to screen readers via the wrapping <button>'s
   surrounding context, and the dropdown reveals the user's identity
   on open. */
.rep-chip-text{display:none;}
.rep-chip .rep-name{font-weight:700;font-size:12px;white-space:nowrap;}
.rep-chip .rep-role{font-size:10px;color:var(--ts);white-space:nowrap;}
.rep-caret{font-size:10px;color:var(--ts);margin-left:1px;}
.rep-av{
  width:30px;height:30px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
  box-shadow:0 1px 3px rgba(198,0,1,.25);
}
.rep-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:160px;
  background:var(--bgp);border:0.5px solid var(--b);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:4px;z-index:600;
  display:flex;flex-direction:column;gap:2px;
}
.rep-menu[hidden]{display:none;}
.rep-menu-item{
  display:block;padding:7px 12px;border-radius:6px;
  font-size:12px;color:var(--brand-dark);text-decoration:none;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:inherit;width:100%;
}
.rep-menu-item:hover{background:var(--brand-bgtint);color:var(--brand);}
.rep-menu-cancel{color:var(--ts);font-size:11px;border-top:0.5px solid var(--b);margin-top:2px;padding-top:7px;border-radius:0 0 6px 6px;}
.rep-menu-cancel:hover{background:var(--bgs);color:var(--t);}
.card{
  background:var(--bgp);
  border:1px solid var(--b);
  border-radius:var(--rl);
  padding:1rem;
  margin-bottom:10px;
  box-shadow:var(--shadow-sm);
}
.card-title{
  font-size:11px;
  font-weight:600;
  color:var(--ts);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:8px;}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:11px;color:var(--ts);}
.field input,.field select,.field textarea{width:100%;padding:6px 9px;border:0.5px solid var(--b);border-radius:var(--r);font-size:13px;background:var(--bgp);color:var(--t);outline:none;font-family:inherit;}
.field input:focus,.field select:focus{border-color:#378add;}
.field textarea{resize:vertical;min-height:50px;}
.btn{padding:6px 13px;border-radius:var(--r);border:0.5px solid var(--b);background:var(--bgp);font-size:12px;cursor:pointer;color:var(--t);font-family:inherit;}
.btn:hover{background:var(--bgs);}
.btn.primary{background:var(--bgi);color:var(--ti);border-color:var(--bi);font-weight:700;}
.btn.success{background:var(--bgsc);color:var(--tsc);border-color:var(--bsc);font-weight:700;}
.btn.danger{background:var(--bgd);color:var(--td);border-color:var(--bd);}
.btn.warning{background:var(--bgw);color:var(--tw);border-color:var(--bw);}
.btn.sm{padding:3px 9px;font-size:11px;}
.btn.ghost{background:transparent;border-color:var(--b);color:var(--ts);}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.badge{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:700;margin-right:2px;}
.badge.hot{background:#fcebeb;color:#791f1f;}
.badge.cap{background:#faeeda;color:#633806;}
.badge.hist{background:#e6f1fb;color:#0c447c;}
.badge.pref{background:#eaf3de;color:#27500a;}
.badge.owned{background:#e1f5ee;color:#085041;}
.lane-tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.lane-tag.headhaul{background:#faece7;color:#712b13;}
.lane-tag.backhaul{background:#eaf3de;color:#27500a;}
.lane-tag.neutral{background:#f1efe8;color:#5f5e5a;}
.hidden{display:none;}
.divider{border:none;border-top:0.5px solid var(--b);margin:8px 0;}
.load-link{color:var(--ti);text-decoration:underline;cursor:pointer;font-weight:700;}
.spec-wrap{position:relative;display:inline-block;}
.spec-dot{background:var(--bgs);border:0.5px solid var(--b);border-radius:var(--r);padding:1px 6px;font-size:11px;color:var(--ts);cursor:pointer;}
.spec-tooltip{display:none;position:absolute;bottom:calc(100% + 5px);left:0;min-width:200px;max-width:280px;background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--r);padding:8px 10px;font-size:12px;color:var(--t);line-height:1.6;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.12);}
.spec-wrap:hover .spec-tooltip{display:block;}
.score-bar{height:3px;background:var(--b);border-radius:99px;margin-top:3px;overflow:hidden;}
.score-fill{height:100%;border-radius:99px;}
.lb-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.lb-filter{padding:5px 10px;border:0.5px solid var(--b);border-radius:var(--r);font-size:12px;background:var(--bgp);color:var(--t);cursor:pointer;font-family:inherit;outline:none;}
.lb-filter:focus{border-color:#378add;}
.load-board-table{width:100%;border-collapse:collapse;table-layout:auto;}
.load-board-table th{font-size:10px;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.05em;padding:6px 6px;border-bottom:0.5px solid var(--b);text-align:left;background:var(--bgs);cursor:pointer;user-select:none;}
.load-board-table th:hover{color:var(--ti);}
.load-board-table td{padding:6px 6px;border-bottom:0.5px solid var(--b);font-size:12px;vertical-align:middle;}
/* 2026-05-29 — Cap the long-name columns so the 14-col board fits
   inside the card without horizontal scroll on common laptop widths.
   Carrier (col 11) and Locked by (col 12) are the two columns prone
   to runaway widths from long company / display names. Origin (3) +
   Destination (4) capped a bit gentler since "PINEVILLE, NC"-style
   values are short by nature. The wrap div on outbound.html still
   keeps overflow-x:auto as a fallback for ultra-narrow viewports. */
.load-board-table td:nth-child(3),
.load-board-table td:nth-child(4){max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.load-board-table td:nth-child(11),
.load-board-table td:nth-child(12){max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row{cursor:pointer;transition:background .1s;}
.lb-row:hover{background:#f0f7ff;}
.lb-row.selected{background:var(--bgi)!important;border-left:3px solid #378add;}
.lb-row.selected td:first-child{padding-left:7px;}
.lb-num{font-weight:700;color:var(--ti);font-size:12px;white-space:nowrap;}
.lb-equip-badge{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:700;background:var(--bgs);color:var(--ts);border:0.5px solid var(--b);}
.age-badge{display:inline-block;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.age-fresh{background:var(--bgsc);color:var(--tsc);}
.age-warn{background:var(--bgw);color:var(--tw);}
.age-hot{background:var(--bgd);color:var(--td);}
.pb-dat{display:inline-flex;align-items:center;padding:1px 6px;border-radius:99px;font-size:10px;font-weight:700;background:#E6F1FB;color:#0C447C;border:0.5px solid #B5D4F4;margin-right:2px;}
.pb-ts{display:inline-flex;align-items:center;padding:1px 6px;border-radius:99px;font-size:10px;font-weight:700;background:#EAF3DE;color:#27500A;border:0.5px solid #C0DD97;margin-right:2px;}
.act-mini{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ts);}
.act-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* v60 — Mark M3: Generate Message preview + Copy in rate-approval modal. */
.rt-gen-preview{
  margin-top:10px;background:var(--bgs);border:1px solid var(--b);
  border-radius:var(--r);padding:10px 12px;
  font-size:12px;line-height:1.6;white-space:pre-wrap;
  font-family:'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  color:var(--t);max-height:280px;overflow-y:auto;
}
.rt-gen-actions{display:flex;gap:6px;margin-top:8px;}
.rt-gen-warn{
  margin-top:10px;padding:8px 12px;font-size:12px;
  background:#fffbeb;color:#92400e;border:1px solid #fde68a;
  border-radius:var(--r);
}

/* v60 §1.8 — Load-number search bar with autocomplete dropdown.
   Container is position:relative (inline style on the wrapper); dropdown
   is absolute, anchored below the input, fixed-width-ish. */
.lb-load-search-drop{
  display:none;
  position:absolute;top:calc(100% + 3px);left:0;
  min-width:320px;max-width:420px;
  background:var(--bgp);border:1px solid var(--b);border-radius:var(--r);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  z-index:400;overflow:hidden;
  /* Anchor to the right edge of the input so it doesn't overflow off-screen. */
  right:0;left:auto;
}
.lds-row{
  padding:9px 12px;cursor:pointer;border-bottom:0.5px solid var(--b);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bgp);
}
.lds-row:last-child{border-bottom:none;}
.lds-left{min-width:0;flex:1;}
.lds-id-line{display:flex;align-items:center;flex-wrap:wrap;gap:2px;}
.lds-id{font-size:12px;font-weight:700;color:var(--ti);}
.lds-lane{
  font-size:11px;color:var(--ts);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lds-pu{font-size:10px;color:var(--ts);margin-top:1px;}
.lds-right{text-align:right;flex-shrink:0;}
.lds-rate{font-size:13px;font-weight:700;color:var(--ti);}
.lds-rpm{font-size:10px;color:var(--ts);}
.lds-cta{font-size:10px;color:#16a34a;font-weight:600;margin-top:2px;}

/* v58 §B4 — Coaching-flag pill on the load board's Flags column.
   Manager-only render. Click → popover. */
.lb-flag-pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700;
  border:none;cursor:pointer;font-family:inherit;
}
.lb-flag-high{background:#fee2e2;color:#b91c1c;}
.lb-flag-med {background:#fef3c7;color:#92400e;}
.lb-flag-pill:hover{filter:brightness(.95);}

/* v58 §B6 — Booking-urgency pill under the Pickup cell. Color comes
   from inline style (set by _booking_urgency tier). Shape only here. */
.lb-urgency-pill{
  display:inline-block;margin-top:2px;
  padding:1px 6px;border-radius:99px;
  font-size:9px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;
}

/* v58 §B7 — Aging-border on rows with no activity logged AND age ≥4h.
   Inline style on the <tr> also sets border-left for table-cell render
   correctness (some browsers ignore tr border); class added for
   styling future hover/state overrides. */
.lb-row-aging > td:first-child{ /* keep first cell aligned with the border */ }

/* v58 §B2 — Activity column: pill row with offered/quoted/no-cap/declined
   counts. Compact (single line in the cell). */
.lb-act-pills{display:flex;align-items:center;gap:3px;}
.lb-act-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;
  font-size:10px;font-weight:700;line-height:1;
}
.lb-act-contacted{background:#e6f1fb;color:#0c447c;}
.lb-act-quoted   {background:#fef3c7;color:#92400e;}
.lb-act-nocap    {background:#f3f4f6;color:#555;}
.lb-act-declined {background:#fee2e2;color:#791f1f;}
.load-hover-popup{display:none;position:fixed;z-index:300;background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:12px 14px;min-width:280px;max-width:340px;box-shadow:0 6px 20px rgba(0,0,0,.14);pointer-events:none;}
.load-hover-popup.visible{display:block;}
/* v58 §10 — sticky-top so the selected-load context stays visible while
   the rep scrolls through the inline detail card. */
/* v75 §E — two-row Selected Load Bar. Outer is a vertical stack; each
   .slb-row is its own wrapping flex line. Row 2 gets a hairline top border. */
.slb{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:10px 14px;margin-bottom:10px;display:flex;flex-direction:column;align-items:stretch;gap:0;position:sticky;top:6px;z-index:5;}
.slb-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.slb-row + .slb-row{border-top:0.5px solid var(--b);margin-top:8px;padding-top:8px;}
.slb-item{display:flex;flex-direction:column;gap:1px;}
.slb-label{font-size:10px;color:var(--ts);}
.slb-val{font-size:13px;font-weight:700;color:var(--t);}
.slb-val.blue{color:var(--ti);cursor:pointer;}
/* over/under delta vs market on the Target field */
.slb-delta{font-size:11px;font-weight:600;color:var(--ts);}
.slb-actions{margin-left:auto;display:flex;gap:6px;align-items:center;}

/* v75 §B+§C — single-click two-column split. Left = activity feed (Live
   quotes + Other activity), right = carrier list. Mirrors the prototype grid
   (1fr 1.4fr). Collapses to one column under 900px. */
.ldc-split{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin-bottom:10px;align-items:start;}
.ldc-split-left{border:0.5px solid var(--b);border-radius:var(--rl);background:var(--bgp);padding:10px 12px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.ldc-split-right{min-width:0;}
@media (max-width:900px){
  .ldc-split{grid-template-columns:1fr;}
  .ldc-split-left{max-height:none;}
}
/* Live quotes (rate-givers, high → low) */
.lq-block{display:flex;flex-direction:column;gap:6px;}
.lq-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#633806;}
.lq-sub{font-weight:400;color:var(--ts);}
.lq-quote{display:flex;gap:8px;align-items:flex-start;background:#fffdf6;border:0.5px solid #f0e3c0;border-radius:6px;padding:6px 8px;}
.lq-rate{font-size:15px;font-weight:800;color:#1a7f4b;white-space:nowrap;}
.lq-qbody{min-width:0;flex:1;}
.lq-carrier{font-size:12px;font-weight:700;color:var(--t);}
.lq-meta{font-size:11px;color:var(--ts);margin-top:1px;}
.lq-over{color:#b91c1c;font-weight:700;}
.lq-under{color:#166534;font-weight:700;}
.lq-at{color:#6b7280;}
.lq-notes{font-size:11px;color:var(--ts);margin-top:2px;}
/* Other activity (everything else, newest first) */
.oa-block{display:flex;flex-direction:column;gap:5px;}
.oa-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ts);}
.oa-entry{display:flex;gap:6px;align-items:flex-start;font-size:12px;}
.oa-body{flex:1;min-width:0;}
.oa-carrier{font-weight:700;color:var(--t);}
.oa-notes{font-size:11px;color:var(--ts);}
.oa-when{font-size:10px;color:var(--ts);text-align:right;white-space:nowrap;}
.oa-empty{font-size:12px;color:var(--ts);font-style:italic;}
/* v58 §P2 — inline stop-notes strip in the SLB. Full-width row at the
   bottom of the bar, yellow background, low height so it doesn't push
   the bar tall. */
.slb-spec{
  flex:1 1 100%;
  background:#fffbeb;border-left:3px solid #f59e0b;border-radius:3px;
  padding:5px 10px;margin-top:4px;
  font-size:11px;color:#92400e;
}
.slb-spec-more{
  display:inline-block;margin-left:6px;font-weight:700;color:#92400e;
  background:#fef3c7;padding:1px 6px;border-radius:99px;font-size:10px;
}
.carrier-row{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:12px 14px;margin-bottom:7px;}
.carrier-row.hot-carrier{border:2px solid #fac775;}
.carrier-row.called-out{opacity:.5;}
.carrier-row.declined-load{border-left:3px solid #f09595;border-top-left-radius:0;border-bottom-left-radius:0;}
/* v58 §6 — same row-tint pattern applied to carrier-match table rows. */
tr.called-out td{opacity:.55;}
tr.declined-load td:first-child{box-shadow:inset 3px 0 0 #f09595;padding-left:10px;}
.carrier-header{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px;}
/* v58 §P4 — tier dot prefix on carrier match card header */
.cm-tier-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  flex-shrink:0;
}
.carrier-name{font-size:14px;font-weight:700;color:var(--t);cursor:pointer;}
.carrier-name:hover{color:var(--ti);text-decoration:underline;}
.carrier-meta{font-size:11px;color:var(--ts);}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:7px;margin:7px 0;}
.cstat{background:var(--bgs);border-radius:var(--r);padding:7px 9px;}
.cstat-label{font-size:10px;color:var(--ts);margin-bottom:1px;}
.cstat-val{font-size:13px;font-weight:700;color:var(--t);}
.cstat-val.green{color:#1d9e75;}
.cstat-val.amber{color:#ba7517;}
.cstat-val.red{color:#a32d2d;}
.cap-entry{background:var(--bgw);border:0.5px solid var(--bw);border-radius:var(--r);padding:7px 10px;margin-top:7px;font-size:12px;color:var(--tw);}
.call-log-section{border-top:0.5px solid var(--b);margin-top:8px;padding-top:8px;}
.call-entry{display:flex;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:0.5px solid var(--b);}
.call-entry:last-child{border-bottom:none;}
.cs-badge{padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;white-space:nowrap;}
.cs-quoted{background:#faeeda;color:#633806;}
.cs-nocap{background:#f1efe8;color:#444441;}
.cs-declined{background:#fcebeb;color:#791f1f;}
.cs-declined-miles{background:#fcebeb;color:#791f1f;}
.cs-booked{background:#eaf3de;color:#27500a;}
.cs-callback{background:#e6f1fb;color:#0c447c;}
.rep-owner{display:inline-flex;align-items:center;gap:3px;background:var(--bgs);border:0.5px solid var(--b);border-radius:99px;padding:1px 7px;font-size:11px;color:var(--ts);}
.pitch-box{background:var(--bgi);border:0.5px solid var(--bi);border-radius:var(--r);padding:9px 11px;font-size:12px;color:var(--ti);margin-top:7px;line-height:1.6;}
.pitch-label{font-size:10px;font-weight:700;color:var(--ti);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;}
.priority-label{font-size:10px;color:var(--ts);padding:7px 0 3px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.filter-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.filter-pill{padding:3px 10px;border-radius:99px;border:0.5px solid var(--b);background:transparent;font-size:11px;color:var(--ts);cursor:pointer;font-family:inherit;}
.filter-pill.on{background:var(--bgi);color:var(--ti);border-color:var(--bi);font-weight:700;}
.reload-section{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);margin-bottom:10px;overflow:visible;}
.reload-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;user-select:none;}
.reload-header:hover{background:var(--bgs);border-radius:var(--rl);}
.reload-body{padding:0 14px 14px;border-top:0.5px solid var(--b);}
.reload-card{background:var(--bgs);border-radius:var(--rl);padding:12px;margin-top:8px;}
.reload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:6px;margin:8px 0;}
.rstat{background:var(--bgp);border-radius:var(--r);padding:7px 9px;}
.rstat.hl{background:var(--bgsc);border:0.5px solid var(--bsc);}
.rstat-label{font-size:10px;color:var(--ts);margin-bottom:1px;}
.rstat-label.green{color:var(--tsc);}
.rstat-val{font-size:13px;font-weight:700;color:var(--t);}
.rstat-val.green{color:var(--tsc);font-size:16px;}
.two-load-badge{background:#eaf3de;color:#27500a;border:0.5px solid #3b6d11;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;}
.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:200;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:1.1rem;width:100%;max-width:580px;margin:1rem;max-height:92vh;overflow-y:auto;overflow-x:visible;}
.modal-title{font-size:14px;font-weight:700;color:var(--t);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.modal-close{cursor:pointer;font-size:18px;color:var(--ts);background:none;border:none;line-height:1;}
/* Screenshot slots inside the first-time tester onboarding popup. The
   img tag has onerror that swaps to the .tester-shot-fallback div below
   it when the PNG isn't present yet. */
.tester-shot-frame{
  border:0.5px solid var(--b);border-radius:var(--r);background:var(--bgs);
  padding:8px;text-align:center;min-height:60px;
}
.tester-shot-frame img{max-width:100%;height:auto;border-radius:var(--r);display:block;margin:0 auto;}
.tester-shot-fallback{font-size:11px;color:var(--ts);padding:18px 10px;}
.tester-shot-fallback code{background:var(--bg);padding:1px 5px;border-radius:3px;font-size:10px;}
/* v58 §2 — Carrier Performance card tiles at the top of My Carriers. */
.perf-tile{
  display:block;padding:10px 12px;background:var(--bgs);border:0.5px solid var(--b);
  border-radius:var(--r);text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .08s,box-shadow .08s,border-color .08s;
}
.perf-tile:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);border-color:var(--brand);}
.perf-label{font-size:10px;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.06em;}
.perf-val{font-size:22px;font-weight:800;color:var(--t);margin:3px 0 1px;font-variant-numeric:tabular-nums;}
.perf-val.green{color:#1d9e75;}
.perf-val.amber{color:#ba7517;}
.perf-val.red{color:#a32d2d;}
.perf-sub{font-size:10px;color:var(--ts);line-height:1.35;}

/* ── Carrier autocomplete dropdown (static/v6/autocomplete.js) ──────────── */
.ac-dropdown{font-family:'DM Sans',system-ui,sans-serif;}
.ac-item{padding:7px 10px;border-bottom:0.5px solid var(--b);cursor:pointer;background:var(--bgp);}
.ac-item:last-child{border-bottom:none;}
.ac-item.ac-active,.ac-item:hover{background:var(--bgs);}
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ac-name{font-weight:600;color:var(--t);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-meta{font-size:10px;color:var(--ts);margin-top:1px;}
.ac-qual{display:inline-block;padding:1px 6px;border-radius:99px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;}
.ac-qual-ok{background:#eaf3de;color:#27500a;border:0.5px solid #c0dd97;}
.ac-qual-partial{background:#faeeda;color:#633806;border:0.5px solid #fac775;}
.ac-qual-no{background:#fce4e4;color:#a31818;border:0.5px solid #f09595;}
.ac-qual-na{background:#f1efe8;color:#5f5e5a;border:0.5px solid var(--b);}
.ac-empty{border-radius:var(--r);}

/* ── In-app training module (DEV_MODE only) ─────────────────────────────── */
/* Yellow (i) badges injected next to any element with a training entry.
   pointer-events stay live (this badge IS clickable), but the badge sits
   above row hover popups via a higher z-index. */
.train-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:#fac775;color:#1a1a1a;
  font-size:10px;font-weight:800;font-family:'DM Sans',system-ui,sans-serif;font-style:italic;
  border:1.5px solid #d49922;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  cursor:pointer;user-select:none;
  z-index:650;
}
.train-i:hover{background:#fbd896;transform:scale(1.08);}
/* The (i) badge popover — same vibe as the load hover popup but with the
   training body styling. */
.train-pop{
  position:absolute;z-index:660;
  background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);
  padding:12px 14px 14px;min-width:300px;max-width:380px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  font-size:12px;line-height:1.5;color:var(--t);
}
.train-pop-title{
  font-size:13px;font-weight:700;color:var(--t);margin-bottom:6px;padding-right:18px;
}
.train-pop-close{
  position:absolute;top:6px;right:8px;background:none;border:none;
  font-size:18px;line-height:1;cursor:pointer;color:var(--ts);
}
.train-pop-close:hover{color:var(--brand);}
/* Step body shared by both Shepherd and the (i) popover. */
.train-body{display:flex;flex-direction:column;gap:5px;}
.train-row{font-size:12px;line-height:1.45;color:var(--t);}
.train-tag{display:inline-block;font-weight:700;color:#633806;margin-right:4px;}
.train-why .train-tag{color:#7a2828;}
/* Usage examples list. Concrete actions a tester / user can take at
   this point. Renders below How. Grouped form gets a sub-heading per
   workflow path (Rep / Manager / Approval / etc.). */
.train-ex-list{margin:4px 0 0 18px;padding:0;font-size:12px;line-height:1.5;}
.train-ex-list li{margin-bottom:2px;}
.train-ex-group{margin-top:6px;}
.train-ex-group:first-child{margin-top:4px;}
.train-ex-group-label{
  font-size:10px;font-weight:700;color:var(--ts);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;
}
.train-shepherd .train-ex-group-label{color:#9aa3b2;}
.train-shepherd .train-ex-list{color:#e5e7eb;}
/* Shepherd theme override. The whole popup is DARK so the light header
   text and body text are unambiguously readable — never white on gray.
   !important is necessary on the surface colors because Shepherd ships
   a default light theme that wins specificity otherwise. */
.train-shepherd.shepherd-element{
  max-width:440px;
  border-radius:var(--rl);
  box-shadow:0 10px 32px rgba(0,0,0,.45);
}
.train-shepherd .shepherd-content{
  background:#1f2329 !important;
  color:#e5e7eb;
  border-radius:var(--rl);
  overflow:hidden;
}
.train-shepherd .shepherd-header{
  background:#c60001 !important;
  padding:10px 14px;border-bottom:none !important;
}
.train-shepherd .shepherd-title{color:#fff !important;font-size:14px;font-weight:700;}
.train-shepherd .shepherd-cancel-icon{color:#fff !important;opacity:.9;}
.train-shepherd .shepherd-cancel-icon:hover{opacity:1;}
.train-shepherd .shepherd-text{
  padding:14px 16px;color:#e5e7eb !important;font-size:13px;line-height:1.55;
}
/* Inner What/Why/How rows inherit the dark surface — flip the tag colors
   for legibility on dark. */
.train-shepherd .train-body{display:flex;flex-direction:column;gap:7px;}
.train-shepherd .train-row{color:#e5e7eb;}
.train-shepherd .train-tag{color:#fac775;font-weight:700;}
.train-shepherd .train-why .train-tag{color:#f08585;}
.train-shepherd .shepherd-footer{
  padding:6px 12px 12px;background:#1f2329 !important;border-top:none !important;
}
.train-shepherd .shepherd-button{
  background:#c60001 !important;color:#fff !important;border:none;border-radius:5px;
  font-weight:700;font-size:12px;padding:7px 16px;cursor:pointer;
}
.train-shepherd .shepherd-button:hover{background:#a30001 !important;}
.train-shepherd .shepherd-button.shepherd-button-secondary{
  background:transparent !important;color:#e5e7eb !important;
  border:1px solid #444a55 !important;
}
.train-shepherd .shepherd-button.shepherd-button-secondary:hover{
  background:#2d323a !important;border-color:#5a6170 !important;
}
/* Modal overlay dim — slightly darker so the popup pops. */
.shepherd-modal-overlay-container{fill:rgba(0,0,0,.55) !important;}
/* Toast for transient training messages ("No steps yet" etc.) */
.train-toast{
  position:fixed;bottom:60px;right:14px;z-index:1100;
  background:#1f2329;color:#fff;border-radius:6px;padding:8px 14px;
  font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);
  animation:trainToastIn .15s ease-out;
}
@keyframes trainToastIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
/* First-visit modal — full overlay with a dark-slate card that shows a
   preview screenshot of what the Tour looks like. Light text on dark to
   match the Tour popup's own theme (never white-on-gray). */
#train-firstvisit-banner{
  position:fixed;inset:0;z-index:1050;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:trainToastIn .15s ease-out;
}
#train-firstvisit-banner .train-fv-modal{
  position:relative;background:#1f2329;color:#e5e7eb;
  border-radius:var(--rl);
  max-width:520px;width:100%;
  padding:22px 24px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
#train-firstvisit-banner .train-fv-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;font-size:22px;line-height:1;
  color:#9aa3b2;cursor:pointer;padding:4px 8px;
}
#train-firstvisit-banner .train-fv-close:hover{color:#fff;}
#train-firstvisit-banner .train-fv-title{
  font-size:16px;font-weight:700;color:#fff;margin-bottom:6px;padding-right:24px;
}
#train-firstvisit-banner .train-fv-sub{
  font-size:12px;color:#bfc6d4;line-height:1.5;margin-bottom:14px;
}
#train-firstvisit-banner .train-fv-shot{
  background:#13161a;border:0.5px solid #2d323a;border-radius:var(--r);
  padding:10px;margin-bottom:14px;text-align:center;min-height:60px;
}
#train-firstvisit-banner .train-fv-shot img{
  max-width:100%;height:auto;border-radius:var(--r);display:block;margin:0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
#train-firstvisit-banner .train-fv-shot-fallback{
  font-size:11px;color:#9aa3b2;padding:14px 8px;
}
#train-firstvisit-banner .train-fv-shot-fallback code{
  background:#13161a;color:#e5e7eb;padding:1px 5px;border-radius:3px;font-size:10px;
}
#train-firstvisit-banner .train-fv-actions{
  display:flex;justify-content:flex-end;gap:8px;align-items:center;
}
#train-firstvisit-banner .train-fv-actions .btn.ghost{
  background:transparent;color:#e5e7eb;border:1px solid #444a55;
}
#train-firstvisit-banner .train-fv-actions .btn.ghost:hover{
  background:#2d323a;border-color:#5a6170;
}
#train-firstvisit-banner .train-fv-actions .btn.primary{
  background:#c60001;color:#fff;border:none;font-weight:700;
}
#train-firstvisit-banner .train-fv-actions .btn.primary:hover{background:#a30001;}
.channel-tab{padding:4px 10px;border-radius:99px;border:0.5px solid var(--b);background:transparent;font-size:11px;color:var(--ts);cursor:pointer;font-family:inherit;}
.channel-tab.on{background:var(--bgi);color:var(--ti);border-color:var(--bi);font-weight:700;}
.contact-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:0.5px solid var(--b);}
.contact-row:last-child{border-bottom:none;}
.cv-lookup{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:1.5rem;margin-bottom:10px;text-align:center;}
.mc-input-wrap{display:flex;gap:7px;max-width:360px;margin:0 auto;}
.mc-input-wrap input{flex:1;padding:9px 12px;border:0.5px solid var(--b);border-radius:var(--r);font-size:14px;outline:none;font-family:inherit;}
.mc-input-wrap input:focus{border-color:#378add;}
.carrier-profile-card{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:1rem;margin-bottom:10px;}
.cp-name{font-size:18px;font-weight:800;color:var(--t);}
.cp-meta{font-size:12px;color:var(--ts);margin-top:2px;}
.cp-owner-box{background:var(--bgsc);border:0.5px solid var(--bsc);border-radius:var(--r);padding:6px 12px;font-size:12px;color:var(--tsc);}
.cp-unclaimed{background:var(--bgw);border:0.5px solid var(--bw);border-radius:var(--r);padding:6px 12px;font-size:12px;color:var(--tw);}
.cp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;margin:10px 0;}
.lane-history-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:0.5px solid var(--b);font-size:12px;}
.lane-history-row:last-child{border-bottom:none;}
.notes-area{width:100%;padding:7px 9px;border:0.5px solid var(--b);border-radius:var(--r);font-size:12px;min-height:60px;resize:vertical;font-family:inherit;color:var(--t);background:var(--bgp);}
.inbound-step{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:1rem;margin-bottom:10px;}
.step-label{display:inline-block;background:var(--bgi);color:var(--ti);border-radius:99px;padding:2px 9px;font-size:10px;font-weight:700;margin-bottom:8px;}
.match-card{background:var(--bgs);border-radius:var(--rl);padding:12px;margin-bottom:8px;border:0.5px solid var(--b);}
.match-card.exact{border:2px solid #fac775;}
.match-card.odh{border-left:3px solid var(--bi);border-top-left-radius:0;border-bottom-left-radius:0;}
.match-card.ddh{border-left:3px solid var(--bsc);border-top-left-radius:0;border-bottom-left-radius:0;}
.mt-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;margin-bottom:5px;}
.mt-exact{background:#faeeda;color:#633806;}
.mt-odh{background:var(--bgi);color:var(--ti);}
.mt-ddh{background:var(--bgsc);color:var(--tsc);}
.queue-card{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:12px 14px;margin-bottom:7px;display:flex;align-items:center;gap:10px;}
.queue-card.called-today{border-left:3px solid #1d9e75;border-top-left-radius:0;border-bottom-left-radius:0;}
.queue-card.not-called{border-left:3px solid #fac775;border-top-left-radius:0;border-bottom-left-radius:0;}
.queue-card.overdue{border-left:3px solid #f09595;border-top-left-radius:0;border-bottom-left-radius:0;}
.queue-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.days-badge{padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;}
.days-ok{background:var(--bgsc);color:var(--tsc);}
.days-warn{background:var(--bgw);color:var(--tw);}
.days-overdue{background:var(--bgd);color:var(--td);}
/* AUDIT */
.sec-toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 0;cursor:pointer;user-select:none;border-top:0.5px solid var(--b);margin-top:6px;}
.sec-toggle:hover .sec-label{color:var(--t);}
.sec-label{font-size:11px;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.06em;}
.sec-arrow{font-size:10px;color:var(--ts);}
.sec-body{display:none;}
.sec-body.open{display:block;}
.sort-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.sort-table thead th{
  background:var(--bgs);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--ts);
  padding:7px 10px;
  border-bottom:1px solid var(--b);
  white-space:nowrap;
  text-align:left;
}
.sort-table th{font-size:10px;font-weight:600;color:var(--ts);padding:5px 8px;border-bottom:0.5px solid var(--b);text-align:left;background:var(--bgs);cursor:pointer;user-select:none;white-space:nowrap;}
.sort-table th:hover,.sort-table th.sorted{color:var(--ti);}
/* v58 §11 — sort-direction arrows on any sort-table column. sortBoard()
   in app.js sets data-sort-dir on the clicked th; the arrow renders from
   the attribute. Works for every sort-table instance (manager, lanes, etc). */
.sort-table th[data-sort-dir="asc"]::after{content:" ↑";color:var(--ti);font-weight:700;}
.sort-table th[data-sort-dir="desc"]::after{content:" ↓";color:var(--ti);font-weight:700;}
.flag-high{border-left:3px solid #e24b4a;border-top-left-radius:0;border-bottom-left-radius:0;}
.flag-med{border-left:3px solid #fac775;border-top-left-radius:0;border-bottom-left-radius:0;}
.flag-icon-high{background:#fcebeb;color:#791f1f;}
.flag-icon-med{background:#faeeda;color:#633806;}
.ft-kpi{background:#fcebeb;color:#791f1f;}
.ft-geo{background:#faeeda;color:#633806;}
.ft-aging{background:#faeeda;color:#633806;}
.ft-callback{background:#e6f1fb;color:#0c447c;}
.sort-table td{padding:6px 8px;border-bottom:0.5px solid var(--b);vertical-align:middle;}
.sort-table tr:last-child td{border-bottom:none;}
.sort-table tr:hover td{background:var(--bgs);}
.lt-b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#eaf3de;color:#27500a;font-size:10px;font-weight:800;}
.lt-h{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#faece7;color:#712b13;font-size:10px;font-weight:800;}
.lt-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#f1efe8;color:#5f5e5a;font-size:10px;font-weight:800;}
.lt-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#fcebeb;color:#791f1f;font-size:10px;font-weight:800;}
.sp-quoted{background:#faeeda;color:#633806;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.sp-nocap{background:#f1efe8;color:#444441;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.sp-declined{background:#fcebeb;color:#791f1f;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.sp-callback{background:#e6f1fb;color:#0c447c;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;}
.rep-owner-tag{display:inline-block;font-size:10px;background:#e6f1fb;color:#0c447c;padding:1px 6px;border-radius:99px;}
.audit-note{margin-top:8px;background:#faeeda;border:0.5px solid #fac775;border-radius:var(--r);padding:8px 12px;font-size:12px;color:#633806;line-height:1.7;}
.audit-note strong{color:#412402;}
.activity-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:0.5px solid var(--b);margin-top:6px;}
.act-stat{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ts);}
.act-num{font-size:12px;font-weight:700;}
.all-logged{display:flex;align-items:center;gap:4px;font-size:11px;color:#27500a;background:#eaf3de;padding:2px 8px;border-radius:99px;border:0.5px solid #c0dd97;margin-left:auto;}
.pending-warn{display:flex;align-items:center;gap:4px;font-size:11px;color:#633806;background:#faeeda;padding:2px 8px;border-radius:99px;border:0.5px solid #fac775;margin-left:auto;}

/* -- LOCK SYSTEM -- */
.lb-row.locked-mine td{background:#e8f2fc;}
.lb-row.locked-other td{background:#f7f6f2;}
/* v58 §1 — yellow row tint when a load is in 5-min match-or-release state.
   Overrides locked-mine / locked-other so the competition state is dominant. */
.lb-row.challenged td{background:#fdf3e0;}
.lb-row.challenged td{background:#fdf3e0;}
.lb-row.has-flag td:first-child{border-left:3px solid #e24b4a;}
.lock-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:11px;font-weight:700;cursor:default;}
.lbadge-mine{background:#e6f1fb;color:#0c447c;}
.lbadge-other{background:#f1efe8;color:#5f5e5a;}
/* v58 §3 — red alert badge when the lock has been idle ≥30 min. */
.lbadge-alert{background:#fce4e4;color:#a31818;}
/* v58 §4 — activity bar pills in the inline detail header. Dot+count
   per call outcome (contacted / quoted / no cap / declined), plus an
   "all logged" or "<n> pending" status pill on the right. */
.activity-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:0.5px solid var(--b);border-bottom:0.5px solid var(--b);margin:6px 0;}
.act-stat{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ts);}
.act-stat .act-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.act-num{font-size:12px;font-weight:700;color:var(--t);}
.act-dot-contacted{background:#0c447c;}
.act-dot-quoted{background:#1d9e75;}
.act-dot-nocap{background:#ba7517;}
.act-dot-declined{background:#a32d2d;}
.all-logged{display:flex;align-items:center;gap:4px;font-size:11px;color:#27500a;background:#eaf3de;padding:2px 8px;border-radius:99px;border:0.5px solid #c0dd97;margin-left:auto;}
.pending-warn{display:flex;align-items:center;gap:4px;font-size:11px;color:#633806;background:#faeeda;padding:2px 8px;border-radius:99px;border:0.5px solid #fac775;margin-left:auto;}
/* v58 §3 — dark tooltip for the lock badge, distinct from .load-hover-popup. */
.lock-tooltip{display:none;position:fixed;z-index:700;background:#1a1a1a;color:#fff;border-radius:6px;padding:9px 12px;font-size:11px;line-height:1.45;pointer-events:none;max-width:280px;box-shadow:0 6px 20px rgba(0,0,0,.3);}
.lock-tooltip.visible{display:block;}
.lock-tooltip .lt-warn{color:#fac775;font-weight:700;margin-top:4px;}
.lock-tooltip .lt-alert{color:#f08585;font-weight:700;margin-top:4px;}
.lbadge-challenge{background:#faeeda;color:#633806;}
.lock-banner{border-radius:var(--r);padding:10px 14px;margin-bottom:10px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.lb-mine{background:#e6f1fb;border:0.5px solid #b5d4f4;}
.lb-other{background:#f5f4f0;border:0.5px solid var(--b);}
.lb-challenge{background:#faeeda;border:0.5px solid #fac775;}
.lb-countdown{background:#fcebeb;border:0.5px solid #f7c1c1;}
.lb-text{font-size:13px;font-weight:700;}
.lb-sub{font-size:12px;margin-top:2px;opacity:.85;}
.lb-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.timer-big{font-size:22px;font-weight:800;color:var(--td);font-variant-numeric:tabular-nums;}
.soft-warning{background:#faeeda;border:0.5px solid #fac775;border-radius:var(--r);padding:7px 12px;font-size:12px;color:#633806;display:flex;align-items:center;gap:8px;margin-bottom:8px;}
/* -- COACHING FLAGS -- */
.flag-card{background:var(--bgp);border:0.5px solid var(--b);border-radius:var(--rl);padding:12px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;}
.flag-card.flag-high{border-left:3px solid #e24b4a;border-top-left-radius:0;border-bottom-left-radius:0;}
.flag-card.flag-med{border-left:3px solid #fac775;border-top-left-radius:0;border-bottom-left-radius:0;}
.flag-icon-box{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.flag-icon-high{background:#fcebeb;color:#791f1f;}
.flag-icon-med{background:#faeeda;color:#633806;}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px;}
.metric-card{background:var(--bgs);border-radius:var(--r);padding:10px 12px;}
.metric-label{font-size:11px;color:var(--ts);margin-bottom:4px;}
.metric-val{font-size:22px;font-weight:700;color:var(--t);}
.metric-val.red{color:var(--td);}
.metric-val.amber{color:var(--tw);}
.metric-val.green{color:var(--tsc);}

/* -- GUIDED WORKFLOW -- */
.workflow-steps{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-bottom:12px;
  background:var(--bgp);
  border:1px solid var(--b);
  border-radius:var(--rl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.wf-step{
  flex:1;
  padding:9px 6px;
  text-align:center;
  font-size:11px;
  color:var(--ts);
  border-right:1px solid var(--b);
  cursor:default;
  position:relative;
}
.wf-step:last-child{border-right:none;}
.wf-step .wf-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--bgs);color:var(--ts);font-size:10px;font-weight:600;margin-bottom:3px;}
.wf-step .wf-label{display:block;font-size:10px;color:var(--ts);}
.wf-step.active{background:#eff6ff;}
.wf-step.active .wf-num{background:#1d4ed8;color:#fff;}
.wf-step.active .wf-label{color:var(--ti);font-weight:700;}
.wf-step.done{background:#f0fdf4;}
.wf-step.done .wf-num{background:#16a34a;color:#fff;}
.wf-step.done .wf-label{color:var(--tsc);}
.wf-step.locked{opacity:.45;cursor:not-allowed;}
.wf-blocker{background:var(--bgw);border:0.5px solid var(--bw);border-radius:var(--r);padding:8px 14px;font-size:12px;color:var(--tw);display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.wf-blocker-icon{font-size:14px;flex-shrink:0;}
/* v58 §I4 — per-step coaching hint. Distinct from .wf-blocker — the
   blocker is a hard "can't proceed" indicator; the hint is a soft
   "here's what to do next + here's what you have so far" coaching
   line. Lighter color treatment than the blocker. */
.wf-hint{
  background:#eff6ff;border:0.5px solid #b5d4f4;border-radius:var(--r);
  padding:7px 14px;font-size:12px;color:#0c447c;
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.wf-hint-step{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#0c447c;
  background:#dbeafe;padding:1px 6px;border-radius:3px;flex-shrink:0;
}
/* -- BOOK LOAD -- */
.book-panel{background:var(--bgsc);border:0.5px solid var(--bsc);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;}
.book-panel-title{font-size:13px;font-weight:700;color:var(--tsc);margin-bottom:8px;}
.rate-approved-badge{display:inline-flex;align-items:center;gap:5px;background:#eaf3de;color:#27500a;border:0.5px solid #c0dd97;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:8px;}
/* -- POST BOOKING -- */
.post-book-panel{background:var(--bgi);border:0.5px solid var(--bi);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;}
.post-book-title{font-size:13px;font-weight:700;color:var(--ti);margin-bottom:6px;}

/* -- REP vs MANAGER MODE -- */
.manager-only { display: none !important; }
.rep-mode .manager-only { display: none !important; }
.manager-mode .manager-only { display: block !important; }
.manager-mode .manager-only.flex-item { display: flex !important; }

/* Rep mode: clean single-focus layout */
.rep-mode #load-audit-card { display: none !important; }
.rep-mode .reload-section { display: none !important; }
.manager-mode #load-audit-card { display: block !important; }
.manager-mode .reload-section { display: block !important; }

/* Simplified carrier card for rep */
.rep-mode .cstats { display: none !important; }
.rep-mode .carrier-meta { display: none !important; }
.rep-mode .rep-only-stat { display: inline !important; }
.manager-mode .rep-only-stat { display: none !important; }

/* Quick log buttons - rep mode */
.quick-log-row { display: none; }
.rep-mode .quick-log-row { display: flex !important; gap: 5px; flex-wrap: wrap; align-items: center; }
.rep-mode .btn-row.log-call-btns { display: none !important; }
.rep-mode .manager-only { display: none !important; }
.manager-mode .manager-only { display: block !important; }

/* Mode toggle button styling */
#mode-toggle-btn { font-size: 11px; }
.rep-mode #mode-toggle-btn { background: var(--bgs); color: var(--ts); }
.manager-mode #mode-toggle-btn { background: var(--bgw); color: var(--tw); border-color: var(--bw); }

.rep-mode #load-board-card.board-collapsed { display: none !important; }
.rep-mode #load-board-card.hidden { display: none !important; }
/* v58 §I2 — Explicit Show/Hide board toggle (independent of rep-mode).
   When the rep/manager hits the SLB button, the board card hides
   regardless of body class. */
#load-board-card.board-collapsed { display: none !important; }

/* 2026-05-29 — When a row is expanded (selectLoad), .board-focused goes
   on #load-board-card to hide everything in the board EXCEPT the
   selected row's lb-row and its sibling lb-detail-row. Reps stop
   scrolling past dozens of other rows to reach the workflow / Log
   Call / capacity capture inside the expanded detail. ← Board in the
   SLB calls closeLoadDetail() which removes this class. */
#load-board-card.board-focused .lb-toolbar,
#load-board-card.board-focused .load-board-table thead,
#load-board-card.board-focused .lb-row:not(.lb-row-selected),
#load-board-card.board-focused > div[style*="font-size:11px"] {
  display: none !important;
}

/* -- CARRIER QUALIFICATION -- */
.qual-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;}
.qual-full{background:#eaf3de;color:#27500a;}
.qual-partial{background:#faeeda;color:#633806;}
.qual-none{background:#fcebeb;color:#791f1f;}
.qual-section{margin-bottom:14px;}
.qual-section-title{font-size:11px;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.qual-item{display:flex;align-items:center;gap:6px;font-size:12px;}
.qual-check{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--b);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;}
.qual-check.checked{background:#1d9e75;border-color:#1d9e75;color:#fff;}
.qual-check.required{border-color:#e24b4a;}
.qual-progress{height:4px;background:var(--b);border-radius:99px;margin-top:6px;overflow:hidden;}
.qual-progress-bar{height:100%;border-radius:99px;transition:width .3s;}

/* -- LANE DEVELOPMENT -- */
.lane-carrier-card{background:var(--bgp);border:1px solid var(--b);border-radius:var(--r);padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-sm);}
.lane-carrier-card.preferred{border-left:3px solid #1d4ed8;}
.lane-carrier-card.potential{border-left:3px solid #d1d5db;}
.lane-assign-card{background:var(--bgp);border:1px solid var(--b);border-radius:var(--rl);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.lane-assign-card .lane-title{font-size:14px;font-weight:700;color:var(--t);letter-spacing:-.01em;}
.lane-progress-bar{height:6px;background:var(--b);border-radius:99px;overflow:hidden;margin-top:4px;}
.lane-progress-fill{height:100%;border-radius:99px;transition:width .4s;}
.lane-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:600;}

/* -- CARRIER FLOAT -- */
.cf-sort-btn{font-size:9px;padding:2px 7px;border-radius:2px;border:1px solid #ddd;background:#fff;color:#555;cursor:pointer;white-space:nowrap;font-family:inherit;}
.cf-sort-btn.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff;}
.cf-sort-btn:hover:not(.on){background:#f5f5f5;}
/* Inline carrier-matches sort strip (replaces the floating popup's). */
.cm-sort-btn{font-size:10px;padding:3px 9px;border-radius:3px;border:0.5px solid var(--b);background:var(--bgp);color:var(--ts);cursor:pointer;white-space:nowrap;font-family:inherit;}
.cm-sort-btn.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff;font-weight:700;}
.cm-sort-btn:hover:not(.on){background:var(--bgs);}
.cf-carrier-row{padding:10px 12px;border-bottom:1px solid #f0ede8;display:flex;gap:8px;align-items:flex-start;}
.cf-carrier-row:last-child{border-bottom:none;}

/* ── DEV "Test as Role" footer (DEV_MODE only) ─────────────────────────── */
.dev-test-as{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:900;
  background:#1f2329;
  color:#d8dce4;
  border-top:2px solid #c60001;
  padding:8px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12px;
  box-shadow:0 -4px 12px rgba(0,0,0,.25);
}
.dev-test-as .dta-label{font-weight:700;color:#fff;}
.dev-test-as .dta-select{
  background:#2d323a;color:#fff;border:1px solid #444a55;border-radius:5px;
  padding:5px 8px;font-size:12px;min-width:240px;cursor:pointer;
}
.dev-test-as .dta-current{color:#a9b0bd;}
.dev-test-as .dta-current strong{color:#fff;}
.dev-test-as .dta-hint{margin-left:auto;font-size:10px;color:#7a8190;font-style:italic;}
.dev-test-as .dta-role-pill{
  display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:700;margin-left:5px;
  background:#3a4150;color:#dcdde0;
}
.dev-test-as .dta-role-admin{background:#7a2828;color:#fff;}
.dev-test-as .dta-role-manager{background:#1d4b7a;color:#fff;}
.dev-test-as .dta-role-rep{background:#1d6e4b;color:#fff;}

/* ── SITE FOOTER (HTL-parent-brand styling) ─────────────────────────────── */
.site-footer{
  margin-top:24px;
  background:var(--brand-dark);
  color:#dcdde0;
  padding:18px 24px;
  border-radius:var(--rl);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}
.site-footer .ft-logo{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:800;letter-spacing:-.02em;color:#fff;
}
.site-footer .ft-logo .mark{width:20px;height:20px;flex-shrink:0;}
.site-footer .ft-logo span{color:var(--brand);}
.site-footer .ft-meta{font-size:11px;color:#9fa1a8;}
.site-footer a{color:#fff;text-decoration:none;border-bottom:1px dashed #6a6d75;}
.site-footer a:hover{border-bottom-color:#fff;}

/* ── ADMIN NAV DROPDOWN ─────────────────────────────────────────────────── */
.admin-menu-wrap{position:relative;display:inline-block;}
.admin-menu{
  position:absolute;top:calc(100% + 4px);left:0;
  min-width:180px;
  background:var(--bgp);border:0.5px solid var(--b);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:4px;z-index:600;
  display:flex;flex-direction:column;gap:2px;
}
.admin-menu[hidden]{display:none;}
.admin-menu-item{
  display:block;padding:7px 12px;border-radius:6px;
  font-size:12px;color:var(--brand-dark);text-decoration:none;
  white-space:nowrap;
}
.admin-menu-item:hover{background:var(--brand-bgtint);color:var(--brand);}

/* ── HEALTH-INDICATOR DOT (admin/health page) ───────────────────────────── */
.health-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);flex-shrink:0;
}
.health-dot--green{background:#1d9e75;box-shadow:0 0 0 3px rgba(29,158,117,.18);}
.health-dot--amber{background:#d4a017;box-shadow:0 0 0 3px rgba(212,160,23,.22);}
.health-dot--red{background:#e24b4a;box-shadow:0 0 0 3px rgba(226,75,74,.22);animation:health-pulse 1.4s ease-in-out infinite;}
.health-dot--unknown{background:#9ca3af;}
@keyframes health-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

/* ── DATETIME CELL (date on top, time below, forced wrap) ───────────────── */
.dt{display:inline-flex;flex-direction:column;line-height:1.15;white-space:nowrap;}
.dt-d{font-size:inherit;color:inherit;}
.dt-t{font-size:10px;color:var(--ts);}

/* ── PHONE LINKS (tel: tap-to-dial) ──────────────────────────────────────── */
/* Reps on mobile need tap-to-dial; desktop reps don't want navy-blue browser
   links cluttering the carrier tables. Inherit color, show pointer, only
   underline on hover. */
.phone-link{color:inherit;text-decoration:none;border-bottom:0.5px dotted transparent;}
.phone-link:hover{color:var(--brand);border-bottom-color:var(--brand);}

/* ── CARRIER PROFILE TABS + QUAL BADGE (v57 §8) ─────────────────────────── */
.carrier-tabs{
  display:flex;gap:2px;margin-bottom:10px;
  border-bottom:0.5px solid var(--b);
}
.carrier-tab{
  padding:8px 16px;font-size:12px;font-weight:600;
  color:var(--ts);text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-0.5px;
}
.carrier-tab:hover{color:var(--brand-dark);}
.carrier-tab.active{color:var(--brand);border-bottom-color:var(--brand);}

.qual-badge{
  display:inline-block;padding:4px 10px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
}
.qual-badge--qualified{background:#e6f4e8;color:#2c6a3b;border:0.5px solid #8ac193;}
.qual-badge--partial{background:#fff5d6;color:#7a5a00;border:0.5px solid #d8b35a;}
.qual-badge--unqualified{background:#fde8e8;color:#a31818;border:0.5px solid #e08a8a;}

/* ── MY CARRIERS — COLLAPSIBLE CARDS (v57 §2.2) ─────────────────────────── */
.qcard-list{display:flex;flex-direction:column;gap:8px;}
.qcard{border:0.5px solid var(--b);border-radius:8px;background:var(--bgp);overflow:hidden;}
.qcard-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;gap:10px;flex-wrap:wrap;
  background:var(--bgs);
}
.qcard-head:hover{background:#f3f4f6;}
.qcard-head-main{display:flex;align-items:center;gap:10px;}
.qcard-name{font-weight:700;font-size:13px;color:var(--brand-dark);text-decoration:none;}
.qcard-name:hover{color:var(--brand);text-decoration:underline;}
.qcard-chev{font-size:10px;color:var(--ts);transition:transform .15s;}
.qcard.qcard-collapsed .qcard-chev{transform:rotate(-90deg);}
.qcard-head-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ts);flex-wrap:wrap;}
.qcard-body{padding:8px 14px 12px;display:flex;flex-direction:column;gap:6px;}
.qcard.qcard-collapsed .qcard-body{display:none;}
.qcard-pref{font-size:11px;color:var(--brand);background:var(--brand-bgtint);padding:4px 8px;border-radius:5px;}

.qtruck{border:0.5px solid var(--b);border-radius:6px;overflow:hidden;}
.qtruck-row{
  display:grid;grid-template-columns:18px repeat(6, 1fr);gap:8px;
  padding:6px 10px;align-items:center;cursor:pointer;
}
.qtruck-row:hover{background:var(--bgs);}
.qtruck-chev{font-size:10px;color:var(--ts);}
.qtruck-cell{display:flex;flex-direction:column;}
.qtruck-label{font-size:9px;color:var(--ts);text-transform:uppercase;letter-spacing:.3px;}
.qtruck-val{font-size:12px;color:var(--t);}
.qtruck-matches{background:var(--bgs);padding:8px 10px;border-top:0.5px solid var(--b);}

/* ── MATCH INBOX (v57 §2.5) ─────────────────────────────────────────────── */
.match-inbox-banner{
  background:#fff0f0;border:0.5px solid #e8a8a8;border-left:4px solid var(--brand);
  border-radius:8px;margin-bottom:10px;overflow:hidden;
}
.match-inbox-head{
  padding:10px 14px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:#7a1010;
}
.match-inbox-head:hover{background:#ffe5e5;}
.match-inbox-chev{font-size:10px;}
.match-inbox-body{display:flex;flex-direction:column;gap:6px;padding:0 10px 10px;}

.match-card{background:var(--bgp);border:0.5px solid var(--b);border-radius:6px;padding:8px 10px;}
.match-card-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;}
.match-card-carrier{font-size:13px;font-weight:700;color:var(--brand-dark);}
.match-card-carrier a{color:inherit;text-decoration:none;}
.match-card-carrier a:hover{color:var(--brand);text-decoration:underline;}
.match-card-mc{font-size:10px;color:var(--ts);font-weight:400;margin-left:6px;}
.match-card-meta{font-size:11px;color:var(--ts);margin-top:2px;}
.match-card-load{font-size:13px;font-weight:700;color:var(--brand-dark);}
.match-card-load a{color:inherit;}
.match-card-score{font-size:10px;color:var(--ts);text-transform:uppercase;letter-spacing:.3px;align-self:flex-start;}
.match-card-actions{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:0.5px dashed var(--b);align-items:center;}

/* ── METRIC TARGETS PROGRESS (v57 §6) ─────────────────────────────────── */
.metric-target{font-size:9px;color:var(--ts);margin-top:4px;text-transform:uppercase;letter-spacing:.3px;}
.metric-bar{height:4px;background:var(--bgs);border-radius:99px;overflow:hidden;margin-top:3px;}
.metric-bar-fill{height:100%;background:var(--brand);border-radius:99px;transition:width .25s;}
.metric-bar-on{background:#3ea25f;}

/* ── RATE SUBMISSION TRUCK POSITION + FEASIBILITY + GAUGE (v57 §5) ─────── */
.rate-truck-block{
  border:0.5px solid var(--b);border-radius:8px;
  padding:10px 12px;margin:10px 0;background:var(--bgs);
}
.rate-truck-title{font-size:11px;font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}
.rate-feas{font-size:11px;color:var(--ts);margin-top:6px;padding:5px 8px;border-radius:5px;background:var(--bgp);}
.rate-feas-ok{background:#e6f4e8;color:#2c6a3b;}
.rate-feas-warn{background:#fff5d6;color:#7a5a00;}

.rate-gauge{border:0.5px solid var(--b);border-radius:8px;padding:8px 12px;margin:8px 0;background:var(--bgp);}
.rate-gauge-row{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;}
.rg-label{font-size:9px;color:var(--ts);text-transform:uppercase;letter-spacing:.3px;}
.rg-val{font-size:14px;font-weight:700;color:var(--brand-dark);}
.rg-good{color:#2c6a3b;}
.rg-bad{color:#a31818;}

/* ── HAND-RATE MODAL (v57 §7.3) ──────────────────────────────────────────── */
.hr-overlay{
  position:fixed;inset:0;background:rgba(20,22,28,.55);
  display:flex;align-items:center;justify-content:center;z-index:850;
}
.hr-overlay[hidden]{display:none;}
.hr-modal{
  background:var(--bgp);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.32);
  width:min(560px, 92vw);max-height:90vh;overflow:auto;
}
.hr-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:0.5px solid var(--b);
}
.hr-title{font-size:14px;font-weight:700;color:var(--brand-dark);}
.hr-sub{font-size:11px;color:var(--ts);margin-top:2px;}
.hr-close{
  background:none;border:none;font-size:22px;cursor:pointer;color:var(--ts);
  width:28px;height:28px;line-height:1;
}
.hr-close:hover{color:var(--brand);}
.hr-context{
  margin:14px 18px 0;padding:7px 10px;font-size:11px;color:var(--brand);
  background:var(--brand-bgtint);border-radius:6px;
}
#hr-form{padding:14px 18px 18px;}

/* v58 §B5 — Reload-candidates card. Subtle light background so it
   reads as a "consider this" suggestion rather than a primary action. */
.reload-card{background:#eff6ff;}

/* v58 §I11 — Coaching-flag cards on the Manager Dashboard. One card
   per active flag, sorted high → med. */
.mgr-flags-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px;
}
.mgr-flag-card{
  border-radius:7px;padding:10px 12px;border:0.5px solid var(--b);
  background:var(--bgp);
}
.mgr-flag-high{border-left:4px solid #b91c1c;}
.mgr-flag-med {border-left:4px solid #d97706;}
.mgr-flag-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.mgr-flag-sev{
  font-size:10px;font-weight:700;text-transform:uppercase;
  padding:1px 6px;border-radius:3px;
}
.mgr-flag-high .mgr-flag-sev{background:#fee2e2;color:#b91c1c;}
.mgr-flag-med  .mgr-flag-sev{background:#fef3c7;color:#92400e;}
.mgr-flag-kind{
  font-size:10px;font-weight:700;color:var(--ts);text-transform:uppercase;
  letter-spacing:.05em;
}
.mgr-flag-label{font-size:13px;font-weight:700;color:var(--t);margin-bottom:4px;}
.mgr-flag-note{font-size:12px;color:var(--ts);line-height:1.4;margin-bottom:6px;}
.mgr-flag-meta{font-size:11px;color:var(--ts);}

/* v58 §I10 — Per-rep KPI snapshot on Manager Dashboard.
   Color-codes each actual against target: met (green), 60% near (amber),
   below 60% missed (red). No-target rows show neutral. */
.mgr-kpi-table td{font-size:12px;}
.mgr-kpi-cell{
  display:inline-block;padding:1px 6px;border-radius:3px;
  font-weight:700;font-size:11px;
}
.mgr-kpi-met  {background:#dcfce7;color:#166534;}
.mgr-kpi-near {background:#fef3c7;color:#92400e;}
.mgr-kpi-miss {background:#fee2e2;color:#b91c1c;}
.mgr-kpi-no-tgt{background:#f3f4f6;color:#6b7280;}
.mgr-kpi-tgt{font-weight:400;opacity:.7;font-size:10px;}
.mgr-kpi-role{
  display:inline-block;margin-left:6px;font-size:10px;color:var(--ts);
  background:var(--bgs);padding:1px 6px;border-radius:99px;
}

/* v58 §I8 — Quoted-rates audit table styles.
   "Best" pill picks out the lowest quote; "vs market" tag colors based on
   sign (over=red, under=green, at=neutral). */
.cm-quoted-card{}
.cm-quoted-table tr.cm-quoted-best td{background:#f0fdf4;}
.cm-rate-tag{
  display:inline-block;padding:1px 7px;border-radius:99px;
  font-size:10px;font-weight:700;
}
.cm-rate-best  {background:#dcfce7;color:#166534;}
.cm-rate-over  {background:#fee2e2;color:#b91c1c;}
.cm-rate-under {background:#dcfce7;color:#166534;}
.cm-rate-at    {background:#f3f4f6;color:#6b7280;}

/* v58 §I3 — Quick-questions yellow callout at the top of the decline modal. */
.dp-quick-questions{
  background:#fffbeb;border:1px solid #fde68a;border-radius:5px;
  padding:10px 12px;margin:0 0 14px 0;
  font-size:12px;color:#92400e;line-height:1.5;
}

/* ── DECLINE PROMPT (v57 §3) ─────────────────────────────────────────────── */
.decline-section{margin:8px 18px;padding:10px 0;border-top:0.5px dashed var(--b);}
.decline-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.decline-section-title{font-size:11px;font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.3px;}
.dp-row{
  display:flex;align-items:center;gap:5px;margin-bottom:4px;
  padding:5px 8px;background:var(--bgs);border-radius:5px;
}
.dp-row input, .dp-row select{
  font-size:11px;padding:4px 6px;border:0.5px solid var(--b);border-radius:4px;background:var(--bgp);
}
.dp-row input[type="text"]{flex:1;min-width:80px;}
.dp-x{background:none;border:none;color:var(--ts);font-size:16px;cursor:pointer;width:24px;line-height:1;}
.dp-x:hover{color:var(--brand);}
.dp-matches{margin:-2px 8px 6px 8px;display:flex;flex-direction:column;gap:3px;}
.dp-match-card{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  padding:5px 9px;background:#e6f4e8;border:0.5px solid #8ac193;
  border-radius:5px;font-size:11px;color:#2c6a3b;
}
.dp-match-card:hover{background:#d3edd8;}
.dp-match-meta{flex:1;min-width:0;}
.dp-match-actions{display:flex;gap:4px;flex-shrink:0;}
.dp-match-actions .btn.sm{font-size:10px;padding:2px 7px;}
.dp-no-match{font-size:11px;color:var(--ts);padding:3px 9px;}

/* v58 §I8 — B/H/N lane-type tag pills inside the calls table. */
.lane-type-tag{
  display:inline-block;font-size:10px;font-weight:700;
  width:18px;height:18px;line-height:18px;text-align:center;
  border-radius:99px;letter-spacing:0;
}
.lane-type-h{background:#e6f4e8;color:#27500a;border:0.5px solid #8ac193;}
.lane-type-b{background:#e3f2fd;color:#0b5394;border:0.5px solid #79b3d6;}
.lane-type-n{background:#fdecea;color:#b71c1c;border:0.5px solid #d6918d;}

/* v58 §B3 + §P5 — Posted-board badge pills on the load board.
   DAT = orange (DAT's own brand cue); TS = blue (Truckstop's). The
   posted columns are admin-managed today; render only when truthy. */
.lb-posted-pills{display:flex;gap:3px;flex-wrap:wrap;}
.pb-dat{
  display:inline-block;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:3px;letter-spacing:.02em;
  background:#fef3c7;color:#92400e;border:0.5px solid #d97706;
}
.pb-ts{
  display:inline-block;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:3px;letter-spacing:.02em;
  background:#e3f2fd;color:#0b5394;border:0.5px solid #79b3d6;
}

/* v60 prototype Step 2 — Collect trucks panel on /inbound. */
.inbound-step {
  background:var(--bgp);
  border:0.5px solid var(--b);
  border-radius:var(--rl);
  padding:14px 16px;
  margin-bottom:12px;
}
.inbound-step .step-label {
  font-size:12px;
  font-weight:700;
  color:var(--brand-dark);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}

/* v60 prototype Unowned-capacity alert on /queue. */
.unowned-alert {
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  background:#fef3c7;border:1px solid #d97706;border-radius:6px;
  padding:10px 14px;margin-bottom:12px;
  color:#92400e;font-size:13px;
}

/* ── INLINE LOAD DETAIL CARD (v57 §1.6) ─────────────────────────────────── */
.inline-detail-frame{
  position:relative;margin-top:12px;
  border:2px solid var(--brand);border-radius:10px;
  background:var(--bgp);box-shadow:0 4px 18px rgba(198,0,1,.08);
  padding:6px 8px 12px;
}
.inline-detail-close{
  position:absolute;top:8px;right:10px;z-index:5;
  background:var(--bgp);border:0.5px solid var(--b);border-radius:50%;
  width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer;
  color:var(--ts);
}
.inline-detail-close:hover{background:var(--brand-bgtint);color:var(--brand);border-color:var(--brand);}
.lb-row-selected{background:var(--brand-bgtint) !important;}
.lb-row-selected td:first-child{border-left:3px solid var(--brand);}
/* Truly-inline load detail — accordion row injected by selectLoad() in
   outbound.html. Sits directly below the clicked .lb-row inside the
   table flow. Other rows stay visible. Single-open: clicking another
   row removes this row and inserts a new one below that. */
tr.lb-detail-row > td{padding:0;background:var(--bgs);}
tr.lb-detail-row .inline-detail-frame{margin:6px 0 10px;border-radius:var(--rl);}

/* ── FOCUSED LOAD-DETAIL CARD (v58 §B1 — prototype:691-724 / 2546-2769) ──────
   Opened by clicking the Load # link in the SLB. Sibling surface to the
   work-the-load workflow in _carrier_matches.html — both can be open at
   the same time, serving different rep needs:
     - workflow card  = "I'm actively working this load"
     - load-detail-card = "I have 30 seconds — who do I call right now?"
   Two-column layout: left = load brief + rate band + stop notes + lock
   action. Right = activity pills + top-12 Carriers to call.
*/
.ldc-slot{ /* empty until populated by toggleLoadDetailCard() */ }
.ldc-card{
  margin:10px 0 14px;
  background:var(--bgp);border:1px solid var(--b);border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.08);
}
.ldc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:2px solid var(--b);background:var(--bgs);
  gap:12px;
}
.ldc-id-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ldc-id{font-size:16px;font-weight:800;color:var(--ti);}
.ldc-urgency-pill{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;
  letter-spacing:.02em;text-transform:uppercase;
}
.ldc-lock-badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;
}
.ldc-lock-held{background:#e6f1fb;color:#0c447c;}
.ldc-lock-avail{background:#f0fdf4;color:#16a34a;}
.ldc-lane{font-size:12px;color:var(--ts);margin-top:3px;font-weight:500;}
.ldc-close{
  background:none;border:none;font-size:22px;color:var(--ts);
  cursor:pointer;line-height:1;padding:2px 6px;
}
.ldc-close:hover{color:var(--t);}

.ldc-body{
  display:grid;grid-template-columns:1fr 1fr;min-height:380px;
}
.ldc-left{
  padding:14px 16px;border-right:1px solid var(--b);
  overflow-y:auto;max-height:60vh;
}
.ldc-right{
  padding:14px 16px;background:var(--bgs);overflow-y:auto;max-height:60vh;
}
.ldc-section-label{
  font-size:10px;font-weight:700;color:var(--ts);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:8px;
}

.ldc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.ldc-row{padding:8px 0;border-bottom:0.5px solid var(--b);}
.ldc-row-lbl{
  font-size:10px;color:var(--ts);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:2px;
}
.ldc-row-val{font-size:13px;font-weight:600;color:var(--t);}

.ldc-rates{
  background:var(--bgs);border-radius:var(--r);padding:12px 14px;
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.ldc-rate-lbl{
  font-size:10px;color:var(--ts);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:4px;
}
.ldc-rate-val{font-size:22px;font-weight:800;color:var(--t);}
.ldc-rate-sub{font-size:12px;color:var(--ts);margin-top:2px;}

.ldc-spec{
  margin-top:12px;background:#fffbeb;border-left:4px solid #f59e0b;
  border-radius:0 var(--r) var(--r) 0;padding:10px 14px;
}
.ldc-spec-lbl{
  font-size:10px;font-weight:700;color:#92400e;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:3px;
}
.ldc-spec-line{font-size:12px;color:#92400e;line-height:1.5;}

.ldc-actions{
  display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:stretch;
}

/* Activity pill row — right column */
.ldc-activity-pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.ldc-pill{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;
}
.ldc-pill-contacted{color:#0c447c;background:#0c447c22;}
.ldc-pill-quoted{color:#633806;background:#63380622;}
.ldc-pill-nocap{color:#555;background:#55555522;}
.ldc-pill-declined{color:#791f1f;background:#791f1f22;}
.ldc-activity-empty{
  font-size:12px;color:var(--ts);margin-bottom:10px;font-style:italic;
}

/* Carriers-to-call list */
.ldc-carriers{margin-top:2px;}
.ldc-cc-row{
  padding:10px 0;border-bottom:0.5px solid var(--b);
  display:flex;align-items:flex-start;gap:10px;
}
.ldc-cc-row:last-child{border-bottom:none;}
.ldc-cc-declined{opacity:.55;}
.ldc-cc-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;
}
.ldc-cc-body{flex:1;min-width:0;}
.ldc-cc-name-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ldc-cc-name{
  font-size:12px;font-weight:700;color:var(--t);text-decoration:none;
}
.ldc-cc-name:hover{color:var(--brand);text-decoration:underline;}
.ldc-cc-spill{font-size:10px;color:var(--ts);font-weight:600;}
.ldc-cc-meta{font-size:11px;color:var(--ts);margin-top:1px;}
.ldc-cc-cap{
  display:inline-block;margin-top:3px;
  font-size:10px;color:#0f6e56;background:#e6f9f3;
  border-radius:2px;padding:1px 6px;
}
.ldc-cc-phone{margin-top:5px;font-size:11px;}
.ldc-cc-phone a{color:var(--ti);text-decoration:none;}
.ldc-cc-phone a:hover{text-decoration:underline;}
.ldc-cc-actions{
  flex-shrink:0;display:flex;flex-direction:column;gap:4px;
  min-width:84px;max-width:120px;
  align-items:stretch;
}
/* Lock button + input widths so flex stretch doesn't blow them up to
   parent width when the carriers-to-call column is roomy. */
.ldc-cc-actions .btn{padding:4px 10px;font-size:11px;width:100%;box-sizing:border-box;}
.ldc-cc-actions .ldc-cc-rate-input{width:100%;box-sizing:border-box;}
.ldc-cc-actions .ldc-cc-status{font-size:11px;color:#27500a;font-weight:600;line-height:1.3;}
.ldc-cc-rate-input{
  width:78px;padding:4px 6px;border:0.5px solid var(--b);
  border-radius:3px;font-size:11px;background:var(--bgp);color:var(--t);
  outline:none;font-family:inherit;
}
.ldc-cc-passed{font-size:10px;color:#aaa;align-self:flex-end;}
.ldc-cc-empty{font-size:12px;color:var(--ts);padding:14px 0;text-align:center;}

/* SLB Load # link styling — visually distinguishes the v58 §P1 click
   target from the rest of the SLB's static info fields. */
.slb-load-link{
  color:var(--ti) !important;text-decoration:none;cursor:pointer;
  font-weight:600;
}
.slb-load-link:hover{text-decoration:underline;}
.slb-load-arrow{font-size:10px;opacity:.6;margin-left:1px;}

/* Mobile: card stacks single-column. */
@media (max-width: 720px) {
  .ldc-body{grid-template-columns:1fr;}
  .ldc-left{border-right:none;border-bottom:1px solid var(--b);max-height:none;}
  .ldc-right{max-height:none;}
  .ldc-grid{grid-template-columns:1fr;}
  .ldc-rates{grid-template-columns:1fr;}
}

/* ── RATE-APPROVAL MODAL (v58 prototype:4128-4217) ───────────────────────────
   Triggered from per-card "Send for approval" in carrier-matches, or
   auto-opened on challenge / competing-rate flows. Form content is
   identical to the old standalone version; the wrapper just floats it. */
.rate-approval-overlay{
  position:fixed;inset:0;background:rgba(15,18,23,0.55);
  z-index:9000;display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
}
.rate-approval-overlay.open{display:flex;}
.rate-approval-overlay[hidden]{display:none !important;}
.rate-approval-modal{
  /* v60 — Mark M2: bumped from 760 to 920 so the truck-position row
     fits without column wrap on typical 1280px+ desktops.
     v75 §H — Mark flagged the page as jumbled; widened to 980 so the
     even 3-col date/time/equipment row has room. Still fits 1024px. */
  position:relative;max-width:980px;width:100%;
  margin:0 auto;background:var(--bgp);
  border:0.5px solid var(--b);border-radius:var(--rl);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  padding:18px 20px;
}
.rate-approval-close{
  position:absolute;top:8px;right:10px;
  background:transparent;border:0;
  font-size:22px;line-height:1;color:var(--ts);cursor:pointer;padding:4px 8px;
}
.rate-approval-close:hover{color:var(--t);}

/* ── REP + MANAGER NOTIFICATION BARS (v57 §9.3/§9.4) ─────────────────────── */
.rep-notif{
  padding:8px 14px;font-size:12px;border-bottom:0.5px solid var(--b);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.rep-notif a{color:inherit;font-weight:700;text-decoration:underline;}
.rep-notif--approved{background:#e6f4e8;color:#2c6a3b;border-bottom-color:#8ac193;}
.rep-notif--countered{background:#fff5d6;color:#7a5a00;border-bottom-color:#d8b35a;}
.rep-notif--rejected{background:#fde8e8;color:#a31818;border-bottom-color:#e08a8a;}
.rep-notif--pending{background:var(--bgs);color:var(--ts);}

.mgr-notif{
  /* v60 — Mark M4: recolored from red (#fff0f0/#7a1010) to amber so the
     persistent "you have N pending" nudge stops reading as a hard error.
     Same palette as .dp-quick-questions ("heads-up / coaching"). */
  padding:8px 14px;font-size:12px;background:#fffbeb;color:#92400e;
  border-bottom:0.5px solid #fde68a;
  display:flex;align-items:center;gap:10px;
}
.mgr-notif a{color:inherit;font-weight:700;text-decoration:underline;}

/* ── SSE CONNECTION INDICATOR ───────────────────────────────────────────── */
.sse-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#9ca3af;cursor:help;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.sse-dot--on{background:#3ea25f;animation:sse-pulse 2.2s ease-in-out infinite;}
.sse-dot--lost{background:#d97706;}
.sse-dot--off{background:#9ca3af;}
@keyframes sse-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ── TOASTS (flash messages) ─────────────────────────────────────────────── */
#toasts{
  position:fixed;top:14px;right:18px;z-index:900;
  display:flex;flex-direction:column;gap:6px;
  max-width:360px;pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--bgp);
  border:0.5px solid var(--b);
  border-radius:8px;
  padding:9px 30px 9px 12px;
  font-size:12px;color:var(--t);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  position:relative;
  animation:toast-in 220ms ease-out;
}
.toast-msg{display:block;line-height:1.4;}
.toast-success{border-left:3px solid #1d9e75;}
.toast-danger{border-left:3px solid #e24b4a;}
.toast-info, .toast-message{border-left:3px solid #1d4ed8;}
.toast-warning{border-left:3px solid #d4a017;}
.toast.fade-out{opacity:0;transform:translateX(20px);transition:opacity 280ms, transform 280ms;}
.toast-close{
  position:absolute;top:4px;right:6px;
  background:none;border:none;cursor:pointer;
  font-size:16px;color:var(--ts);line-height:1;padding:0 4px;
}
.toast-close:hover{color:var(--t);}
@keyframes toast-in{
  from{opacity:0;transform:translateX(20px);}
  to{opacity:1;transform:translateX(0);}
}

/* ── GLOBAL LOADING INDICATOR ───────────────────────────────────────────── */
#global-loader{
  display:none;
  position:fixed;top:8px;right:8px;z-index:1500;
  width:22px;height:22px;
  background:rgba(255,255,255,.85);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  align-items:center;justify-content:center;
}
#global-loader.on{display:flex;}
.global-spinner{
  width:14px;height:14px;
  border:2px solid rgba(212,160,23,.25);
  border-top-color:#d4a017;
  border-radius:50%;
  animation:global-spin 720ms linear infinite;
}
@keyframes global-spin{to{transform:rotate(360deg);}}

/* ── DEV FEEDBACK WIDGET ────────────────────────────────────────────────── */
/* Intentionally off-palette: warm yellow, dashed border, slightly chunky.
   Reads as "temporary / dev tool", not part of the production app chrome. */
#fb-fab{
  position:fixed;bottom:18px;right:18px;z-index:1000;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;
  background:#fef3c7;color:#7a5a00;
  border:2px dashed #d4a017;border-radius:99px;
  font-family:'DM Sans',system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  box-shadow:0 4px 14px rgba(212,160,23,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
#fb-fab:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(212,160,23,.36);background:#fde68a;}
.fb-fab-dot{width:8px;height:8px;border-radius:50%;background:#d4a017;display:inline-block;animation:fb-pulse 2.4s infinite;}
.fb-fab-label{line-height:1;}
@keyframes fb-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.fb-overlay{
  display:none;position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.32);
  align-items:center;justify-content:center;padding:1rem;
}
.fb-overlay.open{display:flex;}

.fb-modal{
  background:#fffbeb;
  border:2px dashed #d4a017;border-radius:12px;
  padding:1.1rem 1.2rem;
  width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;
  font-family:inherit;color:#1a1a18;
  box-shadow:0 16px 48px rgba(0,0,0,.22);
}
.fb-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px;}
.fb-modal-title{font-size:16px;font-weight:800;color:#7a5a00;letter-spacing:-.01em;}
.fb-modal-sub{font-size:11px;color:#8a6d1a;margin-top:2px;}
.fb-modal-sub code{background:rgba(212,160,23,.18);padding:1px 5px;border-radius:3px;font-size:10px;}
.fb-close{background:none;border:none;font-size:22px;color:#a37c0c;cursor:pointer;line-height:1;padding:0;}

.fb-row{margin-bottom:10px;}
.fb-label{display:block;font-size:11px;font-weight:700;color:#7a5a00;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.fb-modal input[type="text"], .fb-modal textarea{
  width:100%;
  padding:7px 10px;
  border:1px solid #d4a017;border-radius:6px;
  font-family:inherit;font-size:13px;color:#1a1a18;
  background:#fffef7;outline:none;
}
.fb-modal input[type="text"]:focus, .fb-modal textarea:focus{border-color:#a37c0c;background:#fff;}
.fb-modal textarea{resize:vertical;min-height:60px;}

.fb-pills{display:flex;flex-wrap:wrap;gap:5px;}
.fb-pills label{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px;border-radius:99px;border:1px solid #d4a017;
  font-size:12px;color:#7a5a00;background:#fffef7;cursor:pointer;
  transition:background .12s;
}
.fb-pills label:hover{background:#fde68a;}
.fb-pills input[type="radio"]{accent-color:#d4a017;margin:0;}
.fb-pills label:has(input:checked){background:#fcd34d;border-color:#a37c0c;color:#4a3800;font-weight:700;}

.fb-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:14px;}
.btn.fb-submit{background:#d4a017;color:#1a1a18;border-color:#a37c0c;font-weight:700;}
.btn.fb-submit:hover{background:#fcd34d;}
.fb-result{margin-top:8px;font-size:12px;}
.fb-result.ok{color:#15803d;}
.fb-result.err{color:#b91c1c;}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-RESPONSIVE LAYOUT (v57 backlog item — minimum viable phone view)
   ════════════════════════════════════════════════════════════════════════
   Carrier sales reps work primarily on desktop, but spot-checks from a
   phone need to actually function. This block targets ~760px and below
   (most phones in landscape are 700-900px wide, portrait 360-440px).

   Priorities:
     1. Nav collapses to a horizontally-scrollable strip instead of wrap
     2. Cards + form rows stack to single column
     3. Load board table becomes a stacked card list (every row = one card)
     4. Modals + overlays take full screen
     5. Workflow stepper goes single-column
     6. Notification bars stack their middle-dot separators

   v57 explicitly deferred a full mobile rewrite — this gets a rep to
   "can read the board, can tap to dial, can lock a load." Full
   touch-optimized interactions (swipe to dismiss matches, larger tap
   targets, native date pickers) are still future work. */

@media (max-width: 760px) {

  /* ── App shell + nav ──────────────────────────────────────────── */
  .app { max-width:100%; padding:0 8px; }
  body { background:var(--bgp); }  /* drop the dark gutter on small screens */

  .nav {
    flex-wrap:wrap; gap:8px; padding:8px 4px;
    align-items:flex-start;
  }
  .nav > div:first-child { flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
  .nav-logo .wordmark { font-size:14px; }
  .nav-tabs {
    width:100%; overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .nav-tabs::-webkit-scrollbar { height:3px; }
  .nav-tab { font-size:11px; padding:6px 10px; white-space:nowrap; }

  .rep-chip { padding:4px 8px; }
  .rep-chip-text { display:none; }  /* avatar circle is enough on phones */

  /* Admin dropdown drops below nav row instead of wrapping awkwardly */
  .admin-menu { right:auto; left:0; }

  /* ── Notification bars ─────────────────────────────────────────── */
  .rep-notif, .mgr-notif {
    flex-direction:column; align-items:flex-start; gap:3px;
    font-size:11px; line-height:1.5;
  }

  /* ── Cards + grid rows ────────────────────────────────────────── */
  .card { padding:10px 12px; }
  .row { grid-template-columns:1fr; gap:6px; }
  .field input, .field select, .field textarea { font-size:14px; }  /* iOS won't zoom on focus when ≥16px; 14px is the compromise */

  /* ── Load board table → stacked cards ─────────────────────────── */
  .load-board-table { display:block; }
  .load-board-table thead { display:none; }   /* column headers don't make sense in card form */
  .load-board-table tbody, .load-board-table tr { display:block; width:100%; }
  .load-board-table tr.lb-row {
    border:0.5px solid var(--b); border-radius:8px;
    padding:8px 10px; margin-bottom:6px;
    background:var(--bgp);
  }
  .load-board-table tr.lb-row.lb-row-selected {
    border-color:var(--brand); border-width:2px;
  }
  .load-board-table td {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 0; border:none; font-size:12px;
  }
  /* Pseudo-labels on each cell using data-* — but our load_rows doesn't
     set data-label. Easiest: prefix the first cell visually and hide
     less-critical cells on small screens. */
  .load-board-table td:nth-child(5),   /* Miles */
  .load-board-table td:nth-child(8) {  /* Delivery */
    display:none;
  }

  /* ── Filter toolbar on Outbound ──────────────────────────────── */
  .lb-toolbar { flex-wrap:wrap; gap:6px; }
  .lb-toolbar select, .lb-toolbar input { width:100% !important; min-width:0; }

  /* ── Workflow stepper → vertical ─────────────────────────────── */
  .workflow-steps { flex-direction:column; gap:4px; }
  .wf-step { flex-direction:row; justify-content:flex-start; gap:8px; padding:4px 8px; }
  .wf-num { flex:0 0 auto; }

  /* ── Selected load bar wraps cleanly ─────────────────────────── */
  .slb { flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .slb-item { flex:1 1 45%; }

  /* ── Inline load detail card padding ─────────────────────────── */
  .inline-detail-frame { padding:6px 4px 10px; }
  .inline-detail-close { top:4px; right:6px; }

  /* ── Tables in general — horizontal scroll instead of overflow ── */
  .sort-table {
    display:block; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap; font-size:11px;
  }

  /* ── Modal overlays go full-screen ───────────────────────────── */
  .hr-modal { width:100% !important; max-width:100% !important; max-height:100vh; border-radius:0; }
  .fb-modal { max-width:100% !important; max-height:100vh; border-radius:0; }
  .hr-overlay, .fb-overlay { padding:0; }

  /* ── Carrier profile + queue cards ───────────────────────────── */
  .carrier-tabs { overflow-x:auto; }
  .carrier-tab { font-size:11px; padding:6px 10px; white-space:nowrap; }
  .qcard-head { flex-direction:column; align-items:flex-start; gap:4px; }
  .qcard-head-meta { font-size:10px; }
  .qtruck-row {
    grid-template-columns:auto 1fr 1fr;
    gap:6px; padding:6px 8px;
  }
  .qtruck-cell:nth-child(4),  /* Equip */
  .qtruck-cell:nth-child(5),  /* Max DH */
  .qtruck-cell:nth-child(6) { /* Dest pref */
    display:none;
  }

  /* ── Match inbox cards ──────────────────────────────────────── */
  .match-card-row { grid-template-columns:1fr; gap:6px; }
  .match-card-score { align-self:flex-start; }
  .match-card-actions { flex-wrap:wrap; }

  /* ── Rate gauge ─────────────────────────────────────────────── */
  .rate-gauge-row { grid-template-columns:repeat(2, 1fr); }

  /* ── Site footer ────────────────────────────────────────────── */
  .site-footer { flex-direction:column; gap:4px; text-align:center; padding:14px 8px; }

  /* ── Feedback FAB shifts to bottom-left so it doesn't cover Outbound's status filter ── */
  #fb-fab { bottom:12px; right:12px; left:auto; }

  /* ── SSE dot still visible ──────────────────────────────────── */
  .sse-dot { margin-right:4px; }
}

/* Smaller phones (≤420px) — even tighter */
@media (max-width: 420px) {
  .nav-logo .wordmark span { display:none; }  /* show only the chevron mark + the middle letters */
  .load-board-table td:nth-child(2),    /* Status badge */
  .load-board-table td:nth-child(7) {    /* Pickup */
    /* keep these — they're the rep's primary scan signals */
  }
  .slb-item { flex:1 1 100%; }
  /* Carrier profile header stacks fully */
  .carrier-tabs { font-size:11px; }
}

/* v60 §M5 — Carrier-float draggable panel. Fixed-position, draggable
   by header, shows the "carriers I should call" list for the active
   load. Sticks across page interactions until closed. */
.cf-panel {
  position: fixed;
  z-index: 500;
  width: 360px;
  top: 80px;
  right: 24px;
  background: #fff;
  border: 1px solid #c8c4bc;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
}
.cf-header {
  padding: 9px 12px 8px;
  border-bottom: 1px solid #ede9e3;
  background: #faf8f5;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  cursor: grab;
  user-select: none;
}
.cf-header.dragging { cursor: grabbing; }
.cf-title-block { flex: 1; min-width: 0; }
.cf-load-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-load-meta {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}
.cf-header-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
  flex-shrink: 0;
}
.cf-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.cf-close:hover { color: #555; }
.cf-sort-strip {
  padding: 6px 12px;
  border-bottom: 1px solid #ede9e3;
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
}
.cf-sort-label {
  font-size: 9px;
  color: #aaa;
  margin-right: 2px;
}
.cf-sort-btn {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid #d8d4cc;
  border-radius: 99px;
  background: #fff;
  color: #555;
  cursor: pointer;
  font-family: inherit;
}
.cf-sort-btn.on {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.cf-legend {
  padding: 4px 12px;
  border-bottom: 1px solid #f5f2ee;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  font-size: 9px;
  color: #888;
}
.cf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.cf-list {
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
}
.cf-carrier-row {
  display: flex;
  gap: 8px;
  padding: 8px 10px 8px 8px;
  border-bottom: 1px solid #f5f2ee;
  align-items: stretch;
}
.cf-tier-bar {
  width: 3px;
  border-radius: 99px;
  align-self: stretch;
  flex-shrink: 0;
}
.cf-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #555;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cf-meat {
  flex: 1;
  min-width: 0;
}
.cf-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cf-name {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  white-space: nowrap;
}
.cf-status {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .02em;
}
.cf-status.cf-called   { background:#e3f2fd; color:#0b5394; }
.cf-status.cf-declined { background:#fdecea; color:#b71c1c; }
.cf-phone {
  color:#1565c0;
  text-decoration:none;
  font-size:10px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-top:1px;
}
.cf-phone:hover { text-decoration: underline; }
.cf-phone-empty {
  font-size:10px;
  color:#aaa;
  margin-top:1px;
  display:block;
}
.cf-meta {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}
.cf-meta strong { color: #333; }
.cf-mkt-up   { color: #b71c1c; font-weight: 600; margin-left: 4px; }
.cf-mkt-down { color: #2e7d32; font-weight: 600; margin-left: 4px; }
.cf-mkt-eq   { color: #888;    margin-left: 4px; }
.cf-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.cf-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 2px;
  background: #fff;
  color: #555;
}
.cf-tag-cap {
  background: #eaf3de;
  color: #27500a;
  border-radius: 99px;
  font-weight: 600;
}
.cf-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.cf-rate-input {
  width: 76px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: #1a1a1a;
  text-align: right;
  outline: none;
  font-family: inherit;
}
.cf-btn-row { display: flex; gap: 3px; }
.cf-btn {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.cf-btn-log {
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
}
.cf-btn-send {
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}
.cf-btn-send:hover  { background: #333; }
.cf-btn-log:hover   { background: #f5f2ee; }

/* When the panel is open AND on a small screen, drop to bottom edge so
   it doesn't cover the lock-button + brief at the top. */
@media (max-width: 900px) {
  .cf-panel {
    width: calc(100vw - 24px);
    right: 12px;
    top: auto;
    bottom: 12px;
    max-height: 60vh;
  }
}