h1 { font-family: Arial, Helvetica, sans-serif; }

/* ── History slide-over drawer ─────────────────────────────────────────────
   position:fixed is broken inside Geotab's transformed iframe (it anchors
   to the transformed container, not the screen, so it renders inline).
   Instead we use position:absolute relative to <body>.
   openHistory() calls document.body.appendChild(panel) so the panel is
   always the last child of body (highest stacking order), then sizes it
   to body.scrollWidth / scrollHeight via JS.                               */

#history-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
#history-panel.open {
  display: block;
}
body.history-open {
  position: relative;
  overflow: hidden;
}
#history-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
#history-drawer {
  position: absolute;
  top: 0;      /* overridden by JS: headerBottom px */
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: #fff;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}