@import 'leaflet/dist/leaflet.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Loading spinner animation for mobile optimizations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* MapLibre GL popup dark mode override */
.dark .maplibregl-popup-content {
  background: #18181b !important;
  color: #fff !important;
  border: 1px solid #27272a !important;
}
/* Optional: style popup tip arrow */
.dark .maplibregl-popup-tip {
  border-top-color: #18181b !important;
  border-bottom-color: #18181b !important;
}

/* Mobile-specific performance optimizations */
@media (max-width: 768px) {
  .maplibregl-canvas {
    /* Reduce quality on mobile for better performance */
    image-rendering: auto;
  }

  /* Optimize animations on mobile */
  .maplibregl-map {
    transition: none !important;
  }
}

@layer base {
  :root {
    --background: 210 14% 95%; /* #F2F4F3 */
    --foreground: 224 71.4% 4.1%;

    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;

    --primary: 178 21% 54%; /* #73A3A1 */
    --primary-foreground: 0 0% 100%; /* White text on primary */

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 20.2% 65.1%;
    --muted-foreground: 215 25% 25.1%;

    --accent: 28 53% 54%; /* #C98548 */
    --accent-foreground: 0 0% 100%; /* White text on accent */

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 20.2% 65.1%;
    --input: 215 20.2% 65.1%;
    --ring: 178 21% 54%; /* Muted Teal for focus rings */

    --radius: 0.5rem;

    /* Sidebar specific colors - can be adjusted based on design preference */
    --sidebar-background: 210 14% 90%; /* Slightly darker off-white */
    --sidebar-foreground: 224 71.4% 4.1%; /* Dark text */
    --sidebar-primary: 178 21% 54%; /* Muted Teal for active/hover states */
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 14% 85%; /* Lighter accent for hover on non-primary items */
    --sidebar-accent-foreground: 224 71.4% 4.1%;
    --sidebar-border: 210 14% 80%;
    --sidebar-ring: 178 21% 54%;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;

    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;

    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;

    --primary: 178 21% 54%; /* Muted Teal */
    --primary-foreground: 0 0% 100%;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 27.9% 16.9%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 28 53% 54%; /* Soft Orange */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 178 21% 54%;

    /* Sidebar specific colors for dark mode */
    --sidebar-background: 224 71.4% 6.1%; /* Darker than main dark background */
    --sidebar-foreground: 210 20% 98%;
    --sidebar-primary: 178 21% 54%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 224 71.4% 10.1%;
    --sidebar-accent-foreground: 210 20% 98%;
    --sidebar-border: 215 27.9% 16.9%;
    --sidebar-ring: 178 21% 54%;

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    @apply font-body;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-headline;
  }
}

@layer components {
  .avatar-image {
    @apply rounded-full flex-shrink-0 cursor-default select-none pointer-events-none object-cover;
  }
}