/* ============================================================================
   EMR Express Design System — foundation stylesheet
   Scope: new-look sidebar, cards, buttons, tables, badges, modals, mobile nav.
   All tokens and classes are prefixed `--emr-*` / `.emr-*` so this file can be
   linked alongside legacy dashboard styles without clobbering them.
   Operational status colors (red alert, green NEED A LOAD, cyan, yellow,
   purple) are preserved exactly.
   ============================================================================ */

/* ── Theme tokens (light = default) ─────────────────────────────────────── */
:root,
html[data-theme="light"] {
  /* Brand */
  --emr-gold:              #F5A800;
  --emr-gold-hover:        #DC9700;
  --emr-gold-tint:         rgba(245, 168, 0, 0.08);
  --emr-gold-tint-2:       rgba(245, 168, 0, 0.16);
  --emr-charcoal:          #1A1A1A;
  --emr-mid-gray:          #4A4A4A;

  /* Surfaces */
  --emr-bg:                #FFFFFF;
  --emr-bg-muted:          #F7F8FA;
  --emr-bg-subtle:         #EEF0F3;
  /* Elevated surface (panels/cards/popups that sit above the page bg).
     Previously referenced only via `var(--emr-bg-elevated, #fff)` fallbacks
     but never DEFINED — so it resolved to #fff white in BOTH themes (e.g. the
     Market Intelligence zone-map box `.emr-usmap-wrap` stayed white in dark
     mode). Declaring it here + in the dark block below makes those surfaces
     theme-aware. Light value matches the old #fff fallback, so light mode is
     unchanged. */
  --emr-bg-elevated:       #FFFFFF;
  --emr-card-bg:           #FFFFFF;
  --emr-card-border:       #E5E7EB;
  --emr-card-shadow:       0 1px 2px rgba(17, 24, 39, 0.04),
                           0 1px 3px rgba(17, 24, 39, 0.06);
  --emr-card-shadow-lg:    0 4px 6px -2px rgba(17, 24, 39, 0.05),
                           0 10px 20px -4px rgba(17, 24, 39, 0.10);

  /* Sidebar — LIGHT values (default/light theme). Operator 2026-06-11:
     the sidebar now FOLLOWS the theme (was deliberately dark-constant).
     Dark-theme overrides restore the charcoal rail below. */
  --emr-sidebar-bg:        #FFFFFF;
  --emr-sidebar-border:    #E5E7EB;
  --emr-sidebar-shadow:    0 10px 40px rgba(17, 24, 39, 0.08);
  --emr-sidebar-text:      #374151;
  --emr-sidebar-text-muted:#9CA3AF;
  --emr-sidebar-hover-bg:  rgba(245, 168, 0, 0.12);
  --emr-sidebar-hover-text:#111827;
  --emr-sidebar-active-text:#B45309;

  /* Text */
  --emr-text:              #111827;
  --emr-text-muted:        #4B5563;
  --emr-text-subtle:       #6B7280;
  --emr-text-faint:        #9CA3AF;
  --emr-text-on-gold:      #1A1A1A;

  /* Borders / dividers */
  --emr-border:            #E5E7EB;
  --emr-border-strong:     #D1D5DB;
  --emr-divider:           #F1F3F5;

  /* Inputs */
  --emr-input-bg:          #FFFFFF;
  --emr-input-border:      #D1D5DB;
  --emr-input-text:        #111827;
  --emr-input-placeholder: #9CA3AF;
  --emr-input-focus-ring:  rgba(245, 168, 0, 0.32);

  /* Operational status colors (PRESERVED — do not rebrand) */
  --emr-status-red:        #DC2626;
  --emr-status-red-bg:     #FEE2E2;
  --emr-status-green:      #16A34A;    /* NEED A LOAD */
  --emr-status-green-bg:   #DCFCE7;
  --emr-status-cyan:       #0891B2;
  --emr-status-cyan-bg:    #CFFAFE;
  --emr-status-yellow:     #D97706;
  --emr-status-yellow-bg:  #FEF3C7;
  --emr-status-purple:     #7C3AED;
  --emr-status-purple-bg:  #EDE9FE;
  --emr-status-blue:       #2563EB;
  --emr-status-blue-bg:    #DBEAFE;
  --emr-status-gold:       #F5A800;
  --emr-status-gold-bg:    #FEF3C7;

  /* Modal */
  --emr-modal-backdrop:    rgba(17, 24, 39, 0.45);
  --emr-modal-bg:          #FFFFFF;

  /* Typography */
  --emr-font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --emr-font-mono:         'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radii */
  --emr-radius-sm:         6px;
  --emr-radius:            10px;
  --emr-radius-lg:         12px;
  --emr-radius-xl:         16px;
  --emr-radius-pill:       999px;

  /* Layout */
  --emr-sidebar-w:         220px;
  --emr-sidebar-gap:       16px;
  --emr-content-pad:       24px;
  --emr-content-pad-mobile:16px;
  --emr-tabbar-h:          62px;
  /* Single source of truth for every right-edge slide-out detail drawer.
     Each drawer resolves its own width via min(var(--emr-drawer-w), 96vw)
     so this one token scales Orders, Safety, Broker, Broker-Loads, Home,
     Prefs, Forecast Guide, and the Truck-board Mini Map together. */
  --emr-drawer-w:          960px;

  /* Motion */
  --emr-tx:                150ms ease;
  --emr-tx-slow:           220ms ease;
}

/* ── Theme tokens (dark mode overrides) ─────────────────────────────────── */
html[data-theme="dark"] {
  /* Sidebar — restore the charcoal rail in dark mode (light defaults
     above now make it white in light mode). */
  --emr-sidebar-bg:        #1A1A1A;
  --emr-sidebar-border:    rgba(255, 255, 255, 0.06);
  --emr-sidebar-shadow:    0 10px 40px rgba(0, 0, 0, 0.20);
  --emr-sidebar-text:      #C9CACC;
  --emr-sidebar-text-muted:#8A8B8F;
  --emr-sidebar-hover-bg:  rgba(245, 168, 0, 0.10);
  --emr-sidebar-hover-text:#FFFFFF;
  --emr-sidebar-active-text:#F5A800;

  --emr-bg:                #0D0D0D;
  --emr-bg-muted:          #141414;
  --emr-bg-subtle:         #1B1B1B;
  --emr-bg-elevated:       #1E1E1E;   /* matches --emr-card-bg — elevated dark surface */
  --emr-card-bg:           #1E1E1E;
  --emr-card-border:       #2A2A2A;
  --emr-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.45),
                           0 1px 3px rgba(0, 0, 0, 0.35);
  --emr-card-shadow-lg:    0 4px 6px -2px rgba(0, 0, 0, 0.55),
                           0 10px 24px -4px rgba(0, 0, 0, 0.55);

  --emr-text:              #F5F6F7;
  --emr-text-muted:        #C9CACC;
  --emr-text-subtle:       #9CA0A6;
  --emr-text-faint:        #6B7076;

  --emr-border:            #2A2A2A;
  --emr-border-strong:     #3A3A3A;
  --emr-divider:           #242424;

  --emr-input-bg:          #1A1A1A;
  --emr-input-border:      #3A3A3A;
  --emr-input-text:        #F5F6F7;
  --emr-input-placeholder: #6B7076;

  /* Status foregrounds stay the same; only the tint backgrounds get darkened
     so pills remain legible on a #0D0D0D surface. */
  --emr-status-red-bg:     rgba(220, 38, 38, 0.16);
  --emr-status-green-bg:   rgba(22, 163, 74, 0.16);
  --emr-status-cyan-bg:    rgba(8, 145, 178, 0.18);
  --emr-status-yellow-bg:  rgba(217, 119, 6, 0.18);
  --emr-status-purple-bg:  rgba(124, 58, 237, 0.18);
  --emr-status-blue-bg:    rgba(37, 99, 235, 0.18);
  --emr-status-gold-bg:    rgba(245, 168, 0, 0.16);

  --emr-modal-backdrop:    rgba(0, 0, 0, 0.65);
  --emr-modal-bg:          #1E1E1E;
}

/* ── Scoped base + typography ───────────────────────────────────────────── */
.emr-ds,
.emr-ds *,
.emr-ds *::before,
.emr-ds *::after { box-sizing: border-box; }

.emr-ds {
  font-family: var(--emr-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--emr-text);
  background: var(--emr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

.emr-h1     { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--emr-text); }
.emr-h2     { font-size: 18px; font-weight: 600; color: var(--emr-text); }
.emr-h3     { font-size: 15px; font-weight: 600; color: var(--emr-text); }
.emr-body   { font-size: 14px; font-weight: 400; color: var(--emr-text); }
.emr-label  { font-size: 12px; font-weight: 500; color: var(--emr-text-subtle); letter-spacing: 0.01em; }
.emr-mono   { font-family: var(--emr-font-mono); }
.emr-muted  { color: var(--emr-text-muted); }
.emr-subtle { color: var(--emr-text-subtle); }

/* ── App shell ──────────────────────────────────────────────────────────── */
/* Sidebar is position:fixed and "floats" — it does not push the document
   flow. The content wrapper reserves space via margin-left so nothing is
   obscured beneath the sidebar on desktop. */
.emr-app {
  min-height: 100vh;
  background: var(--emr-bg);
  color: var(--emr-text);
  font-family: var(--emr-font-sans);
}

.emr-app-content {
  margin-left: calc(var(--emr-sidebar-w) + var(--emr-sidebar-gap) * 2);
  padding: var(--emr-content-pad);
  min-width: 0;
}

.emr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.emr-section-header h1,
.emr-section-header h2 { font-weight: 600; color: var(--emr-text); }
.emr-section-header .emr-section-actions { display: flex; gap: 8px; }

/* ── Floating mini sidebar ──────────────────────────────────────────────── */
.emr-sidebar {
  position: fixed;
  top: var(--emr-sidebar-gap);
  left: var(--emr-sidebar-gap);
  bottom: var(--emr-sidebar-gap);
  width: var(--emr-sidebar-w);
  background: var(--emr-sidebar-bg);
  border: 1px solid var(--emr-sidebar-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-sidebar-shadow);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  color: var(--emr-sidebar-text);
  overflow: hidden;
  transition: width var(--emr-tx), box-shadow var(--emr-tx);
}

/* ── Slim-rail + expand-on-click (Bug 10, panel-ratecon width relief) ─── */
/* Default is rail (set by JS on boot — session-scoped, never persisted).
   Adding .emr-sb-expanded on body pops the sidebar out wider; the whole
   legacy shell (#main-app.emr-app-shell — topnav INCLUDED) reflows via
   its padding-left calc below. */
/* ORDERS-TABS-CLIP FIX (2026-06-11): --emr-sidebar-gap MUST carry a px
   unit. A unitless `0` made `calc(var(--emr-sidebar-w) +
   var(--emr-sidebar-gap) * 2)` invalid (length + number) wherever it
   was consumed (#main-app.emr-app-shell padding-left, .emr-la-toggle /
   .emr-la-drawer left), collapsing them to 0/auto. Net effect: the
   fixed sidebar (z-index 1000) overlaid the topnav's left edge, hiding
   the #shell-page-tabs strip (Orders lifecycle tabs) whenever the menu
   was expanded to 220px. */
body.emr-sb-rail { --emr-sidebar-w: 56px; --emr-sidebar-gap: 0px; }
body.emr-sb-rail.emr-sb-expanded { --emr-sidebar-w: 220px; }
body.emr-sb-rail.emr-sb-expanded .emr-sidebar {
  box-shadow: 2px 0 8px rgba(0,0,0,0.20);
}
.emr-app-content { transition: margin-left var(--emr-tx); }

/* Bug 10c retry, superseded 2026-06-11 (ORDERS-TABS-CLIP FIX): the old
   rail rule that padded main-panel by the sidebar width was a
   workaround for the broken shell calc above. Now that
   #main-app.emr-app-shell reserves the sidebar width for the WHOLE
   shell (topnav + app-body), keeping it would double-indent the
   panels. Rule removed deliberately — do not re-add. */

/* Rail flush to viewport left edge — zero gap, no outer radius.
   Interior element radii (icon pills, hover states, toggle) unchanged. */
body.emr-sb-rail .emr-sidebar {
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--emr-sidebar-border);
}

