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

@layer components {
  /* Button Styles */
  .btn-primary {
    @apply bg-brand-red text-brand-white px-4 py-2 rounded-lg
           hover:bg-red-700 focus:outline-none focus:ring-2
           focus:ring-red-500 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply border-2 border-brand-navy text-brand-navy px-4 py-2
           rounded-lg hover:bg-blue-50 focus:outline-none
           focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  /* Card Styles */
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
  /* Typography */
  .h1 {
    @apply font-display font-bold text-h1;
  }
  .h2 {
    @apply font-display font-bold text-h2;
  }
  .h3 {
    @apply font-display font-semibold text-h3;
  }
  /* Delivery Code */
  .delivery-code {
    @apply font-mono uppercase tracking-wider;
  }

  .btn-danger {
    @apply px-3 py-1.5 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  }

  .backdrop-blur-custom {
    /* Base styles */
    position: relative;
    z-index: 1;
    background-color: hsla(0, 0%, 100%, 0.1);

    /* Try the blur effect first */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    /* iOS specific acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    /* Detect iOS Safari specifically */
    @supports (-webkit-touch-callout: none) and (-webkit-backdrop-filter: none) {
      /* Fallback for iOS Safari - use semi-opaque background instead */
      background-color: hsla(0, 0%, 100%, 0.75);
      /* Reset the backdrop filters since they won't work */
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  /* Map Points Sortable Styles */
  .sortable-ghost {
    @apply opacity-50 bg-gray-100;
  }
  
  .sortable-chosen {
    @apply bg-blue-50 border-l-4 border-blue-400;
  }
  
  .sortable-drag {
    @apply opacity-80 shadow-lg transform rotate-2;
  }
  
  .dragging {
    @apply opacity-50;
  }
  
  .drag-handle:hover {
    @apply text-gray-600;
  }
}
/* app/assets/stylesheets/tracking.css */
.tracking-container {
  min-height: 100vh;
  width: 100%;
}

.map-container {
  position: relative;
  width: 100%;
  height: 600px;
}

.santa-marker {
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.santa-marker:hover {
  transform: scale(1.2);
  z-index: 2;
}

.mapboxgl-popup {
  max-width: 200px;
  z-index: 3;
}

.mapboxgl-popup-content {
  padding: 10px;
  font-family: system-ui, -apple-system, sans-serif;
}


.grinch-marker {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

.stop-marker {
  cursor: pointer;
  width: 24px;
  height: 24px;
  font-size: 24px;
  transform: translate(-50%, -50%);
}

.stop-marker.completed {
  color: #22c55e; /* Tailwind's green-500 */
}

/* Force map container to take full height */
[data-santa-tracking-target="map"] {
  min-height: 600px;
  width: 100%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */