/* Shared contrast and map chrome. No layout, route or status calculations.
 * Pictograms use the existing menu SVG family; semantic borders and data
 * labels retain their meaning. Map tokens also reach body-mounted drawers. */
:root {
  /* Native pickers follow the selected app theme, including body drawers. */
  color-scheme: light;
  --emr-map-bg: #ffffff;
  --emr-map-ink: #171717;
  --emr-map-border: #595959;
  --emr-map-hover: #ededed;
  --emr-map-shadow: 0 1px 4px #00000045;
}
html:is([data-theme="dark"],[data-theme="dim"]) {
  color-scheme: dark;
  --emr-map-bg: #1b1b1b;
  --emr-map-ink: #f5f5f5;
  --emr-map-border: #858585;
  --emr-map-hover: #2d2d2d;
}

/* Useful secondary text remains legible on deeper surfaces. Placeholders
 * are hints, but they still identify a search field before typing. */
html:is([data-theme="dark"],[data-theme="dim"]) :is(input, textarea)::placeholder {
  color: var(--emr-input-placeholder);
  opacity: 1;
}
html :is(.emr-input, .emr-select, .emr-textarea, .btn, .emr-btn):focus-visible {
  outline: 2px solid var(--emr-text);
  outline-offset: 2px;
}
html:is([data-theme="dark"],[data-theme="dim"]) :is(.btn, .emr-btn):disabled {
  opacity: 1;
  color: var(--emr-text-faint);
  background: var(--emr-bg-subtle);
  border-color: var(--emr-border-strong);
  box-shadow: none;
  cursor: not-allowed;
}
html:is([data-theme="dark"],[data-theme="dim"]) :is(.emr-fmap-search, .emr-fmap-select) {
  background: var(--emr-input-bg);
  color: var(--emr-input-text);
  border-color: var(--emr-input-border);
}
html:is([data-theme="dark"],[data-theme="dim"]) .dispatch-load-nav button:disabled {
  opacity: 1;
  color: var(--emr-text-faint);
  background: var(--emr-bg-subtle);
  border-color: var(--emr-border);
}
/* Tint badges need a brighter foreground; solid status fills keep their
 * existing foreground/background pair and never inherit these rules. */
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-red { color: #fca5a5; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-green { color: #86efac; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-cyan { color: #67e8f9; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-yellow { color: #fcd34d; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-purple { color: #d8b4fe; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-badge-blue { color: #93c5fd; }
/* Dedicated decorative slots only: values, card rails and status badges
 * continue to communicate state. Some existing slots set inline colors. */
.emr-metric-card-top > .emr-metric-card-icon {
  color: var(--emr-text-muted) !important;
  background: transparent !important;
  box-shadow: none;
}
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-filter {
  background: var(--emr-bg-muted);
  color: var(--emr-text);
  border-right-color: var(--emr-border-strong);
}
/* The drawer and collapsed filter button share neutral map chrome.
 * Status fills, active accents and warning labels retain their own colors. */
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-card {
  background: var(--emr-bg-muted);
  color: var(--emr-text);
  border-left-color: var(--emr-border-strong);
}
html:is([data-theme="dark"],[data-theme="dim"]) :is(.emr-fmap-card-head, .emr-fmap-card-tabs, .emr-fmap-card-section, .emr-fmap-card-actions) {
  border-color: var(--emr-border-strong);
}
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-card::-webkit-scrollbar-thumb { background: var(--emr-border-strong); }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-hamburger {
  background: var(--emr-map-bg);
  color: var(--emr-map-ink);
  border-color: var(--emr-map-border);
}
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-hamburger:hover { background: var(--emr-map-hover); }
html:is([data-theme="dark"],[data-theme="dim"]) #fmap-container .leaflet-container { background: var(--emr-map-bg); }
html :is(#fmap-radar-play, #fmap-radar-slider):focus-visible {
  outline: 2px solid var(--emr-map-ink);
  outline-offset: 2px;
}
/* These existing card surfaces remain opaque dark in both themes. */
html :is(.emr-fmap-hamburger, .emr-fmap-card-close, .emr-fmap-card-tab, .emr-fmap-card-btn):focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 2px;
}
html:is([data-theme="dark"],[data-theme="dim"]) :is(.emr-fmap-label, .emr-fmap-select-arrow, .emr-fmap-toggle-label) { color: var(--emr-text-subtle); }
html .emr-fmap-search-icon { opacity: 1; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-empty { background: #111111f2; }
html:is([data-theme="dark"],[data-theme="dim"]) .emr-fmap-empty .emr-fmap-empty-msg[data-variant="empty"] { color: var(--emr-text-subtle); }
/* Foregrounds come from the existing truck-board contrast helper. */
html :is(.emr-fmap-preview-status, .emr-fmap-card-status) { font-size: 10px; }
/* Map previews intentionally use an opaque dark surface on both basemaps. */
html .emr-fmap-preview-driver { color: #f5f5f5; --text3: #b8b8b8; }
html :is(.emr-fmap-preview-loc, .emr-fmap-preview-lane, .emr-fmap-preview-reefer) { color: #d6d6d6; }
html .emr-fmap-preview-hint { color: #b8b8b8; font-size: 10px; }

/* Icons need explicit dimensions: ui-modern's .emr-ic uses 1em. */
html .emr-map-vehicle-chip, html .emr-map-endpoint, html .emr-fmap-vehicle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--emr-map-bg);
  color: var(--emr-map-ink);
  border: 1.5px solid var(--emr-map-border);
  border-radius: 6px;
  box-shadow: var(--emr-map-shadow);
  line-height: 1;
}
:is(.emr-map-vehicle-chip, .emr-fmap-vehicle, .emr-map-fuel-glyph) > .emr-ic {
  width: 18px;
  height: 18px;
  flex: none;
}
.emr-map-endpoint { width: 24px; height: 24px; font: 800 11px/1 var(--mono, monospace); }
html .emr-map-crossing { width: 20px; height: 20px; border-radius: 4px; cursor: pointer; }
.emr-map-crossing > .emr-ic { width: 15px; height: 15px; }
html .emr-fmap-vehicle {
  position: relative;
  width: 28px;
  height: 26px;
  border: 2px solid var(--emr-map-status, var(--emr-map-border));
}
.emr-fmap-vehicle.is-stopped { border-radius: 7px; }
.emr-fmap-vehicle.is-moving { border-radius: 4px; }
.emr-fmap-vehicle.is-pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid var(--emr-map-status, var(--emr-map-border));
  border-radius: 8px;
  animation: emrFmapMarkerPulse 1.6s ease-out infinite;
  pointer-events: none;
}
.emr-fmap-heading { position: absolute; inset: -7px; pointer-events: none; }
.emr-fmap-heading::before {
  content: '';
  position: absolute;
  top: -2px;
  left: calc(50% - 4px);
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--emr-map-ink);
  border-left: 2px solid var(--emr-map-ink);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 1px var(--emr-map-bg));
}
/* Shared truck map marker: its CSS ships inside js/components/truckIcon.js (injected once), so the broker portal
 * and any page without this sheet render it identically. */
