/*
 * The map used to be given a fixed "81.5vh"/"83vh" height, guessed for one
 * screen size — on a shorter laptop screen it could run past the bottom of
 * the viewport, on a tall desktop monitor it left a dead gap. Switched to a
 * flex layout instead: the page fills the exact space below the app header
 * (var(--header-h), from themes/tokens.css), the page head and the toolbar
 * keep their natural height, and the map stretches to fill whatever is
 * left — correct on any device/viewport height, no guessed numbers.
 */
.vr-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
}

.vr-page > .rd-pagehead {
  flex: 0 0 auto;
}

.vr-page > .vr-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vr-page .vr-frame > div:first-child {
  flex: 0 0 auto;
}

.vr-page .vr-frame > .vr-map-area {
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * VehicleReplayComponent (/vehicle-replay) — restructured to match the
 * reference app's compact replay layout: a single filter toolbar row above
 * the map (reusing the shared .rd-toolbar/.rpt-field/.rd-fg/.btn.ghost
 * classes from page-head-redesign.css, same as VehicleAlertComponent), plus
 * a new floating white toolbar docked over the map itself for the
 * play/pause/stop/speed controls and the Overspeed/Events/Show POI/Show
 * Summary toggles (previously plain checkboxes/switches in the old
 * toolbar), now compact icon buttons.
 */

/* Filter toolbar + map combined into a single white framed card (per user
   request — they were previously two separate, visually disconnected
   elements). The toolbar keeps a bottom border as its own header strip;
   the map fills the rest of the frame, corners clipped to match. */
.vr-frame {
  margin: 0 20px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vr-frame .rd-toolbar {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.vr-map-toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  padding: 6px 10px;
  font-family: var(--font-family-base);
}

.vr-map-toolbar .vr-maptype-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}

.vr-map-toolbar .vr-maptype-btn {
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.vr-map-toolbar .vr-maptype-btn.active {
  background: #3b5bfd;
  color: #ffffff;
}

.vr-map-toolbar .vr-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.vr-map-toolbar .vr-icon-btn:hover {
  background: #f1f5f9;
}

.vr-map-toolbar .vr-icon-btn.active {
  background: rgba(6, 182, 212, 0.12);
  border-color: #06b6d4;
  color: #06b6d4;
}

.vr-map-toolbar .vr-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.vr-map-toolbar .vr-replay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vr-map-toolbar .vr-transport {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}

.vr-map-toolbar .vr-transport button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vr-map-toolbar .vr-transport button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.vr-map-toolbar .vr-divider {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.vr-map-toolbar select.vr-speed-select {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  flex-shrink: 0;
}

/* Smaller filter-row text, scoped to this page's toolbar only (doesn't
   touch the shared .rd-toolbar/.rpt-label/.btn.ghost classes used
   elsewhere). */
.vr-frame .rd-toolbar,
.vr-frame .rd-toolbar .rpt-label,
.vr-frame .rd-toolbar .btn.ghost,
.vr-frame .rd-toolbar .vr-pill-select,
.vr-frame .rd-toolbar .dx-texteditor-input,
.vr-frame .rd-toolbar .rd-fg input,
.vr-frame .rd-toolbar .text-primary {
  font-size: 0.75rem;
}

/* Vehicle search box — borderless/boxless, just the icon + input sitting
   flush in the toolbar (no visible box around it). */
.vr-search-fg {
  border: none;
  background: transparent;
  padding: 4px 0;
}

/* The "Preview" dropdown (Pinned/Animated) in the top toolbar — same pill
   look as the reference's "Animated" dropdown. */
.vr-pill-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 0.82rem;
  background: #ffffff;
  min-height: 36px;
}