/* BFC Cloud Admin: compact, concise, SaaS-style. One heading, one tab row, a slim numbers strip that also filters,
   filters on one line, one short line per person, orange switches, charcoal buttons. */
.bx, .bx-drawer, .bx-toast, .bx-hubhead { --ink: #29313d; --muted: #6b7886; --faint: #9aa3ad; --line: #e9edf1; --line-2: #dfe4ea; --soft: #f1f3f5;
  --dark: #2b3340; --ok: #2f8f55; --warn: #b7791f; --bad: #b4412b; --accent: #ff701e; font-family: inherit; color: var(--ink); }

/* heading + tabs */
.bx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 6px; min-height: 36px; }
.bx-head h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 750; color: var(--ink); }
.bx-head-actions:empty { display: none; }
.bx-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.bx-tabs::-webkit-scrollbar { display: none; }
.bx .bx-tabs a { all: unset; border: 0 !important; text-decoration: none !important; position: relative; display: inline-flex !important; align-items: center; gap: 6px;
  padding: 8px 1px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--muted) !important; white-space: nowrap; cursor: pointer;
  background: none !important; box-shadow: none !important; min-height: 0 !important; border-radius: 0 !important; }
.bx .bx-tabs a:hover { color: var(--ink) !important; }
.bx .bx-tabs a[aria-current] { color: var(--ink) !important; }
.bx .bx-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.bx .bx-tabs a:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.bx-count { font-size: 11.5px; font-weight: 600; line-height: 17px; padding: 0 6px; border-radius: 6px; background: var(--soft); color: var(--muted); }
[data-tab="requests"] .bx-count { background: var(--accent); color: #fff; }

/* existing pages under the tabs: their second row of tabs becomes small grey pills */
body.bx-legacy main nav.ba-tabs { display: inline-flex !important; gap: 2px !important; padding: 3px !important; margin: 0 0 12px !important; border: 0 !important;
  border-radius: 10px !important; background: #f1f3f5 !important; box-shadow: none !important; width: auto !important; }
body.bx-legacy main nav.ba-tabs a { border: 0 !important; border-radius: 8px !important; padding: 5px 12px !important; background: transparent !important; color: #465263 !important;
  font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; min-height: 0 !important; }
body.bx-legacy main nav.ba-tabs a[aria-current], body.bx-legacy main nav.ba-tabs a.active { background: #fff !important; color: #29313d !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .08) !important; }
body.bx-legacy main nav.ba-tabs a::after, body.bx-legacy main nav.ba-tabs a::before { display: none !important; }
body.bx-legacy main .bfc-btn-primary, body.bx-legacy main .btn-primary { background: #2b3340 !important; border-color: #2b3340 !important; color: #fff !important; box-shadow: none !important; }

/* buttons */
.bx .bx-btn, .bx-drawer .bx-btn { all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  height: 32px !important; min-height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid var(--line-2) !important;
  background: #fff !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 650 !important; cursor: pointer; white-space: nowrap; box-shadow: none !important; }
.bx .bx-btn:hover, .bx-drawer .bx-btn:hover { background: #f6f7f8 !important; }
.bx .bx-btn-dark, .bx-drawer .bx-btn-dark { background: var(--dark) !important; border-color: var(--dark) !important; color: #fff !important; }
.bx .bx-btn-dark:hover, .bx-drawer .bx-btn-dark:hover { background: #1f262f !important; }
.bx-drawer .bx-btn-danger { color: var(--bad) !important; border-color: rgba(180, 65, 43, .3) !important; }
.bx-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bx .bx-link { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 2px 4px; border-radius: 6px; }
.bx .bx-link:hover { color: var(--ink); background: var(--soft); }
.bx :focus-visible, .bx-drawer :focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* numbers strip (clicking one filters the list) */
.bx-stats { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.bx .bx-stat, .bx-hubbar .bx-stat { all: unset; box-sizing: border-box; flex: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px !important;
  cursor: pointer; background: #fff !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; min-height: 0 !important; box-shadow: none !important; min-width: 0; }
.bx .bx-stat:first-child, .bx-hubbar .bx-stat:first-child { border-left: 0 !important; }
.bx div.bx-stat, .bx-hubbar div.bx-stat { cursor: default; }
.bx-stat span { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; }
.bx-stat strong { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.bx .bx-stat:hover { background: #fafbfc !important; }
.bx .bx-stat[aria-pressed="true"] { background: #fff7f1 !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.bx .bx-stat.is-warn strong { color: var(--warn); }

/* filters on one line */
.bx-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bx-pills { display: inline-flex; gap: 2px; padding: 3px; background: var(--soft); border-radius: 10px; flex-wrap: wrap; }
.bx .bx-pills button { all: unset; cursor: pointer; padding: 4px 11px !important; border-radius: 7px !important; font-size: 12.5px !important; font-weight: 600 !important;
  color: #465263 !important; background: transparent !important; border: 0 !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; }
.bx .bx-pills button[aria-pressed="true"] { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .1) !important; }
.bx-search { position: relative; flex: 1 1 200px; display: flex; min-width: 160px; }
.bx-search svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--faint); stroke-width: 2.3; stroke-linecap: round; z-index: 1; }
.bx .bx-search input { all: unset; box-sizing: border-box; width: 100%; height: 32px !important; padding: 0 30px 0 32px !important; border-radius: 8px !important;
  border: 1px solid var(--line-2) !important; background: #fff !important; font-size: 13.5px !important; color: var(--ink) !important; }
.bx-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 11px/16px ui-monospace, Consolas, monospace; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; background: #fafbfc; }
.bx-search input:focus + kbd { display: none; }
.bx .bx-select, .bx-drawer .bx-select { all: unset; box-sizing: border-box; height: 32px !important; min-height: 32px !important; line-height: 30px !important; padding: 0 28px 0 10px !important;
  border-radius: 8px !important; border: 1px solid var(--line-2) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7886' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; cursor: pointer; max-width: 100%; box-shadow: none !important; }
.bx-everyone { display: inline-flex; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.bx-everyone > span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bx-ev { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bx-ev em { font-style: normal; font-size: 12.5px; font-weight: 650; }
.bx-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.bx-toolbar .bx-hint { margin: 0; }

/* the list */
.bx-list { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bx-grid { display: grid; grid-template-columns: 18px minmax(140px, 1.3fr) minmax(120px, 1fr) repeat(4, 54px) 104px 26px; align-items: center; gap: 8px; padding: 0 8px 0 12px; }
.bx-grid.bx-cloud { grid-template-columns: minmax(200px, 1.6fr) 130px minmax(110px, 1fr) 150px 28px; }
.bx-colhead { min-height: 34px; background: #fafbfc; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); position: sticky; top: 0; z-index: 2; }
.bx-colhead .c { text-align: center; }
.bx-bulk { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 10px 3px 14px; background: #fff7f1; border-bottom: 1px solid #ffd9c2; font-size: 12.5px; position: sticky; top: 0; z-index: 2; }
.bx-bulk strong { color: var(--ink); font-size: 13px; margin-right: 4px; }
.bx-bulk .bx-select { height: 28px !important; min-height: 28px !important; line-height: 26px !important; }
.bx-row { min-height: 46px; padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--line); cursor: pointer; transition: background .1s; }
.bx-rows > .bx-row:first-child, .bx-list > .bx-row:first-child { border-top: 0; }
.bx-row:hover { background: #fafbfc; }
.bx-row.is-picked { background: #fffaf6; }
.bx-row > .c { display: flex; justify-content: center; }
.bx-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bx-who > span:last-child, .bx-phone { min-width: 0; }
.bx-row strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.bx-row small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.bx-cell { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-mutedc { color: var(--muted); }
.bx-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #465263; background: var(--soft); }
.bx-av.is-live { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #7cbf93; }
.bx-av-lg { width: 40px; height: 40px; font-size: 14px; }
.bx-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c9ced6; margin-right: 6px; }
.bx-dot.active { background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 143, 85, .15); } .bx-dot.recent { background: #7cbf93; } .bx-dot.never { background: transparent; border: 1.5px solid #c9ced6; }
.bx-old { color: var(--warn); font-weight: 700; }
.bx-old::after { content: " ↑"; }
.bx-na { color: #c0c6cd; font-size: 13px; }
.bx-role { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--soft); color: #465263; }
.bx-role.is-manager { background: #fff1e6; color: #a1490f; }
.bx-role.is-admin { background: var(--dark); color: #fff; }
.bx .bx-circle { all: unset; cursor: pointer; width: 28px !important; height: 28px !important; min-height: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center;
  background: transparent !important; color: var(--muted) !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.bx .bx-circle:hover { background: var(--soft) !important; color: var(--ink) !important; }
.bx-circle svg { width: 16px; height: 16px; fill: currentColor; }
.bx-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* checkbox */
.bx-check { position: relative; width: 16px; height: 16px; display: inline-block; cursor: pointer; }
.bx-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bx-check b { position: absolute; inset: 0; border-radius: 4px; border: 1.5px solid #c3cad2; background: #fff; transition: all .1s; }
.bx-check input:checked + b { background: var(--accent); border-color: var(--accent); }
.bx-check input:checked + b::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bx-check input:focus-visible + b { outline: 2px solid var(--dark); outline-offset: 2px; }

/* orange switch */
.bx-sw { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.bx-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bx-sw b { position: absolute; inset: 0; border-radius: 999px; background: #d7dce2; transition: background .15s; pointer-events: none; }
.bx-sw b::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.bx-sw input:checked + b { background: var(--accent); }
.bx-sw input:checked + b::after { transform: translateX(14px); }
.bx-sw input:focus-visible + b { outline: 2px solid var(--dark); outline-offset: 2px; }

/* segmented control */
.bx-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--soft); border-radius: 8px; }
.bx-drawer .bx-seg button, .bx .bx-seg button { all: unset; cursor: pointer; padding: 3px 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important;
  color: #6b7886 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; line-height: 1.4 !important; }
.bx-drawer .bx-seg button[aria-pressed="true"], .bx .bx-seg button[aria-pressed="true"] { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .12) !important; }

/* phone requests */
.bx-row.bx-req { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(150px, 1fr) auto; gap: 12px; align-items: center; padding: 7px 10px 7px 14px; cursor: default; }
.bx-req .bx-select { width: 100%; }
.bx-req-meta small { margin-top: 2px; }
.bx-req-acts { display: flex; gap: 6px; justify-content: flex-end; }
.bx-req-done { grid-column: 3 / -1; justify-self: end; font-weight: 700; font-size: 13px; color: var(--ok); }
.bx-req-done.no { color: var(--muted); }
.bx-req.is-done { background: #fafbfc; }
.bx-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--soft); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
.bx-foot-note { color: var(--muted); font-size: 12.5px; margin: 8px 2px 0; }
.bx .bx-foot-note a { all: unset; cursor: pointer; display: inline !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  min-height: 0 !important; color: var(--ink) !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* loading */
.bx-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.bx-skel { padding: 4px 0; }
.bx-skel-row { height: 16px; margin: 15px 14px; border-radius: 5px; background: linear-gradient(90deg, #f1f2f4 25%, #f8f9fa 50%, #f1f2f4 75%); background-size: 200% 100%; animation: bx-shimmer 1.2s infinite; }
@keyframes bx-shimmer { to { background-position: -200% 0; } }

/* side panel */
.bx-scrim { position: fixed; inset: 0; background: rgba(20, 24, 30, .18); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 1040; }
.bx-scrim.open { opacity: 1; pointer-events: auto; }
.bx-drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); background: #fff; border-radius: 14px;
  box-shadow: 0 20px 56px rgba(20, 24, 30, .22); z-index: 1050; transform: translateX(calc(100% + 20px)); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; overflow: hidden; }
.bx-drawer.open { transform: none; }
.bx-dhead { display: flex; align-items: center; gap: 11px; padding: 16px 16px 10px; }
.bx-dhead > div { flex: 1; min-width: 0; }
.bx-dhead h2 { margin: 0; font-size: 17px; font-weight: 750; }
.bx-dhead p { margin: 1px 0 0; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; flex-wrap: wrap; }
.bx-drawer .bx-x { all: unset; cursor: pointer; width: 30px !important; height: 30px !important; border-radius: 8px !important; display: grid !important; place-items: center;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; align-self: flex-start; }
.bx-drawer .bx-x:hover { background: var(--soft) !important; }
.bx-x svg { width: 16px; height: 16px; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.bx-dtabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.bx-dtabs-none { border-bottom: 1px solid var(--line); }
.bx-drawer .bx-dtabs button { all: unset; cursor: pointer; position: relative; padding: 7px 1px 9px !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--muted) !important; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; border-radius: 0 !important; }
.bx-drawer .bx-dtabs button[aria-selected="true"] { color: var(--ink) !important; }
.bx-drawer .bx-dtabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.bx-dpane { padding: 2px 16px 16px; overflow-y: auto; flex: 1; }
.bx-sec { margin: 14px 0 0; font-size: 11px; font-weight: 750; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.bx-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bx-line b { display: block; font-weight: 650; font-size: 13.5px; }
.bx-line small { display: block; color: var(--muted); font-size: 12px; }
.bx-line-c { flex: none; max-width: 62%; text-align: right; }
.bx-line .bx-select { min-width: 160px; }
.bx-right { display: block; text-align: right; }
.bx-muted { color: var(--muted); font-size: 13px; }
.bx-state { display: inline-flex; align-items: center; font-weight: 650; font-size: 13px; }
.bx-danger { margin-top: 14px; }
.bx-danger .bx-line { border: 1px solid rgba(180, 65, 43, .2); border-radius: 10px; padding: 9px 12px; }
.bx-note { color: var(--muted); padding: 12px 0; margin: 0; font-size: 13px; }
.bx-events { list-style: none; margin: 0; padding: 10px 0 0; }
.bx-events li { position: relative; padding: 2px 0 12px 16px; border-left: 2px solid var(--line-2); margin-left: 4px; }
.bx-events li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid #c9ced6; }
.bx-events li:first-child::before { border-color: var(--accent); }
.bx-events b { display: block; font-size: 13px; }
.bx-events small { color: var(--muted); font-size: 12px; }

.bx-toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--dark); color: #fff; padding: 9px 14px;
  border-radius: 10px; display: flex; gap: 14px; align-items: center; z-index: 1100; transition: opacity .16s, transform .16s; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font-weight: 600; font-size: 13px; max-width: calc(100vw - 24px); }
.bx-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bx-toast button { all: unset; cursor: pointer; color: #ffb27a !important; font-weight: 800; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 2px !important; }

@media (max-width: 960px) {
  .bx-grid { grid-template-columns: 22px minmax(0, 1fr) repeat(4, 54px) 28px; }
  .bx-grid .bx-phone, .bx-colhead > span:nth-child(3) { display: none; }
  .bx-grid > div:nth-child(8), .bx-colhead > span:nth-child(8) { display: none; }
  .bx-grid.bx-cloud { grid-template-columns: minmax(0, 1fr) 110px 28px; }
  .bx-grid.bx-cloud > :nth-child(3), .bx-grid.bx-cloud > :nth-child(4) { display: none; }
  .bx-everyone { order: 3; }
}
@media (max-width: 600px) {
  .bx-stats { flex-wrap: wrap; }
  .bx .bx-stat, .bx-hubbar .bx-stat { flex: 1 1 45%; border-top: 1px solid var(--line) !important; }
  .bx-pills { width: 100%; }
  .bx-grid { grid-template-columns: minmax(0, 1fr) repeat(4, 38px) 24px; gap: 6px; padding-left: 10px; }
  .bx-grid > .bx-check, .bx-colhead > .bx-check { display: none; }
  .bx-colhead { font-size: 10.5px; }
  .bx-colhead .c { font-size: 0; } .bx-colhead .c::before { font-size: 10.5px; }
  .bx-colhead .c:nth-of-type(3)::before { content: "Trips"; } .bx-colhead .c:nth-of-type(4)::before { content: "Chal."; }
  .bx-colhead .c:nth-of-type(5)::before { content: "Track"; } .bx-colhead .c:nth-of-type(6)::before { content: "GR"; }
  .bx-sw { width: 30px; height: 18px; } .bx-sw b::after { width: 14px; height: 14px; } .bx-sw input:checked + b::after { transform: translateX(12px); }
  .bx-row.bx-req { grid-template-columns: 1fr; }
  .bx-req-acts { justify-content: flex-start; }
  .bx-req-done { grid-column: auto; justify-self: start; }
  .bx-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86vh; border-radius: 14px 14px 0 0; transform: translateY(100%); }
  .bx-line .bx-select { min-width: 0; max-width: 170px; }
  .bx-toast { left: 10px; right: 10px; transform: translateY(12px); justify-content: space-between; }
  .bx-toast.show { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bx-drawer, .bx-scrim, .bx-toast, .bx-sw b, .bx-sw b::after, .bx-skel-row { transition: none; animation: none; } }
.bx .bx-link { background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; color: #6b7886 !important; font-size: 12.5px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: 6px !important; }
.bx .bx-link:hover { background: #f1f3f5 !important; color: #29313d !important; }


/* Hubs: hub name + sync status, the hub's own pages as a segmented control, stages as one journey strip,
   and truck rows with a route line and ETA countdown. */
.bx-hubhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; }
.bx-hubtitle h2 { margin: 0; font-size: 19px; font-weight: 750; color: #29313d; letter-spacing: -.01em; }
.bx-hubtitle p { margin: 3px 0 0; font-size: 12.5px; color: #6b7886; display: flex; align-items: center; }
body.bx-legacy main nav.ba-tabs.bx-hubtabs { margin: 0 !important; }
.bx-count.is-hot { background: #ff701e; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; padding: 0 5px; border-radius: 5px; margin-left: 2px; }

body.bx-hub main .hub-admin section.panel.premium-trips-view { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; box-shadow: none !important; }
body.bx-hub main .premium-trip-controls { padding: 0 !important; margin: 0 !important; }
body.bx-hub main .queue-scope-switch.bx-journey { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1fr); width: 100% !important; gap: 0 !important;
  padding: 0 !important; background: #fff !important; border: 1px solid #e9edf1 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .03) !important; overflow: visible !important; }
body.bx-hub main .bx-journey .bfc-selection-marker, body.bx-hub main .bx-journey .queue-scope-icon { display: none !important; }
body.bx-hub main .bx-journey .queue-scope-option { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 1px !important; padding: 11px 16px 12px 20px !important; margin: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; border-left: 1px solid #e9edf1 !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; color: #29313d !important; transition: background .12s; }
body.bx-hub main .bx-journey .queue-scope-option:first-of-type { border-left: 0 !important; border-radius: 12px 0 0 12px !important; padding-left: 16px !important; }
body.bx-hub main .bx-journey .queue-scope-option:last-of-type { border-radius: 0 12px 12px 0 !important; }
body.bx-hub main .bx-journey .queue-scope-option:not(:first-of-type):not(.bx-review)::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: #fff; border-top: 1px solid #e9edf1; border-right: 1px solid #e9edf1; transform: rotate(45deg); z-index: 1; }
body.bx-hub main .bx-journey .queue-scope-option:hover { background: #fafbfc !important; }
body.bx-hub main .bx-journey .queue-scope-option b { order: -1; display: flex !important; align-items: baseline; gap: 4px; font-size: 22px !important; font-weight: 750 !important; line-height: 1.15 !important;
  letter-spacing: -.02em; color: #29313d !important; background: none !important; padding: 0 !important; border-radius: 0 !important; min-width: 0 !important; }
body.bx-hub main .bx-journey .queue-scope-option b small { font-size: 11.5px !important; font-weight: 600 !important; color: #9aa3ad !important; letter-spacing: 0; }
body.bx-hub main .bx-journey .queue-scope-option > span:not(.queue-scope-icon) { display: block !important; }
body.bx-hub main .bx-journey .queue-scope-option strong { display: block; font-size: 13px !important; font-weight: 650 !important; color: #465263 !important; }
body.bx-hub main .bx-journey .queue-scope-option small { display: block; font-size: 11.5px !important; color: #9aa3ad !important; font-weight: 500 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bx-hub main .bx-journey .queue-scope-option.active { background: #fff !important; box-shadow: inset 0 -2px 0 #ff701e !important; }
body.bx-hub main .bx-journey .queue-scope-option.active strong { color: #29313d !important; }
body.bx-hub main .bx-journey .queue-scope-option[data-n="0"] b { color: #c0c6cd !important; }
body.bx-hub main .bx-journey .bx-review { background: #fbfbfc !important; border-left: 1px solid #e3e7ec !important; }
body.bx-hub main .bx-journey .bx-review.is-hot b { color: #b7791f !important; }

body.bx-hub main .ba-workspace > section.panel:not(.premium-trips-view), body.bx-hub main .hub-admin > section.panel:not(.premium-trips-view) {
  background: #fff !important; border: 1px solid #e9edf1 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .03) !important; padding: 0 !important; overflow: hidden; }
body.bx-hub main .hub-list-head { display: flex !important; align-items: center !important; justify-content: space-between; padding: 12px 16px !important; margin: 0 !important; border-bottom: 1px solid #e9edf1; }
body.bx-hub main .hub-list-head h2 { font-size: 15px !important; font-weight: 750 !important; margin: 0 !important; color: #29313d !important; }
body.bx-hub main .hub-list-head .hint { font-size: 12px !important; color: #9aa3ad !important; }
body.bx-hub main .bx-ghostbtn { height: 30px !important; min-height: 30px !important; padding: 0 11px !important; border-radius: 8px !important; border: 1px solid #dfe4ea !important; background: #fff !important;
  color: #29313d !important; font-size: 12.5px !important; font-weight: 650 !important; box-shadow: none !important; gap: 6px !important; }
body.bx-hub main .bx-ghostbtn svg { width: 14px !important; height: 14px !important; }
body.bx-hub main .hub-trip-head, body.bx-hub main .hub-trip-summary { display: grid !important; grid-template-columns: minmax(210px, 1.25fr) 110px minmax(210px, 1.35fr) minmax(170px, 1fr) 64px !important;
  gap: 18px !important; align-items: center !important; }
body.bx-hub main .hub-trip-head { padding: 8px 16px !important; margin: 0 !important; background: #fafbfc; border-bottom: 1px solid #e9edf1; font-size: 11px !important; font-weight: 700 !important;
  color: #9aa3ad !important; text-transform: uppercase; letter-spacing: .05em; }
body.bx-hub main .hub-list { display: block !important; gap: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
body.bx-hub main .hub-trip-group { margin: 0 !important; border: 0 !important; border-top: 1px solid #eef1f4 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
body.bx-hub main .hub-trip-group:first-child { border-top: 0 !important; }
body.bx-hub main .hub-trip-summary { padding: 12px 16px !important; min-height: 0 !important; cursor: pointer; list-style: none; transition: background .12s; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
body.bx-hub main .hub-trip-summary::-webkit-details-marker { display: none; }
body.bx-hub main .hub-trip-summary:hover, body.bx-hub main .hub-trip-group[open] > .hub-trip-summary { background: #fafbfc !important; }
body.bx-hub main .hub-trip-primary { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; min-width: 0; }
body.bx-hub main .hub-trip-primary .vehicle-plate { transform: scale(.86); transform-origin: left center; margin: -2px 0 !important; }
body.bx-hub main .hub-trip-primary .meta { display: flex !important; flex-wrap: wrap; gap: 2px 10px !important; font-size: 12px !important; }
body.bx-hub main .hub-trip-primary .meta span:first-child { color: #465263 !important; font-weight: 650 !important; }
body.bx-hub main .hub-trip-primary .meta span + span { color: #9aa3ad !important; font-variant-numeric: tabular-nums; }
body.bx-hub main .hub-trip-count strong { display: block; font-size: 18px !important; font-weight: 750 !important; line-height: 1.15; color: #29313d !important; }
body.bx-hub main .hub-trip-count span { display: block; font-size: 12px !important; color: #6b7886 !important; }
body.bx-hub main .hub-trip-where { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; min-width: 0; }
body.bx-hub main .bx-km { font-size: 12.5px; color: #6b7886; }
body.bx-hub main .bx-km strong { color: #29313d; font-weight: 750; font-size: 13.5px; }
body.bx-hub main .hub-progress { position: relative !important; display: block !important; height: 4px !important; border-radius: 4px !important; background: #edf0f3 !important; overflow: visible !important; margin: 2px 6px 2px 0 !important; }
body.bx-hub main .hub-progress i { display: block !important; height: 100% !important; border-radius: 4px !important; background: linear-gradient(90deg, #c7ccd3, #2b3340) !important; }
body.bx-hub main .hub-progress em { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #ff701e; box-shadow: 0 0 0 2.5px #fff, 0 1px 4px rgba(20, 24, 30, .25); }
body.bx-hub main .hub-progress::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; border: 2px solid #2b3340; }
body.bx-hub main .hub-trip-where small { font-size: 12px !important; color: #9aa3ad !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bx-hub main .bx-flag { align-self: flex-start; font-size: 11.5px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 6px !important; border: 0 !important; }
body.bx-hub main .bx-flag.is-warn { background: #fff4e6 !important; color: #9a5b00 !important; }
body.bx-hub main .bx-flag.is-quiet { background: #f1f3f5 !important; color: #6b7886 !important; }
body.bx-hub main .bx-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
body.bx-hub main .bx-whenlab { width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3ad; }
body.bx-hub main .bx-when strong { font-size: 13.5px !important; font-weight: 700 !important; color: #29313d !important; }
body.bx-hub main .bx-rel { font-size: 11.5px; font-weight: 700; color: #2f6f4f; background: #eaf5ee; border-radius: 5px; padding: 0 6px; line-height: 18px; }
body.bx-hub main .bx-rel.is-past { color: #6b7886; background: #f1f3f5; }
body.bx-hub main .hub-trip-when small { display: block; margin-top: 3px; font-size: 11.5px !important; color: #9aa3ad !important; }
body.bx-hub main .hub-trip-open { justify-self: end; display: inline-flex !important; align-items: center; gap: 4px; font-size: 12.5px !important; font-weight: 700 !important; color: #465263 !important;
  padding: 5px 9px !important; border-radius: 8px !important; border: 1px solid #e3e7ec; background: #fff; }
body.bx-hub main .hub-trip-open svg { width: 14px !important; height: 14px !important; transition: transform .15s; }
body.bx-hub main .hub-trip-group[open] .hub-trip-open svg { transform: rotate(180deg); }
body.bx-hub main .hub-trip-body { padding: 0 16px 12px !important; background: #fafbfc; }
body.bx-hub main .hub-trip-body table { font-size: 12.5px !important; margin: 0 !important; background: #fff; border: 1px solid #e9edf1; border-radius: 10px; overflow: hidden; }
body.bx-hub main .hub-trip-body th { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: #9aa3ad !important; background: #fff !important; padding: 7px 10px !important; }
body.bx-hub main .hub-trip-body td { padding: 6px 10px !important; color: #29313d; }
body.bx-hub main .hub-trip-body td small { display: block; color: #9aa3ad; font-size: 11.5px; }
@media (max-width: 1000px) {
  body.bx-hub main .queue-scope-switch.bx-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.bx-hub main .bx-journey .queue-scope-option:nth-of-type(4) { border-left: 0 !important; }
  body.bx-hub main .bx-journey .queue-scope-option:nth-of-type(n+4) { border-top: 1px solid #e9edf1 !important; }
  body.bx-hub main .bx-journey .queue-scope-option::before { display: none; }
  body.bx-hub main .hub-trip-head { display: none !important; }
  body.bx-hub main .hub-trip-summary { grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px 14px !important; }
  body.bx-hub main .hub-trip-count { grid-column: 2; grid-row: 1; text-align: right; }
  body.bx-hub main .hub-trip-where { grid-column: 1 / -1; }
  body.bx-hub main .hub-trip-when { grid-column: 1; }
  body.bx-hub main .hub-trip-open { grid-column: 2; }
}
@media (max-width: 600px) {
  body.bx-hub main .queue-scope-switch.bx-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bx-hub main .bx-journey .queue-scope-option { border-left: 0 !important; border-top: 1px solid #e9edf1 !important; }
  body.bx-hub main .bx-journey .queue-scope-option:nth-of-type(even) { border-left: 1px solid #e9edf1 !important; }
  body.bx-hub main .bx-journey .queue-scope-option:nth-of-type(-n+2) { border-top: 0 !important; }
  .bx-hubhead { align-items: flex-start; }
}
body.bx-hub main .premium-trip-controls { display: block !important; width: 100% !important; max-width: none !important; }
@media (max-width: 1000px) { body.bx-hub main .hub-trip-primary { grid-column: 1 !important; grid-row: 1 !important; } }
body.bx-hub main .hub-trip-head, body.bx-hub main .hub-trip-summary { grid-template-columns: minmax(180px, 1.2fr) 92px minmax(170px, 1.35fr) minmax(150px, 1fr) 58px !important; gap: 14px !important; }
@media (max-width: 1000px) { body.bx-hub main .hub-trip-summary { grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px 14px !important; } }
body.bx-hub main .queue-scope-switch.bx-journey { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
body.bx-hub main .premium-trip-controls, body.bx-hub main .hub-admin section.panel.premium-trips-view { min-width: 0 !important; max-width: 100% !important; overflow: visible !important; }
body.bx-hub main .bx-journey .queue-scope-option, body.bx-hub main .bx-journey .queue-scope-option > span { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }

/* ---- round 2: journey columns follow the page, arrows only on the stage journey ---- */
body.bx-hub main .queue-scope-switch.bx-journey { grid-template-columns: repeat(var(--bx-cols, 6), minmax(0, 1fr)) !important; }
body.bx-hub main .bx-journey:not(.bx-flow) .queue-scope-option::before { display: none !important; }
body.bx-hub main .bx-near { color: #9aa3ad; font-weight: 500; }
body.bx-hub main .bx-ends { display: flex; justify-content: space-between; gap: 8px; margin: -3px 6px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa3ad; }
body.bx-hub main .bx-ends span:last-child { color: #465263; }
body.bx-hub main .bx-steps { display: flex; gap: 3px; max-width: 220px; }
body.bx-hub main .bx-steps i { flex: 1; height: 4px; border-radius: 3px; background: #edf0f3; }
body.bx-hub main .bx-steps i.is-done { background: #2f8f55; }
body.bx-hub main .bx-rel.is-late { color: #9a5b00; background: #fff4e6; }
body.bx-hub main .hub-list-head .bx-asof { color: #b6bcc4; }
@media (max-width: 1000px) { body.bx-hub main .queue-scope-switch.bx-journey { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { body.bx-hub main .queue-scope-switch.bx-journey { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* last mile stops as a quiet timeline */
body.bx-hub main .hub-stops { display: block !important; padding: 4px 0 0 6px !important; margin: 0 !important; background: transparent !important; }
body.bx-hub main .hub-stop { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) 130px 130px !important; gap: 12px !important; align-items: center !important;
  padding: 8px 0 8px 22px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-left: 2px solid #e3e7ec !important; border-radius: 0 !important; box-shadow: none !important; }
body.bx-hub main .hub-stop::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #c3cad2; }
body.bx-hub main .hub-stop:last-child { border-left-color: transparent !important; }
body.bx-hub main .hub-stop:last-child::after { content: ""; position: absolute; left: -2px; top: 0; height: 14px; border-left: 2px solid #e3e7ec; }
body.bx-hub main .hub-stop strong { font-size: 13px !important; font-weight: 700 !important; color: #29313d !important; }
body.bx-hub main .hub-stop small { font-size: 11.5px !important; color: #9aa3ad !important; }
body.bx-hub main .hub-stop .grs { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 4px !important; }
body.bx-hub main .hub-stop .grs span { font: 600 11px/18px ui-monospace, Consolas, monospace !important; background: #f1f3f5 !important; color: #465263 !important; border-radius: 5px !important; padding: 0 6px !important; border: 0 !important; }
body.bx-hub main .hub-stop .time { font-size: 13px !important; font-weight: 700 !important; color: #29313d !important; }
body.bx-hub main .hub-stop .time small { display: block; font-weight: 600 !important; }

/* PODs: a tighter, calmer grid */
body.bx-hub main .hub-pod-list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px !important; margin: 0 !important; border-bottom: 1px solid #e9edf1; }
body.bx-hub main .hub-pod-list-head h2 { font-size: 15px !important; font-weight: 750 !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
body.bx-hub main .hub-pod-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 12px !important; padding: 14px 16px 16px !important; }
body.bx-hub main .hub-pod-card { display: flex !important; flex-direction: column; border: 1px solid #e9edf1 !important; border-radius: 10px !important; overflow: hidden; background: #fff !important; box-shadow: none !important; transition: border-color .12s, box-shadow .12s; }
body.bx-hub main .hub-pod-card:hover { border-color: #c9ced6 !important; box-shadow: 0 4px 14px rgba(20, 24, 30, .07) !important; }
body.bx-hub main .hub-pod-photo { display: block; height: 190px !important; background: #f4f5f7; overflow: hidden; }
body.bx-hub main .hub-pod-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; }
body.bx-hub main .hub-pod-body { display: flex !important; flex-direction: column; gap: 3px; padding: 9px 11px 11px !important; }
body.bx-hub main .hub-pod-gr { font-size: 13px !important; font-weight: 700 !important; color: #29313d !important; }
body.bx-hub main .hub-pod-gr.none { color: #6b7886 !important; }
body.bx-hub main .hub-pod-line { font-size: 11.5px !important; color: #9aa3ad !important; }
body.bx-hub main .hub-pod-foot { margin-top: 4px; }

/* ---- every existing Admin page: same tables, inputs and buttons; no blue ---- */
body.bx-legacy main .bx-head-actions > a, body.bx-legacy main .bx-head-actions > button { background: #2b3340 !important; border: 1px solid #2b3340 !important; color: #fff !important; box-shadow: none !important;
  height: 32px !important; min-height: 32px !important; padding: 0 13px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 650 !important; display: inline-flex !important; align-items: center; gap: 6px; }
body.bx-legacy main > :not(.bx) h2 { font-size: 15px !important; font-weight: 750 !important; letter-spacing: 0 !important; }
body.bx-legacy main > :not(.bx) table { font-size: 13px !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
body.bx-legacy main > :not(.bx) table th { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; color: #9aa3ad !important; background: #fafbfc !important;
  padding: 9px 14px !important; border-bottom: 1px solid #e9edf1 !important; white-space: nowrap; }
body.bx-legacy main > :not(.bx) table td { padding: 9px 14px !important; border-bottom: 1px solid #eef1f4 !important; color: #29313d; vertical-align: middle !important; }
body.bx-legacy main > :not(.bx) table tr:last-child td { border-bottom: 0 !important; }
body.bx-legacy main > :not(.bx) table tbody tr:hover td { background: #fafbfc !important; }
body.bx-legacy main > :not(.bx) table td small { color: #9aa3ad !important; font-size: 11.5px !important; }
body.bx-hub main table td:first-child, body.bx-legacy main .ba-workspace table td:last-child { white-space: nowrap; }
body.bx-legacy main > :not(.bx) input.form-control:not([type=hidden]), body.bx-legacy main > :not(.bx) select.form-select, body.bx-legacy main > :not(.bx) input[type=date],
body.bx-legacy main > :not(.bx) .bfc-input:not(.review-search-surface) { height: 34px !important; min-height: 34px !important; border-radius: 8px !important; border: 1px solid #dfe4ea !important; font-size: 13px !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body.bx-legacy main > :not(.bx) .review-search-surface { height: 34px !important; min-height: 34px !important; border-radius: 8px !important; border: 1px solid #dfe4ea !important; box-shadow: none !important; }
body.bx-legacy main > :not(.bx) .review-search-surface input { height: 32px !important; border: 0 !important; }
body.bx-legacy main > :not(.bx) label { font-size: 12px !important; font-weight: 600 !important; color: #6b7886 !important; }
body.bx-legacy main > :not(.bx) .bfc-btn:not(.bfc-btn-primary):not(.premium-nav-link):not(.hub-trip-open):not(.queue-scope-option), body.bx-legacy main > :not(.bx) .btn-outline-primary, body.bx-legacy main > :not(.bx) button.secondary {
  height: 34px !important; min-height: 34px !important; padding: 0 13px !important; border-radius: 8px !important; border: 1px solid #dfe4ea !important; background: #fff !important; color: #29313d !important;
  font-size: 13px !important; font-weight: 650 !important; box-shadow: none !important; }
body.bx-legacy main > :not(.bx) a:not(.bfc-btn):not(.btn):not(.queue-scope-option):not(.hub-pod-card):not([class*="tab"]) { color: #29313d; text-decoration-color: rgba(41, 49, 61, .3); }
body.bx-legacy main > :not(.bx) .panel, body.bx-legacy main > :not(.bx) .card { border-radius: 12px !important; box-shadow: 0 1px 2px rgba(20, 24, 30, .03) !important; border-color: #e9edf1 !important; }
.bx-inline-who { display: inline-flex; align-items: center; gap: 8px; }
.bx-av-sm { width: 22px; height: 22px; font-size: 9px; }
.bx-av { background: #f1f3f5; color: #465263; }
.bx-inline-who .bx-av-sm { display: inline-grid !important; place-items: center; border-radius: 50%; flex: none; font-weight: 800; }
body.bx-legacy main > :not(.bx) .review-search-surface input.form-control, body.bx-legacy main > :not(.bx) .review-search-surface input { border: 0 !important; box-shadow: none !important; height: 32px !important; min-height: 32px !important; background: transparent !important; }
body.bx-legacy main > :not(.bx) .btn-link, body.bx-legacy main > :not(.bx) a.btn-link { color: #6b7886 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; }
body.bx-legacy main > :not(.bx) .btn-link:hover { color: #29313d !important; }
body.bx-legacy main a.bf-clear { color: #6b7886 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; }
body.bx-legacy main a.bf-clear:hover { color: #29313d !important; }

/* ---- round 3: the stage strip as one slim bar ---- */
body.bx-hub main .queue-scope-switch.bx-journey { display: flex !important; align-items: stretch; gap: 0 !important; height: 44px; padding: 0 6px !important; overflow-x: auto !important;
  overflow-y: hidden !important; scrollbar-width: none; border-radius: 10px !important; grid-template-columns: none !important; }
body.bx-hub main .queue-scope-switch.bx-journey::-webkit-scrollbar { display: none; }
body.bx-hub main .bx-journey .queue-scope-option { flex: none; flex-direction: row !important; align-items: center !important; gap: 7px !important; padding: 0 12px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; max-width: none !important; min-width: 0 !important; white-space: nowrap; }
body.bx-hub main .bx-journey .queue-scope-option:first-of-type { padding-left: 10px !important; border-radius: 0 !important; }
body.bx-hub main .bx-journey .queue-scope-option:last-of-type { border-radius: 0 !important; }
body.bx-hub main .bx-journey .queue-scope-option::before { display: none !important; }
body.bx-hub main .bx-journey.bx-flow .queue-scope-option:not(:last-of-type):not(.bx-review)::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-top: 1.5px solid #c9ced6; border-right: 1.5px solid #c9ced6; transform: rotate(45deg); }
body.bx-hub main .bx-journey .queue-scope-option > span:not(.queue-scope-icon) { display: block !important; overflow: visible !important; }
body.bx-hub main .bx-journey .queue-scope-option small { display: none !important; }
body.bx-hub main .bx-journey .queue-scope-option strong { font-size: 13px !important; font-weight: 600 !important; color: #6b7886 !important; }
body.bx-hub main .bx-journey .queue-scope-option b { order: 2 !important; display: inline-block !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 18px !important; letter-spacing: 0 !important;
  padding: 0 6px !important; border-radius: 6px !important; background: #f1f3f5 !important; color: #465263 !important; font-variant-numeric: tabular-nums; }
body.bx-hub main .bx-journey .queue-scope-option b small { display: none !important; }
body.bx-hub main .bx-journey .queue-scope-option:hover strong { color: #29313d !important; }
body.bx-hub main .bx-journey .queue-scope-option:hover { background: transparent !important; }
body.bx-hub main .bx-journey .queue-scope-option.active { box-shadow: inset 0 -2px 0 #ff701e !important; background: transparent !important; }
body.bx-hub main .bx-journey .queue-scope-option.active strong { color: #29313d !important; font-weight: 700 !important; }
body.bx-hub main .bx-journey .queue-scope-option.active b { background: #2b3340 !important; color: #fff !important; }
body.bx-hub main .bx-journey .queue-scope-option[data-n="0"]:not(.active) strong { color: #aab1ba !important; }
body.bx-hub main .bx-journey .queue-scope-option[data-n="0"]:not(.active) b { background: transparent !important; color: #c0c6cd !important; padding: 0 2px !important; }
body.bx-hub main .bx-journey .bx-review { margin-left: auto !important; border-left: 1px solid #e9edf1 !important; background: transparent !important; padding-left: 14px !important; }
body.bx-hub main .bx-journey .bx-review.is-hot b { background: #fff4e6 !important; color: #9a5b00 !important; }
body.bx-hub main .bx-journey .bx-review.is-hot strong::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e08a1e; margin-right: 6px; vertical-align: 2px; }
@media (max-width: 1000px) { body.bx-hub main .queue-scope-switch.bx-journey { display: flex !important; grid-template-columns: none !important; } }
@media (max-width: 600px) { body.bx-hub main .queue-scope-switch.bx-journey { display: flex !important; } body.bx-hub main .bx-journey .queue-scope-option { border-top: 0 !important; border-left: 0 !important; } body.bx-hub main .bx-journey .bx-review { margin-left: 0 !important; } }
body.bx-hub main .bx-journey.bx-flow .queue-scope-option:has(+ .bx-review)::after { display: none !important; }

/* numbers strips everywhere: the same slim bar (label + count pill, current one underlined) */
.bx .bx-stats { height: 42px; padding: 0 6px; align-items: stretch; border-radius: 10px; overflow-x: auto; scrollbar-width: none; }
.bx .bx-stats::-webkit-scrollbar { display: none; }
.bx .bx-stats .bx-stat { flex: none !important; justify-content: flex-start !important; gap: 7px !important; padding: 0 12px !important; border-left: 0 !important; background: transparent !important; position: relative; }
.bx .bx-stats .bx-stat + .bx-stat::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; border-left: 1px solid #e9edf1; }
.bx .bx-stats .bx-stat span { font-size: 13px !important; font-weight: 600 !important; color: #6b7886 !important; }
.bx .bx-stats .bx-stat strong { order: 2; font-size: 11.5px !important; font-weight: 700 !important; line-height: 18px; letter-spacing: 0 !important; padding: 0 6px; border-radius: 6px; background: #f1f3f5; color: #465263 !important; font-variant-numeric: tabular-nums; }
.bx .bx-stats .bx-stat:hover { background: transparent !important; }
.bx .bx-stats .bx-stat:hover span { color: #29313d !important; }
.bx .bx-stats .bx-stat[aria-pressed="true"] { background: transparent !important; box-shadow: inset 0 -2px 0 #ff701e !important; }
.bx .bx-stats .bx-stat[aria-pressed="true"] span { color: #29313d !important; font-weight: 700 !important; }
.bx .bx-stats .bx-stat[aria-pressed="true"] strong { background: #2b3340; color: #fff !important; }
.bx .bx-stats .bx-stat.is-warn strong { background: #fff4e6; color: #9a5b00 !important; }
.bx .bx-stats .bx-stat.is-warn { margin-left: auto; }
@media (max-width: 600px) { .bx .bx-stats { flex-wrap: nowrap !important; } .bx .bx-stats .bx-stat { flex: none !important; border-top: 0 !important; } .bx .bx-stats .bx-stat.is-warn { margin-left: 0; } }

/* truck rows a touch tighter */
body.bx-hub main .hub-trip-summary { padding: 10px 16px !important; }
body.bx-hub main .hub-trip-primary { gap: 3px !important; }
body.bx-hub main .hub-trip-primary .vehicle-plate { transform: scale(.8); margin: -3px 0 !important; }
body.bx-hub main .hub-trip-where { gap: 5px !important; }
/* route line in brand orange */
body.bx-hub main .hub-progress { background: #f1f2f4 !important; height: 5px !important; }
body.bx-hub main .hub-progress i { background: linear-gradient(90deg, rgba(255, 112, 30, .14), rgba(255, 112, 30, .55) 55%, #ff701e) !important; }
body.bx-hub main .hub-progress em { width: 13px !important; height: 13px !important; margin: -6.5px 0 0 -6.5px !important; background: #fff !important;
  box-shadow: 0 0 0 3px #ff701e, 0 0 0 7px rgba(255, 112, 30, .16), 0 2px 6px rgba(20, 24, 30, .18) !important; }
body.bx-hub main .hub-progress::after { border-color: #b9c0c8 !important; background: #fff !important; }

/* ---- final polish: no shouty capitals, no avatar circles in lists ---- */
.bx-sec { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 700 !important; color: #6b7886 !important; margin-top: 16px !important; }
.bx-everyone > span { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; }
body.bx-hub main .hub-trip-head { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #6b7886 !important; }
body.bx-hub main .bx-whenlab { width: auto !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #9aa3ad !important; }
body.bx-hub main .bx-ends { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; }
body.bx-legacy main > :not(.bx) table th { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #6b7886 !important; }
body.bx-hub main .hub-trip-body th { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #6b7886 !important; }
.bx-who { gap: 0 !important; }
.bx-dhead { padding-top: 18px !important; }