/* Toggle pill pulled inside the rail — at right:-10px it would
   overhang content now that the rail sits flush against it. */
body.emr-sb-rail .emr-sb-expand-toggle {
  right: 0;
  width: 18px;
  border-radius: 6px 0 0 6px;
  border-right: none;
  border-left: 1px solid var(--emr-sidebar-border);
}

body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-nav-label,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-logo-text,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-logo-sub,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-user-info,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-nav-sublist,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-theme-toggle-label,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-theme-toggle-track,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-la > span:not([aria-hidden="true"]),
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar #emr-sidebar-la-avatars,
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar #emr-sidebar-la-badge { display: none; }

/* Allow the expand-toggle pill at right:-10px to escape the rail's corner
   clipping. Scoped to rail so full-width sidebar keeps overflow:hidden. */
body.emr-sb-rail .emr-sidebar { overflow: visible; }

/* Logo: tight top, no divider, constrain inline max-width 120px img to fit rail */
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-logo {
  justify-content: center;
  padding: 10px 0 6px;
  border-bottom: none;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-logo img {
  max-width: 32px !important;
  max-height: 32px !important;
}

/* Online-now button collapses to icon pill — no border, no margin gap */
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-la {
  margin: 0 8px;
  padding: 6px 0;
  border: none;
  background: transparent;
  width: auto;
  justify-content: center;
  gap: 0;
}

/* Nav list — consistent rhythm, centered icons, larger glyphs */
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-nav {
  gap: 4px;
  padding: 6px 4px;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-nav-item {
  justify-content: center;
  padding: 8px 0;
  min-height: 36px;
  border-left-width: 0;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-nav-icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  opacity: 1;
}

/* Active item — right-edge stripe (border-left is zeroed in rail) */
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-nav-item.active {
  border-right: 2px solid var(--emr-gold);
}

/* Footer controls compact in rail */
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-footer {
  padding: 6px 4px;
  gap: 6px;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-theme-toggle {
  justify-content: center;
  padding: 8px;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-user {
  justify-content: center;
  padding: 6px 0;
}
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sidebar .emr-sidebar-user img {
  width: 28px;
  height: 28px;
}

.emr-sb-expand-toggle {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 40px;
  background: var(--emr-sidebar-bg);
  border: 1px solid var(--emr-sidebar-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: var(--emr-sidebar-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
}
.emr-sb-expand-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.emr-sb-rail.emr-sb-expanded .emr-sb-expand-toggle::before { content: '\2039'; }
body.emr-sb-rail:not(.emr-sb-expanded) .emr-sb-expand-toggle::before { content: '\203A'; }

.emr-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--emr-sidebar-border);
}
.emr-sidebar-logo img { width: 28px; height: 28px; object-fit: contain; }
.emr-sidebar-logo-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  line-height: 1.1;
}
.emr-sidebar-logo-text span { color: var(--emr-gold); }
.emr-sidebar-logo-sub {
  font-size: 10px;
  color: var(--emr-sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.emr-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.emr-sidebar-nav::-webkit-scrollbar { width: 6px; }
.emr-sidebar-nav::-webkit-scrollbar-thumb { background: var(--emr-sidebar-border); border-radius: 3px; }
.emr-sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.emr-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: var(--emr-radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--emr-sidebar-text);
  text-decoration: none;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--emr-tx), color var(--emr-tx), border-left-color var(--emr-tx);
  min-height: 26px;
  width: 100%;
}
.emr-nav-item .emr-nav-icon {
  width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.85;
  font-size: 14px;
}
.emr-nav-item .emr-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emr-nav-item:hover {
  background: var(--emr-sidebar-hover-bg);
  color: var(--emr-sidebar-hover-text);
}
.emr-nav-item.active {
  background: var(--emr-sidebar-hover-bg);
  color: var(--emr-sidebar-active-text);
  border-left-color: var(--emr-gold);
}
.emr-nav-item.active .emr-nav-icon { opacity: 1; }
.emr-nav-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--emr-gold);
}

.emr-nav-divider {
  height: 1px;
  background: var(--emr-sidebar-border);
  margin: 3px 10px;
}
.emr-nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emr-sidebar-text-muted);
  padding: 10px 12px 4px;
}

.emr-sidebar-footer {
  padding: 12px 12px 14px;
  border-top: 1px solid var(--emr-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Theme toggle switch */
.emr-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--emr-sidebar-border);
  border-radius: var(--emr-radius-sm);
  color: var(--emr-sidebar-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--emr-tx);
  min-height: 36px;
  width: 100%;
}
.emr-theme-toggle:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.emr-theme-toggle-label { display: flex; align-items: center; gap: 8px; }
.emr-theme-toggle-track {
  width: 30px; height: 16px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  position: relative;
  transition: background var(--emr-tx);
  flex: none;
}
.emr-theme-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--emr-tx);
}
html[data-theme="dark"] .emr-theme-toggle-track { background: var(--emr-gold); }
html[data-theme="dark"] .emr-theme-toggle-track::after { transform: translateX(14px); background: #1A1A1A; }

.emr-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  min-height: 40px;
}
.emr-sidebar-user img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover;
  background: #2A2A2A;
  border: 1.5px solid var(--emr-gold);
  flex: none;
}
.emr-sidebar-user-info { min-width: 0; flex: 1; }
.emr-sidebar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emr-sidebar-user-role {
  font-size: 10px;
  color: var(--emr-sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.emr-card {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-card-shadow);
  padding: 20px;
  color: var(--emr-text);
  transition: box-shadow var(--emr-tx);
}
.emr-card-hover:hover { box-shadow: var(--emr-card-shadow-lg); }
.emr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.emr-card-title    { font-size: 14px; font-weight: 600; color: var(--emr-text); }
.emr-card-subtitle { font-size: 12px; color: var(--emr-text-subtle); }
.emr-card-body     { color: var(--emr-text); }
.emr-card-footer   {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--emr-divider);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Metric cards (grid + card) ─────────────────────────────────────────── */
.emr-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.emr-metric-card {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-card-shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: box-shadow var(--emr-tx), transform var(--emr-tx);
}
.emr-metric-card:hover {
  box-shadow: var(--emr-card-shadow-lg);
}
.emr-metric-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.emr-metric-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--emr-radius-sm);
  background: var(--emr-gold-tint);
  color: var(--emr-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
}
.emr-metric-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.emr-metric-card-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--emr-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: inline-block;
  transform-origin: left center;
}
@keyframes emrStatCountBump {
  0%   { transform: scale(1);     text-shadow: 0 0 0 rgba(245,168,0,0); }
  45%  { transform: scale(1.055); text-shadow: 0 0 12px rgba(245,168,0,0.38); }
  100% { transform: scale(1);     text-shadow: 0 0 0 rgba(245,168,0,0); }
}
.emr-metric-card-value.emr-stat-bump {
  animation: emrStatCountBump 620ms cubic-bezier(.2,.7,.2,1);
}
.emr-metric-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}
/* Q-UI-READABILITY-V1: financial trend → independent --fin-* scale (was the
   status green/red tokens — decoupled so money sign-color retunes alone). */
.emr-metric-card-trend.up   { color: var(--fin-positive); }
.emr-metric-card-trend.down { color: var(--fin-negative); }
.emr-metric-card-trend.flat { color: var(--fin-neutral); }

.emr-metric-card.variant-gold   .emr-metric-card-icon { background: var(--emr-status-gold-bg);   color: var(--emr-gold); }
.emr-metric-card.variant-green  .emr-metric-card-icon { background: var(--emr-status-green-bg);  color: var(--emr-status-green); }
.emr-metric-card.variant-red    .emr-metric-card-icon { background: var(--emr-status-red-bg);    color: var(--emr-status-red); }
.emr-metric-card.variant-blue   .emr-metric-card-icon { background: var(--emr-status-blue-bg);   color: var(--emr-status-blue); }
.emr-metric-card.variant-cyan   .emr-metric-card-icon { background: var(--emr-status-cyan-bg);   color: var(--emr-status-cyan); }
.emr-metric-card.variant-purple .emr-metric-card-icon { background: var(--emr-status-purple-bg); color: var(--emr-status-purple); }
.emr-metric-card.variant-yellow .emr-metric-card-icon { background: var(--emr-status-yellow-bg); color: var(--emr-status-yellow); }
.emr-metric-card.variant-teal   .emr-metric-card-icon { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }

