/* ============================================================
   VIDARIA 1.1 MAP FLOATING SIDEBAR
   ------------------------------------------------------------
   Top-of-map mini-panel with drag-resize accordion (via Phase 0
   <ResizablePanel>). Tabs: Officers / Tags / Playback (when
   playback session active) / Heatmap (later).

   Naming: .vds-mfs-* — never collides with legacy
   .map-tools-sidebar / .map-command-bar selectors.

   Positioning: absolute overlay anchored top-left of the map
   container, 16px inset. z-index sits above the map tile layer
   (Leaflet/Google) but below modals + toasts.
   ============================================================ */

.vds-mfs {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 200;          /* var(--z-sidebar) */
  /* Width is now drag-resizable via the corner handle (ResizablePanel
     resizableWidth). The wrapper just sets a starting + max bound; the
     inner panel controls the live width. */
  max-width: calc(100vw - 32px);
  pointer-events: auto;
  font-family: var(--font-family);
}

/* Header strip — group name + live counts */
.vds-mfs-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--vidaria-blue);
  color: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}
/* Draggable header — grab cursor + disable native touch scroll so
   dragging the panel doesn't pan the page on touch devices. The
   switcher button + count chips remain individually clickable
   (their own pointer handlers stopPropagation isn't needed because
   onHeaderPointerDown bails when the target is inside .vds-mfs-switcher). */
.vds-mfs-header--draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.vds-mfs-header--draggable:active { cursor: grabbing; }
.vds-mfs-header-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Group switcher (Phase 2.5) ──────────────────────────── */
/* flex: 0 1 auto (not 1) so the switcher button only takes the
   width it needs — the rest of the header stays empty + draggable. */
.vds-mfs-switcher {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}
.vds-mfs-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  max-width: 100%;
  transition: background var(--transition-fast);
}
.vds-mfs-switcher-btn:hover { background: rgba(255, 255, 255, 0.2); }
.vds-mfs-switcher-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.vds-mfs-switcher-btn > svg { stroke: currentColor; flex-shrink: 0; }

/* Rendered via portal to document.body with position:fixed inline
   coords so it escapes the ResizablePanel's overflow:hidden. */
