.replay-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #0f172a;
  color: #f1f5f9;
}

.replay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background-color: #1e293b;
  border-bottom: 1px solid #334155;
}

.replay-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.replay-back-button {
  padding: 0.5rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

.replay-back-button:hover {
  color: #f1f5f9;
}

.replay-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.replay-subtitle {
  font-size: 0.875rem;
  color: #94a3b8;
  margin: 0;
}

.replay-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.view-toggle {
  display: flex;
  gap: 0.5rem;
  background-color: #334155;
  padding: 0.25rem;
  border-radius: 0.375rem;
}

.view-toggle-button {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s;
}

.view-toggle-button.active {
  background-color: #3b82f6;
  color: white;
}

.replay-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.replay-view-area {
  flex: 1;
  position: relative;
  background-color: #0f172a;
}

.replay-3d-view,
.replay-2d-map {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.replay-3d-view.hidden,
.replay-2d-map.hidden {
  display: none;
}

.view-placeholder {
  text-align: center;
  color: #64748b;
}

.view-placeholder-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

.replay-gauges-panel {
  width: 400px;
  background-color: #1e293b;
  border-left: 1px solid #334155;
  overflow-y: auto;
}

.gauges-section {
  padding: 1.5rem;
  border-bottom: 1px solid #334155;
}

.gauges-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}

.gauges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gauge-wrapper {
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}

.gauge-label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.gauge-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  font-family: monospace;
}

.gauge-unit {
  font-size: 0.875rem;
  color: #64748b;
  margin-left: 0.25rem;
}

.gauge-large {
  grid-column: span 2;
}

.gauge-canvas {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background-color: #1e293b;
  border: 2px solid #334155;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.replay-timeline {
  background-color: #1e293b;
  border-top: 1px solid #334155;
  padding: 1rem 1.5rem;
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.playback-button {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.playback-button:hover {
  background-color: #2563eb;
}

.timeline-time {
  font-size: 0.875rem;
  color: #94a3b8;
  font-family: monospace;
}

.timeline-speed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.speed-label {
  font-size: 0.875rem;
  color: #94a3b8;
}

.speed-value {
  font-family: monospace;
  font-weight: 600;
  color: #f1f5f9;
}

.timeline-bar {
  height: 8px;
  background-color: #334155;
  border-radius: 0.25rem;
  position: relative;
  cursor: pointer;
}

.timeline-progress {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 0.25rem;
  transition: width 0.1s linear;
}

.timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: white;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  cursor: grab;
}

.timeline-marker:active {
  cursor: grabbing;
}

.flight-phases {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.phase-label {
  padding: 0.25rem 0.75rem;
  background-color: #334155;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  color: #94a3b8;
}

.phase-label.active-phase {
  background-color: #3b82f6;
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-item {
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 1rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f1f5f9;
}

.alert-banner {
  background-color: #991b1b;
  border: 1px solid #dc2626;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alert-banner.warning {
  background-color: #92400e;
  border-color: #f59e0b;
}

.alert-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #fca5a5;
}

.alert-banner.warning .alert-icon {
  color: #fbbf24;
}

.alert-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fecaca;
}

.alert-banner.warning .alert-text {
  color: #fde68a;
}

/* Camera mode buttons (Follow / HUD) — lower-right of 3D container */
.cam-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #334155;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    backdrop-filter: blur(8px);
}

.cam-mode-btn:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #475569;
    color: #e2e8f0;
}

.cam-mode-btn.cam-mode-active {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #60a5fa;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

.cam-mode-btn.cam-mode-active:hover {
    background: rgba(59, 130, 246, 0.35);
    color: #93bbfc;
}

/* HUD overlay canvas */
#hud-overlay-canvas {
    image-rendering: auto;
}

/* ── Diagnostic Telemetry Panel ── */
#diag-panel {
    max-height: 200px;
    overflow-y: auto;
    background: #0d0d12;
    border: 1px solid #334155;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

#diag-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 10px;
    line-height: 1.3;
}

#diag-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #1a1a24;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 5px;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

#diag-table tbody td {
    padding: 2px 5px;
    color: #e2e8f0;
    white-space: nowrap;
    border-bottom: 1px solid #1e1e2e;
}

#diag-table tbody tr:nth-child(even) {
    background: #12121a;
}

#diag-table tbody tr:nth-child(odd) {
    background: #0d0d12;
}

#diag-table tbody tr:last-child {
    background: #1a1a2e;
}

#diag-table td.diag-zero {
    color: #ef4444;
}

.diag-btn {
    padding: 0.25rem 0.5rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1px solid #334155;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.diag-btn:hover {
    border-color: #475569;
    color: #94a3b8;
}

.diag-btn.diag-active {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
}

/* CesiumJS viewer inside replay container — hide default UI chrome */
.replay-3d-view .cesium-viewer-bottom,
.replay-3d-view .cesium-viewer-toolbar {
  display: none;
}

.replay-3d-view .cesium-viewer {
  width: 100%;
  height: 100%;
}

/* Tailwind responsive utility — the gauge panel uses "hidden md:block"
   but Tailwind JIT isn't running, so we provide the rule here. */
@media (min-width: 768px) {
  .md\:block { display: block; }
}

/* ──────────────────────────────────────────────────────────────────────
   Suppress the Blazor "Reconnecting…" modal on the replay page.

   The page is @rendermode InteractiveServer (a handful of @onclick
   handlers still flow through the circuit: HandlePlayPause / SkipBack
   / Settings / etc.), but everything load-bearing for playback runs in
   plain JS via window.ReplayInterop — Cesium / Babylon / MapboxGL /
   qfi gauges all drive their own animation loops. When the user lets
   the page sit, the SignalR connection times out and Blazor injects a
   full-viewport overlay that screams "Reconnecting" even though the
   user isn't actually doing anything that needs the server.

   blazor.web.js auto-reconnects in the background regardless of UI
   visibility, so hiding the modal here doesn't break the @onclick
   handlers — they queue while disconnected and run as soon as the
   circuit reattaches. The user just stops seeing a spurious "lost
   connection" panic on a page they're scrubbing client-side.

   Targets both the v1 selector (#components-reconnect-modal) and the
   newer .blazor-reconnect class so it survives a Blazor minor bump. */
#components-reconnect-modal,
.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected,
.blazor-reconnect-modal {
    display: none !important;
}