/* ==============================================================================
   api.gaia.eco - Custom Styles
   ============================================================================== */

/* Custom Tailwind Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Tab Buttons */
.tab-btn {
  @apply px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:text-gray-800 hover:border-gray-300 transition-colors duration-200;
}

.tab-btn.active {
  @apply text-green-600 border-green-600;
}

/* Area Input Method Tabs */
.area-tab-btn {
  @apply flex-1 px-3 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:text-gray-800 hover:bg-gray-50 transition-colors duration-200;
}

.area-tab-btn.active {
  @apply text-green-600 border-green-600 bg-green-50;
}

/* Area Method Panels */
.area-method {
  @apply hidden;
}

.area-method.active {
  @apply block;
}

/* Tab Content */
.tab-content {
  @apply hidden;
}

.tab-content.active {
  @apply block;
}

/* Map Container */
#map {
  @apply relative z-0;
}

/* Leaflet Custom Styles */
.leaflet-control-attribution {
  @apply text-xs;
}

.leaflet-popup-content-wrapper {
  @apply rounded-lg shadow-lg;
}

.leaflet-popup-content {
  @apply m-0 p-4;
}

/* Custom Popup Styles */
.popup-content {
  @apply min-w-[250px] max-w-[400px];
}

.popup-content h3 {
  @apply text-lg font-bold text-gray-800 mb-2;
}

.popup-content p {
  @apply text-sm text-gray-600 mb-1;
}

.popup-content img {
  @apply w-full h-auto rounded-lg mt-2 mb-2;
}

.popup-iucn {
  @apply inline-block px-2 py-1 rounded text-xs font-semibold mt-2;
}

.popup-iucn.CR {
  @apply bg-red-600 text-white;
}

.popup-iucn.EN {
  @apply bg-orange-600 text-white;
}

.popup-iucn.VU {
  @apply bg-yellow-600 text-white;
}

.popup-iucn.NT {
  @apply bg-yellow-400 text-gray-800;
}

.popup-iucn.LC {
  @apply bg-green-600 text-white;
}

.popup-iucn.DD {
  @apply bg-gray-500 text-white;
}

.popup-iucn.NE {
  @apply bg-gray-400 text-white;
}

/* Progress Bar Animation */
#progressBar {
  transition: width 0.3s ease-in-out;
}

/* Loading Spinner */
.spinner {
  @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Stats Cards Animation */
.stat-card {
  @apply transform transition-transform duration-200 hover:scale-105;
}

/* Table Styles */
table {
  @apply text-sm;
}

table th {
  @apply font-semibold text-gray-700;
}

table td {
  @apply text-gray-600;
}

table tr:hover {
  @apply bg-gray-50;
}

/* IUCN Badge */
.iucn-badge {
  @apply inline-block px-3 py-1 rounded-full text-xs font-semibold;
}

.iucn-badge.CR {
  @apply bg-red-100 text-red-800;
}

.iucn-badge.EN {
  @apply bg-orange-100 text-orange-800;
}

.iucn-badge.VU {
  @apply bg-yellow-100 text-yellow-800;
}

.iucn-badge.NT {
  @apply bg-yellow-50 text-yellow-700;
}

.iucn-badge.LC {
  @apply bg-green-100 text-green-800;
}

.iucn-badge.DD {
  @apply bg-gray-200 text-gray-700;
}

.iucn-badge.NE {
  @apply bg-gray-100 text-gray-600;
}

/* Image Gallery */
.image-card {
  @apply relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-200 cursor-pointer;
}

.image-card img {
  @apply w-full h-48 object-cover;
}

.image-card .overlay {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm;
}

/* Export Buttons */
button[id^="export"] {
  @apply flex items-center space-x-2;
}

/* Error Messages */
.error-message {
  @apply bg-red-50 border-l-4 border-red-500 p-4 rounded text-red-800;
}

.error-message strong {
  @apply font-semibold;
}

/* Success Messages */
.success-message {
  @apply bg-green-50 border-l-4 border-green-500 p-4 rounded text-green-800;
}

/* Loading State */
.loading {
  @apply opacity-50 pointer-events-none;
}

/* Disabled Button */
button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Responsive Design */
@media (max-width: 768px) {
  #map {
    height: 400px !important;
  }

  .grid {
    @apply gap-4;
  }

  table {
    @apply text-xs;
  }

  .popup-content {
    @apply min-w-[200px];
  }
}

/* Animation Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* RapiDoc Customization */
rapi-doc {
  @apply w-full;
}

rapi-doc::part(section-navbar) {
  @apply bg-gradient-to-r from-green-600 to-blue-600;
}

/* Marker Clusters (if using) */
.marker-cluster {
  @apply bg-green-500 text-white rounded-full flex items-center justify-center font-bold;
}

.marker-cluster-small {
  @apply w-10 h-10 text-sm;
}

.marker-cluster-medium {
  @apply w-12 h-12 text-base;
}

.marker-cluster-large {
  @apply w-14 h-14 text-lg;
}

/* Tooltips */
.tooltip {
  @apply absolute bg-gray-800 text-white text-xs rounded py-1 px-2 z-50 pointer-events-none;
}

/* Form Validation */
input:invalid,
textarea:invalid {
  @apply border-red-300 focus:ring-red-500;
}

input:valid,
textarea:valid {
  @apply border-green-300;
}

/* Focus Visible (Accessibility) */
*:focus-visible {
  @apply outline-2 outline-offset-2 outline-green-500;
}

/* Print Styles */
@media print {
  header,
  footer,
  .no-print {
    @apply hidden;
  }

  #map {
    @apply h-auto;
  }

  table {
    @apply text-xs;
  }
}