/* ==========================================================================
   FlyHub — Live Video & Telemetry, Core CSS Design
   ========================================================================== */

:root {
  /* Color Palette - Aerospace Dark Tactical Theme */
  --bg-darkest: #07090e;
  --bg-main: #0c1017;
  --bg-panel: rgba(15, 22, 33, 0.85);
  --bg-panel-border: rgba(0, 240, 255, 0.18);
  --bg-panel-hover: rgba(20, 30, 48, 0.9);
  --bg-card: rgba(22, 32, 50, 0.6);
  
  --accent-cyan: #00f0ff;
  --accent-cyan-glow: rgba(0, 240, 255, 0.35);
  --accent-green: #00ff88;
  --accent-green-glow: rgba(0, 255, 136, 0.35);
  --accent-yellow: #ffb700;
  --accent-red: #ff3366;
  --accent-blue: #0088ff;
  
  --text-main: #f0f4f8;
  --text-muted: #8a99ad;
  --text-dim: #54657b;
  
  /* Ba họ font, tự host trong css/fonts.css — cả ba đều có ĐỦ dấu tiếng Việt.
     Rajdhani + Orbitron dùng trước đây không có subset vietnamese, nên mọi chữ
     ố/ộ/ệ/ắ bị font hệ thống thay giữa từ. Đừng quay lại hai font đó.

     --font-heading  Chakra Petch — techno/vuông, dùng cho tiêu đề & nhãn
     --font-mono     JetBrains Mono — MỌI con số, chữ rộng đều nhau nên giá trị
                     telemetry cập nhật liên tục không nhảy layout
     --font-sans     Inter — chữ chạy, thông báo, form */
  --font-heading: 'Chakra Petch', 'Segoe UI', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-sans: 'Inter', 'Segoe UI', -apple-system, sans-serif;

  --header-height: 54px;
  --sidebar-width: 320px;
  --telemetry-width: 360px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-glow: 0 0 15px rgba(0, 240, 255, 0.2);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-darkest);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Chữ số rộng ĐỀU NHAU ở mọi chỗ hiện giá trị đang thay đổi.
   Không có tabular-nums thì '1' hẹp hơn '8', nên tốc độ nhảy từ 8.1 → 1.8 m/s
   làm cả dòng co giật — rất khó đọc trên màn hình giám sát cập nhật 2–10 Hz. */
[class*='telemetry-value'],
[class*='pfd-readout'],
[class*='badge-value'],
.header-metric .value,
.video-stage-hud,
.gimbal-gauge,
#val-latency,
#uav-model-sn {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 14, 23, 0.5);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-panel-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* Main App Layout Grid */
#app-container {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Top Header Bar */
header.flighthub-header {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(12, 16, 23, 0.98) 0%, rgba(15, 22, 33, 0.92) 100%);
  border-bottom: 1px solid var(--bg-panel-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  backdrop-filter: blur(12px);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
}

/* Logo.svg dùng màu thương hiệu cố định (#2257ff), không ăn theo --accent-cyan
   như icon vẽ tay cũ. drop-shadow đổi màu theo tông logo cho khớp. */
.brand-logo img {
  filter: drop-shadow(0 0 6px rgba(34, 87, 255, 0.5));
}

.brand-logo .badge-v2 {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.uav-selector-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-panel-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  gap: 8px;
}

.uav-selector-wrapper select {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
}

.uav-selector-wrapper select option {
  background: var(--bg-main);
  color: var(--text-main);
}

/* Model UAV tự nhận diện: vai trò thiết bị · tên model · serial number */
.uav-identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* "Tay điều khiển" / "Máy bay" — nhãn vai trò, phải nhỏ hơn tên model để không
   tranh chỗ nhưng đủ rõ: hai khối cạnh nhau mà không có nhãn này thì không biết
   cái nào là drone, cái nào là RC. */
.device-role {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Pin tay điều khiển, đứng cạnh SN của nó */
.rc-battery {
  margin-left: 6px;
  font-weight: 700;
  color: var(--accent-green);
}

.uav-model-name {
  color: var(--accent-cyan);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Trạng thái chưa nhận diện được — làm mờ để không nhầm là tên model thật */
.uav-model-name.pending {
  color: var(--text-muted);
  font-weight: 600;
}

.uav-model-sn {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Header Status Badges */
.system-status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
}

.status-indicator.online {
  border-color: rgba(0, 255, 136, 0.4);
  color: var(--accent-green);
  background: rgba(0, 255, 136, 0.08);
}

.status-indicator.offline {
  border-color: rgba(255, 51, 102, 0.4);
  color: var(--accent-red);
  background: rgba(255, 51, 102, 0.08);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.status-indicator.online .status-dot {
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px currentColor; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.header-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.header-metric .value {
  color: var(--text-main);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Cọc sóng Aircraft ↔ RC — màu mặc định (chưa có dữ liệu/vạch chưa sáng).
   app.js/telemetryUI.js đổi màu từng vạch bằng inline style khi có số liệu,
   giống cách latency-badge đang đổi màu theo ngưỡng. */
.link-bar {
  stroke: var(--text-dim);
  transition: stroke 0.2s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-tactical {
  background: rgba(20, 30, 48, 0.7);
  border: 1px solid var(--bg-panel-border);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.btn-tactical:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.btn-tactical.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #000;
  font-weight: 700;
}

/* Trạng thái đường truyền WebSocket tới backend.
   .link-ok đi kèm .active (nền cyan đặc) nên chữ phải ĐEN mới đủ tương phản. */
.btn-tactical.link-ok {
  color: #000;
}

.btn-tactical.link-wait {
  border-color: rgba(255, 183, 0, 0.5);
  color: var(--accent-yellow);
}

.btn-tactical.link-down {
  border-color: rgba(255, 51, 102, 0.5);
  color: var(--accent-red);
}

.btn-tactical.danger {
  border-color: rgba(255, 51, 102, 0.5);
  color: var(--accent-red);
}

.btn-tactical.danger:hover {
  background: rgba(255, 51, 102, 0.2);
}

/* Central Workspace */
main.flighthub-workspace {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.input-tactical {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--bg-panel-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  width: 100%;
  outline: none;
}

.input-tactical:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan-glow);
}

/* =========================================================================
   TELEMETRY DOCK — HUD trong suốt, không khung nền
   =========================================================================
   Không dùng panel kính mờ nữa: đây là màn hình giám sát, thứ quan trọng nhất
   là hình từ camera và bản đồ, mọi mảng nền đè lên đó đều là che mất việc.
   Các con số nổi thẳng trên hình, giữ đọc được bằng viền tối quanh chữ
   (text-shadow) chứ không bằng một tấm nền.
   ========================================================================= */
.telemetry-dock {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  width: var(--telemetry-width);
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: hidden;

  /* Viền tối quanh mọi chữ. Bốn lớp bóng sát nhau tạo thành đường viền thật sự
     chứ không chỉ là bóng đổ — cần thế vì khung hình camera có thể là bất cứ
     màu gì: trời trắng, tường vôi, mặt nước loá. Chỉ đổ bóng một hướng thì chữ
     sáng trên nền trắng vẫn mất hút. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.85),
    1px 1px 2px rgba(0, 0, 0, 0.9),
    -1px -1px 2px rgba(0, 0, 0, 0.75);

  /* Dock trong suốt trải rộng góc phải: để nguyên pointer-events là nó nuốt
     hết cú bấm/kéo lên vùng bản đồ phía dưới mà người dùng không hiểu vì sao
     kéo không được. Chỉ nút thu gọn mới cần nhận chuột. */
  pointer-events: none;
}

/* Cả thanh — không chỉ mỗi nút mũi tên — là vùng bấm để thu/mở bảng thông số
   (app.js gắn sự kiện lên chính div này, role="button"). pointer-events:auto
   ở đây ĐÈ lại pointer-events:none của .telemetry-dock — thiếu dòng này thì
   bấm vào chữ "Thông Số Bay" (nằm ngoài nút mũi tên nhỏ) sẽ xuyên qua dock. */
.dock-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 2px 2px 6px;
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: auto;
}

.dock-toolbar:hover .dock-title {
  color: var(--accent-cyan);
}

.dock-toolbar:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.dock-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* Nút duy nhất còn nhận chuột trong dock */
.dock-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  pointer-events: auto;
  transition: var(--transition-fast);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.dock-collapse-btn:hover {
  color: var(--accent-cyan);
}

/* Mũi tên quay 180° khi đang thu gọn để chỉ hướng "mở ra" */
.dock-collapse-btn svg {
  transition: transform var(--transition-fast);
}

.telemetry-dock.collapsed .dock-collapse-btn svg {
  transform: rotate(180deg);
}

.dock-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;

  /* Thông số chỉ để đọc, không có gì bấm được → không chắn bản đồ phía dưới.
     Ngoại lệ duy nhất: màn hình quá thấp làm nội dung tràn, lúc đó app.js gắn
     class .scrollable để còn cuộn được. */
  pointer-events: none;
}

.dock-content.scrollable {
  pointer-events: auto;
}

/* Thu gọn: chỉ còn dòng tiêu đề + mũi tên */
.telemetry-dock.collapsed {
  width: auto;
}

.telemetry-dock.collapsed .dock-content {
  display: none;
}

/* PFD Artificial Horizon Instrument — đồng hồ tròn, không phải ô nền vuông */
.pfd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pfd-container {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* Vòng tối ở ngoài để đồng hồ tách khỏi nền sáng (trời, tường vôi), vòng
     sáng ở trong để tách khỏi nền tối */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

/* Ba số P / R / HDG nằm dưới đồng hồ, chữ trần không hộp */
.pfd-readouts {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.pfd-readout {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.pfd-horizon-bg {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  transform-origin: center center;
  transition: transform 0.05s linear;
}

.pfd-sky {
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
}

.pfd-ground {
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, #4a2c11 0%, #241406 100%);
  border-top: 2px solid #00ff88;
}

.pfd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Aircraft Reticle */
.pfd-boresight {
  width: 80px;
  height: 40px;
  position: absolute;
  z-index: 5;
}

.pfd-pitch-ladder {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

/* Telemetry Grid System */
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
}

/* Không nền, không viền: chỉ còn nhãn nhỏ + con số. Ranh giới giữa các ô do
   khoảng trắng tạo ra, không cần vẽ hộp. */
.telemetry-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.telemetry-card.full-width {
  grid-column: span 2;
}

/* Nhãn dùng text-muted chứ không phải text-dim: chữ nhỏ nằm trên ảnh camera
   hoặc bản đồ, tối hơn mức này là chìm hẳn. */
.telemetry-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icon trang trí cạnh nhãn: trên nền kín thì vui mắt, trên video/bản đồ chỉ là
   thêm nét rối. Bỏ đi, giữ lại chữ. */
.telemetry-label svg {
  display: none;
}

/* 1.6rem (cũ 1.4) vì JetBrains Mono hẹp hơn Orbitron đáng kể — giữ 1.4rem thì
   con số trông teo lại so với bản trước. letter-spacing âm nhẹ để chuỗi mono
   dài không bị rời rạc. */
.telemetry-value-large {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--accent-cyan);
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/* Đơn vị KHÔNG dùng mono: 'm/s' trong monospace bị giãn rời, đọc như ba ký tự
   riêng lẻ. Font heading gọn và ăn nhập với nhãn phía trên hơn. */
.telemetry-unit {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

/* Dòng phụ dưới mỗi con số chính (AGL, V.SPD, RTK) */
.telemetry-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.telemetry-sub span {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-main);
}

/* Gimbal Angle 3D Visualizer Card */
.gimbal-visualizer-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0 0;
}

.gimbal-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.gimbal-dial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gimbal-name {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.gimbal-val {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
}

.gimbal-pointer {
  width: 2px;
  height: 21px;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  position: absolute;
  transform-origin: bottom center;
  top: 3px;
  transition: transform 0.1s linear;
}

.gimbal-pointer-yaw {
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

/* =========================================================================
   LIVE VIDEO STAGE — nội dung chính, chiếm toàn bộ vùng làm việc
   ========================================================================= */
.video-stage {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #1a2636 0%, #080d14 100%);
  overflow: hidden;
  z-index: 1; /* dưới telemetry dock (z-index 10) */
}

/* object-fit: contain để không cắt mất khung hình 16:9 của camera M4T */
.video-stage-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: none; /* app.js bật lên khi player bắt đầu phát */
}

/* Chip trạng thái stream, góc trên trái — cùng ngôn ngữ với HUD thông số: chữ
   trần có viền tối, không nền, không viền hộp. Trước đây là một khối xám đục
   nằm giữa khung hình, và tệ hơn: nó nuốt cú bấm-kéo lên bản đồ ở góc đó. */
.video-stage-badge {
  position: absolute;
  top: 12px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.85),
    1px 1px 2px rgba(0, 0, 0, 0.9),
    -1px -1px 2px rgba(0, 0, 0, 0.75);
}

.video-stage-badge-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.video-stage-badge-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-yellow);
}

/* HUD góc dưới trái: góc gimbal */
.video-stage-hud {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-green);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.85),
    1px 1px 2px rgba(0, 0, 0, 0.9),
    -1px -1px 2px rgba(0, 0, 0, 0.75);
  z-index: 5;
  pointer-events: none;
}

/* =========================================================================
   MAP STAGE — bản đồ định vị UAV (MapLibre GL JS), luân phiên với video qua
   nút #btn-toggle-view. Cùng vị trí/kích thước với .video-stage nên khi đổi
   view không có giật layout.
   ========================================================================= */
.map-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#map-container {
  width: 100%;
  height: 100%;
}

