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

/* Custom styles */
@layer components {
  /* Flowbite 체크박스 스타일 강제 적용 */
  input[type="checkbox"] {
    @apply appearance-none cursor-pointer bg-center bg-no-repeat bg-contain;
  }

  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
    @apply bg-current border-current;
  }

  /* 라이트 모드에서 체크박스 가시성 개선 */
  input[type="checkbox"]:not(:checked) {
    @apply bg-white border-gray-400;
  }

  /* 호버 효과 추가 */
  input[type="checkbox"]:hover:not(:checked) {
    @apply border-gray-500 bg-gray-50;
  }

  .select-custom {
    @apply appearance-none bg-no-repeat bg-[length:1.25em_1.25em] bg-[right_0.75rem_center] bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m6%208%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')] dark:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%23e5e7eb%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m6%208%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')];
  }

  /* 버튼 컴포넌트 스타일 */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply bg-indigo-600 text-white border border-transparent hover:bg-indigo-700 focus:ring-indigo-500 shadow-sm hover:shadow-md transform hover:scale-105;
  }

  .dark .btn-primary {
    @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-indigo-400;
  }

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

  .dark .btn-secondary {
    @apply bg-gray-800 text-gray-300 border-gray-600 hover:bg-gray-700 focus:ring-indigo-400;
  }

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

  .dark .btn-danger {
    @apply bg-red-500 hover:bg-red-600 focus:ring-red-400;
  }

  /* 입력 필드 스타일 */
  .input-text {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 shadow-sm transition-all duration-200;
    @apply focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }

  .dark .input-text {
    @apply border-gray-600 bg-gray-800 text-gray-100 placeholder-gray-500;
    @apply focus:border-indigo-400 focus:ring-indigo-400 focus:ring-offset-gray-900;
  }

  /* 카드 스타일 */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
  }

  .dark .card {
    @apply bg-gray-800 border-gray-700;
  }

  /* 페이지네이션 스타일 */
  .pagy {
    @apply flex items-center justify-center space-x-1;
  }

  .pagy a:not(.gap) {
    @apply flex items-center justify-center px-3 py-2 text-sm font-medium rounded-lg text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 transition-all duration-200;
  }

  .dark .pagy a:not(.gap) {
    @apply bg-gray-800 border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white;
  }

  .pagy a.current {
    @apply z-10 font-bold text-white bg-indigo-600 border-indigo-600 hover:bg-indigo-700;
  }
}