.emr-fmap-marker.is-selected .emr-fmap-vehicle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html .emr-fmap-marker-label {
  font-size: 11px;
  letter-spacing: .15px;
  color: var(--emr-map-ink);
  background: var(--emr-map-bg);
  border-color: var(--emr-map-border);
  box-shadow: var(--emr-map-shadow);
}
html .emr-fmap-marker.is-selected .emr-fmap-marker-label {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
html .emr-fmap-marker-reefer { font-size: 10px; border-color: var(--emr-map-bg); }
html .emr-fmap-cluster {
  background: var(--emr-map-bg);
  color: var(--emr-map-ink);
  border-width: 3px;
  box-shadow: var(--emr-map-shadow);
}
html .emr-fmap-facility { border-radius: 6px; width: 24px; height: 24px; border-color: var(--emr-map-border); }
html .emr-fmap-mini-truck.emr-map-vehicle-chip { width: 18px; height: 18px; border-color: var(--accent); background: var(--emr-map-bg); color: var(--emr-map-ink); }
.emr-fmap-mini-truck.emr-map-vehicle-chip > .emr-ic { width: 13px; height: 13px; }
html .emr-fmap-mini-truck.is-oor { border-color: #ef4444; }
.emr-mfp-truck-live > .emr-map-vehicle-chip { position: relative; width: 26px; height: 26px; }
.emr-mfp-truck-live > .emr-mfp-truck-pulse { background: color-mix(in srgb, var(--emr-map-ink) 35%, transparent); }
.emr-map-mini-position { width: 22px; height: 22px; }
.emr-map-mini-position > .emr-ic { width: 16px; height: 16px; }
.emr-orders-inline-truck .emr-map-vehicle-chip { width: 22px; height: 22px; }
.emr-orders-inline-truck .emr-map-vehicle-chip > .emr-ic { width: 16px; height: 16px; }

.emr-map-fuel-pin {
  position: absolute; left: 4px; top: 0; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--emr-map-bg); border: 2px solid var(--emr-map-border);
  box-shadow: var(--emr-map-shadow);
}
.emr-map-fuel-glyph {
  position: absolute; left: 0; top: 5px; width: 38px; height: 24px;
  display: flex; align-items: center; justify-content: center; color: var(--emr-map-ink);
}
.emr-map-fuel-label {
  position: absolute; left: -12px; top: 32px; width: 62px; text-align: center;
  font: 700 11px/14px var(--sans, system-ui); color: var(--emr-map-ink);
  background: var(--emr-map-bg); border: 1px solid var(--emr-map-border); border-radius: 4px; padding: 1px 0;
}

/* Existing Leaflet control dimensions and click handlers remain unchanged. */
html :is(.emr-fmap-sat-btn, .emr-orders-inline-map-sat, .mfp-map-ctrls button, .mfp-map-nearby-controls > button) {
  background: var(--emr-map-bg);
  color: var(--emr-map-ink);
  border-color: var(--emr-map-border);
  box-shadow: var(--emr-map-shadow);
}
html :is(.emr-fmap-sat-btn, .emr-orders-inline-map-sat, .mfp-map-ctrls button):hover { background: var(--emr-map-hover); }
html :is(.emr-fmap-sat-btn, .emr-orders-inline-map-sat, .mfp-map-ctrls button)[aria-pressed="true"] { outline: 2px solid var(--emr-map-ink); outline-offset: -3px; }
html :is(.emr-fmap-sat-btn, .emr-orders-inline-map-sat, .mfp-map-ctrls button, .mfp-map-nearby-controls button, .leaflet-bar a):focus-visible {
  outline: 2px solid var(--emr-map-ink);
  outline-offset: 2px;
}
:is(.emr-fmap-sat-btn, .emr-orders-inline-map-sat, .mfp-map-ctrls, .mfp-map-nearby-controls) .emr-ic { width: 17px; height: 17px; }
html .leaflet-bar a { background: var(--emr-map-bg); color: var(--emr-map-ink); border-bottom-color: var(--emr-map-border); }
html .leaflet-bar a:hover { background: var(--emr-map-hover); }
html .leaflet-bar a.leaflet-disabled { color: var(--emr-text-faint); background: var(--emr-map-bg); }
html .mfp-map-nearby-chip {
  background: var(--emr-map-bg); color: var(--emr-map-ink); border: 1px solid var(--emr-map-border);
  border-radius: 5px; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; white-space: nowrap; padding: 0 5px;
}
html .mfp-map-eta {
  background: var(--emr-map-bg); color: var(--emr-map-ink); border: 1px solid var(--emr-map-border);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
}
html .scfm-marker.emr-map-vehicle-chip, html .scfm-alert.emr-map-vehicle-chip { background: var(--emr-map-bg); color: var(--emr-map-ink); }
html .scfm-atrisk-badge { display: flex; align-items: center; justify-content: center; gap: 3px; }
html :is(.scfm-atrisk-badge, .scfm-riskunit-badge) { color: #171717; }
.scfm-atrisk-badge .emr-ic { width: 11px; height: 11px; }

@media (prefers-reduced-motion: reduce) {
  .emr-fmap-vehicle.is-pulse::after { animation: none; opacity: .6; }
}

/* Drivers overview: roster and adoption share a row; expanded names stay below.
   Wrap at group boundaries when space is limited, never clip a count/control. */
.drv-overview {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  padding:6px 16px; flex-shrink:0;
  background:var(--bg2); border-bottom:1px solid var(--border);
  font-size:11px; color:var(--text3);
}
.drv-overview #drv-list-summary { white-space:nowrap; }
.drv-overview #drv-funnel-panel { display:contents; }
.drv-overview .drv-funnel-summary { margin-left:auto; white-space:nowrap; }
.drv-overview .drv-funnel-details { flex-basis:100%; min-width:0; }
@media (max-width:700px) {
  .drv-overview #drv-list-summary, .drv-overview .drv-funnel-summary {
    display:flex; flex-wrap:wrap; align-items:center; min-width:0;
    white-space:normal; line-height:1.8; margin-left:0;
  }
  .drv-overview .drv-funnel-summary { flex-basis:100%; }
  .drv-overview .drv-funnel-details { overflow-x:auto; }
}

/* FRONTEND-CONSISTENCY-20260919 — shared office controls and hierarchy.
 * Paint only: preserve typography metrics, dimensions, placement, visibility,
 * scrolling, handlers, semantic row fills and the approved sidebar. Keep the
 * scope on workspace panels and canonical dialogs; maps and SIMON retain
 * their own controls. No new stylesheet or parallel component vocabulary. */
:root {
  --emr-control-shadow: 0 1px 2px #0000000a;
  --emr-control-pressed: inset 0 1px 3px #00000018;
  --emr-dialog-shadow: 0 16px 48px #00000029, 0 2px 8px #00000012;
  --emr-control-danger: #b91c1c;
  --emr-control-danger-hover: #991b1b;
  --emr-control-on-danger: #ffffff;
}
html:is([data-theme="dark"],[data-theme="dim"]) {
  --emr-control-shadow: 0 1px 2px #00000033;
  --emr-control-pressed: inset 0 1px 3px #00000055;
  --emr-dialog-shadow: 0 16px 48px #00000066, 0 2px 8px #00000033;
  --emr-control-danger: #fca5a5;
  --emr-control-danger-hover: #fecaca;
  --emr-control-on-danger: #450a0a;
}

/* Stable targets: color and inset feedback, without the global scale/brightness
 * effect. Limit this to named push controls, never positioned map buttons. */
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn, .emr-btn, .ctrl-btn, .run-btn, .import-btn) {
  transition: background-color .12s ease, border-color .12s ease,
              color .12s ease, box-shadow .12s ease;
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn, .emr-btn, .ctrl-btn, .run-btn, .import-btn):is(:hover, :active):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  transform: none;
  filter: none;
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn, .emr-btn, .ctrl-btn, .run-btn, .import-btn):active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  transform: none;
  box-shadow: var(--emr-control-pressed);
}