/* ── Premium stat cards (Live Feed metric row) ─────────────────────── */
.emr-stat-card {
  border-left-width: 4px;
  border-left-style: solid;
  padding: 16px 20px 14px;
  transition: box-shadow var(--emr-tx), transform var(--emr-tx), border-color var(--emr-tx);
}
.emr-stat-card .emr-metric-card-value {
  font-size: 42px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.emr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--emr-card-shadow-lg);
}
.emr-metric-card.variant-gold.emr-stat-card   { border-left-color: var(--emr-gold); }
.emr-metric-card.variant-green.emr-stat-card  { border-left-color: var(--emr-status-green); }
.emr-metric-card.variant-blue.emr-stat-card   { border-left-color: #64748b; }
.emr-metric-card.variant-red.emr-stat-card    { border-left-color: var(--emr-status-red); }
.emr-metric-card.variant-teal.emr-stat-card   { border-left-color: #14b8a6; }

/* BOOKED pulsing dot — only visible when booked count is 0. */
@keyframes emrStatPulseDot {
  0%, 100% { transform: scale(1);   opacity: 0.85; box-shadow: 0 0 0 0 rgba(20,184,166,0.55); }
  50%      { transform: scale(1.12); opacity: 1;   box-shadow: 0 0 0 6px rgba(20,184,166,0.0);  }
}
.emr-stat-pulse-dot {
  display: none;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #14b8a6;
  vertical-align: middle;
}
.emr-stat-card.emr-stat-booked-empty .emr-stat-pulse-dot {
  display: inline-block;
  animation: emrStatPulseDot 1.6s ease-in-out infinite;
}

/* Responsive grid: 5 desktop, auto-fit tablet (3+2), 1 mobile. */
.emr-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1199px) {
  .emr-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .emr-metric-grid { grid-template-columns: 1fr !important; }
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.emr-table-wrap {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-card-shadow);
  overflow: hidden;
}
.emr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--emr-text);
}
.emr-table thead th {
  background: var(--emr-bg-muted);
  color: var(--emr-text-subtle);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--emr-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.emr-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--emr-divider);
  vertical-align: middle;
}
.emr-table tbody tr:nth-child(even) td { background: var(--emr-bg-muted); }
.emr-table tbody tr:hover td           { background: var(--emr-gold-tint); }
.emr-table tbody tr:last-child td      { border-bottom: none; }
.emr-table td.num, .emr-table th.num   { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--emr-font-mono); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.emr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--emr-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--emr-tx), border-color var(--emr-tx), color var(--emr-tx), transform 60ms ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}
.emr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--emr-input-focus-ring);
}
.emr-btn:active:not([disabled]):not(.disabled) { transform: translateY(1px); }
.emr-btn[disabled],
.emr-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.emr-btn-primary {
  background: var(--emr-gold);
  color: var(--emr-text-on-gold);
  border-color: var(--emr-gold);
}
.emr-btn-primary:hover {
  background: var(--emr-gold-hover);
  border-color: var(--emr-gold-hover);
}

.emr-btn-secondary {
  background: transparent;
  color: var(--emr-text);
  border-color: var(--emr-border-strong);
}
.emr-btn-secondary:hover {
  background: var(--emr-bg-muted);
  border-color: var(--emr-gold);
  color: var(--emr-gold);
}

.emr-btn-danger {
  background: var(--emr-status-red);
  color: #FFFFFF;
  border-color: var(--emr-status-red);
}
.emr-btn-danger:hover { filter: brightness(1.08); }

.emr-btn-ghost {
  background: transparent;
  color: var(--emr-text-muted);
  border-color: transparent;
}
.emr-btn-ghost:hover { background: var(--emr-bg-muted); color: var(--emr-text); }

.emr-btn-sm    { min-height: 30px; padding: 6px 12px; font-size: 12px; }
.emr-btn-lg    { min-height: 44px; padding: 12px 22px; font-size: 14px; }
.emr-btn-block { width: 100%; }
.emr-btn-icon  { padding: 8px; min-width: 36px; }

/* ── Badges / status pills ──────────────────────────────────────────────── */
.emr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--emr-radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
}
.emr-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.emr-badge-red    { background: var(--emr-status-red-bg);    color: var(--emr-status-red); }
.emr-badge-green  { background: var(--emr-status-green-bg);  color: var(--emr-status-green); }
.emr-badge-cyan   { background: var(--emr-status-cyan-bg);   color: var(--emr-status-cyan); }
.emr-badge-yellow { background: var(--emr-status-yellow-bg); color: var(--emr-status-yellow); }
.emr-badge-purple { background: var(--emr-status-purple-bg); color: var(--emr-status-purple); }
.emr-badge-blue   { background: var(--emr-status-blue-bg);   color: var(--emr-status-blue); }
.emr-badge-gold   { background: var(--emr-status-gold-bg);   color: var(--emr-gold); }
.emr-badge-gray   { background: var(--emr-bg-subtle);        color: var(--emr-text-muted); }

/* ── Inputs / fields ────────────────────────────────────────────────────── */
.emr-input,
.emr-select,
.emr-textarea {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--emr-input-text);
  background: var(--emr-input-bg);
  border: 1px solid var(--emr-input-border);
  border-radius: var(--emr-radius-sm);
  line-height: 1.4;
  transition: border-color var(--emr-tx), box-shadow var(--emr-tx);
}
.emr-input::placeholder,
.emr-textarea::placeholder { color: var(--emr-input-placeholder); }
.emr-input:focus,
.emr-select:focus,
.emr-textarea:focus {
  outline: none;
  border-color: var(--emr-gold);
  box-shadow: 0 0 0 3px var(--emr-input-focus-ring);
}
.emr-textarea { min-height: 88px; resize: vertical; }
.emr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emr-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--emr-text-subtle);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.emr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--emr-modal-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: emrFadeIn 160ms ease;
}
.emr-modal {
  background: var(--emr-modal-bg);
  color: var(--emr-text);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-xl);
  box-shadow: var(--emr-card-shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: emrModalIn 180ms ease;
}
.emr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--emr-divider);
}
.emr-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--emr-text);
}
.emr-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--emr-text-subtle);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emr-modal-close:hover { background: var(--emr-bg-muted); color: var(--emr-text); }
.emr-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.emr-modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--emr-divider);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Popup chrome ───────────────────────────────────────────────────────── */
/* Canonical class for inline popups/dropdowns/autocompletes/tooltips/help
   overlays. Honors dark mode via --emr-card-bg / --emr-text / --emr-border —
   use instead of inline `style="background:#fff;..."` (Bug 16b regression
   class). The --floating variant uses a heavier shadow for ephemeral
   dropdowns vs anchored chrome. */
.emr-popup-chrome {
  background: var(--emr-card-bg);
  color: var(--emr-text);
  border: 1px solid var(--emr-border);
  border-radius: var(--emr-radius-sm);
  box-shadow: var(--emr-card-shadow);
}
.emr-popup-chrome--floating {
  box-shadow: var(--emr-card-shadow-lg);
}

/* ── Toasts / notifications ─────────────────────────────────────────────── */
.emr-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.emr-toast-new {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-left: 4px solid var(--emr-gold);
  border-radius: var(--emr-radius-sm);
  box-shadow: var(--emr-card-shadow-lg);
  padding: 12px 16px 14px 14px;
  color: var(--emr-text);
  font-size: 13px;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: emrToastIn 220ms ease;
}
.emr-toast-new.success { border-left-color: var(--emr-status-green); }
.emr-toast-new.danger  { border-left-color: var(--emr-status-red); }
.emr-toast-new.warn    { border-left-color: var(--emr-status-yellow); }
.emr-toast-new.info    { border-left-color: var(--emr-status-blue); }
.emr-toast-new-title { font-weight: 600; margin-bottom: 2px; }
.emr-toast-new-body  { color: var(--emr-text-muted); }
.emr-toast-new-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: var(--emr-gold);
  animation: emrToastProgress 5s linear forwards;
}

/* ── Mobile bottom tab bar ──────────────────────────────────────────────── */
.emr-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--emr-sidebar-bg);
  border-top: 1px solid var(--emr-sidebar-border);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}
.emr-tabbar-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--emr-tabbar-h);
}
.emr-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--emr-sidebar-text);
  font-size: 10px;
  font-weight: 500;
  padding: 6px 4px;
  cursor: pointer;
  text-align: center;
  transition: color var(--emr-tx);
}
.emr-tabbar-item .emr-tabbar-icon {
  font-size: 19px;
  line-height: 1;
  transition: transform var(--emr-tx);
}
.emr-tabbar-item.active { color: var(--emr-gold); }
.emr-tabbar-item.active .emr-tabbar-icon { transform: scale(1.08); }
.emr-tabbar-item:active { background: var(--emr-sidebar-hover-bg); }

/* ── Mobile drawer (full nav slide-in) ──────────────────────────────────── */
.emr-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.emr-drawer.open { display: block; }
.emr-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: emrFadeIn 160ms ease;
}
.emr-drawer-panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(280px, 85vw);
  background: var(--emr-sidebar-bg);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  color: var(--emr-sidebar-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: emrDrawerIn 220ms ease;
}

