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

@layer base {
  html {
    @apply antialiased;
  }

  /* Theme transition for smooth dark/light mode switch */
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease !important;
    transition-delay: 0s !important;
  }

  body {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
  }

  * {
    @apply border-gray-200 dark:border-gray-700;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-offset-gray-900;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500;
  }

  .btn-secondary {
    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500 dark:bg-secondary-800 dark:text-secondary-100 dark:hover:bg-secondary-700;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white hover:bg-gray-50 focus-visible:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
  }

  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500;
  }

  .btn-sm {
    @apply h-8 px-3 text-sm;
  }

  .btn-md {
    @apply h-10 px-4;
  }

  .btn-lg {
    @apply h-12 px-6 text-lg;
  }

  .input {
    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:disabled:bg-gray-900 dark:disabled:text-gray-600;
  }

  .input-error {
    @apply border-danger-500 focus:border-danger-500 focus:ring-danger-500;
  }

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

  .card {
    @apply rounded-lg border bg-white shadow-sm dark:bg-gray-800 dark:border-gray-700;
  }

  .link {
    @apply text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') transparent;
  }

  .dark .scrollbar-thin {
    scrollbar-color: theme('colors.gray.600') transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.gray.300');
    border-radius: 3px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: theme('colors.gray.600');
  }
}