/* Secondary actions stay neutral. Gold remains the primary-action and
 * selected-navigation accent; error/success controls keep their own meaning. */
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn-secondary, .emr-btn-secondary):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  background: var(--emr-bg);
  color: var(--emr-text);
  border-color: var(--emr-border-strong);
  box-shadow: var(--emr-control-shadow);
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn-secondary, .emr-btn-secondary):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  background: var(--emr-bg-subtle);
  color: var(--emr-text);
  border-color: var(--emr-text-subtle);
}
/* components.css's generic .btn:hover outranks .btn-danger at rest. Give
 * destructive actions an explicit hover pair with readable contrast in
 * both themes. These tokens never affect status badges or financial cells. */
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn-danger, .emr-btn-danger):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  background: var(--emr-control-danger);
  color: var(--emr-control-on-danger);
  border-color: var(--emr-control-danger);
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn-danger, .emr-btn-danger):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  background: var(--emr-control-danger-hover);
  border-color: var(--emr-control-danger-hover);
}

/* The same inset focus ring survives clipped toolbars and modal scroll areas.
 * No pointer-events or disabled attributes change. */
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn, .emr-btn, .ctrl-btn, .run-btn, .import-btn,
      .emr-input, .emr-select, .emr-textarea):focus-visible {
  outline: 2px solid var(--emr-text);
  outline-offset: -3px;
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn-danger, .emr-btn-danger):focus-visible {
  outline-color: var(--emr-control-on-danger);
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.btn, .emr-btn):disabled {
  opacity: 1;
  color: var(--emr-text-faint);
  background: var(--emr-bg-subtle);
  border-color: var(--emr-border-strong);
  box-shadow: none;
  cursor: not-allowed;
}
html :is(.panel, .modal-wrapper, .emr-modal)
  :is(.emr-input, .emr-textarea)::placeholder {
  color: var(--emr-input-placeholder);
  opacity: 1;
}

/* Selected tabs have a persistent underline, distinct from hover. Keep each
 * renderer's text, active class, existing border, size and tab routing. */
html .panel :is(.emr-admin-tab, .fa-main-tab, .fa-ud-tab,
  .emr-orders-detail-tab, .emr-orders-inline-tab):is(.active, .is-active) {
  color: var(--emr-text);
  box-shadow: inset 0 -2px 0 var(--emr-gold);
}
html .panel :is(.emr-admin-tab, .fa-main-tab, .fa-ud-tab,
  .emr-orders-detail-tab, .emr-orders-inline-tab):focus-visible {
  outline: 2px solid var(--emr-text);
  outline-offset: -3px;
}

/* Plain summary cards should read as information, not floating buttons.
 * Explicit click targets keep their existing interaction affordance. */
html .panel :is(.kpi-card, .stat-card):not(button):not(a):not([onclick]):not([role="button"]):not([tabindex]):hover {
  transform: none;
  box-shadow: var(--emr-control-shadow);
}
html .panel :is(.kpi-label, .detail-stat-label, .emr-field-label) {
  color: var(--emr-text-muted);
}
html .panel .section-hdr {
  border-bottom-color: var(--emr-border);
}
/* Canonical dialogs: quieter depth, consistent separation from the workspace.
 * Width, centering transforms, overlay opacity and z-index remain untouched. */
html .modal-wrapper { box-shadow: var(--emr-dialog-shadow); }

@media (prefers-reduced-motion: reduce) {
  html :is(.panel, .modal-wrapper, .emr-modal)
    :is(.btn, .emr-btn, .ctrl-btn, .run-btn, .import-btn) { transition: none; }
}