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

/* Custom styles */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Leaflet map fixes */
.leaflet-container {
  height: 100%;
  width: 100%;
}

.leaflet-popup-content {
  font-family: inherit;
}

/* Custom components */
.card {
  @apply bg-white rounded-lg shadow-md border border-gray-200;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
  @apply px-6 py-4;
}

.btn {
  @apply px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
}

.btn-danger {
  @apply bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
}

.btn-success {
  @apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
}

.status-indicator {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-online {
  @apply bg-success-100 text-success-800;
}

.status-offline {
  @apply bg-danger-100 text-danger-800;
}

.status-warning {
  @apply bg-warning-100 text-warning-800;
}

/* Animation classes */
.fade-in {
  @apply animate-fade-in;
}

.slide-up {
  @apply animate-slide-up;
}

/* Map marker pulse animation */
.marker-pulse {
  @apply animate-pulse-slow;
}

/* Responsive table */
.table-responsive {
  @apply overflow-x-auto;
}

.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table th {
  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Mobile-responsive toast notifications */
.toast-container {
  max-height: 50vh !important;
  overflow-y: auto !important;
}

/* Mobile optimizations for toasts */
@media (max-width: 768px) {
  .toast-container {
    position: fixed !important;
    top: 4rem !important; /* Below mobile header */
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-height: 40vh !important;
    z-index: 9999 !important;
  }
  
  /* Make individual toasts smaller on mobile */
  .toast-container > div {
    max-width: none !important;
    margin: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 13px !important;
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* Limit the number of visible toasts on mobile */
  .toast-container > div:nth-child(n+4) {
    display: none !important;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .toast-container {
    max-height: 60vh !important;
  }
  
  .toast-container > div:nth-child(n+6) {
    display: none !important;
  }
}