/* Google Fonts: Space Grotesk for headings, Manrope for body text */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Manrope:wght@400;500;600;700&display=swap");

/* Design tokens used across the entire app */
:root {
  --bg: #07111f;
  --bg-soft: #0d1a2d;
  --surface: rgba(15, 26, 46, 0.78);
  --surface-strong: rgba(18, 32, 56, 0.92);
  --surface-alt: rgba(255, 255, 255, 0.06);
  --card: rgba(246, 250, 255, 0.94);
  --card-strong: #ffffff;
  --text: #e9f3ff;
  --text-dark: #0b1f36;
  --muted: #8ba4c4;
  --muted-dark: #58708c;
  --line: rgba(140, 178, 222, 0.18);
  --line-strong: rgba(140, 178, 222, 0.28);
  --shadow: 0 24px 80px rgba(2, 8, 20, 0.38);
  --navy: #081c33;
  --border: rgba(140, 178, 222, 0.22);
  --blue: #4da3ff;
  --blue-strong: #1377ea;
  --blue-soft: rgba(77, 163, 255, 0.16);
  --blue-lt: rgba(77, 163, 255, 0.14);
  --teal: #33d6b1;
  --teal-dk: #16997b;
  --teal-soft: rgba(51, 214, 177, 0.16);
  --teal-lt: rgba(51, 214, 177, 0.14);
  --red: #ff6b6b;
  --red-soft: rgba(255, 107, 107, 0.14);
  --red-lt: rgba(255, 107, 107, 0.14);
  --amber: #ffb44d;
  --amber-soft: rgba(255, 180, 77, 0.14);
  --amber-lt: rgba(255, 180, 77, 0.14);
  --purple: #b66dff;
  --purple-soft: rgba(182, 109, 255, 0.18);
  --white: #ffffff;
}

/* Global reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Base body styles with dark navy gradient background */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(
      circle at top left,
      rgba(51, 214, 177, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at top right,
      rgba(77, 163, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(180deg, #08111e 0%, #0b1628 46%, #0e1c31 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle grid texture overlay on the page background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size:
    auto,
    48px 48px,
    48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 90%);
  opacity: 0.35;
}

/* Reset link and list defaults */
a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  display: block;
}

.app-shell {
  position: relative;
}

/* Navigation bar */
#nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 72px;
  margin: 18px auto 0;
  width: min(1320px, calc(100% - 24px));
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(8, 20, 37, 0.72);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(1, 7, 18, 0.35);
}

/* Brand section: logo + name + subtitle */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 10px;
  min-height: 52px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Shared font for all headings and branded text */
.nav-brand-name,
.card-title,
.page-hero h1,
.login-logo-area h1,
.profile-page-title,
h1 {
  font-family: "Space Grotesk", sans-serif;
}

.nav-brand-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
}

.nav-brand-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.67rem;
  color: rgba(233, 243, 255, 0.52);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.navLi {
  display: flex;
  align-items: stretch;
}

/* Individual nav link */
.navA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  color: rgba(233, 243, 255, 0.66);
  font-size: 0.94rem;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Active and hover state for nav links */
.navA:hover,
.navA.active {
  color: var(--white);
  background: linear-gradient(
    135deg,
    rgba(77, 163, 255, 0.18),
    rgba(51, 214, 177, 0.14)
  );
  box-shadow: inset 0 0 0 1px rgba(114, 193, 255, 0.14);
}

#nav-gps-status,
#nav-user-chip {
  min-height: 52px;
}

/* GPS status pill in the nav: dot + label */
#nav-gps-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 16px;
  color: rgba(233, 243, 255, 0.62);
  font-size: 0.84rem;
  letter-spacing: 0.03em;
}

/* GPS dot default state: red (offline) */
#nav-gps-status .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 18px rgba(255, 107, 107, 0.6);
}

/* GPS dot online state: teal */
#nav-gps-status .dot.online {
  background: var(--teal);
  box-shadow: 0 0 18px rgba(51, 214, 177, 0.65);
}

/* User avatar chip container */
#nav-user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 10px 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Shared styles for all avatar circles */
.nav-user-avatar,
.nud-avatar,
.profile-avatar-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--white);
  font-weight: 700;
  background: linear-gradient(135deg, #2094ff, #31d5b1);
}

.nav-user-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