.vds-mfs-switcher-menu {
  max-width: 320px;
  max-height: 340px;          /* also capped to the viewport inline, on open */
  overflow-y: auto;
  /* Do NOT chain the scroll to the map/page when the list hits its end —
     that ancestor scroll is what used to close the menu mid-scroll. */
  overscroll-behavior: contain;
  -ms-scroll-chaining: none;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: 500;          /* above the floating panel + command bar */
  padding: 4px;
}
.vds-mfs-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.vds-mfs-switcher-item:hover { background: var(--gray-50); }
.vds-mfs-switcher-item.is-active {
  background: var(--vidaria-blue-tint, #f0f5fb);
  color: var(--vidaria-blue, #103255);
  font-weight: var(--font-weight-bold);
}
.vds-mfs-switcher-item > svg { stroke: currentColor; flex-shrink: 0; color: var(--gray-500); }
.vds-mfs-switcher-item.is-active > svg { color: var(--vidaria-blue, #103255); }
.vds-mfs-switcher-item > span:nth-child(2) {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vds-mfs-switcher-item-hint {
  font-size: 10px;
  color: var(--gray-400);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.vds-mfs-switcher-divider {
  height: 1px;
  background: var(--gray-150);
  margin: 4px 6px;
}

/* ── Vehicles subsection in the Officers tab ─────────────── */
.vds-mfs-subsection {
  margin-top: var(--space-2);
  border-top: 1px solid var(--gray-150);
  padding-top: var(--space-2);
}
.vds-mfs-subsection-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}
.vds-mfs-subsection-header > svg { stroke: currentColor; }
.vds-mfs-subsection-count {
  margin-left: auto;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--radius-full);
  padding: 0 6px;
  font-size: 10px;
}
.vds-mfs-row-avatar > svg { stroke: var(--white); }

/* All-groups officer buckets — group header before each group's officers */
.vds-mfs-group-bucket + .vds-mfs-group-bucket {
  margin-top: var(--space-2);
  border-top: 1px solid var(--gray-150);
  padding-top: var(--space-1);
}

/* ── Address bar (Phase 2.5) ──────────────────────────────── */
.vds-mfs-address {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-150);
  background: var(--gray-50);
  flex-shrink: 0;
}
.vds-mfs-address-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray-600);
}
.vds-mfs-address-row > svg { stroke: currentColor; color: var(--gray-400); flex-shrink: 0; }
.vds-mfs-address-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vds-mfs-address-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.vds-mfs-address-icon:hover { background: var(--gray-150); color: var(--vidaria-blue, #103255); }
.vds-mfs-address-icon > svg { stroke: currentColor; }

.vds-mfs-address-editwrap { display: flex; flex-direction: column; gap: 4px; }
.vds-mfs-address-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vds-mfs-address-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font-family);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
}
.vds-mfs-address-input:focus { border-color: var(--vidaria-blue, #2563eb); }
.vds-mfs-address-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  background: var(--vidaria-blue, #103255);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.vds-mfs-address-btn:hover:not(:disabled) { background: var(--vidaria-blue-hover, #0b2440); }
.vds-mfs-address-btn:disabled { opacity: 0.6; cursor: default; }
.vds-mfs-address-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  flex-shrink: 0;
}
.vds-mfs-address-cancel:hover { color: var(--danger, #ef4444); }
.vds-mfs-address-cancel > svg { stroke: currentColor; }
.vds-mfs-address-hint {
  font-size: 10px;
  color: var(--gray-500);
  line-height: 1.4;
  padding: 2px 2px 0;
}
.vds-mfs-address-hint strong { color: var(--gray-700); }

/* Confirm popup (inline, inside the address bar) */
.vds-mfs-address-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.vds-mfs-address-confirm-text {
  font-size: 11px;
  color: var(--gray-700);
  line-height: 1.4;
}
.vds-mfs-address-confirm-text strong { color: var(--gray-900); }
.vds-mfs-address-confirm-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.vds-mfs-address-cancel-btn,
.vds-mfs-address-confirm-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.vds-mfs-address-cancel-btn {
  background: var(--white);
  color: var(--gray-600);
  border-color: var(--gray-300);
}
.vds-mfs-address-cancel-btn:hover { background: var(--gray-50); }
.vds-mfs-address-confirm-btn {
  background: var(--danger, #ef4444);
  color: var(--white);
}
.vds-mfs-address-confirm-btn:hover:not(:disabled) { background: #dc2626; }
.vds-mfs-address-confirm-btn:disabled { opacity: 0.7; cursor: default; }
.vds-mfs-header-counts {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  /* Push to the far right so the gap between the switcher and the
     counts is empty header space the user can grab to drag. */
  margin-left: auto;
}
.vds-mfs-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
}
.vds-mfs-count-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tab bar */
.vds-mfs-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 0;
  background: var(--white);
  border-bottom: var(--border-light);
  flex-shrink: 0;
}
.vds-mfs-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.vds-mfs-tab:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}
.vds-mfs-tab.is-active {
  color: var(--vidaria-blue);
  border-bottom-color: var(--vidaria-blue);
  font-weight: var(--font-weight-bold);
}
.vds-mfs-tab-badge {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: var(--gray-150);
  color: var(--gray-700);
}
.vds-mfs-tab.is-active .vds-mfs-tab-badge {
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
}

/* Tab content — scrollable. flex:1 fills available height inside the
   ResizablePanel (which clips overflow at the outer frame); min-height:0
   is required so the flex child can shrink to allow its scroll to engage. */
.vds-mfs-content {
  padding: var(--space-2);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Officer / tag row */
.vds-mfs-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.vds-mfs-row:hover { background: var(--gray-50); }
.vds-mfs-row-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vidaria-blue-light);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}
.vds-mfs-row-body {
  flex: 1;
  min-width: 0;
}
.vds-mfs-row-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vds-mfs-row-meta {
  font-size: 10px;
  color: var(--gray-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.vds-mfs-row-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.vds-mfs-row-motion {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 9px;
}
.vds-mfs-row-motion.is-moving  { color: var(--vidaria-blue, #2563eb); }
.vds-mfs-row-motion.is-stopped { color: var(--gray-400); }
.vds-mfs-row-batt > svg { stroke: currentColor; }
.vds-mfs-row-seen { color: var(--gray-400); margin-left: auto; }
.vds-mfs-row-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.vds-mfs-row-status--active { background: var(--success-light); color: var(--success-text); }
.vds-mfs-row-status--idle   { background: var(--warning-light); color: var(--warning-text); }
.vds-mfs-row-status--lost   { background: var(--danger-light);  color: var(--danger-text); }
.vds-mfs-row-status--scanned { background: var(--info-light); color: var(--info-text); }
.vds-mfs-row-status--unscanned { background: var(--gray-100); color: var(--gray-600); }

/* Empty state inside floating sidebar */
.vds-mfs-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
}

/* ── Playback tab specifics ── */
.vds-mfs-pb-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: var(--space-2);
  background: var(--vidaria-blue-tint);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.vds-mfs-pb-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
}
.vds-mfs-pb-metric-val {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  line-height: 1;
}
.vds-mfs-pb-metric-lbl {
  font-size: 9px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
  text-align: center;
}

/* Scrubber row */
.vds-mfs-pb-scrubber {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.vds-mfs-pb-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--vidaria-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.vds-mfs-pb-btn:hover { background: var(--vidaria-blue-hover); }
.vds-mfs-pb-btn:disabled { background: var(--gray-300); cursor: not-allowed; }
.vds-mfs-pb-range {
  flex: 1;
  min-width: 0;
  height: 4px;
  accent-color: var(--vidaria-blue);
}
.vds-mfs-pb-speed {
  display: flex;
  gap: 2px;
}
.vds-mfs-pb-speed-btn {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 3px 6px;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  cursor: pointer;
}
.vds-mfs-pb-speed-btn.is-active {
  background: var(--vidaria-blue);
  border-color: var(--vidaria-blue);
  color: var(--white);
}

/* Location update table */
/* Playback results: flex column filling the content area so ONLY the table
   body scrolls — the back link, metrics, scrubber + labels stay static and
   the table header stays sticky. */
.vds-mfs-pb-results {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.vds-mfs-pb-results > .vds-mfs-pb-back,
.vds-mfs-pb-results > .vds-mfs-pb-metrics,
.vds-mfs-pb-results > .vds-mfs-pb-scrubber,
.vds-mfs-pb-results > .vds-mfs-pb-scrub-labels,
.vds-mfs-pb-results > .vds-mfs-pb-table-toolbar {
  flex-shrink: 0;
}

/* Updates / Stops sub-tabs + motion filters (ported from legacy command bar) */
.vds-mfs-pb-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 2px 6px;
}
.vds-mfs-pb-subtabs { display: inline-flex; gap: 4px; }
.vds-mfs-pb-subtab {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  background: var(--white, #fff);
  border-radius: var(--radius-md, 8px);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vds-mfs-pb-subtab.is-active {
  background: var(--vidaria-blue, #103255);
  border-color: var(--vidaria-blue, #103255);
  color: #fff;
}
.vds-mfs-pb-subbadge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  border-radius: 99px;
  padding: 1px 6px;
}
.vds-mfs-pb-subtab.is-active .vds-mfs-pb-subbadge { background: rgba(255, 255, 255, 0.22); }
.vds-mfs-pb-filters { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vds-mfs-pb-filter {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  background: var(--white, #fff);
  border-radius: 99px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vds-mfs-pb-filter-n { font-size: 10px; opacity: 0.7; }
.vds-mfs-pb-filter.is-active { color: #fff; border-color: transparent; }
.vds-mfs-pb-filter--all.is-active     { background: #2563eb; }
.vds-mfs-pb-filter--moving.is-active  { background: var(--success, #10b981); }
.vds-mfs-pb-filter--stopped.is-active { background: var(--danger, #ef4444); }
.vds-mfs-pb-filter--tagScans.is-active{ background: #8b5cf6; }
.vds-mfs-pb-filter.is-active .vds-mfs-pb-filter-n { opacity: 0.9; }
.vds-mfs-pb-stop-go {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--white, #fff);
  border-radius: var(--radius-sm, 6px);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--vidaria-blue, #103255);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.vds-mfs-pb-stop-go:hover { background: var(--gray-50, #f8fafc); }
.vds-mfs-pb-table-wrap {
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  background: var(--white);
  flex: 1 1 auto;
  min-height: 0;
}

/* Scrubber timestamp labels (start / current / end) */
.vds-mfs-pb-scrub-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 2px 8px;
  font-size: 10px;
  color: var(--gray-500, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.vds-mfs-pb-scrub-current {
  font-weight: 700;
  color: var(--vidaria-blue, #103255);
  text-align: center;
  flex: 1;
}
.vds-mfs-pb-scrub-edge { white-space: nowrap; }

/* Playback marker sprite picker row (2026-07-16). Sits between the scrubber
   labels and the location table. The SpritePicker's dropdown menu is portaled
   to <body>, so only the trigger button is laid out here. */
.vds-mfs-pb-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
}
.vds-mfs-pb-marker-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vds-mfs-pb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}
.vds-mfs-pb-table thead th {
  background: var(--gray-50);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px;
  text-align: left;
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.vds-mfs-pb-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
  color: var(--gray-700);
}
.vds-mfs-pb-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.vds-mfs-pb-table tbody tr:hover { background: var(--gray-50); }
/* Highlighted current-playback row — LOCKED color treatment per main plan §3.10 */
.vds-mfs-pb-table tbody tr.is-current {
  background: var(--vidaria-blue-tint);
  border-left: 3px solid var(--vidaria-blue);
}
.vds-mfs-pb-table tbody tr.is-current td:first-child {
  border-left: 3px solid var(--vidaria-blue);
  padding-left: 5px;   /* compensate for border */
}
.vds-mfs-pb-table-mode {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
}
/* Motion-mode dot colors — distinct per activity type. */
.vds-mfs-pb-table-mode--moving  { background: var(--success, #10b981); }
.vds-mfs-pb-table-mode--walking { background: #14b8a6; }            /* teal */
.vds-mfs-pb-table-mode--driving { background: var(--vidaria-blue, #2563eb); }
.vds-mfs-pb-table-mode--stopped { background: var(--danger, #ef4444); }
.vds-mfs-pb-table-mode--idle    { background: var(--warning, #f59e0b); }
.vds-mfs-pb-table-mode--tagScan { background: #8b5cf6; }            /* violet */

.vds-mfs-pb-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vds-mfs-pb-coord {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--gray-500);
}
.vds-mfs-pb-officer {
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--font-weight-medium);
}

/* Status badge in the playback table */
.vds-mfs-pb-status {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.vds-mfs-pb-status--moving  { background: rgba(16, 185, 129, 0.14); color: #059669; }
.vds-mfs-pb-status--walking { background: rgba(20, 184, 166, 0.14); color: #0d9488; }
.vds-mfs-pb-status--driving { background: rgba(37, 99, 235, 0.12);  color: #2563eb; }
.vds-mfs-pb-status--stopped { background: rgba(239, 68, 68, 0.12);  color: #dc2626; }
.vds-mfs-pb-status--idle    { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.vds-mfs-pb-badge--scan {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.14);
  color: #7c3aed;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Stopped rows read slightly muted so motion stands out. */
.vds-mfs-pb-table tbody tr.is-stopped td { color: var(--gray-500); }
.vds-mfs-pb-table tbody tr.is-scan td { background: rgba(139, 92, 246, 0.04); }

/* GPS outliers (2026-07-15) — multipath fixes that report good accuracy but
   are geometrically implausible. Excluded from the trail, the playback sprite
   and the metrics, but still LISTED so support can see the ping was received
   and why it was discarded (hover the row for the reason). Struck through +
   faded rather than hidden: this is an audit surface, not a cosmetic filter. */
.vds-mfs-pb-table tbody tr.is-gps-outlier td {
  color: var(--gray-400);
  text-decoration: line-through;
  text-decoration-color: var(--danger-text, #dc2626);
  opacity: 0.75;
}
/* Keep the current-row highlight legible if the cursor lands on an outlier. */
.vds-mfs-pb-table tbody tr.is-gps-outlier.is-current td {
  opacity: 1;
}

/* ── Playback pickers (Step 1) ────────────────────────────── */
.vds-mfs-pb-pickers {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Staff / License segmented toggle */
.vds-mfs-pb-seg {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
}
.vds-mfs-pb-seg-btn {
  flex: 1;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.vds-mfs-pb-seg-btn.is-active {
  background: var(--white);
  color: var(--vidaria-blue, #103255);
  box-shadow: var(--shadow-xs);
}
.vds-mfs-pb-select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font-family);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  outline: none;
}
.vds-mfs-pb-select:focus { border-color: var(--vidaria-blue, #2563eb); }
.vds-mfs-pb-hint { font-size: 10px; color: var(--gray-400); margin-top: -4px; }

.vds-mfs-pb-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.vds-mfs-pb-preset {
  flex: 1 0 auto;
  min-width: 44px;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.vds-mfs-pb-preset:hover { border-color: var(--vidaria-blue, #2563eb); color: var(--vidaria-blue, #2563eb); }

.vds-mfs-pb-dates {
  display: flex;
  gap: 8px;
}
.vds-mfs-pb-date {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vds-mfs-pb-date > span {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vds-mfs-pb-date > input,
.vds-mfs-pb-date .vds-mfs-pb-dp-input {
  height: 30px;
  width: 100%;
  padding: 0 6px;
  font-size: 11px;
  font-family: var(--font-family);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}
.vds-mfs-pb-date > input:focus,
.vds-mfs-pb-date .vds-mfs-pb-dp-input:focus { border-color: var(--vidaria-blue, #2563eb); }
/* react-datepicker wrapper must fill the label column. */
.vds-mfs-pb-date .react-datepicker-wrapper { width: 100%; }
/* The portal'd calendar floats above everything. */
#vds-mfs-datepicker-portal .react-datepicker-popper { z-index: 600 !important; }

.vds-mfs-pb-load {
  width: 100%;
  height: 34px;
  background: var(--vidaria-blue, #103255);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.vds-mfs-pb-load:hover:not(:disabled) { background: var(--vidaria-blue-hover, #0b2440); }
.vds-mfs-pb-load:disabled { opacity: 0.5; cursor: default; }

/* Back-to-pickers row in the results view */
.vds-mfs-pb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 8px 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--vidaria-blue, #2563eb);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.vds-mfs-pb-back:hover { background: var(--vidaria-blue-tint, #f0f5fb); }
.vds-mfs-pb-back > svg { stroke: currentColor; }

/* Phase 2.6 — tag placement inside the Tags tab (Add-Tag tool) */
.vds-mfs-tag-instructions {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--vidaria-blue, #103255);
    line-height: 1.4;
}
.vds-mfs-row--selected {
    background: rgba(37, 99, 235, 0.08);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
}
.vds-mfs-row--selected .vds-mfs-row-status {
    color: var(--accent-blue, #2563eb);
    font-weight: 700;
}