/* ==========================================================================
   WaviSense - Modern Wireless Human Tracking & Localization Dashboard
   Theme: Sky Blue & White (Xanh da trời & Trắng)
   Color Palette: Sky Blue (#0ea5e9, #0284c7, #38bdf8), Pure White, Light Slate (#f8fafc)
   ========================================================================== */

:root {
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Base resets & typography */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular figures for numbers to prevent jitter */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Live beacon pulse - Sky Blue */
@keyframes beacon-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(14, 165, 233, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.animate-beacon {
  animation: beacon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Soft wireless wave pulse - Sky Blue */
@keyframes wireless-ping {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  80%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.animate-wireless-pulse {
  animation: wireless-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Card styling */
.modern-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.modern-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Canvas overlay & controls */
.canvas-control-btn {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.canvas-control-btn:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.canvas-control-btn.active {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
  font-weight: 600;
}

/* Direction compass needle - Sky Blue */
.compass-ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-needle {
  position: absolute;
  width: 2px;
  height: 20px;
  background: #0284c7;
  transform-origin: center 10px;
  border-radius: 2px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.compass-needle::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: #0284c7;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Chart Canvas Container */
.chart-container {
  position: relative;
  width: 100%;
  height: 140px;
}

/* Heatmap Canvas */
.heatmap-canvas {
  width: 100%;
  height: 96px;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Range input styled */
input[type="range"] {
  accent-color: #0ea5e9;
}
/* Shared simulation session */
.sync-session { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:12px; color:#075985; font-size:12px; }
.sync-session strong { display:block; font-size:13px; }
.sync-session span { display:block; margin-top:3px; color:#475569; }
.sync-session button { flex-shrink:0; padding:8px 12px; background:#0284c7; color:white; border-radius:8px; font-weight:600; }
.sync-session button:disabled { opacity:.55; cursor:default; }
.sync-session[data-online="false"] { background:#fffbeb; border-color:#fde68a; color:#92400e; }
button:disabled, select:disabled { cursor:not-allowed; opacity:.55; }
@media(max-width:640px) { .sync-session { align-items:flex-start; flex-direction:column; gap:10px; } }