/* Lift avatar slightly on hover or focus */
#nav-user-chip:hover .nav-user-avatar,
#nav-user-chip:focus-within .nav-user-avatar {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.55);
}

/* User dropdown menu, visible on hover/focus */
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: none;
  width: 280px;
  overflow: hidden;
  border: 1px solid rgba(120, 162, 212, 0.24);
  border-radius: 22px;
  background: rgba(10, 22, 39, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

#nav-user-chip:hover .nav-user-dropdown,
#nav-user-chip:focus-within .nav-user-dropdown {
  display: block;
}

.nud-header,
.nud-email,
.nud-action-btn {
  padding-left: 18px;
  padding-right: 18px;
}

.nud-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 16px;
}

.nud-avatar {
  width: 42px;
  height: 42px;
}

.nud-name {
  color: var(--white);
  font-weight: 700;
}

.nud-username,
.nud-email {
  color: rgba(233, 243, 255, 0.62);
  font-size: 0.84rem;
}

.nud-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.nud-email {
  padding-top: 12px;
  padding-bottom: 12px;
  word-break: break-word;
}

/* Dropdown action buttons: profile link and sign out */
.nud-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-top: 13px;
  padding-bottom: 13px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 0.92rem;
  text-align: left;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nud-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.nud-action-btn svg {
  width: 15px;
  height: 15px;
}

/* Sign out button in red tint */
.nud-logout {
  color: #ffc1c1;
}

.nud-logout:hover {
  background: rgba(255, 107, 107, 0.12);
}

/* GPS banner shown below nav, updates color when online/offline */
#gps-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(1320px, calc(100% - 24px));
  margin: 14px auto 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(9, 21, 38, 0.72);
  color: rgba(233, 243, 255, 0.62);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(16px);
}

/* Banner turns green when GPS is active */
#gps-banner.active {
  background: linear-gradient(
    135deg,
    rgba(18, 97, 78, 0.9),
    rgba(9, 58, 81, 0.86)
  );
  color: #d8fff6;
}

/* Banner turns dashed/dim when GPS is offline */
#gps-banner.offline {
  background: rgba(9, 21, 38, 0.58);
  color: rgba(233, 243, 255, 0.68);
  border-style: dashed;
}

/* Nav dot amber state when GPS connection is ambiguous */
#nav-gps-status .dot.offline {
  background: var(--amber);
  box-shadow: 0 0 16px rgba(255, 180, 77, 0.5);
}

/* Animated pulse dot inside the GPS banner */
.gps-pulse {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: gps-pulse 1.8s infinite;
}

@keyframes gps-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Page content width constraint shared across all page layouts */
main,
.profile-main,
.detections-main {
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
}

.dashboard-shell,
.profile-main,
.detections-main {
  padding: 26px 0 0;
}

/* Hero section at the top of each main page */
.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 20px;
  margin-bottom: 22px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(
      circle at top right,
      rgba(77, 163, 255, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, rgba(10, 24, 43, 0.94), rgba(11, 30, 54, 0.82));
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Decorative glow in the bottom-right corner of the hero */
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -38% auto;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(51, 214, 177, 0.18),
    transparent 70%
  );
}

/* Shared uppercase label style used across the app */
.page-eyebrow,
.hero-panel-kicker,
.hero-metric-label,
.filter-label,
.stat-lbl,
.legend-hdr,
.detection-list-header,
.profile-field-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Small label above hero headings */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #95dcff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Hero h1 uses fluid sizing so it scales across viewports */
.page-hero h1,
h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--white);
}

.page-hero-text,
.login-story-copy p,
.hero-panel p {
  margin: 14px 0 0;
  max-width: 720px;
  color: rgba(233, 243, 255, 0.78);
  font-size: 1rem;
  line-height: 1.72;
}

/* Shared glass card border and background style */
.hero-panel,
.hero-metric,
.stat-card,
.card,
#detection-container,
.login-card,
.login-feature,
.profile-info-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
}

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-panel strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  color: var(--white);
}

.hero-panel p {
  margin-top: 0;
  font-size: 0.96rem;
}

.hero-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hero-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 18px;
}

.hero-metric strong {
  color: var(--white);
  font-size: 1.14rem;
}

