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

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
  body {
    @apply bg-gray-50 text-text-primary antialiased;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-sm border border-border-light p-4 md:p-6;
  }
  .btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-2.5 px-5 rounded-xl
           transition-all duration-200 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-danger {
    @apply bg-danger hover:bg-red-600 text-white font-semibold py-2.5 px-5 rounded-xl
           transition-all duration-200 active:scale-95;
  }
  .btn-outline {
    @apply border-2 border-border-light hover:border-primary text-text-primary font-semibold
           py-2.5 px-5 rounded-xl transition-all duration-200 active:scale-95 bg-white;
  }
  .input-field {
    @apply w-full px-4 py-3 rounded-xl border border-border-light bg-white
           focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary
           transition-all duration-200 text-text-primary placeholder:text-text-secondary/50;
  }
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .nav-item {
    @apply flex flex-col items-center gap-1 py-2 px-3 rounded-xl transition-all duration-200
           text-text-secondary hover:text-primary hover:bg-primary/5 cursor-pointer;
  }
  .nav-item-active {
    @apply text-primary bg-primary/10;
  }
  .status-dot {
    @apply w-3 h-3 rounded-full ring-2 ring-white;
  }
}

@layer utilities {
  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }