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

@layer components {
  .form-label {
    @apply block text-sm font-medium text-gray-700;
  }
  
  .form-label.required:after {
    @apply text-red-700;
    content:" *";
  }

  .form-input {
    @apply appearance-none block w-full px-3 py-2 sm:text-sm rounded-md shadow-sm focus:outline-none border border-gray-300 placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500;
  }

  .form-input-error {
    @apply appearance-none block w-full px-3 py-2 sm:text-sm rounded-md shadow-sm focus:outline-none border border-red-300 placeholder-red-300 focus:ring-red-500 focus:border-red-500 text-red-900;
  }

  .form-feedback-error {
    @apply mt-2 text-sm text-red-600;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .btn-primary-outline {
    @apply inline-flex items-center justify-center px-4 py-2 border border-primary-600 rounded-md shadow-sm text-sm font-medium text-primary-600 bg-white hover:bg-primary-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .btn-red {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .btn-red-outline {
    @apply inline-flex items-center justify-center px-4 py-2 border border-red-600 text-sm font-medium rounded-md shadow-sm text-red-600 bg-white hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .btn-white {
    @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .btn-circle-primary {
    @apply inline-flex h-8 w-8 items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .btn-circle-red {
    @apply inline-flex h-8 w-8 items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .btn-circle-red-outline {
    @apply inline-flex h-8 w-8 items-center p-2 border border-red-500 rounded-full shadow-sm text-red-600 bg-white hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .form-checkbox {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded;
  }

  .form-radio {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300;
  }
}