.hero-metric span:last-child,
.hero-panel-kicker,
.hero-metric-label {
  color: rgba(233, 243, 255, 0.62);
  font-size: 0.74rem;
  font-weight: 700;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* Panel cards used in the right-hand column */
.panel-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(140, 178, 222, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(77, 163, 255, 0.14),
      transparent 24%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(51, 214, 177, 0.08),
      transparent 26%
    ),
    linear-gradient(180deg, rgba(13, 25, 44, 0.92), rgba(9, 18, 33, 0.9));
  box-shadow: 0 24px 60px rgba(2, 8, 20, 0.26);
  backdrop-filter: blur(18px);
}

/* Subtle top-left light glare on panel cards */
.panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    transparent 42%
  );
  pointer-events: none;
}

.panel-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.panel-kicker {
  color: rgba(233, 243, 255, 0.92);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Collapsed state hides panel body content */
.panel-body-collapsed {
  min-height: 0;
}

/* Red notice banner shown when a new detection fires */
.detection-notice {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 75, 74, 0.28);
  background: rgba(226, 75, 74, 0.12);
  color: #ffd4d4;
  font-size: 0.84rem;
}

/* Empty state placeholder when a list has no items */
.empty-state {
  padding: 18px 14px;
  border: 1px dashed rgba(140, 178, 222, 0.22);
  border-radius: 18px;
  color: rgba(233, 243, 255, 0.62);
  background: rgba(255, 255, 255, 0.03);
}

/* Alert and device cards in the panel */
.alert-card,
.device-card {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid rgba(140, 178, 222, 0.16);
  position: relative;
  padding: 16px 16px 15px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

/* Colored left accent bar on alert/device cards */
.alert-card::before,
.device-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(
    180deg,
    rgba(77, 163, 255, 0.9),
    rgba(51, 214, 177, 0.8)
  );
}

/* Lift cards slightly on hover */
.alert-card:hover,
.device-card:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 199, 255, 0.34);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
}

.alert-title,
.device-card-title {
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.alert-subtitle,
.device-card-meta,
.device-card-coords,
.alert-meta {
  color: rgba(233, 243, 255, 0.64);
  font-size: 0.84rem;
}

.alert-message {
  margin: 10px 0 8px;
  color: rgba(233, 243, 255, 0.84);
  font-size: 0.9rem;
  line-height: 1.55;
}

.alert-card + .alert-card,
.device-card + .device-card {
  margin-top: 0;
}

.alert-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(233, 243, 255, 0.52);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.device-list,
.devices-fallback-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-card-meta {
  margin-top: 8px;
}

.device-card-coords {
  margin-top: 6px;
  font-size: 0.78rem;
}

.dashboard-stack .panel-card {
  min-height: 0;
}

.dashboard-stack .panel-card + .panel-card {
  margin-top: 0;
}

/* Scrollable device list inside the dashboard stack */
.dashboard-stack #react-devices {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.dashboard-stack #react-devices::-webkit-scrollbar {
  width: 8px;
}

.dashboard-stack #react-devices::-webkit-scrollbar-thumb {
  background: rgba(140, 178, 222, 0.24);
  border-radius: 999px;
}

.dashboard-stack #react-devices::-webkit-scrollbar-track {
  background: transparent;
}

/* Shared label styles for filters, stats, legends, etc. */
.filter-label,
.stat-lbl,
.legend-hdr,
.detection-list-header,
.profile-field-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Smooth transition applied to all interactive elements */
.filt-btn,
.btn-primary,
.btn-mark-clean,
.btn-log-detection,
.remove-device-btn,
.forgot-link {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* Filter pill button used in the alerts and device panels */
.filt-btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(233, 243, 255, 0.72);
}

.filt-btn.active,
.filt-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(77, 163, 255, 0.24),
    rgba(51, 214, 177, 0.18)
  );
  color: var(--white);
  border-color: rgba(125, 199, 255, 0.35);
}

/* Layout grids for the stats row, main two-column layout, and profile page */
.stats-grid,
.main-grid,
.profile-grid {
  display: grid;
  gap: 16px;
}

/* Four-column stat cards row */
.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.stat-card,
.card {
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* Individual stat card with gradient background */
.stat-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top left,
      rgba(77, 163, 255, 0.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
}

/* Light glare overlay on stat cards */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    transparent 45%
  );
  pointer-events: none;
}