/* ── Truck board mobile card view ───────────────────────────────────────── */
.emr-truckcards { display: none; flex-direction: column; gap: 12px; }
.emr-truckcard {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-card-shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emr-truckcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.emr-truckcard-truck {
  font-size: 17px;
  font-weight: 700;
  color: var(--emr-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.emr-truckcard-driver { font-size: 13px; color: var(--emr-text-muted); }
.emr-truckcard-lane {
  font-size: 12px;
  color: var(--emr-text-subtle);
  font-family: var(--emr-font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emr-truckcard-idle {
  font-size: 11px;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes emrFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes emrModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes emrToastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes emrToastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes emrDrawerIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── Mobile breakpoint: <768px ──────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --emr-content-pad: var(--emr-content-pad-mobile); }

  .emr-sidebar { display: none; }

  .emr-app-content {
    margin-left: 0;
    padding: var(--emr-content-pad-mobile);
    padding-bottom: calc(var(--emr-tabbar-h) + 16px + env(safe-area-inset-bottom));
  }

  .emr-tabbar { display: block; }

  .emr-metric-grid { grid-template-columns: 1fr; gap: 12px; }
  .emr-card        { padding: 16px; border-radius: var(--emr-radius); }
  .emr-metric-card { padding: 14px 16px; }
  .emr-metric-card-value { font-size: 26px; }

  /* Touch targets */
  .emr-btn          { min-height: 44px; padding: 10px 16px; }
  .emr-btn-sm       { min-height: 40px; }
  .emr-tabbar-item  { min-height: 44px; }
  .emr-nav-item     { min-height: 44px; }
  .emr-theme-toggle { min-height: 44px; }

  body { overflow-x: hidden; }

  .emr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .emr-modal {
    max-width: 100%;
    border-radius: var(--emr-radius-lg);
  }
  .emr-modal-header,
  .emr-modal-footer { padding: 14px 16px; }
  .emr-modal-body   { padding: 16px; }

  .emr-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .emr-toast-stack {
    top: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
  }

  /* Truck board: swap desktop grid for card list below breakpoint */
  .emr-truckcards       { display: flex; }
  .emr-truckboard-grid  { display: none !important; }
  /* Hide desktop-only chrome that sits around the grid — the horizontal
     scroll bar and the bottom week tabs are both grid companions. */
  #wb-hscroll-bar,
  #wb-week-tabs    { display: none !important; }
  /* Panel header: wrap buttons + full-width search on mobile. */
  #panel-wboard > div:first-child { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  #panel-wboard #wb-search        { width: 100%; order: 10; }
  #panel-wboard #wb-fri-pu-toggle { display: none; }
}

/* ── Desktop-only: hide mobile-only components ──────────────────────────── */
@media (min-width: 768px) {
  .emr-tabbar,
  .emr-drawer { display: none !important; }
  .emr-drawer.open { display: none !important; } /* drawer is mobile-only */
}

/* ── Utility helpers ────────────────────────────────────────────────────── */
.emr-flex            { display: flex; }
.emr-flex-col        { display: flex; flex-direction: column; }
.emr-items-center    { align-items: center; }
.emr-items-start     { align-items: flex-start; }
.emr-justify-between { justify-content: space-between; }
.emr-justify-end     { justify-content: flex-end; }
.emr-gap-1 { gap: 4px; }
.emr-gap-2 { gap: 8px; }
.emr-gap-3 { gap: 12px; }
.emr-gap-4 { gap: 16px; }
.emr-gap-6 { gap: 24px; }
.emr-hidden { display: none !important; }
.emr-mt-2 { margin-top: 8px; }
.emr-mt-3 { margin-top: 12px; }
.emr-mt-4 { margin-top: 16px; }
.emr-mt-6 { margin-top: 24px; }
.emr-mb-2 { margin-bottom: 8px; }
.emr-mb-3 { margin-bottom: 12px; }
.emr-mb-4 { margin-bottom: 16px; }
.emr-mb-6 { margin-bottom: 24px; }
.emr-p-3 { padding: 12px; }
.emr-p-4 { padding: 16px; }
.emr-text-center { text-align: center; }
.emr-text-right  { text-align: right; }
.emr-ellipsis    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emr-tabular     { font-variant-numeric: tabular-nums; }
.emr-only-mobile  { display: none; }
.emr-only-desktop { display: initial; }

@media (max-width: 767px) {
  .emr-only-mobile  { display: initial; }
  .emr-only-desktop { display: none !important; }
}

/* ── Quote page three-column layout ─────────────────────────────────────
   left (available trucks) | center (quote form) | right (broker intel)
   Collapses to single column below 1300px so the form always has enough
   width on typical laptop displays. */
.emr-quote-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 680px) 260px;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  align-items: start;
}
.emr-quote-side {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.emr-quote-side .emr-card-header { margin-bottom: 10px; }
.emr-quote-center { min-width: 0; }
.emr-quote-truck-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--emr-radius-sm);
  border: 1px solid var(--emr-divider);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color var(--emr-tx), background var(--emr-tx);
  background: var(--emr-bg);
}
.emr-quote-truck-item:hover {
  border-color: var(--emr-gold);
  background: var(--emr-gold-tint);
}
.emr-quote-truck-item-left { min-width: 0; }
.emr-quote-truck-item-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--emr-text);
  font-variant-numeric: tabular-nums;
}
/* ── Premium truck cards for the Run a Quote left panel ────────────── */
.emr-dq-truck-card {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-left: 3px solid transparent;
  border-radius: var(--emr-radius-sm);
  cursor: pointer;
  transition: border-left-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.emr-dq-truck-card:hover {
  border-left-color: var(--emr-gold);
  background: var(--emr-gold-tint);
  transform: translateX(1px);
  box-shadow: 0 2px 8px rgba(245, 168, 0, 0.08);
}
.emr-dq-truck-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.emr-dq-truck-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.18);
}
.emr-dq-truck-card-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--emr-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.emr-dq-truck-card-days {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--emr-font-mono);
  color: var(--emr-text-subtle);
}
.emr-dq-truck-card-driver {
  font-size: 11px;
  font-weight: 500;
  color: var(--emr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.emr-dq-truck-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--emr-text-subtle);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.emr-dq-truck-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.emr-dq-idle-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--emr-bg-subtle);
  overflow: hidden;
}
.emr-dq-idle-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  transition: width 220ms ease, background 220ms ease;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: emrIdleShimmer 2200ms linear infinite;
}
@keyframes emrIdleShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}
@keyframes emrTruckCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(245, 168, 0, 0.55); background: var(--emr-gold-tint); }
  60%  { box-shadow: 0 0 0 6px rgba(245, 168, 0, 0.0);  background: var(--emr-gold-tint); }
  100% { box-shadow: 0 0 0 0 rgba(245, 168, 0, 0);      background: var(--emr-card-bg); }
}
.emr-dq-truck-card-flash {
  animation: emrTruckCardFlash 750ms ease-out;
  border-left-color: var(--emr-gold) !important;
}

/* ── Run-a-Quote form sections ──────────────────────────────────────── */
.emr-dq-section-header {
  font-size: 10px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--emr-text-subtle);
  padding: 4px 0 6px 10px;
  border-left: 2px solid var(--emr-gold);
  margin: 16px 0 10px;
  text-transform: lowercase;
}
.emr-dq-section-header:first-child { margin-top: 4px; }
.emr-dq-section {
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--emr-divider);
  margin-bottom: 4px;
}
.emr-dq-section:last-of-type { border-bottom: none; }

/* Route connector: the visual link between pickups and deliveries. */
.emr-dq-route-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px 0 4px 8px;
  color: var(--emr-gold);
  pointer-events: none;
}
.emr-dq-route-connector-line {
  width: 2px;
  height: 14px;
  background: linear-gradient(to bottom, rgba(59,130,246,0.5), var(--emr-gold));
  border-radius: 2px;
}
.emr-dq-route-connector-arrow {
  font-size: 10px;
  line-height: 1;
  margin-top: -2px;
  color: #22c55e;
  opacity: 0.85;
}

/* Live preview strip: miles / loaded RPM / effective RPM. */
.emr-dq-preview-strip {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  background: var(--emr-bg-muted);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius);
}
.emr-dq-preview-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.emr-dq-preview-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emr-text-subtle);
}
.emr-dq-preview-cell strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--emr-text);
  font-family: var(--emr-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Run Quote button: full width, gold, 48px, shimmer on hover. */
@keyframes emrShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}
.emr-dq-run-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: inherit;
  background: linear-gradient(90deg, #F5A800 0%, #F5A800 38%, #FDD36A 50%, #F5A800 62%, #F5A800 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  box-shadow: 0 2px 8px rgba(245, 168, 0, 0.25);
  transition: box-shadow 180ms ease, transform 120ms ease;
}
.emr-dq-run-btn:hover:not(:disabled) {
  box-shadow: 0 4px 18px rgba(245, 168, 0, 0.45);
  animation: emrShimmer 1.6s linear infinite;
}
.emr-dq-run-btn:active:not(:disabled) { transform: translateY(1px); }
.emr-dq-run-btn:disabled {
  background: var(--emr-bg-subtle);
  color: var(--emr-text-subtle);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Market Intelligence zone heatmap + cards ─────────────────────── */
.emr-mkt-zone-host { position: relative; padding: 8px 4px; }
@keyframes emrMktZonePulse {
  0%, 100% { filter: brightness(1);     }
  50%      { filter: brightness(1.12);  }
}
.emr-mkt-zone-cell {
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
  transform-origin: center center;
}
.emr-mkt-zone-cell:hover { filter: brightness(1.15); }
.emr-mkt-zone-cell.emr-mkt-zone-fresh { animation: emrMktZonePulse 2.4s ease-in-out infinite; }

.emr-mkt-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
}
.emr-mkt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-subtle);
  letter-spacing: 0.06em;
}
.emr-mkt-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.emr-mkt-zone-map-host {
  display: none;       /* becomes block when emrMktRenderUSMap populates it */
  margin: 0 0 18px;
  min-height: 0;
}
.emr-mkt-zone-map-host:not(:empty) { display: block; }

/* ── SVG US map (Market Intelligence zone heatmap) ──────────────────── */
.emr-usmap-wrap {
  position: relative;
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 10px;
  padding: 18px 20px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  min-width: 500px;
  width: 100%;
}
@media (max-width: 639px) { .emr-usmap-wrap { min-width: 0; } }
.emr-usmap-svg {
  width: 100%;
  height: auto;
  min-height: 380px;
  display: block;
  aspect-ratio: 8 / 5;
}
.emr-usmap-zone,
.emr-usmap-region {
  cursor: pointer;
  transition: fill-opacity 180ms ease, stroke-width 180ms ease;
}
.emr-usmap-zone:hover,
.emr-usmap-region:hover {
  fill-opacity: 1 !important;
  stroke-width: 2.8;
  stroke: #fff;
}
.emr-usmap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px 20px;
  color: var(--emr-text-muted, #6b7280);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.emr-usmap-label {
  user-select: none;
}
.emr-usmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--emr-border, #e5e7eb);
}
.emr-usmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--emr-text-muted, #6b7280);
  letter-spacing: .5px;
}
.emr-usmap-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.emr-usmap-popup {
  position: absolute;
  min-width: 240px;
  max-width: 300px;
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border-strong, #d1d5db);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  pointer-events: none;
  z-index: 1000;
}
.emr-mkt-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 1023px) { .emr-mkt-zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .emr-mkt-zone-grid { grid-template-columns: 1fr; } }
.emr-mkt-zone-card {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius);
  padding: 14px 16px;
  transition: box-shadow 180ms ease, transform 180ms ease;
  cursor: pointer;
  min-width: 160px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.emr-mkt-zone-card:hover { box-shadow: var(--emr-card-shadow-lg); transform: translateY(-1px); }
.emr-mkt-zone-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--emr-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}
.emr-mkt-zone-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  align-self: flex-start;
  white-space: nowrap;
}
.emr-mkt-zone-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 11px;
  margin-top: auto;
}
.emr-mkt-zone-card-stat {
  text-align: center;
  min-width: 0;
  overflow: visible;
}
.emr-mkt-zone-card-stat-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.emr-mkt-zone-card-stat-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--emr-text);
  font-family: var(--emr-font-mono);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.3;
}

.emr-mkt-zone-lanes-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--emr-divider); }
.emr-mkt-zone-lanes { margin-bottom: 10px; }
.emr-mkt-zone-lanes-header {
  font-size: 9px;
  font-weight: 800;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.emr-mkt-zone-lane-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 10px;
  border-bottom: 1px dotted var(--emr-divider);
}
.emr-mkt-zone-lane-name  { color: var(--emr-text-muted); font-family: var(--emr-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emr-mkt-zone-lane-rpm   { color: var(--emr-status-blue); font-family: var(--emr-font-mono); font-weight: 700; }

.emr-mkt-zone-popup {
  position: absolute;
  pointer-events: none;
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-border);
  border-radius: var(--emr-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  padding: 10px 12px;
  z-index: 200;
  min-width: 200px;
  max-width: 260px;
}

/* ── Broker profile drawer (right-edge slide-in) ──────────────────── */
.emr-broker-drawer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  pointer-events: none;
}
.emr-broker-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.emr-broker-drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(var(--emr-drawer-w), 96vw);
  background: var(--emr-card-bg);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
}
.emr-broker-drawer.emr-broker-drawer-open { pointer-events: auto; }
.emr-broker-drawer.emr-broker-drawer-open .emr-broker-drawer-backdrop { opacity: 1; pointer-events: auto; }
.emr-broker-drawer.emr-broker-drawer-open .emr-broker-drawer-panel   { transform: translateX(0); }
.emr-broker-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--emr-border);
  flex-shrink: 0;
}
.emr-broker-drawer-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.emr-broker-drawer-close {
  background: transparent;
  border: none;
  color: var(--emr-text-subtle);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--emr-radius-sm);
  transition: background 120ms ease, color 120ms ease;
}
.emr-broker-drawer-close:hover { background: var(--emr-bg-muted); color: var(--emr-text); }
.emr-broker-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}
.emr-broker-drawer-hero {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--emr-bg-muted);
  border-radius: var(--emr-radius);
}
.emr-broker-drawer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.emr-broker-drawer-stats > div {
  background: var(--emr-bg-muted);
  padding: 10px 8px;
  border-radius: var(--emr-radius-sm);
  text-align: center;
}
.emr-broker-drawer-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.emr-broker-drawer-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--emr-text);
  font-family: var(--emr-font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.emr-broker-drawer-section { margin-bottom: 16px; }
.emr-broker-drawer-section-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.emr-broker-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--emr-divider);
}

