/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Flash 메시지 슬라이드 인 애니메이션 */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

/* 폼 스타일링 */
.form-input {
  @apply block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm transition-colors;
}

.form-input-error {
  @apply border-red-300 dark:border-red-600 text-red-900 dark:text-red-200 placeholder-red-300 dark:placeholder-red-500 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-500 dark:focus:ring-red-400;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.form-label-required::after {
  content: " *";
  @apply text-red-500 dark:text-red-400;
}

.form-error-message {
  @apply mt-1 text-sm text-red-600 dark:text-red-400;
}

.form-help-text {
  @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
}

/* 접근성: 포커스 스타일 */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* 로딩 스피너 */
.spinner {
  @apply inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
}

/* 카드 호버 효과 */
.card-hover {
  @apply transition-shadow duration-200 hover:shadow-md dark:hover:shadow-lg;
}

/* 버튼 로딩 상태 */
.button-loading {
  @apply opacity-50 cursor-not-allowed;
}

/* 다크모드 전환 시 부드러운 애니메이션 */
html {
  @apply transition-colors duration-150;
}

/* 다크모드 스크롤바 스타일 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-full;
}

.dark ::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}