/* Pazi rupa! Global Styles */
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

:root {
  --pazi-blue: #002B5B;
  --pazi-red: #D71920;
  --pazi-slate: #1E293B;
}

body {
  @apply bg-slate-50 text-slate-900 selection:bg-paziRed selection:text-white font-sans;
}

.dark body {
  @apply bg-slate-950 text-white;
}

/* Custom Components */
.pazi-card {
  @apply bg-white dark:bg-slate-900 rounded-[1.25rem] shadow-sm border border-slate-100 dark:border-slate-800;
}

.pazi-btn-primary {
  @apply bg-[#002B5B] hover:bg-[#1E293B] text-white rounded-xl font-black text-sm uppercase tracking-widest transition-all shadow-lg shadow-blue-900/20;
}

.pazi-btn-secondary {
  @apply bg-[#D71920] hover:bg-red-700 text-white rounded-xl font-black text-sm uppercase tracking-widest transition-all shadow-lg shadow-red-900/20;
}

.pazi-input {
  @apply w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-800 rounded-xl p-4 outline-none focus:border-[#002B5B] dark:text-white font-bold transition-all;
}

/* Leaflet Overrides */
.leaflet-control-attribution {
  display: none !important;
}

.map-mask {
  fill: #D71920;
  fill-opacity: 0.2;
  stroke: none;
  pointer-events: none;
}

.hatched-pattern {
  fill: url(#hatch);
}

/* Marker Animations */
.marker-pulse-red {
  @apply bg-[#D71920] rounded-full border-2 border-white shadow-lg flex items-center justify-center text-[10px] font-black text-white;
  animation: pulse-red 2s infinite;
  width: 24px !important;
  height: 24px !important;
}

.marker-pulse-orange {
  @apply bg-orange-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center;
  animation: pulse-orange 2s infinite;
  width: 20px !important;
  height: 20px !important;
}

.marker-pulse-blue {
  @apply bg-blue-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-[10px] font-black text-white;
  animation: pulse-blue 2s infinite;
  width: 24px !important;
  height: 24px !important;
}

.marker-pulse-green {
  @apply bg-green-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-[10px] font-black text-white;
  animation: pulse-green 2s infinite;
  width: 24px !important;
  height: 24px !important;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(215, 25, 32, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(215, 25, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 25, 32, 0); }
}

@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes pulse-blue {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

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

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.animate-bounce-subtle {
  animation: bounce-subtle 2s infinite ease-in-out;
}

/* Skeleton Styles */
#root:empty {
  background: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skeleton-header {
  height: 80px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.skeleton-logo {
  width: 40px;
  height: 40px;
  background: #e2e8f0;
  border-radius: 10px;
}

.skeleton-nav {
  margin-left: auto;
  display: flex;
  gap: 15px;
}

.skeleton-nav-item {
  width: 80px;
  height: 30px;
  background: #e2e8f0;
  border-radius: 8px;
}

.skeleton-map {
  flex: 1;
  background: #e2e8f0;
  margin: 20px;
  border-radius: 20px;
  animation: skeleton-pulse 1.5s infinite ease-in-out;
}

@keyframes skeleton-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.4; }
  100% { opacity: 0.6; }
}

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}