/* Large numeric value inside stat cards */
.stat-val {
  margin-top: 2px;
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* Color variants for stat values */
.stat-val.green {
  color: #81ffd8;
}
.stat-val.red {
  color: #ff9d9d;
}
.stat-val.amber {
  color: #ffd08b;
}

/* Trend line below the stat value */
.stat-trend {
  margin-top: 8px;
  color: rgba(233, 243, 255, 0.68);
  font-size: 0.78rem;
}

.stat-trend.up {
  color: #9cf0cd;
}
.stat-trend.down {
  color: #ffb8b8;
}
.stat-trend span {
  color: rgba(233, 243, 255, 0.54);
}

/* Icon box in the top-right corner of stat cards */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 199, 255, 0.34);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
}

.stat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 199, 255, 0.34);
}

/* Two-column grid: map left, alerts panel right */
.main-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.95fr);
  margin-bottom: 18px;
  align-items: start;
}

/* Map container with rounded corners and shadow */
.map-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

#map {
  height: 520px;
  width: 100%;
}

.map-overlay-label,
.map-legend {
  backdrop-filter: blur(16px);
}

/* Small label pill in the top-left corner of the map */
.map-overlay-label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(8, 20, 37, 0.72);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Legend card in the bottom-right corner of the map */
.map-legend {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(8, 20, 37, 0.78);
  color: rgba(233, 243, 255, 0.8);
}

/* A single row in the legend: dot + label */
.leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

/* Line indicator for stream/river entries in the legend */
.leg-line {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--blue);
}

/* Color dot for lake/detection entries in the legend */
.leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Generic card used on profile and device pages */
.card {
  overflow: hidden;
}

.card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-title {
  color: var(--white);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

/* Status badges and mussel detection pills */
.badge,
.status-pill,
.mussel-detected,
.mussel-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Red badge: high alert / detected */
.badge.high,
.status-pill.detected,
.mussel-detected {
  background: var(--red-soft);
  color: #ffb3b3;
}

/* Amber badge: medium alert / post-detection */
.badge.medium,
.status-pill.post {
  background: var(--amber-soft);
  color: #ffd194;
}

/* Blue badge: low alert / device count */
.badge.low {
  background: var(--blue-soft);
  color: #a7d3ff;
}

/* Teal badge: clear / clean */
.status-pill.clear,
.mussel-clear {
  background: var(--teal-soft);
  color: #9cf0cd;
}

/* Dot indicator inside status pills */
.status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

/* Alert items list layout */
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.alert-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

/* Colored inner border by severity */
.alert-item.high {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.08);
}
.alert-item.medium {
  box-shadow: inset 0 0 0 1px rgba(255, 180, 77, 0.08);
}
.alert-item.low {
  box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.08);
}

/* Icon circle on the left side of alert items */
.alert-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}

.alert-icon-wrap svg {
  width: 16px;
  height: 16px;
  fill: none;
}

/* Icon color by severity */
.alert-item.high .alert-icon-wrap svg {
  stroke: var(--red);
}
.alert-item.medium .alert-icon-wrap svg {
  stroke: var(--amber);
}
.alert-item.low .alert-icon-wrap svg {
  stroke: var(--blue);
}

.alert-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
}

