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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* app/assets/stylesheets/application.tailwind.css */
@layer components {
  /* ========== Button Components ========== */

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

  .btn-secondary {
    @apply inline-flex justify-center py-2 px-4 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-blue-500;
  }

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

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

  .btn-outline-gray {
    @apply inline-flex items-center px-3 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-blue-500;
  }

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

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

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

  .btn-add {
    @apply inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
  }

  .btn-icon {
    @apply text-blue-600 hover:text-blue-800 focus:outline-none;
  }

  /* Size variants */
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* ========== Pagination Component ========== */
  .pagination {
    @apply flex gap-2 items-center;
  }

  .pagination a {
    @apply px-3 py-1 text-gray-600 bg-white rounded-md border border-gray-300 hover:bg-gray-50;
  }

  .pagination .previous_page,
  .pagination .next_page {
    @apply font-bold;
  }

  .pagination .current {
    @apply px-3 py-1 text-white bg-blue-600 rounded-md border border-blue-600;
  }

  .pagination .disabled {
    @apply px-3 py-1 text-gray-400 bg-gray-100 rounded-md border border-gray-300 cursor-not-allowed;
  }
}