@import "leaflet/dist/leaflet.css";
@import "tailwindcss";

@layer base {
  :root {
    /* Light theme palette for drone paths - Distinct Colors */
    --p-1: theme("colors.green.600");
    --p-2: theme("colors.yellow.600");
    --p-3: theme("colors.sky.500");
    --p-4: theme("colors.pink.600");
    --p-5: theme("colors.violet.600");
    --p-6: theme("colors.red.600");
  }

  .dark {
    /* Dark theme palette for drone paths - Neon Colors */
    --p-1: #00ff00;
    --p-2: #ffff00;
    --p-3: #00ffff;
    --p-4: #ff00ff;
    --p-5: #bd00ff;
    --p-6: #ff4d4d;
  }
}

.leaflet-container {
  background: #111 !important;
}

.drone-tooltip {
  @apply bg-gray-800 text-white p-2 rounded-md border-gray-700 border;
}

/* Arrow should be the same color as the tooltip background */
.drone-tooltip.leaflet-tooltip-top::before {
  border-top-color: theme("colors.gray.800");
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.3); /* Slate 400 with opacity */
  border-radius: 20px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.5);
}

/* Drone Popup Styles */
.drone-popup .leaflet-popup-content-wrapper {
  @apply bg-slate-900/90 backdrop-blur-md border border-slate-700 text-slate-100 rounded-lg p-0 shadow-xl;
}
.drone-popup .leaflet-popup-tip {
  @apply bg-slate-900/90 border-slate-700;
}
.drone-popup .leaflet-popup-content {
  margin: 12px;
}

.service-point-icon .triangle-marker {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #0ea5e9; /* sky-500 */
  transform: translateY(-2px);
}
