/* Import Status Steps */
@layer components {
  .step-indicator {
    @apply w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0 rounded-full border-2 flex items-center justify-center text-xs font-semibold;
  }

  .step-pending {
    @apply bg-white text-gray-500 border-gray-300;
  }

  .step-done {
    @apply bg-indigo-600 text-white border-indigo-600;
  }

  .step-error {
    @apply bg-red-600 text-white border-red-600;
  }

  .step-importing {
    @apply bg-yellow-500 text-white border-yellow-500;
  }

  .step-enabled {
    @apply bg-indigo-100 text-indigo-600 border-indigo-600;
  }

  .import-status-label-pending {
    @apply text-xs sm:text-sm text-gray-500 flex-shrink-0;
  }

  .import-status-label-pending-disconnected {
    @apply text-xs sm:text-sm text-gray-400 flex-shrink-0;
  }

  .import-status-label-importing {
    @apply text-xs sm:text-sm text-yellow-600 flex-shrink-0;
  }

  .import-status-label-done {
    @apply inline-flex items-center text-xs sm:text-sm font-medium text-green-600 flex-shrink-0;
  }

  .import-status-label-error {
    @apply text-xs sm:text-sm text-red-600 flex-shrink-0;
  }

  .import-done-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
  }
}