/* ── EMR-1 grade badge circles + pulsing alert border ─────────────── */
.emr1-grade-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.3);
  font-family: var(--emr-font-sans);
  letter-spacing: -0.02em;
}
.emr1-grade-A { background: #16a34a; }
.emr1-grade-B { background: #2563eb; }
.emr1-grade-C { background: #eab308; color: #1A1A1A; border-color: rgba(0,0,0,0.15); }
.emr1-grade-D { background: #f97316; }
.emr1-grade-F { background: #dc2626; }
.emr1-grade-N { background: #9ca3af; }

@keyframes emr1AlertPulse {
  0%, 100% { border-left-color: #ef4444; box-shadow: inset 2px 0 0 rgba(239,68,68,0.8); }
  50%      { border-left-color: #fca5a5; box-shadow: inset 2px 0 0 rgba(239,68,68,0.3); }
}
.emr1-alert-card { animation: emr1AlertPulse 1.8s ease-in-out infinite; }

/* ── EMR-1 lane detail expand/collapse ─────────────────────────────── */
tr.emr1-lane-row:hover { background: var(--emr-gold-tint); }
tr.emr1-lane-detail-row > td { padding: 0 !important; }
tr.emr1-lane-detail-row .emr1-lane-detail-inner {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 320ms ease, opacity 220ms ease;
}
tr.emr1-lane-detail-row.emr1-lane-detail-open .emr1-lane-detail-inner {
  max-height: 640px;
  opacity: 1;
}

/* ── Quote feed filter bar ─────────────────────────────────────────── */
.emr-feed-toolbar {
  background: var(--emr-bg-muted);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius);
  padding: 10px 14px !important;
  margin: 10px 16px 6px;
  box-shadow: var(--emr-card-shadow);
}
.emr-feed-toolbar .feed-toolbar-left { gap: 8px; flex-wrap: wrap; }
html[data-theme="dark"] .emr-feed-toolbar { background: #141414; border-color: #2A2A2A; }

.filter-chip.emr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--emr-card-border);
  background: var(--emr-card-bg);
  color: var(--emr-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}
.filter-chip.emr-pill:hover {
  border-color: var(--emr-gold);
  color: var(--emr-text);
  transform: translateY(-1px);
}
.filter-chip.emr-pill.active {
  background: var(--emr-gold);
  border-color: var(--emr-gold);
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(245, 168, 0, 0.28);
}
.filter-chip.emr-pill.active .emr-pill-count {
  background: rgba(26, 26, 26, 0.22);
  color: #1A1A1A;
}
.emr-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 6px;
  background: var(--emr-bg-subtle);
  color: var(--emr-text-subtle);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--emr-font-mono);
  transition: background 180ms ease, color 180ms ease;
}

/* Search inputs inside the feed filter bar: gold focus ring. */
.emr-feed-search-bar input:focus,
.emr-feed-search-bar select:focus {
  outline: none;
  border-color: var(--emr-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Mobile-only filter drawer toggle. Desktop hides the button; mobile
   hides the inline chips + search bar and shows the toggle. When the
   drawer is open (.emr-feed-search-open), the search bar becomes a
   bottom sheet sliding up from the edge of the viewport. */
.emr-feed-mobile-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--emr-gold);
  background: rgba(245, 168, 0, 0.10);
  color: var(--emr-gold);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
@media (max-width: 767px) {
  .emr-feed-toolbar .filter-chip.emr-pill { display: none; }
  .emr-feed-toolbar .emr-feed-mobile-toggle { display: inline-flex; }
  .emr-feed-search-bar {
    display: none !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1500;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--emr-card-bg);
    border-top: 2px solid var(--emr-gold);
    border-radius: var(--emr-radius-lg) var(--emr-radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
    padding: 18px 16px 24px !important;
    animation: emrSlideInUp 260ms ease both;
  }
  .emr-feed-search-bar.emr-feed-search-open { display: flex !important; }
}

/* ── Run-a-Quote input focus ring (gold) ──────────────────────────────
   Scoped to #panel-quote so it only overrides the form inputs on this
   page. Inline `outline:none` on inputs still holds; we layer the
   ring as a soft box-shadow that animates in. */
#panel-quote input:focus,
#panel-quote select:focus,
#panel-quote textarea:focus {
  outline: none;
  border-color: var(--emr-gold);
  box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* ── Quote-page entry animation: three panels slide in from the sides
   when the panel becomes active. The center form lifts up slightly
   while the left/right asides slide in from their respective edges. */
@keyframes emrSlideInLeft  { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes emrSlideInRight { from { opacity: 0; transform: translateX( 18px); } to { opacity: 1; transform: none; } }
@keyframes emrSlideInUp    { from { opacity: 0; transform: translateY(  8px); } to { opacity: 1; transform: none; } }

#panel-quote.active .emr-quote-left   { animation: emrSlideInLeft  340ms ease both;        }
#panel-quote.active .emr-quote-center { animation: emrSlideInUp    340ms ease both  60ms;  }
#panel-quote.active .emr-quote-right  { animation: emrSlideInRight 340ms ease both 120ms;  }

/* ── Active Quotes card grid (Run a Quote → My Active Quotes) ──────── */
@keyframes emrCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
#dq-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#dq-history-list > div {
  margin-bottom: 0 !important;
  animation: emrCardIn 280ms ease both;
  min-width: 0;
}
#dq-history-list > .emr-dq-active-empty {
  grid-column: 1 / -1;
  padding: 36px 20px;
  text-align: center;
  background: var(--emr-bg-muted);
  border: 1px dashed var(--emr-card-border);
  border-radius: var(--emr-radius);
}
@media (max-width: 767px) {
  #dq-history-list { grid-template-columns: 1fr; }
}

/* ── FreightGuard permanent warning banner (Broker Intel right panel) ── */
@keyframes emrFgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.0); }
}
.emr-dq-fg-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-left: 3px solid #ef4444;
  border-radius: var(--emr-radius-sm);
  color: #ef4444;
  animation: emrFgPulse 1.8s ease-in-out infinite;
}

/* ── Skeleton shimmer placeholder ──────────────────────────────────── */
@keyframes emrSkelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.emr-skel {
  background: linear-gradient(
    90deg,
    var(--emr-bg-subtle) 0%,
    var(--emr-bg-muted) 45%,
    var(--emr-bg-subtle) 90%
  );
  background-size: 200% 100%;
  animation: emrSkelShimmer 1.4s ease-in-out infinite;
}

/* Gold flash — fired when a truck card snaps its values into the form.
   Uses outline + background so the input's base var(--bg2) stays intact
   when the animation completes and `animation-fill-mode` returns to none. */
@keyframes emrFieldFlash {
  0%, 25% {
    outline: 2px solid rgba(245, 168, 0, 0.9);
    outline-offset: 1px;
    background-color: rgba(245, 168, 0, 0.18);
  }
  100% {
    outline: 2px solid rgba(245, 168, 0, 0);
    outline-offset: 1px;
    background-color: transparent;
  }
}
.emr-field-flash { animation: emrFieldFlash 700ms ease-out; }

/* Broker directory tier tabs (TOP 10 / TOP 50 / TOP 100 / ALL) */
.emr-broker-tier-btn {
  background: transparent;
  border: 1px solid var(--emr-card-border);
  color: var(--emr-text-subtle);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.emr-broker-tier-btn:hover {
  color: var(--emr-text);
  border-color: var(--emr-gold);
}
.emr-broker-tier-btn-active {
  background: var(--emr-gold);
  color: #1a1a1a;
  border-color: var(--emr-gold);
}
.emr-broker-tier-btn-active:hover {
  color: #1a1a1a;
}

.emr-quote-truck-item-driver {
  font-size: 11px;
  color: var(--emr-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

@media (max-width: 1299px) {
  .emr-quote-grid {
    grid-template-columns: 1fr;
  }
  .emr-quote-side {
    position: static;
    max-height: none;
  }
}

/* ── Sidebar nav group / sub-items (Fix 6) ──────────────────────────────
   Lets a top-level nav item (e.g. Settings) expand to reveal indented
   sub-pages. The parent stays highlighted gold when any sub is active. */
.emr-nav-group { display: flex; flex-direction: column; }
.emr-nav-item.has-sub {
  position: relative;
}
.emr-nav-item.has-sub::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 8px;
  opacity: 0.7;
  transition: transform var(--emr-tx);
  transform-origin: center;
}
.emr-nav-group.expanded .emr-nav-item.has-sub::after {
  transform: rotate(180deg);
}
.emr-nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
  padding-left: 8px;
}
.emr-nav-group.expanded .emr-nav-sublist {
  max-height: 400px;
}
.emr-nav-subitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 24px;
  border-radius: var(--emr-radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--emr-sidebar-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--emr-tx), color var(--emr-tx);
  min-height: 22px;
  width: 100%;
}
.emr-nav-subitem::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.emr-nav-subitem:hover {
  background: var(--emr-sidebar-hover-bg);
  color: #FFFFFF;
}
.emr-nav-subitem.active {
  color: var(--emr-gold);
  background: var(--emr-sidebar-hover-bg);
}
.emr-nav-subitem.active::before { opacity: 1; }

/* ── Admin sub-tabs (Fix 4) ─────────────────────────────────────────────
   Replaces the long-scroll admin page with a tabbed interface. */
.emr-admin-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--emr-border);
  flex-wrap: wrap;
  background: var(--emr-bg);
  font-family: var(--emr-font-sans);
}
.emr-admin-tab {
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--emr-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--emr-tx), border-color var(--emr-tx);
  white-space: nowrap;
}
.emr-admin-tab:hover { color: var(--emr-text); }
.emr-admin-tab.active {
  color: var(--emr-gold);
  font-weight: 600;
  border-bottom-color: var(--emr-gold);
}

/* ── Load Analysts collapsible drawer (Fix 2) ───────────────────────────
   Hide the legacy permanent left rail. Move its dispatcher list into a
   click-to-open drawer triggered by an edge button. */
#main-app .app-body > .sidebar { display: none !important; }
#main-app .app-body { grid-template-columns: 1fr; }

