/* Reusable component styles */

/* Buttons */
.btn-primary {
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300 transition-colors;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.card-header {
  @apply font-bold text-xl mb-4;
}

.card-body {
  @apply text-gray-700;
}

/* Forms */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
}

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

/* Toast notifications */
.toast {
  @apply fixed bottom-4 right-4 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg;
}

/* Loading indicator */
.loading {
  @apply inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white;
}

/* Breadcrumbs */
.breadcrumb {
  @apply flex space-x-2 text-sm text-gray-600;
}

.breadcrumb-item {
  @apply hover:text-gray-900;
}

.breadcrumb-separator {
  @apply mx-2;
}