service_manager/frontend-client/src/app.css

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

/* Custom base styles */
@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply text-gray-900 bg-gray-50;
  }
  
  /* Focus styles */
  *:focus {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
  }
  
  /* Selection styles */
  ::selection {
    @apply bg-primary-100 text-primary-900;
  }
}

/* Custom component styles */
@layer components {
  /* Card component */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  }
  
  .card-content {
    @apply p-6;
  }
  
  /* Button variants */
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none px-4 py-2;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
  }
  
  .btn-secondary {
    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 active:bg-secondary-300;
  }
  
  .btn-success {
    @apply bg-success-600 text-white hover:bg-success-700 active:bg-success-800;
  }
  
  .btn-warning {
    @apply bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800;
  }
  
  .btn-error {
    @apply bg-error-600 text-white hover:bg-error-700 active:bg-error-800;
  }
  
  .btn-ghost {
    @apply bg-transparent hover:bg-secondary-100 active:bg-secondary-200;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
  }
  
  .card-header {
    @apply p-6 border-b border-gray-200;
  }
  
  .card-content {
    @apply p-6;
  }
  
  .card-footer {
    @apply p-6 border-t border-gray-200 bg-gray-50 rounded-b-lg;
  }
  
  /* Form styles */
  .form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .form-error {
    @apply text-sm text-error-600 mt-1;
  }
  
  /* Status badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-new {
    @apply badge bg-blue-100 text-blue-800;
  }
  
  .badge-in-progress {
    @apply badge bg-yellow-100 text-yellow-800;
  }
  
  .badge-waiting {
    @apply badge bg-orange-100 text-orange-800;
  }
  
  .badge-resolved {
    @apply badge bg-green-100 text-green-800;
  }
  
  .badge-closed {
    @apply badge bg-gray-100 text-gray-800;
  }
  
  .badge-reopened {
    @apply badge bg-red-100 text-red-800;
  }
  
  /* Priority badges */
  .badge-priority-low {
    @apply badge bg-gray-100 text-gray-600;
  }
  
  .badge-priority-medium {
    @apply badge bg-blue-100 text-blue-700;
  }
  
  .badge-priority-high {
    @apply badge bg-orange-100 text-orange-700;
  }
  
  .badge-priority-urgent {
    @apply badge bg-red-100 text-red-700;
  }
}

/* Custom utility classes */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Loading spinner */
  .spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
  }
  
  /* Animations */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
}

/* Custom keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}