.emr-la-toggle {
  position: fixed;
  top: 50%;
  left: calc(var(--emr-sidebar-w) + var(--emr-sidebar-gap) * 2);
  transform: translateY(-50%);
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-border);
  border-left: none;
  border-radius: 0 var(--emr-radius) var(--emr-radius) 0;
  padding: 14px 8px;
  cursor: pointer;
  z-index: 950;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--emr-text-muted);
  font-family: var(--emr-font-sans);
  font-size: 11px;
  font-weight: 600;
  writing-mode: vertical-rl;
  transform-origin: center;
  transition: color var(--emr-tx), background var(--emr-tx);
}
.emr-la-toggle:hover {
  background: var(--emr-bg-muted);
  color: var(--emr-gold);
  border-color: var(--emr-gold);
}
.emr-la-toggle .emr-la-toggle-icon {
  writing-mode: horizontal-tb;
  font-size: 16px;
  margin-bottom: 4px;
}
.emr-la-toggle .emr-la-toggle-badge {
  writing-mode: horizontal-tb;
  background: var(--emr-gold);
  color: var(--emr-text-on-gold);
  border-radius: var(--emr-radius-pill);
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  margin-top: 4px;
}

.emr-la-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1090;
  display: none;
  animation: emrFadeIn 160ms ease;
}
.emr-la-backdrop.open { display: block; }

.emr-la-drawer {
  position: fixed;
  top: var(--emr-sidebar-gap);
  bottom: var(--emr-sidebar-gap);
  left: calc(var(--emr-sidebar-w) + var(--emr-sidebar-gap) * 2);
  width: 300px;
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  transform: translateX(calc(-100% - 32px));
  transition: transform 240ms ease, opacity 240ms ease;
  opacity: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.emr-la-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.emr-la-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--emr-divider);
}
.emr-la-drawer-header-title {
  font-family: var(--emr-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--emr-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.emr-la-drawer-close {
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--emr-text-subtle);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emr-la-drawer-close:hover { background: var(--emr-bg-muted); color: var(--emr-text); }
.emr-la-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
}

@media (max-width: 767px) {
  .emr-la-toggle { display: none; }
  .emr-la-drawer { left: 0; top: 0; bottom: 0; border-radius: 0; width: min(85vw, 320px); }
}

/* ── Legacy topnav restyled as a minimal top bar (Fix 1) ────────────────
   The old horizontal nav tabs are hidden via inline display:none on
   .nav-tabs in the markup. What remains: page title (left), live pill,
   clock, alert bell, user chip. */
#main-app .topnav {
  height: 56px;
  background: var(--emr-bg);
  border-bottom: 1px solid var(--emr-border);
  padding: 0 24px;
  font-family: var(--emr-font-sans);
  flex-shrink: 0;
}
html[data-theme="dark"] #main-app .topnav { background: var(--emr-bg-muted); border-bottom-color: var(--emr-border); }
#main-app .topnav-left  { gap: 16px; }
#main-app .topnav-right { gap: 14px; color: var(--emr-text); }
#main-app .topnav .live-pill { color: var(--emr-status-green); font-size: 11px; font-weight: 600; }
#main-app .topnav .live-dot { background: var(--emr-status-green); }
#main-app .topnav .clock {
  font-family: var(--emr-font-mono);
  font-size: 12px;
  color: var(--emr-text-subtle);
}
#main-app .topnav .alert-bell svg { fill: var(--emr-text-muted); }
#main-app .topnav .alert-bell:hover svg { fill: var(--emr-gold); }
#main-app .topnav .user-chip {
  background: var(--emr-bg-muted);
  border: 1px solid var(--emr-border);
  border-radius: var(--emr-radius-pill);
  padding: 4px 12px 4px 4px;
  gap: 8px;
}
html[data-theme="dark"] #main-app .topnav .user-chip { background: var(--emr-bg-subtle); }
#main-app .topnav .user-chip:hover { border-color: var(--emr-gold); }
#main-app .topnav .user-chip img { width: 28px; height: 28px; }
#main-app .topnav .user-chip-name { color: var(--emr-text); font-size: 12px; font-weight: 600; }
#main-app .topnav .user-chip-role { color: var(--emr-gold); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }

.emr-topbar-title {
  font-family: var(--emr-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--emr-text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.emr-topbar-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--emr-gold);
  border-radius: 2px;
  display: inline-block;
}

/* ── Legacy selector overrides (File 8) ─────────────────────────────────
   Restyles existing legacy classes in terms of the new design tokens so
   that every page inherits the new brand look without per-page HTML
   changes. These rules intentionally come after the legacy inline <style>
   so they win on cascade for equal-specificity selectors. */

/* Section headers used by most panels (Activity, Market, EMR-1, Quote, etc.) */
#main-app .section-hdr {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--emr-text);
  letter-spacing: 0.04em;
  text-transform: none;
  background: var(--emr-bg);
  border-bottom: 1px solid var(--emr-border);
  border-top: none;
  font-family: var(--emr-font-sans);
}
#main-app .section-hdr::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--emr-gold);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -3px;
}

/* Primary action button used across Market/EMR-1/import screens */
#main-app .run-btn {
  background: var(--emr-gold);
  color: var(--emr-text-on-gold);
  border: 1px solid var(--emr-gold);
  border-radius: var(--emr-radius-sm);
  padding: 8px 18px;
  font-family: var(--emr-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background var(--emr-tx), border-color var(--emr-tx);
}
#main-app .run-btn:hover {
  background: var(--emr-gold-hover);
  border-color: var(--emr-gold-hover);
  opacity: 1;
}
#main-app .run-btn.secondary {
  background: transparent;
  color: var(--emr-text);
  border-color: var(--emr-border-strong);
}
#main-app .run-btn.secondary:hover {
  background: var(--emr-bg-muted);
  border-color: var(--emr-gold);
  color: var(--emr-gold);
}

/* Import buttons (Vektor page) */
#main-app .import-btn {
  background: var(--emr-gold);
  color: var(--emr-text-on-gold);
  border-radius: var(--emr-radius-sm);
  padding: 10px 20px;
  font-family: var(--emr-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
#main-app .import-btn:hover { background: var(--emr-gold-hover); opacity: 1; }
#main-app .clear-btn {
  background: transparent;
  color: var(--emr-status-red);
  border: 1px solid var(--emr-status-red);
  border-radius: var(--emr-radius-sm);
  padding: 10px 16px;
  font-family: var(--emr-font-sans);
  font-size: 13px;
  font-weight: 500;
}
#main-app .clear-btn:hover { background: var(--emr-status-red-bg); }

/* Admin control buttons */
#main-app .ctrl-btn {
  padding: 6px 12px;
  border-radius: var(--emr-radius-sm);
  font-family: var(--emr-font-sans);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--emr-border-strong);
  background: var(--emr-bg);
  color: var(--emr-text-muted);
}
#main-app .ctrl-btn:hover {
  background: var(--emr-bg-muted);
  color: var(--emr-text);
  border-color: var(--emr-gold);
}

/* Activity table used by Alerts / Activity panel */
#main-app .activity-table {
  font-family: var(--emr-font-sans);
}
#main-app .activity-table th {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--emr-text-subtle);
  background: var(--emr-bg-muted);
  border-bottom: 1px solid var(--emr-border);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--emr-font-sans);
}
#main-app .activity-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--emr-divider);
  font-size: 13px;
  color: var(--emr-text);
}
#main-app .activity-table tr:hover td {
  background: var(--emr-gold-tint);
}

/* Intel wrapper used by Market / EMR-1 / Reports */
#main-app .intel-wrap {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--emr-font-sans);
}
#main-app .intel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--emr-text);
  font-family: var(--emr-font-sans);
}
#main-app .intel-sub {
  font-size: 11px;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-family: var(--emr-font-sans);
}
#main-app .intel-hdr {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--emr-divider);
  margin-bottom: 20px;
}

/* Detail stats used on user/dispatcher detail panels */
#main-app .detail-hdr {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--emr-divider);
  margin-bottom: 20px;
}
#main-app .detail-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--emr-text);
  font-family: var(--emr-font-sans);
}
#main-app .detail-email {
  font-size: 12px;
  color: var(--emr-text-subtle);
  font-family: var(--emr-font-mono);
}
#main-app .detail-avatar {
  width: 52px;
  height: 52px;
  background: var(--emr-bg-muted);
  border: 2px solid var(--emr-gold);
  font-weight: 700;
  color: var(--emr-text);
}
#main-app .detail-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
#main-app .detail-stat {
  background: var(--emr-card-bg);
  border: 1px solid var(--emr-card-border);
  border-radius: var(--emr-radius-lg);
  box-shadow: var(--emr-card-shadow);
  padding: 16px;
}
#main-app .detail-stat-num {
  font-family: var(--emr-font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--emr-text);
  letter-spacing: -0.01em;
}
#main-app .detail-stat-label {
  font-size: 11px;
  color: var(--emr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-family: var(--emr-font-sans);
}

/* Import page paste area — new card look */
#main-app .import-wrap {
  max-width: 860px;
  padding: 28px;
}
#main-app .paste-area {
  background: var(--emr-input-bg);
  border: 1px solid var(--emr-input-border);
  border-radius: var(--emr-radius-lg);
  padding: 16px;
  font-family: var(--emr-font-mono);
  font-size: 12px;
  color: var(--emr-input-text);
}
#main-app .paste-area:focus {
  border-color: var(--emr-gold);
  box-shadow: 0 0 0 3px var(--emr-input-focus-ring);
}
#main-app .import-label {
  font-family: var(--emr-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--emr-text-subtle);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 8px;
}

/* Dark-theme-aware adjustments for legacy panels */
html[data-theme="dark"] #main-app .section-hdr { background: var(--emr-bg-muted); color: var(--emr-text); }
html[data-theme="dark"] #main-app .activity-table th { background: var(--emr-bg-subtle); }
html[data-theme="dark"] #main-app .activity-table tr:hover td { background: rgba(245, 168, 0, 0.08); }
html[data-theme="dark"] #main-app .detail-avatar { background: var(--emr-bg-subtle); }

/* ── Transitional shell: shift legacy #main-app right to reserve sidebar ─ */
/* Used while the legacy topnav/app-body structure still exists alongside
   the new floating sidebar. Removed when the legacy shell is fully gone. */
#main-app.emr-app-shell {
  padding-left: calc(var(--emr-sidebar-w) + var(--emr-sidebar-gap) * 2);
  transition: padding-left 200ms ease;
}
@media (max-width: 767px) {
  #main-app.emr-app-shell { padding-left: 0; }
}

/* ── Light-mode sidebar reinforcement ──────────────────────────────────
   The sidebar now FOLLOWS the theme (operator 2026-06-11): white in
   light mode, charcoal in dark. These high-specificity rules are kept
   as a cascade shield (so no user stylesheet / extension / legacy inline
   rule washes the sidebar out) but now resolve through the --emr-sidebar-*
   tokens, which carry light values in light mode. */
