@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* MapLibre Performance Optimizations */
.maplibregl-canvas-container,
.maplibregl-canvas {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.maplibregl-map {
  touch-action: pan-x pan-y;
  contain: layout style paint;
}

/* Optimize marker rendering - remove expensive operations */
.maplibregl-marker {
  will-change: transform;
  transform: translateZ(0);
  pointer-events: auto;
  contain: layout style paint;
}

@theme {
  --color-primary-50: #faf0e7;
  --color-primary-100: #f5e2cf;
  --color-primary-200: #eed4b7;
  --color-primary-300: #e3c9ac;
  --color-primary-400: #e8c6a0;
  --color-primary-500: #e0b889;
  --color-primary-600: #d8aa72;
  --color-primary-700: #b18b5e;
  --color-primary-800: #8b6e4c;
  --color-primary-900: #33281d;
  --color-primary-950: #241c14;

  --color-secondary-100: #f1f5e9;
  --color-secondary-200: #dbe7d1;
  --color-secondary-300: #c2d4b2;
  --color-secondary-400: #a8c194;
  --color-secondary-500: #8eae75;
  --color-secondary-600: #738c5e;
  --color-secondary-700: #5a6f4b;
  --color-secondary-800: #44553a;
  --color-secondary-900: #2d3a27;

  --color-dark-100: #fafafa;
  --color-dark-200: #faf2f2;
  --color-dark-300: #969696;
  --color-dark-400: #757575;
  --color-dark-500: #606060;
  --color-dark-600: #2b2b2b;
  --color-dark-700: #1f1f1f;
  --color-dark-800: #191919;
  --color-dark-900: #151515;

  --color-success-100: #e9f6ec;
  --color-success-200: #cdebd5;
  --color-success-300: #9fd5ae;
  --color-success-400: #68ba84;
  --color-success-500: #4ba36a;
  --color-success-600: #3d8656;
  --color-success-700: #2f6842;
  --color-success-800: #234e32;
  --color-success-900: #163622;

  --color-warning-100: #fff8e7;
  --color-warning-200: #ffecb8;
  --color-warning-300: #ffd98a;
  --color-warning-400: #ffc158;
  --color-warning-500: #ffa726;
  --color-warning-600: #e98d0f;
  --color-warning-700: #ba6f0a;
  --color-warning-800: #8b5207;
  --color-warning-900: #5c3504;

  --color-error-100: #fdecea;
  --color-error-200: #f9c9c3;
  --color-error-300: #f29a90;
  --color-error-400: #e56b60;
  --color-error-500: #d94d44;
  --color-error-600: #bb3e36;
  --color-error-700: #9b322c;
  --color-error-800: #7c2823;
  --color-error-900: #511a17;

  --color-info-100: #f1f4f7;
  --color-info-200: #d9e1ea;
  --color-info-300: #b3c4d5;
  --color-info-400: #8da7c0;
  --color-info-500: #688bad;
  --color-info-600: #547092;
  --color-info-700: #425876;
  --color-info-800: #32445a;
  --color-info-900: #222f3e;

  --color-gray-50: #f5f5f5;
  --color-gray-100: #efefef;
  --color-gray-200: #dfdfdf;
  --color-gray-300: #979797;
  --color-gray-400: #888888;
  --color-gray-500: #797979;
  --color-gray-600: #717171;
  --color-gray-700: #5b5b5b;
  --color-gray-800: #444444;
  --color-gray-900: #353535;

  --color-gray1-50: #eaeaea;
  --color-gray1-100: #dfdfdf;
  --color-gray1-200: #bdbdbd;
  --color-gray1-300: #2a2a2a;
  --color-gray1-400: #262626;
  --color-gray1-500: #222222;
  --color-gray1-600: #202020;
  --color-gray1-700: #191919;
  --color-gray1-800: #131313;
  --color-gray1-900: #0f0f0f;

  --color-gray2-50: #f4f4f4;
  --color-gray2-100: #eeeeee;
  --color-gray2-200: #dcdcdc;
  --color-gray2-300: #8f8f8f;
  --color-gray2-400: #818181;
  --color-gray2-500: #727272;
  --color-gray2-600: #6b6b6b;
  --color-gray2-700: #565656;
  --color-gray2-800: #404040;
  --color-gray2-900: #323232;

  --color-white1-100: #fdfdfd;
  --color-white1-100: #fcfcfc;
  --color-white1-200: #fafafa;
  --color-white1-300: #eeeeee;
  --color-white1-400: #d6d6d6;
  --color-white1-500: #bebebe;
  --color-white1-600: #b3b3b3;
  --color-white1-700: #8f8f8f;
  --color-white1-800: #6b6b6b;
  --color-white1-900: #535353;

  --color-white2-100: #fefefe;
  --color-white2-200: #fdfdfd;
  --color-white2-300: #f9f9f9;
  --color-white2-400: #e0e0e0;
  --color-white2-500: #c7c7c7;
  --color-white2-600: #bbbbbb;
  --color-white2-700: #959595;
  --color-white2-800: #707070;
  --color-white2-900: #575757;

  --color-black-50: #e6e6e6;
  --color-black-100: #d9d9d9;
  --color-black-200: #b0b0b0;
  --color-black-300: #000000;
}

/* Modern scrollbar styles */
.modern-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.modern-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.modern-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.dark .modern-scrollbar {
  scrollbar-color: #4b5563 transparent;
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* Modern Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-right {
  animation: slide-right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-left {
  animation: slide-left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Custom Leaflet popup styles - Modern Design */
.custom-popup .leaflet-popup-content-wrapper {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  max-width: 280px;
}

@media (max-width: 640px) {
  .custom-popup .leaflet-popup-content-wrapper {
    max-width: 240px;
    border-radius: 12px;
  }
}

.custom-popup .leaflet-popup-content-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary-500),
    var(--color-primary-600)
  );
  opacity: 0.8;
}

.dark .custom-popup .leaflet-popup-content-wrapper {
  background: linear-gradient(
    135deg,
    rgba(31, 31, 31, 0.95) 0%,
    rgba(26, 26, 26, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.custom-popup .leaflet-popup-content {
  margin: 12px;
  font-family: "iranyekan", sans-serif;
  position: relative;
  z-index: 1;
  font-size: 14px;
}

@media (max-width: 640px) {
  .custom-popup .leaflet-popup-content {
    margin: 10px;
    font-size: 12px;
  }
}

.custom-popup .leaflet-popup-tip {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .custom-popup .leaflet-popup-tip {
  background: linear-gradient(
    135deg,
    rgba(31, 31, 31, 0.95) 0%,
    rgba(26, 26, 26, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modern Tooltip Styles */
.modern-tooltip .leaflet-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, 0) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.modern-tooltip .leaflet-tooltip-top::before,
.modern-tooltip .leaflet-tooltip-bottom::before,
.modern-tooltip .leaflet-tooltip-left::before,
.modern-tooltip .leaflet-tooltip-right::before {
  display: none !important;
}

.modern-tooltip-content {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 100%
  ) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #111827 !important;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
  line-height: 1.4;
  font-family: "iranyekan", -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  position: relative;
  z-index: 1000;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.dark .modern-tooltip-content {
  background: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.98) 0%,
    rgba(26, 32, 44, 0.95) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f9fafb !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.modern-tooltip-primary {
  background: linear-gradient(
    135deg,
    rgba(224, 184, 137, 0.98) 0%,
    rgba(216, 170, 114, 0.98) 100%
  ) !important;
  border: 1px solid rgba(224, 184, 137, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(224, 184, 137, 0.3),
    0 2px 4px rgba(224, 184, 137, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .modern-tooltip-content {
    font-size: 10px;
    padding: 3px 8px;
    max-width: 140px;
    border-radius: 6px;
  }
}

/* Modern Map Container */
.map-container-modern .leaflet-control-zoom {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.dark .map-container-modern .leaflet-control-zoom {
  background: rgba(31, 31, 31, 0.9) !important;
}

.map-container-modern .leaflet-control-zoom {
  border-radius: 12px !important;
  overflow: hidden;
}

.map-container-modern .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--color-primary-600) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
}

.dark .map-container-modern .leaflet-control-zoom a {
  background: rgba(31, 31, 31, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.map-container-modern .leaflet-control-zoom a:hover {
  background: rgba(224, 184, 137, 0.15) !important;
  color: var(--color-primary-700) !important;
  transform: scale(1.05);
}

.map-container-modern .leaflet-control-zoom-in,
.map-container-modern .leaflet-control-zoom-out {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
}

@media (max-width: 640px) {
  .map-container-modern .leaflet-control-zoom-in,
  .map-container-modern .leaflet-control-zoom-out {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
  }
}

/* MapLibre Popup Styles */
.maplibregl-popup-content {
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  ) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  overflow: hidden !important;
  max-width: 280px !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.maplibregl-popup-content * {
  pointer-events: none !important;
}

.dark .maplibregl-popup-content {
  background: linear-gradient(
    135deg,
    rgba(31, 31, 31, 0.95) 0%,
    rgba(26, 26, 26, 0.9) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.maplibregl-popup-tip {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  ) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dark .maplibregl-popup-tip {
  background: linear-gradient(
    135deg,
    rgba(31, 31, 31, 0.95) 0%,
    rgba(26, 26, 26, 0.9) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.maplibregl-popup-close-button {
  color: #666 !important;
  font-size: 20px !important;
  padding: 4px 8px !important;
  transition: all 0.2s ease !important;
}

.maplibregl-popup-close-button:hover {
  color: #333 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

.dark .maplibregl-popup-close-button {
  color: #ccc !important;
}

.dark .maplibregl-popup-close-button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Modern Scrollbar for Popups */
.custom-popup .modern-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-500) transparent;
}

.custom-popup .modern-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-popup .modern-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-popup .modern-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--color-primary-500),
    var(--color-primary-600)
  );
  border-radius: 3px;
  transition: background 0.2s ease;
}

.custom-popup .modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--color-primary-600),
    var(--color-primary-700)
  );
}
