@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  /* Z-index scale for the map overlay stack (panels > settings chips > popovers). */
  --z-index-1050: 1050;
  --z-index-1060: 1060;
  --z-index-1100: 1100;
  /* Expanded nav rail floats above the map's overlay stack. */
  --z-index-1200: 1200;
}

/* MapLibre adds `.maplibregl-map { position: relative }`, which (equal specificity,
   later source order) would beat Tailwind's `.absolute` and collapse #map to 0
   height. The ID selector wins, keeping the map filling its parent. */
#map {
  position: absolute;
  inset: 0;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

.dark a {
  color: #818cf8;
}
.dark a:visited {
  color: #818cf8;
}
.dark a:hover {
  color: #6366f1;
}

/* Hide scrollbar but keep scroll functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:root { --nav-rail: 4.5rem; --map-pad: 0px; }
@media (min-width: 1024px) {
  .nav-offset { padding-left: var(--nav-rail); }
  .nav-offset-map { margin-left: var(--nav-rail); }
  :root { --map-pad: var(--nav-rail); }
}

/* Respect the OS "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Disable iOS pull-to-refresh — the app has no content feed to refresh. */
html, body {
  overscroll-behavior-y: none;
}

/* Hover tooltip popup */
.map-hover-tooltip .maplibregl-popup-content {
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: none;
}
.map-hover-tooltip .maplibregl-popup-tip {
  border-top-color: rgba(0, 0, 0, 0.85);
}

.maplibregl-popup.map-link-tooltip .maplibregl-popup-content {
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: none;
}
.maplibregl-popup.map-link-tooltip .maplibregl-popup-tip {
  border-top-color: rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.85);
  border-left-color: rgba(0, 0, 0, 0.85);
  border-right-color: rgba(0, 0, 0, 0.85);
}

/* Top-right control stack: attribution + nav side by side */
.maplibregl-ctrl-top-right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 0 !important;
}

/* Map details panel slide-in animations */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideInLeft {
  from { transform: translate(-100%, -50%); opacity: 0; }
  to   { transform: translate(0, -50%);      opacity: 1; }
}