html[data-theme="light"] .emr-sidebar { background: var(--emr-sidebar-bg); color: var(--emr-sidebar-text); }
html[data-theme="light"] .emr-sidebar .emr-nav-item { color: var(--emr-sidebar-text); }
html[data-theme="light"] .emr-sidebar .emr-nav-item:hover { color: var(--emr-sidebar-hover-text); }
html[data-theme="light"] .emr-sidebar .emr-nav-item.active { color: var(--emr-sidebar-active-text); }
html[data-theme="light"] .emr-sidebar .emr-nav-subitem { color: var(--emr-sidebar-text-muted); }
html[data-theme="light"] .emr-sidebar .emr-nav-subitem:hover { color: var(--emr-sidebar-hover-text); }
html[data-theme="light"] .emr-sidebar .emr-nav-subitem.active { color: var(--emr-sidebar-active-text); }
html[data-theme="light"] .emr-sidebar-user-name { color: var(--emr-sidebar-text); }
html[data-theme="light"] .emr-sidebar-user-role { color: var(--emr-sidebar-text-muted); }

/* ── EMR-1 RPM time window block (30d / 12mo / 34mo) ─────────────────── */
.emr1-rpm-window {
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.emr1-rpm-window.is-compact {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg3, #f4f4f5);
}
.emr1-rpm-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--emr-text-muted, #6b7280);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.emr1-rpm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.emr1-rpm-col {
  text-align: center;
  padding: 8px 6px;
  border-right: 1px solid var(--emr-border, #e5e7eb);
}
.emr1-rpm-col:last-child { border-right: none; }
.is-compact .emr1-rpm-col { padding: 4px 2px; }
.is-compact .emr1-rpm-cols { gap: 6px; }
.emr1-rpm-col-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.is-compact .emr1-rpm-col-label { font-size: 8px; }
.emr1-rpm-col-primary {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.emr1-rpm-col-val {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--emr-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--emr-text, #111);
}
.is-compact .emr1-rpm-col-val { font-size: 12px; }
.emr1-rpm-col-arrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.is-compact .emr1-rpm-col-arrow { font-size: 11px; }
.emr1-rpm-col-sub {
  font-size: 10px;
  color: var(--emr-text-muted, #9ca3af);
  margin-top: 2px;
  font-family: var(--emr-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.is-compact .emr1-rpm-col-sub { font-size: 8px; }
.emr1-rpm-col-empty {
  font-size: 16px;
  color: var(--emr-text-muted, #9ca3af);
  margin-top: 8px;
  font-family: var(--emr-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.emr1-rpm-trace {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 10px;
}
.is-compact .emr1-rpm-trace { height: 24px; margin-top: 6px; }
.emr1-rpm-trace-line {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

/* ── Reports page (panel-market): design system card upgrade ─────────── */
/* Scoped overrides that modernize the legacy .card blocks inside the
   market/reports panel without touching the existing HTML. */
#panel-market { background: var(--emr-bg-subtle, #fafafa); }
#panel-market .emr-market-body {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
#panel-market .section-hdr {
  background: linear-gradient(180deg, var(--emr-bg-elevated, #fff) 0%, var(--emr-bg-subtle, #fafafa) 100%);
  border-bottom: 1px solid var(--emr-border, #e5e7eb);
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--emr-text, #111);
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ── Typography consistency across panel-market ──────────────────────── */
/* Section headers inside cards: 13px uppercase tracking */
#panel-market .card-title,
#panel-market .state-label-sm {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--emr-text-muted, #6b7280) !important;
}
#panel-market .card-title {
  font-size: 13px !important;
  color: var(--emr-text, #111) !important;
}
/* Body text inside cards: 14px */
#panel-market .card,
#panel-market .card > div:not(.card-title) {
  font-size: 14px;
  line-height: 1.55;
}
/* Primary values (grades, rates, percentages): 16px bold */
#panel-market #micro-rate,
#panel-market #short-rate {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4;
}
#panel-market #micro-pnl,
#panel-market #short-signal,
#panel-market #medium-signal,
#panel-market #long-signal {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5;
}
/* Small muted labels: 11px */
#panel-market .card > div[style*="font-size:10px"] {
  font-size: 11px !important;
  color: var(--emr-text-muted, #6b7280) !important;
  letter-spacing: .3px;
}
#panel-market .empty-state-text { font-size: 14px; }
#panel-market #market-continuity {
  font-size: 13px !important;
  line-height: 1.6;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  margin-bottom: 14px !important;
}
#panel-market #market-fleet-dispatch {
  padding: 14px 18px !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 16px !important;
}
#panel-market #market-fleet-dispatch > div:first-child {
  font-size: 11px !important;
  letter-spacing: .7px !important;
  margin-bottom: 8px !important;
}
#panel-market #market-fleet-dispatch-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
#panel-market .card {
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
#panel-market .card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border-color: var(--emr-border-strong, #d1d5db);
}
#panel-market .card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--emr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--emr-border, #e5e7eb);
}
#panel-market .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#panel-market .state-banner {
  background: linear-gradient(135deg, rgba(245,168,0,.08) 0%, var(--emr-bg-elevated, #fff) 60%);
  border: 1px solid var(--emr-border-strong, #d1d5db);
  border-left: 4px solid var(--emr-gold, #F5A800);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
#panel-market .state-banner .state-val {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--emr-text, #111);
  margin-top: 6px;
}
#panel-market .state-banner .state-val p,
#panel-market .state-banner .state-val br + * {
  margin-top: 10px;
}
#panel-market .state-banner #market-edge-text {
  font-size: 12px;
  line-height: 1.55;
  margin-top: 10px;
  color: var(--emr-text-subtle, #4b5563);
}
#panel-market .state-banner .dispatch-line {
  font-size: 13px;
  line-height: 1.6;
  color: var(--emr-text, #111);
  margin-top: 14px;
  padding-top: 14px;
}
#panel-market .state-label-sm {
  font-size: 9px;
  font-weight: 700;
  color: var(--emr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .8px;
}
#panel-market .empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--emr-text-muted, #6b7280);
}
#panel-market .empty-state-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: .5;
}
#panel-market .empty-state-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--emr-text-subtle, #4b5563);
}
#panel-market #market-data-sources {
  padding: 14px 18px !important;
  background: var(--emr-bg-elevated, #fff) !important;
  border: 1px solid var(--emr-border, #e5e7eb) !important;
  border-radius: 8px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
#panel-market #market-data-sources > div:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--emr-text-muted, #6b7280) !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--emr-border, #e5e7eb);
}
#panel-market #market-data-sources > div:not(:first-child) {
  font-size: 12px !important;
  color: var(--emr-text, #111) !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed var(--emr-border, #e5e7eb);
  gap: 12px !important;
  line-height: 1.55;
  align-items: center;
}
#panel-market #market-data-sources > div:last-child {
  border-bottom: none;
}
#panel-market #market-data-sources > div:not(:first-child) span:nth-child(2) {
  font-weight: 700;
  color: var(--emr-text, #111) !important;
  min-width: 100px !important;
}

#panel-market #market-graphs {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#panel-market #market-graphs .card {
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#panel-market #market-graphs .card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
#panel-market #market-graphs .card .card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--emr-text-muted, #6b7280);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--emr-border, #e5e7eb);
}
#panel-market #market-graphs canvas {
  max-width: 100%;
  height: auto !important;
}
#panel-market .run-btn {
  background: var(--emr-gold, #F5A800);
  color: #1a1a1a;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
#panel-market .run-btn:hover {
  background: #e09700;
  transform: translateY(-1px);
}

