@tailwind base;
@tailwind components;
@tailwind utilities;

@import "components/map_popup";

@layer components {
  .calendar-card {
    @apply w-12 h-16 bg-white dark:bg-white rounded-lg overflow-hidden border border-gray-300 dark:border-gray-300 flex flex-col shadow-md relative;
  }

  .calendar-month {
    @apply w-full text-center py-0.5 text-white text-xs font-bold absolute top-0 left-0 right-0;
    background-color: #cb0808 !important;
  }

  .calendar-day {
    @apply text-center text-base font-bold text-gray-800 py-0.5 mt-4;
  }

  .calendar-weekday {
    @apply text-center text-xs text-gray-600;
  }

  /* Mapbox popup styling */
  .custom-popup .mapboxgl-popup-close-button {
    @apply text-xs text-gray-600 p-1 bg-transparent rounded-none m-0.5 right-0.5 top-0.5 leading-none border-none;
  }
  
  .custom-popup .mapboxgl-popup-close-button:hover {
    @apply bg-gray-100 text-gray-800;
  }
  
  .custom-popup .mapboxgl-popup-content {
    @apply p-0 rounded-2xl shadow;
  }

  .custom-popup .mapboxgl-popup-tip {
    @apply border-t-white;
  }

  /* Mapbox tooltip styling */
  .mapboxgl-popup-content {
    @apply text-black bg-white rounded-2xl;
  }
  
  .dark .mapboxgl-popup-content {
    @apply text-black bg-white rounded-2xl;
  }
}
