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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }

  /* Mobile optimizations */
  html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-text-size-adjust: 100%;
  }

  /* Better touch targets for mobile */
  button, a, input, textarea, select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
  }

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

  .input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }

  .card {
    @apply bg-white rounded-lg shadow-sm p-6;
  }

  .table-auto {
    @apply w-full border-collapse;
  }

  .table-auto th {
    @apply bg-gray-50 px-4 py-3 text-left text-sm font-semibold text-gray-700;
  }

  .table-auto td {
    @apply px-4 py-3 border-t border-gray-200;
  }
}

@layer utilities {
  /* Mobile-specific utilities */
  .touch-manipulation {
    touch-action: manipulation;
  }

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

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

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

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

  /* Smooth scrolling for mobile */
  .scroll-smooth-mobile {
    -webkit-overflow-scrolling: touch;
  }

  /* Min touch target size (44px x 44px recommended by Apple) */
  .min-touch-target {
    min-width: 44px;
    min-height: 44px;
  }
}