/* ── Orders panel: Pay Preview (Task 5) ─────────────────────────────── */
.emr-orders-pay-preview {
  border-top: 1px solid var(--emr-border, #e5e7eb);
  background: var(--bg3, #f4f4f5);
  padding: 14px 16px 16px;
}
.emr-orders-pay-preview-loading {
  font-size: 11px;
  color: var(--text3, #6b7280);
  padding: 8px 0;
  text-align: center;
  font-style: italic;
}
.emr-orders-pay-preview-empty {
  padding: 8px 0;
}
.emr-orders-pay-preview-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emr-orders-pay-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--emr-border, #e5e7eb);
}
.emr-orders-pay-preview-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text, #111);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.emr-orders-pay-preview-meta {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3, #6b7280);
  letter-spacing: .3px;
}
.emr-orders-pay-preview-refresh {
  background: transparent;
  border: 1px solid var(--border2, #e5e7eb);
  color: var(--text3, #6b7280);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
}
.emr-orders-pay-preview-refresh:hover {
  background: var(--bg2, #fafafa);
  color: var(--text, #111);
}

.emr-orders-pay-preview-margin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg2, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 6px;
}
.emr-orders-pay-preview-margin-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3, #6b7280);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.emr-orders-pay-preview-margin-val {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--text, #111);
}

.emr-orders-pay-preview-legs {
  display: flex;
  flex-direction: column;
  background: var(--bg2, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.emr-orders-pay-leg {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2, #e5e7eb);
  font-size: 11px;
}
.emr-orders-pay-leg:last-child { border-bottom: none; }
.emr-orders-pay-leg-id {
  min-width: 0;
}
.emr-orders-pay-leg-manifest {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--text, #111);
}
.emr-orders-pay-leg-driver {
  font-size: 9px;
  color: var(--text3, #6b7280);
  margin-top: 2px;
}
.emr-orders-pay-leg-status {
  font-size: 10px;
  color: var(--text2, #374151);
  min-width: 0;
}
.emr-orders-pay-leg-ok {
  color: #15803d;
  font-weight: 600;
}
.emr-orders-pay-leg-warn {
  color: #d97706;
  font-weight: 600;
}
.emr-orders-pay-leg-err {
  color: #ef4444;
  font-weight: 600;
}
.emr-orders-pay-leg-amount {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #111);
  text-align: right;
  white-space: nowrap;
}

.emr-orders-pay-preview-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(245,168,0,.08), transparent);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-left: 3px solid var(--gold, #F5A800);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text, #111);
}
.emr-orders-pay-preview-total-val {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--text, #111);
  letter-spacing: 0;
}

/* ── Alerts panel: cards, filter chips, severity badges ────────────────── */
.emr-alerts-filters .emr-alerts-chip {
  background: var(--emr-bg-subtle, #f5f5f5);
  border: 1px solid var(--emr-border, #e5e7eb);
  color: var(--emr-text-muted, #6b7280);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .15s;
}
.emr-alerts-filters .emr-alerts-chip:hover {
  background: var(--emr-bg-elevated, #fff);
  color: var(--emr-text, #111);
}
.emr-alerts-filters .emr-alerts-chip.active {
  background: var(--emr-gold, #F5A800);
  color: #1a1a1a;
  border-color: var(--emr-gold, #F5A800);
}

.emr-alerts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emr-alerts-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--emr-text-muted, #6b7280);
  font-size: 13px;
}

.emr-alert-card {
  position: relative;
  display: flex;
  background: var(--emr-bg-elevated, #fff);
  border: 1px solid var(--emr-border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.emr-alert-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: var(--emr-border-strong, #d1d5db);
}
.emr-alert-card.is-unread {
  background: linear-gradient(90deg, rgba(245,168,0,.06) 0%, var(--emr-bg-elevated, #fff) 40%);
}
.emr-alert-card.is-unread::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emr-gold, #F5A800);
  box-shadow: 0 0 0 3px rgba(245,168,0,.2);
}
.emr-alert-card-stripe {
  width: 4px;
  flex-shrink: 0;
}
.emr-alert-card[data-sev="high"]   .emr-alert-card-stripe { background: #ef4444 !important; }
.emr-alert-card[data-sev="medium"] .emr-alert-card-stripe { background: #f59e0b !important; }
.emr-alert-card[data-sev="low"]    .emr-alert-card-stripe { background: #3b82f6 !important; }
.emr-alert-card-body {
  flex: 1;
  padding: 12px 16px 14px;
  min-width: 0;
}
.emr-alert-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.emr-alert-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.emr-alert-card-title-wrap { flex: 1; min-width: 0; }
.emr-alert-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--emr-text, #111);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emr-alert-card-sub {
  font-size: 10px;
  color: var(--emr-text-muted, #6b7280);
  margin-top: 2px;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
}
.emr-alert-card-msg {
  font-size: 12px;
  color: var(--emr-text-subtle, #4b5563);
  line-height: 1.5;
  margin: 6px 0 0 42px;
}
.emr-alert-card-time {
  font-size: 10px;
  color: var(--emr-text-muted, #9ca3af);
  margin-top: 8px;
  margin-left: 42px;
  letter-spacing: .3px;
}
.emr-alert-sev-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.emr-alert-sev-badge.sev-high   { background: rgba(239,68,68,.12);  color: #ef4444; }
.emr-alert-sev-badge.sev-medium { background: rgba(245,158,11,.12); color: #d97706; }
.emr-alert-sev-badge.sev-low    { background: rgba(59,130,246,.12); color: #2563eb; }

.emr-alert-dismiss {
  background: transparent;
  border: none;
  color: var(--emr-text-muted, #9ca3af);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all .12s;
}
.emr-alert-dismiss:hover {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}

/* ── Truck board: modern native horizontal scrollbar ────────────────────── */
/* The truck board grid scrolls horizontally for the 7-day week. The native
   scrollbar is styled to be visible, thick, and draggable across browsers. */
#wb-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--emr-color-border-strong, #9ca3af) transparent;
  scrollbar-gutter: stable;
}
#wb-table-wrap::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
#wb-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-top: 1px solid #e5e7eb;
}
#wb-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border: 2px solid #f1f5f9;
  border-radius: 8px;
  min-width: 60px;
  transition: background .15s;
}
#wb-table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}
#wb-table-wrap::-webkit-scrollbar-thumb:active {
  background: var(--gold, #F5A800);
}
#wb-table-wrap::-webkit-scrollbar-corner { background: transparent; }
.emr-wb-hscroll { user-select: none; }

/* ── Orders detail panel — header meta strip (commit 1) ────────────
   Dispatcher / broker on the left, gross / RPM on the right; sits
   between status pills and action buttons inside .emr-orders-detail-head. */
.emr-orders-detail-meta {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
.emr-orders-detail-meta-left,
.emr-orders-detail-meta-right {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.emr-orders-detail-meta-right {
  justify-content: flex-end;
  flex: 0 0 auto;
}
.emr-orders-detail-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--bg2);
  border: 1px solid var(--border);
}
.emr-orders-detail-meta-cell.is-gross { border-color: rgba(34,197,94,.35); }
.emr-orders-detail-meta-cell.is-rpm   { border-color: rgba(212,175,55,.35); }
.emr-orders-detail-meta-label {
  font-size: 8px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}
.emr-orders-detail-meta-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.emr-orders-detail-meta-cell.is-gross .emr-orders-detail-meta-val { color: #22c55e; }
.emr-orders-detail-meta-cell.is-rpm   .emr-orders-detail-meta-val { color: #d4af37; }

/* ── Orders detail — equipment row (commit 1) ─────────────────────
   Three horizontal equipment cards: truck, trailer, driver. */
.emr-odt-equip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.emr-odt-equip-card {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 11px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.emr-odt-equip-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.emr-odt-equip-body { min-width: 0; flex: 1; }
.emr-odt-equip-kind {
  font-size: 9px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .45px;
  text-transform: uppercase;
  line-height: 1;
}
.emr-odt-equip-id {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emr-odt-equip-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Orders detail — metrics bar (commit 1) ───────────────────────
   Four equal cells: loaded / empty / weight / est net. */
.emr-odt-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.emr-odt-metric-cell {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
  min-width: 0;
}
.emr-odt-metric-cell.is-loaded { border-color: rgba(34,197,94,.35); }
.emr-odt-metric-cell.is-empty  { border-color: rgba(156,163,175,.35); }
.emr-odt-metric-cell.is-weight { border-color: rgba(59,130,246,.30); }
.emr-odt-metric-cell.is-net    { border-color: rgba(212,175,55,.40); }
.emr-odt-metric-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .45px;
  text-transform: uppercase;
}
.emr-odt-metric-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emr-odt-metric-cell.is-loaded .emr-odt-metric-val { color: #22c55e; }
.emr-odt-metric-cell.is-empty  .emr-odt-metric-val { color: var(--text2); }

/* ── Orders detail — expenses summary (commit 1) ──────────────────
   Total line only for commit 1; donut chart slot is reserved for
   commit 2 and stays hidden until the donut renderer populates it. */
.emr-odt-exp {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.emr-odt-exp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.emr-odt-exp-total-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .45px;
  text-transform: uppercase;
}
.emr-odt-exp-total-val {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: #ef4444;
}
.emr-odt-exp-donut-slot:empty { display: none; }
.emr-odt-exp-donut-slot { margin-top: 12px; }

/* ── SWR (stale-while-revalidate) freshness stamp ───────────────────────── */
.swr-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 6px;
  vertical-align: middle;
  animation: swr-pulse 1.6s ease-in-out infinite;
}
.swr-pulse-stale {
  background: #f59e0b;
}
@keyframes swr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
.swr-stamp {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .25px;
  font-variant-numeric: tabular-nums;
}
.swr-retry {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text3);
  text-decoration: underline dotted;
  cursor: pointer;
}
.swr-retry:hover { color: var(--text1, #fff); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ DENSITY PASS (2026-06-11) ═════════════════════════════════════════
   Operator directive: "clean up layout without changing it much … some
   pages waste space, and the boards are not as dense as they could be —
   many of them waste space in the upper portions."
   Shared tightening only — same look, less chrome. Rules live at the END
   of this file so they win the cascade against the base definitions above
   at equal specificity. Legacy-class overrides keep the #main-app prefix
   (same trick as the File 8 section) so they beat dashboard.html's inline
   <style> block, which loads after this stylesheet. */

/* Panel/section headers — the single biggest upper-portion cost. Was
   14px 20px (≈63px tall with default run-btn); now ≈40px. */
#main-app .section-hdr { padding: 8px 14px; }
#main-app .section-hdr .run-btn {
  padding: 5px 12px;
  font-size: 12px;
}
#main-app .section-hdr::before { height: 14px; vertical-align: -2px; }

/* Design-system section headers (emr-ds pages) */
.emr-section-header { margin-bottom: 10px; }
.emr-section-header h1 { font-size: 18px; }
.emr-section-header h2 { font-size: 15px; }

/* Cards — 20px padding read airy on dense ops screens. */
.emr-card { padding: 16px; }
.emr-card-header { margin-bottom: 10px; }

/* KPI/metric strips at panel tops: ~110px → ~84px per strip. */
.emr-metric-grid { gap: 12px; margin-bottom: 14px; }
.emr-metric-card { padding: 12px 16px; gap: 5px; }
.emr-metric-card-value { font-size: 24px; }
.emr-metric-card-icon { width: 28px; height: 28px; font-size: 14px; }

/* Shared tables (settlements list, vendors, books, drivers, …):
   23px+ of vertical padding per row → 15px; header 11px → 7px. */
.emr-table thead th { padding: 7px 12px; }
.emr-table tbody td { padding: 8px 12px; }

/* Legacy activity/quote/lanes tables (live feed, alerts, EMR-1). */
#main-app .activity-table th { padding: 8px 12px; }
#main-app .activity-table td { padding: 8px 12px; }
#main-app .quote-table thead th { padding: 6px 10px; }
#main-app .quote-table td { padding: 6px 10px; }

/* Feed toolbar (live feed) — float chrome slimmed. */
.emr-feed-toolbar { padding: 7px 12px !important; margin: 8px 12px 4px; }
.filter-chip.emr-pill { padding: 4px 10px; }

/* Intel/report wrappers (Market, EMR-1, Reports) — top whitespace. */
#main-app .intel-wrap { padding: 16px 20px; }
#main-app .intel-hdr { padding-bottom: 10px; margin-bottom: 14px; }
#main-app .intel-title { font-size: 16px; }

/* User/dispatcher detail panels. */
#main-app .user-detail-wrap { padding: 14px 16px; }
#main-app .detail-hdr { padding-bottom: 12px; margin-bottom: 14px; }
#main-app .detail-stat { padding: 12px; }
#main-app .detail-stat-num { font-size: 22px; }

/* Sub-tab strips (Drivers / Settings / grouped pages) — slimmer strip,
   same underline-tab look. 48px → ~33px. */
.emr-admin-tabs { padding: 8px 14px 0; }
.emr-admin-tab { padding: 7px 12px; }

/* ═══════════════════════════════════════════════════════════════════
   STATUS-PILL OUTLINE PASS (2026-06-11)
   Operator directive: every status pill on the orders + manifests
   surfaces keeps its EXACT colors (yellow TONU etc.) but gains a very
   very thin black outline for readability. Implemented as an INSET
   box-shadow ring (not a border) so pill size/layout never shifts.

   Covered class selectors:
     .emr-orders-pill             orders list/detail pills (status, invoice,
                                  booking-kind, recommendation, corridor)
     .emr-status-pill             shared FSM pill component (statusPill.js —
                                  accounting STATUS / INVOICE STATUS columns)
     .emr-fmap-card-order-status  fleet-map truck card order-status chip
     .emr-pill-outline            opt-in utility for pills built with inline
                                  styles (orders card + leg pills, orders
                                  detail status <select>, manifest list badge,
                                  manifest page header/orders-tab/invoicing
                                  chips, truck board CTX + cell-drawer status
                                  chips, driver-profile order status pills)
   ═══════════════════════════════════════════════════════════════════ */
.emr-orders-pill,
.emr-status-pill,
.emr-fmap-card-order-status,
.emr-pill-outline {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}