.alert-msg {
  color: rgba(233, 243, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.5;
}

.alert-time {
  margin-top: 6px;
  color: rgba(233, 243, 255, 0.46);
  font-size: 0.72rem;
}

/* Clickable alert item: slight horizontal slide on hover */
.alert-clickable {
  cursor: pointer;
}

.alert-clickable:hover {
  transform: translateX(2px);
  filter: brightness(1.05);
}

/* Highlighted state when a card is focused from the map */
.alert-active {
  border-color: rgba(125, 199, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.22);
}

/* Historical detection chart card */
.chart-card {
  margin-bottom: 18px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chart-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(233, 243, 255, 0.64);
  font-size: 0.78rem;
}

.chart-leg-sq {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chart-canvas-wrap {
  position: relative;
  padding: 6px 20px 20px;
}

/* Device table on the detections page */
.device-table {
  width: 100%;
  border-collapse: collapse;
}

.device-table th,
.device-table td {
  padding: 14px 16px;
  text-align: left;
}

.device-table th {
  color: rgba(233, 243, 255, 0.46);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.device-table td {
  color: rgba(233, 243, 255, 0.84);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
}

/* Highlight table row on hover */
.device-table tbody tr:hover td,
.device-row-clickable:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.device-row-clickable {
  cursor: pointer;
}

/* Small map pin icon that appears on row hover */
.device-pin-icon {
  width: 15px;
  height: 15px;
  opacity: 0;
  color: #9cd0ff;
}

.device-row-clickable:hover .device-pin-icon {
  opacity: 0.72;
}

/* Battery indicator: bar + percentage text */
.batt-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.batt-bar {
  width: 58px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

/* Battery fill: green by default, red when low */
.batt-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2ccf9f, #67ffd0);
}

.batt-fill.low {
  background: linear-gradient(90deg, #ff7e7e, #ffb3b3);
}

.btn-mark-clean,
.btn-log-detection,
.remove-device-btn {
  border: 1px solid var(--line);
}

/* Mark clean action button: teal tint */
.btn-mark-clean {
  padding: 7px 11px;
  border-radius: 12px;
  background: rgba(51, 214, 177, 0.12);
  color: #b1ffe7;
}

.btn-mark-clean:hover {
  transform: translateY(-1px);
  border-color: rgba(112, 255, 216, 0.3);
}

/* Log detection action button: turns red on hover */
.btn-log-detection {
  padding: 7px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(233, 243, 255, 0.76);
}

.btn-log-detection:hover {
  background: rgba(255, 107, 107, 0.12);
  color: #ffb8b8;
}

/* Lake popup overlay covering the full viewport */
#lake-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 10, 22, 0.68);
  backdrop-filter: blur(12px);
}

#popup-content {
  width: min(420px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(10, 22, 39, 0.96);
  box-shadow: var(--shadow);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#lake-name {
  color: var(--white);
  font-size: 1rem;
}

/* Close button in the popup header */
#popup-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(233, 243, 255, 0.78);
}

#popup-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

#lake-info {
  padding: 10px 20px 18px;
}

/* Each row in the lake info popup */
#lake-info p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(233, 243, 255, 0.82);
}

#lake-info p:last-child {
  border-bottom: 0;
}

#lake-info p strong {
  color: rgba(233, 243, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Footer bar at the bottom of each page */
.site-footer,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1320px, calc(100% - 24px));
  margin: 28px auto 28px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(8, 20, 37, 0.7);
  color: rgba(233, 243, 255, 0.5);
  font-size: 0.76rem;
  backdrop-filter: blur(16px);
}

/* Footer brand name uses Space Grotesk like headings */
.site-footer .footer-brand,
footer .footer-brand {
  color: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
}

.site-footer a,
footer a {
  color: #95dcff;
}

/* Underline on hover for footer links and other text links */
.site-footer a:hover,
footer a:hover,
.card-action-link:hover,
.back-link:hover,
.forgot-link:hover {
  text-decoration: underline;
}

.page-subtitle {
  margin: -2px 0 16px;
  color: rgba(233, 243, 255, 0.56);
  font-size: 0.88rem;
  text-align: left;
}

/* Detection list container on the detections page */
#detection-container {
  padding: 20px;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.detection-list-header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#detection-list {
  margin-top: 12px;
}

/* Individual detection entry rows */
.detection-item {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(233, 243, 255, 0.82);
}

.detection-item + .detection-item {
  margin-top: 10px;
}

.detection-item:hover {
  background: rgba(77, 163, 255, 0.08);
}

.detection-item strong {
  color: #98d7ff;
}

/* Profile page layout */
.profile-main {
  padding-bottom: 0;
}

.profile-page-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

/* Back navigation link on the profile page */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: #a2d2ff;
  font-size: 0.9rem;
  font-weight: 600;
}

.back-link svg {
  width: 16px;
  height: 16px;
}

/* Two-column profile layout: info card left, devices right */
.profile-grid {
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px 18px;
}

/* Large avatar circle on the profile page */
.profile-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.3rem;
}

.profile-fullname {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
}

.profile-role,
.device-row-coords,
.login-footer small {
  color: rgba(233, 243, 255, 0.54);
}

.profile-fields,
.device-list {
  display: flex;
  flex-direction: column;
}

.profile-fields {
  padding: 0 20px 20px;
}

