html,
body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#map {
  z-index: 0;
}

/* Leaflet's default icons/shadows are replaced by divIcon markers, so drop
   the default control aesthetic to match the minimal palette. */
.leaflet-control-zoom a {
  color: #2563eb !important;
}
.leaflet-container {
  font-family: inherit;
}

/* --- Pole markers -------------------------------------------------------- */
/* The icon box is 44x44 (a comfortable tap target for older hands) while the
   visible dot stays small; .pole-hit centres the dot inside that box. */
.pole-marker {
  background: none;
  border: 0;
}
.pole-hit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.pole-dot {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
/* Healthy poles stay small and quiet so the eye lands on problems first. */
.pole-dot--quiet {
  width: 14px;
  height: 14px;
  border-width: 2px;
  opacity: 0.9;
}
/* "กำลังซ่อม" is a ring, not just another warm colour. */
.pole-dot--donut::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.pole-dot--selected {
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.pole-pulse {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pulse, #dc2626);
  opacity: 0.55;
  animation: pole-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pole-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  80%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* --- User location ------------------------------------------------------- */
.user-marker {
  background: none;
  border: 0;
}
/* Navy + wide halo: reads as "you are here", never as a pole. */
.user-dot {
  display: block;
  width: 16px;
  height: 16px;
  margin: 3px;
  border-radius: 50%;
  background: #1e3a8a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* --- Safe areas (iOS home indicator / notch) ----------------------------- */
.pb-safe {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.bottom-safe {
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
}

/* --- กล่องข้อความ (SweetAlert2) -------------------------------------------
   SweetAlert2 ตั้ง z-index มาให้ 1060 ซึ่ง "ต่ำกว่า" หน้าจอเต็มจอของแอปนี้
   (หน้าแรกและฟอร์มแจ้งเหตุใช้ 1300) ทำให้ popup ถูกบังจนมองไม่เห็นเลย
   จึงต้องยกให้อยู่เหนือทุกชั้น รวมถึงแถบแจ้งสถานะเน็ต (1400) */
.swal2-container {
  z-index: 1500 !important;
}

/* --- Toast --------------------------------------------------------------- */
#net-toast {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Respect reduced-motion preferences: keep colour, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .pole-pulse,
  .animate-ping {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}