/* ============================================================
DOFT 2026 — UI REFRESH LAYER (PR-1: design tokens + bridge)
Spec: docs/UI-2026-SPEC.md §A. Loaded LAST in header.jsp,
gated by Constants.isDebug (dev.doft.com only) until approved.
Defining tokens has NO visual effect until consumed (§A.4).
Kill switch: remove the in header.jsp.
============================================================ */
:root {
/* ---------- BRAND: SCARLET RAMP (primary) ---------- */
--red-50: #fff1ee;
--red-100: #ffe0d8;
--red-200: #ffc2b3;
--red-300: #ff9981;
--red-400: #fb6447;
--red-500: #fb3a18; /* hover / lighter primary */
--red-600: #f12908; /* ===== PRIMARY (legacy #F12908) ===== */
--red-700: #c81f06; /* active / pressed / scarlet-as-TEXT (AA) */
--red-800: #a01905;
--red-900: #7a1304;
/* ---------- INK / ASPHALT DARKS ---------- */
--ink: #0a0b0d; /* near-black, max-contrast text */
--ink-800: #1e2024;
--ink-700: #2b2d33;
--asphalt: #303030; /* topbar / dark surfaces */
/* ---------- ACCENTS ---------- */
--teal-50: #e6faf7;
--teal-400: #2fd6c3;
--teal-500: #16b8a6; /* signal teal — "live" / fresh / success-accent (FILL/DOT only) */
--teal-600: #109e8e;
--teal-700: #0e8174; /* teal-as-TEXT/icon-on-white (AA UI) */
--amber-50: #fff4e6;
--amber-400:#ffa940;
--amber-500:#ff9320; /* road amber — pay / rate / warning-accent (INK text on it) */
--amber-600:#e07d12;
/* ---------- NEUTRAL GRAY RAMP (authoritative) ---------- */
--gray-25: #fcfcfd;
--gray-50: #f7f8fa; /* app canvas (replaces #F5F7FA) */
--gray-100: #f1f3f5;
--gray-200: #e6e9ed; /* hairlines / borders */
--gray-300: #d3d8de; /* input borders */
--gray-400: #aeb5be; /* disabled text / placeholder */
--gray-500: #828a94; /* muted / secondary text */
--gray-600: #5e6670;
--gray-700: #414851; /* body text alt */
--gray-800: #2b2f36;
--gray-900: #16181c; /* headings */
/* ---------- SEMANTIC SURFACES / LINES / CANVAS ---------- */
--canvas: var(--gray-50);
--surface: #ffffff;
--surface-alt: var(--gray-25);
--surface-sunken:var(--gray-100);
--line: var(--gray-200);
--line-strong: var(--gray-300);
/* ---------- SEMANTIC TEXT ---------- */
--text: var(--gray-900);
--text-body: var(--gray-700);
--text-muted: var(--gray-500);
--text-ondark: #ffffff;
--text-link: var(--red-600);
--text-link-hover: var(--red-700);
/* ---------- SEMANTIC STATUS ---------- */
--success: var(--teal-500);
--success-bg: var(--teal-50);
--success-fg: var(--teal-600);
--warning: var(--amber-500);
--warning-bg: var(--amber-50);
--warning-fg: var(--amber-600);
--danger: var(--red-600);
--danger-bg: var(--red-50);
--danger-fg: var(--red-700);
--info: #475467;
--info-bg: #eef1f5;
--info-fg: #344054;
/* ---------- TYPE ---------- */
--font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--fs-2xs: 0.75rem;
--fs-xs: 0.8125rem;
--fs-sm: 0.875rem;
--fs-md: 1rem; /* NEW BASE 16px */
--fs-lg: 1.125rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 1.875rem;
--fs-4xl: 2.25rem;
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
--lh-tight: 1.15; --lh-heading: 1.25; --lh-snug: 1.4; --lh-body: 1.5;
--ls-tight: -0.01em; --ls-normal: 0; --ls-label: 0.04em;
/* ---------- SPACING (4px base) ---------- */
--sp-0:0; --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
--sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;
/* ---------- RADIUS ---------- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px; /* default controls */
--radius-lg: 16px; /* large cards / sheets */
--radius-pill: 9999px;
/* ---------- ELEVATION ---------- */
--shadow-xs: 0 1px 2px rgba(16,24,40,.05);
--shadow-sm: 0 1px 2px rgba(16,24,40,.06);
--shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 28px -12px rgba(16,24,40,.18);
--shadow-md: 0 2px 4px rgba(16,24,40,.06), 0 18px 36px -14px rgba(16,24,40,.20);
--shadow-lg: 0 4px 8px rgba(16,24,40,.08), 0 28px 56px -16px rgba(16,24,40,.24);
/* ---------- FOCUS RING (replaces #FF0000 glow) ---------- */
--ring: 0 0 0 3px rgba(241,41,8,.22);
--ring-offset: 0 0 0 2px var(--surface), 0 0 0 5px rgba(241,41,8,.22);
/* ---------- MOTION ---------- */
--ease: cubic-bezier(.2,.7,.2,1);
--dur-fast: 150ms;
--dur: 200ms;
--dur-slow: 250ms;
/* ---------- WOW MOTION (Phase-2 W0) ---------- */
--ease-spring: linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);
--ease-out: cubic-bezier(.2,.7,.2,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 420ms;
--stagger: 28ms;
--wow-lift: translateY(-2px);
/* ---------- Z-INDEX LAYERS ---------- */
--z-base:0; --z-sticky:100; --z-dropdown:1000; --z-sticky-nav:1020;
--z-banner:1030; --z-overlay:1040; --z-modal:1050; --z-popover:1060; --z-toast:1080;
}
@supports not (top: linear(0,1)) { :root { --ease-spring: var(--ease-out); } } /* degrade spring on old engines */
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --stagger: 0ms; --wow-lift: none; }
}
/* ============================================================
DOFT 2026 — TOKEN BRIDGE (overrides; load after style.css)
!important ONLY where it must beat the theme's own !important.
============================================================ */
/* ---- Global base ---- */
html { font-size: 100%; } /* 1rem = 16px base */
body {
font-family: var(--font-body);
font-size: var(--fs-sm); /* keep the theme's native 14px base; 16px overflowed fixed-width dense fields (dates/selects/prices) */
line-height: var(--lh-body);
color: var(--text-body);
background-color: var(--canvas); /* #F5F7FA -> --gray-50 */
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: var(--font-display);
color: var(--text);
line-height: var(--lh-heading);
letter-spacing: var(--ls-tight);
font-weight: var(--fw-semibold);
}
/* ---- Links: kill BS3 #337ab7 ---- */
a { color: var(--text-link); } /* NB: do NOT add a:visited — its (0,1,1) specificity leaks past component colors like .dropdown-item (0,1,0) and turns visited menu links red. */
a:hover, a:focus { color: var(--text-link-hover); }
/* ---- Bootstrap-4 primary -> scarlet token ---- */
.btn-primary { background-color: var(--red-600); border-color: var(--red-600); }
.btn-primary:hover { background-color: var(--red-500); border-color: var(--red-500); }
.btn-primary:active, .btn-primary.active { background-color: var(--red-700) !important; border-color: var(--red-700) !important; }
.text-primary { color: var(--red-600) !important; }
.bg-primary { background-color: var(--red-600) !important; }
/* ---- Doft brand buttons ---- */
.btn-doft {
background-color: var(--red-600); border-color: var(--red-600); color: var(--text-ondark);
border-radius: var(--radius-md); /* 4px -> 12px */
font-family: var(--font-display); font-weight: var(--fw-semibold);
transition: background-color var(--dur) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn-doft:hover { background-color: var(--red-500); border-color: var(--red-500); transform: translateY(-1px); }
.btn-doft:active { background-color: var(--red-700); border-color: var(--red-700); transform: translateY(0); }
.btn-doft-2 {
background-color: var(--surface); border-color: var(--red-600); color: var(--red-600);
border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--fw-semibold);
}
.btn-doft-2:hover { background-color: var(--red-50); color: var(--red-700) !important; border-color: var(--red-600); } /* theme's generic .btn:hover forces #fff text -> invisible on the light bg; pin brand red */
/* ---- All buttons: soften radius, modern focus, no hard glow ---- */
.btn { border-radius: var(--radius-md); }
.btn:focus, .btn.focus { box-shadow: none !important; outline: none; } /* PR-3.4 bug13: drop the pink ring; theme native focus returns. :active #FF0000 glow is press-only (style.css:417), unaffected. */
/* ---- Form controls ---- */
.form-control {
border-radius: var(--radius-md); border-color: var(--line-strong);
color: var(--text); /* font-size inherits 14px from body — 16px clipped dates/selects/price fields */
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus { box-shadow: none !important; } /* PR-3.4 bug13: drop pink ring + red border; theme native gray (#707070) focus border returns */
/* footer "Subscribe" input-group: flatten only the joined inner edges so the 12px outer radius reads as one pill (ID-scoped; leaves the multi-field phone input-group alone) */
#ftSubscribeInput { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#ftSubscribeBtn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* ---- Cards ---- */
.card {
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); background: var(--surface);
}
/* ---- Dropdowns (native BS) ---- */
.dropdown-menu {
border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow); z-index: var(--z-dropdown);
}
.dropdown-item.active, .dropdown-item:active { background-color: var(--red-600); }
/* ---- Modals (BS + jquery-confirm) ---- */
.modal-content, .jconfirm .jconfirm-box {
border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-backdrop { z-index: var(--z-overlay); }
.modal { z-index: var(--z-modal); }
/* ---- Badges -> token semantics + pill ---- */
.badge { border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }
.badge-success { background-color: var(--success-bg); color: var(--success-fg); }
.badge-warning { background-color: var(--warning-bg); color: var(--warning-fg); }
.badge-danger { background-color: var(--danger-bg); color: var(--danger-fg); }
.badge-info { background-color: var(--info-bg); color: var(--info-fg); }
/* ---- #dTable: tokens only (geometry stays in later PRs) ---- */
#dTable .t-head {
background: var(--gray-100, #f1f3f5); color: var(--text-muted); /* visible gray header (prod is #f7f7f7; --surface-sunken read near-white) */
font-size: var(--fs-2xs); letter-spacing: var(--ls-label);
text-transform: uppercase; border-bottom: 1px solid var(--line);
z-index: var(--z-sticky);
}
#dTable .t-body .c { color: var(--text-body); font-size: var(--fs-sm); }
/* NB: no per-.cb:hover — it tinted only the cell under the cursor (the wide origin/dest blocks),
so the row looked half-highlighted. The full-row hover is handled below (PR-C, red-50). */
/* ---- Plugin status colors -> tokens (kills leaked teal + dup greens) ---- */
.toast-success { background-color: var(--success) !important; }
.toast-error { background-color: var(--danger) !important; }
.toast-warning { background-color: var(--warning) !important; }
.pace .pace-progress { background: var(--red-600) !important; } /* teal #4ACACC -> scarlet */
/* ============================================================
DOFT 2026 — PR-2: COMPONENT LAYER (universal, pure-CSS).
Loads/trucks grid density (#dTable) + mobile cards = PR-3.
Skeleton/empty markup is JS-wired in a later phase (CSS is dormant here).
============================================================ */
/* --- B.0 focus-visible + reduced motion --- */
/* PR-3.4 bug13: removed the :focus-visible pink ring entirely — it added a ring where the theme had none (e.g. the "John D." user-menu toggle). Native focus only now. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* --- B.1 Buttons --- */
.btn-doft, .btn-doft-2 {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* centers label+icon; height comes from padding so buttons match adjacent inputs (no forced min-height that made them taller than fields) */
font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
line-height: 1; letter-spacing: .01em; padding: 9px 18px;
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn-doft.btn-block, .btn-doft-2.btn-block { display: flex; } /* preserve Bootstrap full-width buttons (inline-flex would shrink them) */
.btn-doft:hover, .btn-doft-2:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-doft:active, .btn-doft-2:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* PR-3.4 bug13: .btn-doft focus ring removed — native .btn-doft:focus (style.css #000 border) returns */
.btn-doft:disabled, .btn-doft.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn { font-weight: var(--fw-semibold); transition: all var(--dur) var(--ease); }
.btn-primary { background: var(--red-600); border-color: var(--red-600); }
.btn-primary:hover { background: var(--red-500); border-color: var(--red-500); }
/* --- B.2 Inputs (radius/border/focus/16px; no forced height to avoid dense-layout shifts) --- */
.form-control, .hereAutocomplete input,
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea {
font-family: var(--font-body); font-size: var(--fs-sm);
color: var(--ink-800); background: var(--surface);
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus, .hereAutocomplete input:focus { position: relative; z-index: 3; background: var(--surface); } /* PR-3.4 bug13: drop pink ring + red border (native gray focus returns); keep z-index so the focused field isn't occluded by input-group neighbors */
.form-control.is-invalid, .parsley-error { border-color: var(--red-600); }
.parsley-errors-list { color: var(--red-700); font-size: var(--fs-2xs); margin-top: 4px; list-style: none; padding-left: 0; }
label, .control-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-700); letter-spacing: .02em; }
/* --- B.3 Selects (bootstrap-select) --- */
.bootstrap-select > .dropdown-toggle.btn {
background: var(--surface); color: var(--ink-800); border: 1px solid var(--line);
border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; box-shadow: none;
}
.bootstrap-select > .dropdown-toggle:focus, .bootstrap-select > .dropdown-toggle.btn:focus, .bootstrap-select.show > .dropdown-toggle.btn { outline: none !important; box-shadow: none !important; border-color: var(--line) !important; } /* PR-3.4 bug5/6: no red frame on focus (neutral --line); native blue outline + ring already suppressed */
.bootstrap-select .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 6px; margin-top: 4px; }
.bootstrap-select .dropdown-menu .dropdown-item { border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-sm); color: var(--ink-700); }
.bootstrap-select .dropdown-menu .dropdown-item:hover, .bootstrap-select .dropdown-menu .dropdown-item:focus { background: var(--gray-50); color: var(--gray-900); }
.bootstrap-select .dropdown-menu .dropdown-item.active, .bootstrap-select .dropdown-menu li.selected > .dropdown-item { background: var(--red-50); color: var(--red-700); font-weight: var(--fw-semibold); }
/* --- B.4 Date picker (daterangepicker; restyle only) --- */
.daterangepicker { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); font-family: var(--font-body); font-size: var(--fs-sm); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--gray-50); border-radius: var(--radius-sm); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--red-600); border-radius: var(--radius-sm); }
.daterangepicker td.in-range { background: var(--red-50); color: var(--ink-800); }
.daterangepicker .ranges li.active { background: var(--red-600); }
/* --- B.5 Checkboxes & radios (iCheck restyle) --- */
.icheckbox_minimal, .iradio_minimal, .icheckbox_flat, .iradio_flat {
width: 20px; height: 20px; background: var(--surface) !important;
border: 1.5px solid var(--gray-400); border-radius: var(--radius-sm); /* PR-3.4 bug23: darker border so the unchecked radio/checkbox is visible on light cards */
transition: all var(--dur) var(--ease); position: relative;
}
.iradio_minimal, .iradio_flat { border-radius: var(--radius-pill); }
.icheckbox_minimal.checked, .iradio_minimal.checked, .icheckbox_flat.checked, .iradio_flat.checked { background: var(--red-600) !important; border-color: var(--red-600); }
.icheckbox_minimal.checked::after, .icheckbox_flat.checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.iradio_minimal.checked::after, .iradio_flat.checked::after { content: ""; position: absolute; inset: 6.5px; border-radius: var(--radius-pill); background: #fff; } /* PR-3.4 bug23: smaller white dot so checked reads as a filled-dot radio, not a hollow donut */
.icheckbox_minimal.hover, .iradio_minimal.hover { border-color: var(--red-500); }
/* --- B.6 Cards --- */
.card, .panel, .box, .widget {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover, .box.hoverable:hover { box-shadow: var(--shadow); }
.card-header, .panel-heading { border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-lg); padding: 16px 20px; background: transparent; }
.card-body, .panel-body { padding: 20px; }
/* --- B.7 Badges (AGE freshness + generic) --- */
.age, .badge-age, .age-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 22px; padding: 0 8px;
font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
border-radius: var(--radius-pill); color: var(--ink); background: var(--teal-500);
}
.age.is-aging, .age-badge.aging { background: var(--amber-500); color: var(--ink); }
.age.is-stale, .age-badge.stale { background: var(--gray-200); color: var(--gray-600); }
.badge { border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); padding: 3px 9px; }
.badge-success { background: var(--teal-500); color: var(--ink); }
.badge-warning { background: var(--amber-500); color: var(--ink); }
.badge-danger { background: var(--red-700); }
.badge-info { background: var(--gray-500); }
/* --- B.8 Tabs / pills (Posted / Unposted / Expired / Active / Finished) --- */
.shipment-tabs, .nav-pills.doft-segments { display: inline-flex; gap: 6px; background: var(--gray-50); padding: 4px; border-radius: var(--radius-pill); }
.shipment-tabs > a, .nav-pills.doft-segments > li > a {
border: none; background: transparent; color: var(--ink-700);
font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 8px 16px; border-radius: var(--radius-pill);
transition: all var(--dur) var(--ease);
}
.shipment-tabs > a:hover { background: var(--surface); color: var(--gray-900); }
.shipment-tabs > a.active, .nav-pills.doft-segments > li.active > a { background: var(--red-600); color: #fff; box-shadow: var(--shadow-sm); }
.shipment-tabs .count, .tab-count { margin-left: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); background: rgba(0,0,0,.08); color: inherit; border-radius: var(--radius-pill); padding: 1px 7px; }
.shipment-tabs > a.active .count { background: rgba(255,255,255,.25); }
/* --- B.11 Modals (jquery-confirm; restyle only) --- */
.jconfirm .jconfirm-bg { background: rgba(10,11,13,.5); }
.jconfirm .jconfirm-box { border-radius: var(--radius-lg); box-shadow: var(--shadow); font-family: var(--font-body); padding: 24px; }
.jconfirm .jconfirm-title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text); }
.jconfirm .jconfirm-content { color: var(--text-body); font-size: var(--fs-sm); }
.jconfirm .jconfirm-buttons .btn { border-radius: var(--radius-md); font-weight: var(--fw-semibold); }
.jconfirm .jconfirm-buttons .btn-red, .jconfirm .btn-confirm { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.jconfirm .jconfirm-buttons .btn-default { background: var(--surface); border: 1px solid var(--line); color: var(--text-body); }
/* --- B.12 Toasts: reverted to NATIVE toastr layout (brand colors only, via .toast-success/.toast-error/.toast-warning above). My #toast-container restyle (dark bg + custom padding/border-left + background-image:none) fought toastr's own icon/title layout and broke title-only success toasts into a nested-box (rounded outer + sharp inner). Native toastr already handles icon position/no-repeat/left-gutter correctly. --- */
/* --- B.13 Notifications dropdown --- */
.notif-badge, .bell-count { background: var(--red-600); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold); border-radius: var(--radius-pill); min-width: 18px; height: 18px; padding: 0 5px; }
.notif-dropdown, .dropdown-menu.notifications { width: 360px; max-width: 92vw; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.notif-dropdown .notif-header { padding: 14px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-md); }
.notif-dropdown .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-body); transition: background-color var(--dur) var(--ease); }
.notif-dropdown .notif-item:hover { background: var(--surface-alt); color: var(--text); }
.notif-dropdown .notif-item.unread { background: var(--red-50); color: var(--text); }
/* --- B.14 Header / topbar + promo / identity bars --- */
.app-header, header.main-header { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.app-header .logo { font-family: var(--font-display); letter-spacing: .12em; color: var(--text); }
.app-header .balance { font-variant-numeric: tabular-nums; color: var(--text-body); font-weight: var(--fw-semibold); }
.app-promo-bar, .download-bar { background: var(--ink-800); color: var(--gray-200); font-size: var(--fs-xs); }
.identity-bar, .verify-bar { background: var(--amber-500); color: var(--ink); font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.identity-bar .btn { background: var(--gray-900); color: #fff; }
/* --- B.15 Empty / error states (dormant until JS-wired) --- */
.dt-empty, .dt-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; color: var(--text-body); gap: 12px; }
.dt-empty .illus, .dt-error .illus { width: 96px; height: 96px; border-radius: var(--radius-pill); background: radial-gradient(120% 120% at 30% 20%, rgba(241,41,8,.14), rgba(22,184,166,.10) 60%, transparent); display: grid; place-items: center; color: var(--red-600); }
.dt-empty .title, .dt-error .title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text); }
.dt-empty .sub, .dt-error .sub { font-size: var(--fs-sm); max-width: 380px; }
/* --- B.16 Loading skeletons (dormant until JS-wired) --- */
.skeleton-rows .sk-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 14px 10px; border-bottom: 1px solid var(--line); }
.sk-cell { height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-cell { animation: none; background: var(--gray-100); } }
/* --- B.17 Pagination ("SHOW 50 MORE") --- */
.show-more, #showMore, .load-more, #moreBtn {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
background: var(--surface); color: var(--text-body); border: 1px solid var(--line); border-radius: var(--radius-pill);
font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 0 22px; transition: all var(--dur) var(--ease);
}
.show-more:hover, #showMore:hover, .load-more:hover, #moreBtn:hover { background: var(--surface-alt); color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* ============================================================
DOFT 2026 — PR-2.3: targeted fit/contrast fixes (2nd QA round, driver+shipper)
============================================================ */
/* c4/c9 — toast text + links must be LIGHT on the colored toasts. PR-2.2's
toastr revert dropped the white text (dark-on-red "logged out" was unreadable)
and contact/phone links inside success toasts were blue-on-green. */
#toast-container > div { color: #fff; }
#toast-container > div a, #toast-container > div a:hover, #toast-container > div a:focus { color: #fff !important; text-decoration: underline; }
/* c6 — split-button caret centering: Bootstrap's .dropdown-toggle::after caret
carries margin-left:.255em, which shoves it right-of-center in a caret-only
toggle (Post Shipment / Edit). Our flex button gaps text<->caret already, so
zero the caret's own margins => it centers. */
.btn-doft.dropdown-toggle::after, .btn-doft-2.dropdown-toggle::after { margin: 0; padding: 0; position: static; top: 0; line-height: 1; vertical-align: middle; } /* PR-3.4 bug18: also kill the theme's relative top:1px + uneven L/R padding so the caret centers (and no longer reads as "rising" on the hover lift) */
/* c2 — DataTables / Bootstrap pagination: Next/Previous are , so the global
red link color + underline made them look like stray links after click.
Neutralize; only the current page is brand-red. */
.dataTables_paginate .paginate_button, .dataTables_paginate a.paginate_button { color: var(--text-body) !important; text-decoration: none !important; border-radius: var(--radius-sm); }
.dataTables_paginate .paginate_button:hover { background: var(--surface-alt) !important; color: var(--text) !important; text-decoration: none !important; }
.dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover { background: var(--red-600) !important; border-color: var(--red-600) !important; color: #fff !important; }
.pagination .page-link { color: var(--text-body); text-decoration: none; }
.pagination .page-link:hover { text-decoration: none; background: var(--surface-alt); color: var(--text); }
.pagination .page-item.active .page-link { background: var(--red-600); border-color: var(--red-600); color: #fff; }
/* c8 — loads-grid price links ("show"/"forecast") must fit the 60px price cell;
the Inter face tipped "forecast" past the edge. Shrink just the link text
(the $ value is a , untouched). !important beats loads.css's 90%. */
#dTable .c-price a, #dTable .c-permile a { font-size: 11px !important; letter-spacing: -.02em !important; padding: 1px 3px !important; }
/* c1/c11 — phone extension field: "Ext" clipped inside 54px + full form padding.
Trim padding and allow a touch more width so the label + a typed ext fit. */
.phone-ext { min-width: 56px !important; max-width: 66px !important; padding-left: 6px !important; padding-right: 4px !important; text-align: center; }
/* c10/bug3,9,12,22 — phone "+1" code: size for Inter without widening the field. Trim padding,
keep centered; covers signup (bare #phoneCountryCode) AND the shared phoneInputControl include
(.phone-country-code, prefixed ids). The old `#phoneCountryCode{max-width:54px}` was a no-op on
the shared include AND shrank signup the wrong way → "+1" sheared on its left edge. */
#phoneCountryCode, .phone-input .phone-country-code {
max-width: 64px !important; min-width: 50px !important;
padding-left: 4px !important; padding-right: 4px !important;
text-align: center !important;
}
#phone.phone-inputmask, .phone-input .phone-inputmask { flex: 1 1 auto !important; min-width: 0 !important; }
/* bug10 — password mask renders as "NO GLYPH" tofu in Safari/WebKit: it can't draw the
-webkit-text-security:disc bullet from the Inter webfont. Force the system stack on password
fields (the disc renders reliably there). Scoped to type=password only. */
input[type="password"], input[type="password"].form-control { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
/* c5 — bootstrap-select toggle: reclaim caret padding so short labels like
"Full Size" don't clip in narrow cargo selects. */
.bootstrap-select > .dropdown-toggle.btn { padding-right: 18px !important; padding-left: 10px !important; min-width: 56px !important; }
.bootstrap-select .filter-option-inner, .bootstrap-select .filter-option-inner-inner { padding-right: 2px !important; overflow: visible !important; text-overflow: clip !important; } /* d3/c5: "Any"/"Full Size" must not clip in narrow selects */
/* e1 — Pricing plans: equal-height columns so the CTA buttons (.button-wrap-pricing,
nested in .pricing-top-content) AND the gray footer strips (.pricing-bottom-wrap,
its sibling) line up L<->R despite different feature-list lengths. flex:1 1 280px
keeps roughly-equal widths and still wraps (stacks) on phones. */
.pricing_plans.price-col-2 { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }
.pricing_plans.price-col-2 > .pricing_plan { display: flex !important; flex-direction: column !important; flex: 1 1 280px !important; }
/* features grow to fill the equal-height column, pushing the (sibling) button + footer to the bottom */
.pricing_plans.price-col-2 > .pricing_plan > .pricing-top-content { flex: 1 1 auto !important; }
/* footer strips measured at 117px (free) vs 143px (premium) -> that 26px was the button offset. Equalize to >=premium so buttons + strips line up L<->R. */
.pricing_plans.price-col-2 > .pricing_plan > .pricing-bottom-wrap { min-height: 150px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
/* ============================================================
DOFT 2026 — PR-3.4: batch-3 bug fixes (dev-gated via isDebug; prod theme untouched).
Each rule is class/ID-scoped; no global font-size / min-height / universal :focus.
============================================================ */
/* bug1 — notifications: center the glyph in its 29px circle (theme used a brittle 7px/5px nudge that only fit one glyph) */
.notif-menu .notif-msg .msg-icon { display: flex; align-items: center; justify-content: center; }
.notif-menu .notif-msg .msg-icon i { margin: 0 !important; line-height: 1; font-size: 13px; }
/* bug2 + "SHOW 50 MORE" clipped — mobile footer: flow it in normal document order (it already
carries a "footer-static" class) instead of position:absolute + a fixed 330px wrapper reserve.
The absolute footer grew taller than the reserve (431px > 330px) and overlapped the SHOW-MORE
button. Static + zeroed reserve = the footer sits after the content (no overlap), the gray
covers its own content, and below it is the gray-50 canvas (≈ footer gray) so no white gap. */
@media screen and (max-width: 991px) {
footer.footer { position: static !important; height: auto !important; min-height: 330px; }
.dft-wrapper { padding-bottom: 0 !important; }
}
/* bug4/17 — public header: vertically align Log In <-> SIGN UP and make SIGN UP the confident CTA. Scoped to .d-navbar-signup so the dense in-app .btn-doft-2 buttons keep their compact size. */
.d-navbar-signup { display: flex; align-items: center; }
.d-navbar-signup button.btn-doft-2 { margin-top: 0; padding: 8px 18px; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .02em; border-width: 1.5px; }
.d-navbar-signup button.btn-doft-2:hover { background: var(--red-600); color: var(--text-ondark); border-color: var(--red-600); }
/* bug6 — filter selectpicker caret hung LOW (theme set vertical-align:0 = baseline; fa-angle-down drops below). Center it, scoped to the filter selects only (not the header/user-menu caret). */
.tbl-filter .bootstrap-select > .dropdown-toggle::after,
.deadhead-ph .bootstrap-select > .dropdown-toggle::after,
.dh-block .bootstrap-select > .dropdown-toggle::after,
.f-cargo .bootstrap-select > .dropdown-toggle::after,
.f-equip .bootstrap-select > .dropdown-toggle::after { top: 0 !important; vertical-align: middle !important; line-height: 1 !important; }
/* bug7/8 — deadhead (.dh-block) + size (.f-cargo) selectpicker caret sits low; center it on the toggle's box */
.dh-block .bootstrap-select > .dropdown-toggle, .f-cargo .bootstrap-select > .dropdown-toggle { display: flex !important; align-items: center !important; }
/* bug7 — "Any" clipped in the 62px size select: the .filter-option WRAPPER still clipped (the earlier inner-node override missed it); also trim the over-large padding/min-width on this narrow box only. */
.f-cargo .size .bootstrap-select > .dropdown-toggle.btn { padding-left: 7px !important; padding-right: 14px !important; min-width: 0 !important; }
.bootstrap-select .dropdown-toggle .filter-option { overflow: visible !important; }
/* bug8 — Post-Truck preferred-lane "1" badge: refresh's badge padding (3px 9px) + pill made it an off-center OVAL. Restore a fixed centered circle. post-truck.css loads after refresh.css so !important is required. */
.badge-lpnum { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; padding: 0 !important; line-height: 1 !important; font-size: .8rem !important; border-radius: 50% !important; }
/* bug10 — payment-method "DEFAULT" badge: theme gave a fixed 15px height with no centering. inline-flex + pill centers the label. */
.p-method .pm-def { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 2px 6px !important; border-radius: var(--radius-pill) !important; }
/* bug19 — Post-Shipment waypoint type selector is tiny (80px). Exempt it from the universal bootstrap-select min-width/padding so its caret doesn't crowd/overlap the address field. */
.waypoint .wp-type.bootstrap-select > .dropdown-toggle.btn { min-width: 0 !important; padding-left: 6px !important; padding-right: 14px !important; }
/* ============================================================
DOFT 2026 — PR-C (B.9): desktop #dTable density + sort affordances + price chips.
DESKTOP-ONLY (>=768px) so the mobile card view (refresh-loads.css, @media<=767) is untouched.
Conservative: no CSS-sticky header (that needs the JS-clone gate -> deferred to PR-4/refresh.js),
no new row borders (theme already draws them). Additive: breathing rows, ↕/↑/↓ sort arrows,
forecast/show price chips, tabular figures.
============================================================ */
@media (min-width: 768px) {
/* breathable rows — the native row is HARD-LOCKED to height:35px + line-height:35px with
overflow:hidden (loads.css:188), and the cells are height:100%/overflow:hidden. Adding cell
padding (the old rule) just pushed the single line out of the 35px box and CLIPPED text, the
age badge and the price chips. Correct fix: bump the row to a comfortable fixed height and let
line-height match it so the single-line content stays vertically centered — zero clipping,
more breathing room. (Content is white-space:nowrap, so rows never need to grow past this.) */
body #dTable .t-body :is(.b-load,.b-truck) { height: 44px !important; line-height: 44px !important; }
body #dTable .t-body .c { line-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* Single-line text centres via the 44px line box. But inline CHILDREN (price chips, the phone
link, action icons, the age badge) must NOT inherit that 44px line-height or they balloon to
~52px and clip — give them a compact line-height and centre them in the row. */
body #dTable .t-body .c > * { vertical-align: middle; }
body #dTable .t-body .c a.premium-show-price,
body #dTable .t-body .c .phone-link,
body #dTable .t-body .c-contactlinks a,
body #dTable .t-body :is(.c-bid,.c-book,.c-bookmark,.c-status) a,
body #dTable .t-body .c i,
body #dTable .t-body .c .time-ago,
body #dTable .t-body .c .time-ago-f { line-height: 1.15 !important; }
/* header keeps its native height:33px/line-height:33px so the labels stay vertically centred
(an earlier line-height override here un-centred them vs prod) */
/* clearer full-row hover — TZ #7: the red-50 tint read as an error/alert
highlight; use a neutral grey so hover is a calm "this row" affordance. */
body #dTable .t-body :is(.b-load,.b-truck):hover { background: var(--gray-100, #f1f3f5) !important; }
/* sortable-header arrows are drawn in the PR-H bugfix block at the very end of this file
(ABSOLUTELY positioned so the cell's overflow:hidden can't clip them — the in-flow :after
with margin-left:-10px was the reason they disappeared on dev). */
#dTable .t-head .c.sorting, #dTable .t-head .c.sorting_asc, #dTable .t-head .c.sorting_desc { cursor: pointer; }
/* price reveal links (forecast / show) -> quiet INFORMATIONAL chip. TZ #5:
the red chip read like an error and was too small. Neutral slate (not red),
a touch larger + more padding + pill radius so it reads as a calm data
badge. Columns are widened below so the bigger label still fits. */
#dTable .t-body a.premium-show-price {
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px !important; font-weight: var(--fw-semibold); color: var(--gray-600, #5e6670) !important;
background: var(--gray-100, #eef1f5); border: 0 !important; border-radius: var(--radius-pill, 999px);
padding: 3px 8px !important; letter-spacing: -.01em !important; text-decoration: none !important;
max-width: 100%; box-sizing: border-box; transition: background-color .12s, color .12s;
}
#dTable .t-body a.premium-show-price:hover { background: var(--gray-200, #e6e9ed); color: var(--gray-700, #414851) !important; }
/* tabular figures so prices/weights/distances align column-to-column */
#dTable .t-body :is(.c-price,.c-permile,.c-weight,.c-dist) { font-variant-numeric: tabular-nums; }
/* the native 60px PRICE/$MI columns are too tight for the larger chip; widen
a touch — applies to header + body so they stay aligned, and the flex
company column absorbs the extra width. */
#dTable .c-price, #dTable .c-permile { width: 82px !important; }
}
/* ============================================================
DOFT 2026 — PR-C2: filter-bar polish (reported bugs). Restyle only, no relayout of the
3rd-party selectpickers. (1) "clear" rendered as a dashed-underline link slapped next to the
red SEARCH button + sat above its centre -> a clean, vertically-centred secondary control.
(2) the "Any" placeholders were too pale to read -> bump to the muted ink token. ============ */
html[data-refresh] .btn-clear {
text-decoration: none !important; color: var(--text-muted, #828a94) !important;
font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, .875rem);
vertical-align: middle; margin: 0 0 0 10px !important; padding: 9px 12px !important;
border-radius: var(--radius-md, 8px); transition: background var(--dur-2,180ms), color var(--dur-2,180ms);
}
html[data-refresh] .btn-clear:hover { color: var(--red-600, #f12908) !important; background: var(--gray-100, #f2f4f7); text-decoration: none !important; }
html[data-refresh] #filterBtn { vertical-align: middle; }
/* TZ 07-25 #6 — shipper filter: .f-btn is hard-locked to 146px x 51px
(pages/shipper/loads.css:353/482); the restyled clear link above no longer
fits, wraps INSIDE the fixed box and hangs out under the opaque status-pills
bar below ("clear" peeking from behind the pills, esp. on narrow where
.f-btn goes display:block). Unlock the box so FILTER + clear lay out
naturally and nothing can underlap the next row. */
html[data-refresh] .tbl-filter .f-btn { width: auto !important; height: auto !important; max-height: none !important; white-space: nowrap; }
html[data-refresh] .tbl-filter input::placeholder,
html[data-refresh] .tbl-filter .bootstrap-select .filter-option-inner-inner { color: var(--text-muted, #828a94) !important; opacity: 1; }
/* ============================================================
DOFT 2026 — PR-D (E / PR-5): public-surface bespoke polish.
The global token layer already brands public pages (buttons/links/fonts/cards/header/footer);
this adds the two highest-value bespoke pieces: the login DRIVER/SHIPPER segmented control and
teal pricing feature-icons. Scoped to existing public classes (.usertype-block, .pricing_plan)
so no body-class wiring is needed. Pricing equal-height (e1) is preserved (no box-size change).
============================================================ */
/* E.2 — Login DRIVER/SHIPPER toggle: REVERTED. My segmented-pill restyle fought the theme's
.usertype-block nav-tabs layout (items stacked + oversized pill). The theme's existing
horizontal toggle is already fine, so we leave it to the global brand layer (links/fonts/colors). */
/* E.3 — pricing: included-feature ticks -> signal teal (not the retired greens). No layout/box change. */
.pricing_plan .tick, .pricing_plan .tick i, .pricing_plan .tick i.fa-check, .pricing_plan .tick i.fas { color: var(--teal-600) !important; }
/* ============================================================
DOFT 2026 — PR-E (F2 / DoD #6): skeleton loading state, CSS-ONLY.
The grid loading state is `#progrBlock`/`.tbl-progress` (an injected ![]()
that stayed white */
html[data-theme="dark"] :is(tbody th, table th[scope="row"], .table th) { background: var(--surface-alt) !important; color: var(--text-muted) !important; }
/* #12 Notifications: section-header / group rows that stayed white */
html[data-theme="dark"] :is(.section-header, .group-header, .table-section, tr.section, tr.section-row) { background: var(--surface-sunken) !important; color: var(--text-muted) !important; }
/* #9 load-detail map: keep light HERE tiles but frame them as a contained element on the dark page */
html[data-theme="dark"] :is(.map, .wow-mappane) { border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; overflow: hidden; }
/* #9 "Show Deadhead on Map" overlay button — refined pill (sits over the light map) instead of a heavy slab */
html[data-theme="dark"] .act-show-deadhead { background: rgba(12,14,18,.9) !important; color: var(--red-600) !important; border: 1px solid var(--red-600) !important; }
/* #8 mobile side drawer: the real container is `.main-menu.menu-light` (a white off-canvas sidebar),
plus #navbar-mobile / the header user dropdown. Dark surface + readable items + scarlet active accent. */
html[data-theme="dark"] :is(.main-menu, .main-menu.menu-light, #main-menu-navigation, .navigation-main, .navigation) { background: var(--surface) !important; }
html[data-theme="dark"] .main-menu .navigation-main > li > a { color: var(--text-body) !important; }
html[data-theme="dark"] .main-menu .navigation-main > li.active > a,
html[data-theme="dark"] .main-menu .navigation-main > li.open > a,
html[data-theme="dark"] .main-menu .navigation-main > li:hover > a { background: var(--surface-alt) !important; color: var(--text) !important; box-shadow: inset 3px 0 0 var(--red-600); }
/* panel rate block that stayed light-gray */
html[data-theme="dark"] :is(#rateBlock, .rate-block) { background: var(--surface-alt) !important; color: var(--text-body) !important; }
html[data-theme="dark"] :is(#navbar-mobile, .navbar-collapse, .navbar-nav.show, .mobile-menu .dropdown-menu) { background: var(--surface) !important; }
html[data-theme="dark"] :is(#navbar-mobile .nav-link, .navbar-collapse .nav-link) { color: var(--text-body) !important; }
html[data-theme="dark"] :is(#navbar-mobile .nav-link.active, .navbar-collapse .nav-link.active, .navbar-collapse .nav-link.menu-active) { color: var(--text) !important; background: var(--surface-alt) !important; box-shadow: inset 3px 0 0 var(--red-600); }
html[data-theme="dark"] .dropdown-user > a.nav-link { background: transparent !important; color: var(--text-body) !important; }
/* selected main-nav tab (Search Loads / My Loads / …) carries a light-gray highlight (#eee) -> dark */
html[data-theme="dark"] .nav-item.selected > .nav-link,
html[data-theme="dark"] .nav-item.selected .nav-link,
html[data-theme="dark"] .nav-item.active > .nav-link { background: var(--surface-alt) !important; color: var(--text) !important; }
/* ============================================================
DOFT 2026 — WOW W5.1: map marker click popups (single load + paginated cluster list).
Behind the mapView flag. Reuses the list's price/forecast/show-price + call markup (cloned from the
hidden #dTable rows), so all colors below also re-skin those cloned cells inside the popup. Light +
dark; mobile-safe. ?refresh=off / mapView=false removes the popups entirely (no .doft-map-popup).
============================================================ */
.doft-map-popup { position: relative; font-family: var(--font-body); background: var(--surface, #fff); color: var(--text, #10131a); width: 320px; max-width: calc(100vw - 28px); }
.doft-map-popup--cluster { width: 400px; }
/* close X (own button — independent of HERE's default chrome) */
.doft-map-popup__close { position: absolute; top: 8px; right: 8px; z-index: 4; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted, #6b7280); font-size: 20px; line-height: 1; cursor: pointer; }
.doft-map-popup__close:hover { background: var(--gray-100, #f1f3f5); color: var(--text, #10131a); }
/* ----- single-load card ----- */
.doft-map-popup--single { padding: 16px 16px 14px; }
.doft-map-popup__route { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-bold, 700); font-size: 1rem; color: var(--text-heading, #10131a); line-height: 1.3; padding-right: 26px; }
.doft-map-popup__sub { margin-top: 3px; font-size: var(--fs-sm, .9375rem); color: var(--text-body, #4a5160); font-weight: 600; }
.doft-map-popup__price { margin: 12px 0; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 1.4rem; font-weight: var(--fw-bold, 700); color: var(--text-heading, #10131a); display: flex; align-items: baseline; gap: 8px; }
.doft-map-popup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; padding: 12px 0; border-top: 1px solid var(--line, #e6e8ec); border-bottom: 1px solid var(--line, #e6e8ec); }
.doft-map-kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doft-map-kv__k { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8b929c); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.doft-map-kv__v { font-size: var(--fs-sm, .9375rem); color: var(--text, #10131a); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doft-map-popup__actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
/* ----- cluster list ----- */
.doft-map-popup__header { padding: 13px 36px 11px 16px; border-bottom: 1px solid var(--line, #e6e8ec); font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, .9375rem); color: var(--text-heading, #10131a); }
.doft-map-popup__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red-600, #e11900); color: #fff; font-size: .8125rem; font-weight: 700; margin-right: 4px; }
.doft-map-popup__loc { color: var(--text-body, #4a5160); font-weight: 600; }
.doft-map-popup__body--list { padding: 2px 14px; max-height: 320px; overflow-y: auto; }
.doft-map-load { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "route price" "meta price" "broker price" "actions actions"; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--line, #e6e8ec); }
.doft-map-load:last-child { border-bottom: 0; }
.doft-map-load__route { grid-area: route; display: block; min-width: 0; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, .9375rem); color: var(--text-heading, #10131a); text-decoration: none; line-height: 1.3; }
.doft-map-load__route:hover { color: var(--red-600, #e11900); }
.doft-map-load__meta { grid-area: meta; font-size: var(--fs-xs, .8125rem); color: var(--text-body, #4a5160); font-weight: 600; }
.doft-map-load__pickup { color: var(--red-600, #e11900); font-weight: 700; }
.doft-map-load__broker { grid-area: broker; min-width: 0; font-size: var(--fs-xs, .8125rem); color: var(--text-muted, #8b929c); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doft-map-load__price { grid-area: price; align-self: center; text-align: right; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: var(--fs-sm, .9375rem); white-space: nowrap; }
.doft-map-load__actions { grid-area: actions; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.doft-map-permile { margin-left: 6px; font-size: .8125rem; font-weight: 600; color: var(--text-muted, #6b7280); }
/* reused (cloned) list cells inside the popup */
.doft-map-popup .c-price, .doft-map-popup .c-price span { color: var(--text-heading, #10131a); font-weight: 700; }
.doft-map-popup .c-price.any-val, .doft-map-popup .any-val { color: var(--text-muted, #8b929c); font-weight: 600; }
.doft-map-popup .premium-show-price { color: var(--red-600, #e11900) !important; font-weight: 700; cursor: pointer; text-decoration: none; }
.doft-map-popup .premium-show-price:hover { text-decoration: underline; }
.doft-map-popup .phone-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 38px; border-radius: var(--radius-md, 10px); border: 1px solid var(--line-strong, #cfd4da); color: var(--teal-700, #0e8174); background: var(--surface, #fff); text-decoration: none; flex: 0 0 auto; }
.doft-map-popup .phone-link i { font-size: 15px; }
.doft-map-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: var(--radius-md, 10px); border: 1px solid var(--line-strong, #cfd4da); background: var(--surface, #fff); color: var(--text-body, #4a5160); font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, .875rem); cursor: pointer; }
.doft-map-btn:hover { border-color: var(--red-600, #e11900); color: var(--red-600, #e11900); }
.doft-map-btn--primary { background: var(--red-600, #e11900); border-color: var(--red-600, #e11900); color: #fff; flex: 1; }
.doft-map-btn--primary:hover { color: #fff; filter: brightness(.96); }
/* pagination */
.doft-map-popup__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding: 10px 12px; border-top: 1px solid var(--line, #e6e8ec); }
.doft-map-page { min-width: 32px; height: 32px; padding: 0 9px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line, #e6e8ec); background: var(--surface, #fff); color: var(--text-body, #4a5160); font-size: var(--fs-sm, .875rem); font-weight: 600; cursor: pointer; }
.doft-map-page:hover:not(:disabled):not(.is-active) { border-color: var(--red-600, #e11900); color: var(--red-600, #e11900); }
.doft-map-page--nav { font-size: 1.1rem; line-height: 1; }
.doft-map-page.is-active { background: var(--red-600, #e11900); border-color: var(--red-600, #e11900); color: #fff; cursor: default; }
.doft-map-page:disabled { opacity: .35; cursor: default; }
/* the InfoBubble chrome must hug the popup (no white gutter / no width cap), light + dark */
.wow-mappane .H_ib_body, .H_ib_body:has(.doft-map-popup) { padding: 0 !important; max-width: none !important; }
.H_ib_body:has(.doft-map-popup) .H_ib_close { display: none !important; } /* we draw our own X */
/* ---- dark mode: no white islands in the bubble chrome or cloned cells ---- */
html[data-theme="dark"] .H_ib_body, html[data-theme="dark"] .H_ib_body:has(.doft-map-popup) { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .H_ib_tail svg, html[data-theme="dark"] .H_ib_tail polygon { fill: var(--surface) !important; stroke: var(--line) !important; }
html[data-theme="dark"] .doft-map-popup { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .doft-map-popup__close:hover { background: var(--surface-alt) !important; }
html[data-theme="dark"] .doft-map-kv__v, html[data-theme="dark"] .doft-map-popup__route, html[data-theme="dark"] .doft-map-popup__price, html[data-theme="dark"] .doft-map-load__route, html[data-theme="dark"] .doft-map-popup .c-price, html[data-theme="dark"] .doft-map-popup .c-price span { color: var(--text) !important; }
html[data-theme="dark"] .doft-map-popup .phone-link, html[data-theme="dark"] .doft-map-btn, html[data-theme="dark"] .doft-map-page { background: var(--surface-alt) !important; border-color: var(--line-strong) !important; color: var(--text-body) !important; }
html[data-theme="dark"] .doft-map-btn--primary, html[data-theme="dark"] .doft-map-page.is-active { background: var(--red-600) !important; border-color: var(--red-600) !important; color: #fff !important; }
/* mobile: keep the popup on-screen and the actions tappable */
@media (max-width: 575.98px) {
.doft-map-popup, .doft-map-popup--cluster { width: calc(100vw - 28px); }
.doft-map-btn, .doft-map-popup .phone-link { min-height: 44px; }
.doft-map-popup__body--list { max-height: 46vh; }
}
/* ============================================================
DOFT 2026 — TZ 2026-07-25 (screenshot bug pass #7): viewed-load grey,
split-button caret, waypoint-type caret. Scoped so the mobile card view
(refresh-loads.css, <=991px) is untouched.
============================================================ */
/* #8 — "viewed" (already-opened) loads must clearly turn GREY so you can see at
a glance what you've already read. The redesign left only loads.css's fragile
opacity:0.5 dim (which fought the new card shadows/borders and read as washed,
not grey). Desktop table only (>=992px; the card view keeps its own gray-25).
Real grey fill + muted text + opacity:1 = an unmistakable, stable "viewed". */
@media (min-width: 992px) {
body #dTable .t-body :is(.b-load,.b-truck).viewed {
opacity: 1 !important;
background: var(--gray-100, #f1f3f5) !important;
color: var(--gray-500, #828a94) !important;
}
body #dTable .t-body :is(.b-load,.b-truck).viewed .c,
body #dTable .t-body :is(.b-load,.b-truck).viewed .c-addr { color: var(--gray-500, #828a94) !important; }
body #dTable .t-body :is(.b-load,.b-truck).viewed:hover { background: var(--gray-200, #e6e9ed) !important; }
}
/* #3 — split buttons (Post Shipment / Edit): the caret-only .dropdown-toggle
sits in a .btn-group next to its main button. Two bugs:
(a) on hover it lifted (translateY) INDEPENDENTLY of its sibling, so the
caret "rose above" the button -> reads as broken. Kill the lift for both
halves of a brand split-group; the bg tint (from .btn-doft*:hover) stays.
(b) Bootstrap's ::after caret carries margin-left:.255em, shoving it right of
centre in a label-less toggle. Zero its margins + symmetric padding so it
centres. Scoped to the brand buttons so selectpickers are untouched. */
.btn-group > .btn-doft:hover,
.btn-group > .btn-doft-2:hover,
.btn-group > .btn-doft.dropdown-toggle:hover,
.btn-group > .btn-doft-2.dropdown-toggle:hover { transform: none !important; box-shadow: none !important; }
.btn-group > .btn-doft.dropdown-toggle,
.btn-group > .btn-doft-2.dropdown-toggle {
padding-left: 10px !important; padding-right: 10px !important;
/* TZ 07-25 #5: dead-center the glyph — explicit flex centering on the
caret-only segment (the whitespace text node keeps :empty from matching,
so Bootstrap never zeroes its own offsets). */
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.btn-group > .btn-doft.dropdown-toggle::after,
.btn-group > .btn-doft-2.dropdown-toggle::after {
/* Kill every offset the theme stacks on the FA \f107 glyph
(bootstrap-extended.css:482: top:1px, vertical-align:0, padding 0 2px 0 6px,
margin-right .3em) — with !important so no later sheet re-skews it. */
margin: 0 !important; padding: 0 !important; position: static !important;
top: 0 !important; right: 0 !important; vertical-align: middle !important; line-height: 1 !important;
}
/* TZ 07-25 #2 — load-card top actions on narrow screens: "Ask a Question" +
"Make a Bid" + "AI Call" don't fit one row, so the third button wrapped
below. The Java builder wraps the expendable label parts in .btn-ttl-xtra;
hide them under 768px -> "Ask" / "Bid" / "AI Call" fit side by side.
Scoped to BUTTONS in the action row only (dropdown items keep full text). */
@media (max-width: 767.98px) {
html[data-refresh] .load-actions .btn .btn-ttl-xtra { display: none; }
}
/* #4 — Post-Shipment waypoint TYPE selectpicker ("Pick Up"/"Drop Off" on a
middle stop): it kept Bootstrap-4's border-triangle ::after, whose 0-height
content-box hung the triangle low/broken. Swap it for the same centred FA
chevron the filter selectpickers use (right-pinned, flex-centred, height
agnostic). */
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle { position: relative; padding-right: 22px !important; }
html[data-refresh] .waypoint .wp-type.bootstrap-select > .dropdown-toggle::after {
content: "\f107" !important; font-family: "Font Awesome 5 Pro" !important; font-weight: 900 !important;
border: 0 !important; font-size: 12px !important; color: var(--text-muted, #6c7077) !important;
position: absolute !important; right: 8px !important; left: auto !important;
top: 0 !important; bottom: 0 !important; height: auto !important; width: 12px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
line-height: 1 !important; transform: none !important; margin: 0 !important; padding: 0 !important;
}
|