/* =========================================================================
   PICTURE-IN-PICTURE — stage KHÔNG được chọn co về khung nhỏ góc dưới trái

   Cả hai stage luôn nằm trong DOM và luôn hiển thị: xem video thì bản đồ nằm
   ở khung nhỏ, và ngược lại. Không dùng display:none nữa vì như thế MapLibre
   mất kích thước container (canvas về 0px) và video bị trình duyệt hạ ưu tiên
   giải mã — đổi view lại là phải chờ dựng hình từ đầu.

   Class .stage-pip do app.js gán (mặc định đặt sẵn trên #map-stage trong
   index.html để không chớp một nhịp video/bản đồ đè nhau lúc trang vừa tải).
   ========================================================================= */
.stage-pip {
  inset: auto auto 16px 16px;
  width: clamp(200px, 22vw, 320px);
  aspect-ratio: 16 / 9;
  z-index: 8; /* trên stage chính (1), dưới telemetry dock (10) */
  border: 1px solid var(--bg-panel-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-pip:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 28px rgba(0, 240, 255, 0.25);
}

/* Bên trong khung nhỏ chỉ giữ lại hình ảnh + nhãn: mọi nút bấm, HUD và dòng
   gợi ý dài đều không đọc/bấm được ở cỡ này, hiện lên chỉ tổ che mất hình. */
.stage-pip .video-stage-hud,
.stage-pip .map-controls,
.stage-pip .no-signal-hint,
.stage-pip .maplibregl-ctrl-top-left,
.stage-pip .maplibregl-ctrl-bottom-left,
.stage-pip .maplibregl-ctrl-bottom-right {
  display: none;
}

.stage-pip .video-stage-badge {
  top: 5px;
  left: 8px;
  gap: 4px;
}

.stage-pip .video-stage-badge-label {
  display: none;
}

.stage-pip .video-stage-badge-value {
  font-size: 0.6rem;
}

.stage-pip .no-signal-text {
  font-size: 0.7rem;
  text-align: center;
  padding: 0 8px;
}

/* Bản đồ ở khung nhỏ: chặn tương tác của MapLibre để cú bấm rơi vào .map-stage
   (phóng to) thay vì thành thao tác kéo bản đồ — kéo nhầm là tắt chế độ tự
   theo dõi UAV mà người dùng không hề biết. */
.stage-pip #map-container {
  pointer-events: none;
}