/* A single profile field: label on the left, value on the right */
.profile-field {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-field:first-child {
  border-top: 0;
}

.profile-field-value {
  color: rgba(233, 243, 255, 0.88);
  text-align: right;
  font-weight: 600;
}

/* Add device form in the profile page device card */
.add-device-form {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.add-device-title {
  margin-bottom: 14px;
  color: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.add-device-fields {
  margin-bottom: 16px;
}

/* A single device row in the device list on the profile page */
.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.device-row-name {
  color: var(--white);
  font-weight: 700;
}

.device-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Remove device button: turns red on hover */
.remove-device-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(233, 243, 255, 0.7);
}

.remove-device-btn:hover {
  background: rgba(255, 107, 107, 0.12);
  color: #ffc3c3;
}

.remove-device-btn svg {
  width: 14px;
  height: 14px;
}

/* Empty state shown in the device list when no devices are registered */
.device-empty {
  padding: 28px 20px;
  color: rgba(233, 243, 255, 0.62);
  text-align: center;
}

/* Login page layout */
.login-bg {
  min-height: 100vh;
  padding: 32px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrap {
  width: min(1220px, 100%);
}

/* Two-column login layout: story panel left, form right */
.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 460px);
  gap: 22px;
  align-items: stretch;
}

.login-story,
.login-card {
  border-radius: 32px;
  box-shadow: var(--shadow);
}

/* Left side of the login page with logo and feature highlights */
.login-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 34px;
  background:
    radial-gradient(
      circle at top right,
      rgba(77, 163, 255, 0.2),
      transparent 26%
    ),
    linear-gradient(135deg, rgba(10, 24, 43, 0.96), rgba(12, 31, 56, 0.82));
}

.login-logo-area {
  text-align: left;
}

/* Round icon above the app name on the login page */
.login-icon-circle {
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2094ff, #31d5b1);
  box-shadow: 0 16px 40px rgba(10, 83, 152, 0.3);
}

.login-icon-circle svg {
  width: 34px;
  height: 34px;
  fill: #ffffff;
}

.login-logo-area h1 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--white);
  font-size: clamp(2rem, 3vw, 3rem);
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #95dcff;
  font-weight: 600;
}

.tagline svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.login-story-copy h2 {
  margin: 0 0 10px;
  color: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.login-feature-list {
  display: grid;
  gap: 12px;
}

.login-feature {
  padding: 18px;
  border-radius: 20px;
}

.login-feature strong {
  display: block;
  color: var(--white);
  margin-bottom: 6px;
}

.login-feature span {
  color: rgba(233, 243, 255, 0.68);
  line-height: 1.58;
}

/* Right side login card containing the auth form */
.login-card {
  padding: 28px;
  background: rgba(10, 22, 39, 0.86);
}

/* Tab switcher for login / sign up modes */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 22px;
}

.auth-tab {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(233, 243, 255, 0.66);
  font-weight: 700;
}

/* Active tab gets a blue-teal gradient highlight */
.auth-tab.active {
  background: linear-gradient(
    135deg,
    rgba(77, 163, 255, 0.26),
    rgba(51, 214, 177, 0.18)
  );
  color: var(--white);
}

.card-subtitle {
  margin: 0 0 18px;
  color: rgba(233, 243, 255, 0.66);
  text-align: left;
}

/* Form field group: label + input */
.form-group {
  margin-bottom: 14px;
}

/* Two inputs side by side, used for lat/lng fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  color: rgba(233, 243, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 600;
}

.form-group input,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--white);
  outline: none;
}

/* Custom chevron arrow on select elements */
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a7c8ea' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.form-group input::placeholder {
  color: rgba(233, 243, 255, 0.36);
}

/* Blue glow on focused inputs */
.form-group input:focus,
.form-group select:focus {
  border-color: rgba(125, 199, 255, 0.38);
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.12);
}

/* Password input wrapper for the show/hide toggle */
.pw-wrap {
  position: relative;
}

.pw-wrap input {
  padding-right: 42px;
}

/* Show/hide password toggle button */
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: rgba(233, 243, 255, 0.52);
}

.pw-toggle svg {
  width: 16px;
  height: 16px;
}

/* Inline form error message, hidden by default */
.form-error {
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 14px;
  background: rgba(255, 107, 107, 0.12);
  color: #ffc4c4;
}

.form-error.visible {
  display: block;
}

/* Inline confirmation banner used after a successful password reset */
.form-success {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.12);
  color: #b7f5cf;
}

