/*
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  TESLA PORTAL — web/styles.css                                       ║
 * ║  Enforces automotive-grade gesture lock-downs for Chromium/Linux.    ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Document root ──────────────────────────────────────────────────────── */
html {
  /*
   * GESTURE LOCK-DOWN #1 — Disable pull-to-refresh & browser panning.
   *
   * `touch-action: none` would block ALL touch events from reaching Flutter,
   * so we use `manipulation` which:
   *   • Keeps tap and pinch-to-zoom gestures routed to the app.
   *   • Suppresses the 300 ms double-tap zoom delay (no FastClick needed).
   *   • Blocks browser-level swipe-to-navigate (back/forward) in Chromium.
   *   • Does NOT block Flutter's own GestureDetectors.
   *
   * Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
   */
  touch-action: manipulation;

  /*
   * GESTURE LOCK-DOWN #2 — Kill scroll/overflow at the document level.
   *
   * Prevents:
   *   • Vertical pull-to-refresh bounce on Chromium/Android-lineage.
   *   • Horizontal rubber-band scroll that would expose white gutters.
   *   • Any accidental scroll that would reveal the browser chrome.
   */
  overflow: hidden;

  /* Pure black background — blends with the vehicle's screen bezel. */
  background-color: #000000;

  /*
   * Prevent text-size inflation that Chromium sometimes applies on
   * "mobile-like" viewports — preserves Flutter's layout calculations.
   */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Disable the tap highlight rectangle seen on older Chromium builds. */
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow: hidden;
  background-color: #000000;

  /*
   * Disable user selection on all body content.
   * On a touch screen in a moving vehicle, accidental long-press text
   * selection is a distraction and safety hazard.
   */
  -webkit-user-select: none;
  user-select: none;

  /*
   * Disable the context menu on long-press (shows "Inspect Element" etc.
   * in the Tesla Chromium build, which must never be surfaced to drivers).
   */
  -webkit-touch-callout: none;
}

/* ── Flutter canvas host ────────────────────────────────────────────────── */
/*
 * CanvasKit renders into a <canvas> or <flt-glass-pane>.  Force both to fill
 * the full viewport without overflow so there is no scroll surface at all.
 */
flt-glass-pane,
flt-glass-pane * {
  overflow: hidden !important;
}

canvas {
  display: block; /* removes the inline baseline gap */
}

/* ── Loading screen ─────────────────────────────────────────────────────── */
/*
 * Shown before CanvasKit WASM finishes compiling (~1-3 s on MCU2).
 * Flutter removes / hides this element once the first frame is painted.
 */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  gap: 24px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#loading.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Simple Tesla-branded spinner */
#loading-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #e82127; /* Tesla red */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}