/* Biểu tượng "bấm để phóng to", chỉ hiện khi stage đang ở dạng khung nhỏ */
.stage-pip-expand {
  display: none;
}

.stage-pip .stage-pip-expand {
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--bg-panel-border);
  border-radius: var(--radius-sm);
  z-index: 6;
  pointer-events: none;
}

.stage-pip:hover .stage-pip-expand {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.map-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Cụm zoom/la bàn của MapLibre nằm ở góc trên trái, đúng chỗ chip "MAP · ĐỊNH
   VỊ UAV" — không đẩy xuống thì chip che mất nút "+", zoom vào bằng nút coi
   như không bấm được. */
.map-stage .maplibregl-ctrl-top-left {
  top: 42px;
}

/* Nút tròn chỉ có icon (nút định vị) — xếp trên chip đổi nền, đúng thứ tự quen
   thuộc của Google Maps */
.map-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg-panel);
  border: 1px solid var(--bg-panel-border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: var(--transition-fast, all 0.15s ease);
}

.map-icon-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* Ăn đứt display:flex ở trên khi nút bị ẩn (bản đồ đang bám UAV) */
.map-controls [hidden] {
  display: none;
}

/* UAV Marker (tạo động trong mapManager.js) */
.uav-marker-container {
  position: relative;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.uav-shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 26px;
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  filter: blur(3px);
  transform: translateX(-50%);
}

.uav-fov-cone,
.uav-marker-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.uav-marker-icon {
  transition: transform 0.05s linear;
}

/* Popup thông số nhanh khi bấm vào marker UAV trên bản đồ */
.uav-popup-card {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-main);
  line-height: 1.7;
  min-width: 130px;
}

.maplibregl-popup-content {
  background: var(--bg-panel);
  border: 1px solid var(--bg-panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glow);
  padding: 10px 12px;
}

.maplibregl-popup-tip {
  border-top-color: var(--bg-panel-border) !important;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.modal-header {
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--bg-panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-cyan);
}

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-footer {
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--bg-panel-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Utility Animations */
.pulse-glow {
  animation: glow-pulse 2s infinite ease-in-out;
}

@keyframes glow-pulse {
  0% { box-shadow: 0 0 5px rgba(0, 240, 255, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.6); }
  100% { box-shadow: 0 0 5px rgba(0, 240, 255, 0.2); }
}

/* FPV No Signal Overlay */
.fpv-no-signal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #080b11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 51, 102, 0.1);
}

.no-signal-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.45;
}

.no-signal-text {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent-red);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.8);
  animation: blink-no-signal 1.5s infinite steps(2, start);
}

@keyframes blink-no-signal {
  to { visibility: hidden; }
}

/* Dòng gợi ý dưới NO SIGNAL — mang thông báo lỗi thật từ app.js */
.no-signal-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-top: 8px;
  max-width: 460px;
  padding: 0 16px;
  text-align: center;
  z-index: 4;
}