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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 245, 245, 245;
  --primary: 234, 88, 12;
  --success: 34, 197, 94;
  --warning: 234, 179, 8;
  --danger: 239, 68, 68;
  --info: 6, 182, 212;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Mobile viewport height fix */
@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

/* Safe area insets for notched phones */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Touch action optimization */
.touch-manipulation {
  touch-action: manipulation;
}

/* Prevent text selection on buttons */
button {
  -webkit-user-select: none;
  user-select: none;
}

/* Leaflet container fix */
.leaflet-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

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

/* Status badges */
.status-pending { @apply bg-gray-100 text-gray-700 border-gray-300; }
.status-assigned { @apply bg-blue-100 text-blue-700 border-blue-300; }
.status-collected { @apply bg-green-100 text-green-700 border-green-300; }
.status-problem { @apply bg-red-100 text-red-700 border-red-300; }

/* Card shadows */
.card-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card-shadow-lg {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

/* Pull to refresh indicator */
.pull-indicator {
  transition: transform 0.2s ease-out;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}