frontend/src/assets/css/components.css

/* SAAP Component Styles - Production Ready */

/* ===================================
   BUTTON COMPONENTS
=================================== */
.saap-button-primary {
  @apply inline-flex items-center justify-center px-4 py-2;
  @apply text-sm font-medium text-white;
  @apply bg-saap-primary-600 hover:bg-saap-primary-700;
  @apply border border-transparent rounded-lg;
  @apply shadow-sm hover:shadow-md;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:ring-offset-2;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.saap-button-secondary {
  @apply inline-flex items-center justify-center px-4 py-2;
  @apply text-sm font-medium text-saap-gray-700;
  @apply bg-white hover:bg-saap-gray-50;
  @apply border border-saap-gray-300 hover:border-saap-gray-400 rounded-lg;
  @apply shadow-sm hover:shadow-md;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:ring-offset-2;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.saap-button-accent {
  @apply inline-flex items-center justify-center px-4 py-2;
  @apply text-sm font-medium text-white;
  @apply bg-saap-accent-600 hover:bg-saap-accent-700;
  @apply border border-transparent rounded-lg;
  @apply shadow-sm hover:shadow-md;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-accent-500 focus:ring-offset-2;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.saap-button-danger {
  @apply inline-flex items-center justify-center px-4 py-2;
  @apply text-sm font-medium text-white;
  @apply bg-red-600 hover:bg-red-700;
  @apply border border-transparent rounded-lg;
  @apply shadow-sm hover:shadow-md;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Button Sizes */
.saap-button-sm {
  @apply px-3 py-1.5 text-xs;
}

.saap-button-lg {
  @apply px-6 py-3 text-base;
}

.saap-button-xl {
  @apply px-8 py-4 text-lg;
}

/* ===================================
   CARD COMPONENTS
=================================== */
.saap-card {
  @apply bg-white rounded-xl border border-saap-gray-200;
  @apply shadow-sm hover:shadow-md transition-shadow duration-200;
}

.saap-card-elevated {
  @apply bg-white rounded-xl;
  @apply shadow-lg hover:shadow-xl transition-shadow duration-200;
}

.saap-card-interactive {
  @apply bg-white rounded-xl border border-saap-gray-200;
  @apply shadow-sm hover:shadow-md hover:border-saap-primary-300;
  @apply transition-all duration-200 cursor-pointer;
}

.saap-card-interactive:hover {
  transform: translateY(-2px);
}

/* ===================================
   ICON COMPONENTS & SIZING
=================================== */
.saap-icon-xs {
  @apply w-3 h-3;
}

.saap-icon-sm {
  @apply w-4 h-4;
}

.saap-icon {
  @apply w-5 h-5;
}

.saap-icon-md {
  @apply w-6 h-6;
}

.saap-icon-lg {
  @apply w-8 h-8;
}

.saap-icon-xl {
  @apply w-12 h-12;
}

.saap-icon-2xl {
  @apply w-16 h-16;
}

/* Icon containers */
.saap-icon-container {
  @apply flex items-center justify-center;
  @apply flex-shrink-0;
}

.saap-icon-container-sm {
  @apply w-8 h-8 rounded-lg;
}

.saap-icon-container-md {
  @apply w-10 h-10 rounded-lg;
}

.saap-icon-container-lg {
  @apply w-12 h-12 rounded-xl;
}

/* ===================================
   FORM COMPONENTS
=================================== */
.saap-input {
  @apply block w-full px-3 py-2;
  @apply text-sm text-saap-gray-900 placeholder-saap-gray-400;
  @apply bg-white border border-saap-gray-300 rounded-lg;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:border-saap-primary-500;
  @apply disabled:bg-saap-gray-50 disabled:text-saap-gray-500 disabled:cursor-not-allowed;
  @apply transition-all duration-200;
}

.saap-textarea {
  @apply block w-full px-3 py-2;
  @apply text-sm text-saap-gray-900 placeholder-saap-gray-400;
  @apply bg-white border border-saap-gray-300 rounded-lg;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:border-saap-primary-500;
  @apply disabled:bg-saap-gray-50 disabled:text-saap-gray-500 disabled:cursor-not-allowed;
  @apply transition-all duration-200;
  @apply resize-y min-h-[80px];
}

.saap-select {
  @apply block w-full px-3 py-2;
  @apply text-sm text-saap-gray-900;
  @apply bg-white border border-saap-gray-300 rounded-lg;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:border-saap-primary-500;
  @apply disabled:bg-saap-gray-50 disabled:text-saap-gray-500 disabled:cursor-not-allowed;
  @apply transition-all duration-200;
}

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

.saap-help-text {
  @apply text-xs text-saap-gray-500 mt-1;
}

.saap-error-text {
  @apply text-xs text-red-600 mt-1;
}

/* ===================================
   STATUS BADGES
=================================== */
.saap-badge {
  @apply inline-flex items-center px-2.5 py-0.5;
  @apply text-xs font-medium rounded-full;
}

.saap-badge-primary {
  @apply bg-saap-primary-100 text-saap-primary-800;
}

.saap-badge-secondary {
  @apply bg-saap-secondary-100 text-saap-secondary-800;
}

.saap-badge-accent {
  @apply bg-saap-accent-100 text-saap-accent-800;
}

.saap-badge-gray {
  @apply bg-saap-gray-100 text-saap-gray-800;
}

.saap-badge-success {
  @apply bg-green-100 text-green-800;
}

.saap-badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.saap-badge-danger {
  @apply bg-red-100 text-red-800;
}

/* ===================================
   LOADING STATES
=================================== */
.saap-loading-spinner {
  @apply w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin;
}

.saap-loading-spinner-sm {
  @apply w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

.saap-loading-spinner-lg {
  @apply w-8 h-8 border-4 border-current border-t-transparent rounded-full animate-spin;
}

.saap-loading-pulse {
  @apply animate-pulse bg-saap-gray-200 rounded;
}

/* ===================================
   ALERTS & MESSAGES
=================================== */
.saap-alert {
  @apply p-4 rounded-lg border;
}

.saap-alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

.saap-alert-success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.saap-alert-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.saap-alert-error {
  @apply bg-red-50 border-red-200 text-red-800;
}

/* ===================================
   LAYOUT HELPERS
=================================== */
.saap-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.saap-section {
  @apply py-12;
}

.saap-divider {
  @apply border-t border-saap-gray-200 my-6;
}

/* ===================================
   RESPONSIVE UTILITIES
=================================== */
@media (max-width: 640px) {
  .saap-mobile-full {
    @apply w-full;
  }
  
  .saap-mobile-stack {
    @apply flex-col space-y-2 space-x-0;
  }
  
  .saap-mobile-center {
    @apply justify-center text-center;
  }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
=================================== */
.saap-sr-only {
  @apply sr-only;
}

.saap-focus-visible:focus-visible {
  @apply outline-none ring-2 ring-saap-primary-500 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .saap-button-primary {
    @apply border-2 border-saap-primary-800;
  }
  
  .saap-button-secondary {
    @apply border-2 border-saap-gray-600;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .saap-button-primary,
  .saap-button-secondary,
  .saap-button-accent,
  .saap-card,
  .saap-input,
  .saap-textarea,
  .saap-select {
    @apply transition-none;
  }
  
  .saap-loading-spinner,
  .saap-loading-spinner-sm,
  .saap-loading-spinner-lg {
    @apply animate-none;
  }
}