/* Primary action button used for form submissions */
.btn-primary {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #2094ff, #31d5b1);
  color: var(--white);
  font-weight: 800;
  box-shadow: 0 18px 30px rgba(15, 119, 234, 0.22);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 34px rgba(15, 119, 234, 0.3);
}

/* Forgot password link below the login button */
.forgot-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #95dcff;
  font-size: 0.88rem;
  text-align: center;
}

.login-legal {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(233, 243, 255, 0.46);
  font-size: 0.74rem;
  line-height: 1.72;
}

.login-footer {
  margin-top: 18px;
  color: rgba(233, 243, 255, 0.72);
  text-align: center;
  font-weight: 600;
}

/* Flash animation used when a panel card gets focused from the map */
@keyframes panel-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.36);
  }
  40% {
    box-shadow: 0 0 0 10px rgba(77, 163, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(77, 163, 255, 0);
  }
}

.panel-flash {
  animation: panel-flash 0.8s ease-out forwards;
}

/* Responsive: collapse to two-column stats and single-column hero at 1100px */
@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero,
  .login-layout,
  .profile-grid,
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive: mobile layout at 760px */
@media (max-width: 760px) {
  #nav {
    flex-wrap: wrap;
    padding: 8px;
    min-height: unset;
  }

  .nav-brand {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 10px 14px;
    margin-bottom: 4px;
  }

  #nav-gps-status {
    order: 10;
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .dashboard-shell,
  .profile-main,
  .detections-main {
    padding-top: 20px;
  }

  .page-hero,
  .login-card,
  .login-story,
  .card,
  #detection-container {
    border-radius: 24px;
  }

  .page-hero,
  .login-story,
  .login-card {
    padding: 22px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .site-footer,
  footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* On mobile, legend spans full width of the map */
  .map-legend {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-width: 0;
  }

  .card-hdr {
    flex-wrap: wrap;
  }

  /* Device table scrolls horizontally on small screens */
  .device-table {
    min-width: 760px;
  }
}

/* Alerts panel matches map height and scrolls independently */
#react-alerts {
  height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#react-alerts > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#react-alerts .panel-body {
  overflow-y: auto;
  flex: 1;
}

#react-alerts::-webkit-scrollbar {
  width: 6px;
}

#react-alerts::-webkit-scrollbar-thumb {
  background: rgba(140, 178, 222, 0.24);
  border-radius: 999px;
}

#react-alerts::-webkit-scrollbar-track {
  background: transparent;
}

/* Filter bar and stat cards stack vertically, cards stay side by side */
.overview-strip {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.overview-strip .filter-bar {
  margin-bottom: 14px;
  width: 100%;
}

.overview-strip .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
}

.leaflet-popup-content-wrapper {
    background: #ffffff;
    color: #333;
    border-radius: 8px;
    padding: 5px;
}

.leaflet-popup-tip {
    background: #ffffff;
}

.map-popup hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* --- GPS STATUS & MAP ANIMATIONS (MAY 2026 UPDATE) --- */

/* The banner that slides down below the nav */
#gps-banner {
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  z-index: 900;
  transition: all 0.3s ease;
}

#gps-banner.active {
  display: flex;
  background: #f97316; /* Design System Orange */
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#gps-banner.offline {
  display: flex;
  background: #4b5563; /* Muted Gray */
}

/* Pulse animation for the live status dot in the Nav */
.dot.online {
  background-color: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse-green 2s infinite;
}

.dot.offline {
  background-color: #ef4444 !important;
}

/* Animations */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Blinking detection pin used on the map */
.detection-pin {
  position: relative;
  width: 22px;
  height: 22px;
  pointer-events: auto;
}
.detection-pin .detection-pin-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #E24B4A;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  animation: detection-pin-blink 1s ease-in-out infinite;
}
.detection-pin .detection-pin-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(226, 75, 74, 0.45);
  animation: detection-pin-ring 1.6s ease-out infinite;
}
@keyframes detection-pin-blink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.85); opacity: 0.55; }
}
@keyframes detection-pin-ring {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Map Popup Styling override to match your --text-dark */
.leaflet-popup-content-wrapper {
  background: var(--card-strong);
  color: var(--text-dark);
  border-radius: 12px;
  padding: 4px;
}

.leaflet-popup-tip {
  background: var(--card-strong);
}

/* Ensure the Legend is visible over the map */
.map-legend {
  background: var(--surface-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px;
  border-radius: 8px;
  z-index: 1000;
}