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

/* Custom POS styles */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
  }
  
  .card {
    @apply bg-white rounded-lg shadow p-4;
  }
  
  .modal {
    @apply hidden fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50;
  }
  
  .modal.active {
    @apply flex;
  }
  
  .modal-content {
    @apply bg-white rounded-lg max-w-md w-full mx-4;
  }
}