@import "tailwindcss";

@tailwind utilities;

/* Set default background and text colors and font family */
@layer base {
  html, body {
    @apply bg-neutral-700;
    @apply text-neutral-200;
    @apply font-sans;
  }

  /* Apply the custom fonts to headings for better visibility */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
    @apply font-medium;
  }
}

/* MapLibre attribution — dark theme, always-compact icon */
.maplibregl-ctrl-attrib.maplibregl-compact {
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 4px !important;
}
.maplibregl-ctrl-attrib-button {
  background-color: transparent !important;
  opacity: 0.6;
}
.maplibregl-ctrl-attrib-button:hover {
  opacity: 1;
}
.maplibregl-ctrl-attrib-inner {
  background: rgba(0, 0, 0, 0.7) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  text-align: right !important;
}
.maplibregl-ctrl-attrib-inner a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.maplibregl-ctrl-attrib-inner a:hover {
  color: #fff !important;
}
/* MapLibre navigation controls — dark theme */
.maplibregl-ctrl-group {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(4px);
}
.maplibregl-ctrl-group button {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}
.maplibregl-ctrl-group button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.maplibregl-ctrl-icon {
  filter: invert(1) opacity(0.75);
}
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
  filter: invert(1) opacity(1);
}

/* MapLibre popup — dark theme */
.maplibregl-popup-content {
  background: rgba(18, 18, 18, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px);
  padding: 12px 14px !important;
  color: rgba(255, 255, 255, 0.85);
}
.maplibregl-popup-tip {
  border-top-color: rgba(18, 18, 18, 0.95) !important;
}
.maplibregl-popup-close-button {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 6px 8px !important;
}
.maplibregl-popup-close-button:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: transparent !important;
}

/* Prevent auto-expand on wide maps */
.maplibregl-ctrl-attrib.maplibregl-compact-show {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

@layer utilities {
  .border-inset {
    @apply border-1;
    @apply border-b-neutral-400/30;
    @apply border-r-neutral-400/30;
    @apply border-t-neutral-950/60;
    @apply border-l-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
  .border-outset {
    @apply border-1;
    @apply border-t-neutral-300/30;
    @apply border-l-neutral-300/30;
    @apply border-b-neutral-950/60;
    @apply border-r-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
  .effect-outset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_0_rgba(0,0,0,0.3)];
  }
  .effect-inset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_2px_0_rgba(0,0,0,0.3),inset_0_-1px_1px_0_rgba(255,255,255,0.15)];
  }
}