@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Styles de base */
@layer base {
  html, body {
    @apply h-full bg-gray-50 text-gray-900;
  }
  
  #app {
    @apply h-full;
  }
  
  /* Typography */
  h1 {
    @apply text-3xl font-bold tracking-tight;
  }
  
  h2 {
    @apply text-2xl font-semibold tracking-tight;
  }
  
  h3 {
    @apply text-xl font-semibold;
  }
  
  h4 {
    @apply text-lg font-medium;
  }
  
  /* Scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

/* Composants personnalisés */
@layer components {
  /* Boutons */
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
  }
  
  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  
  .btn-secondary {
    @apply btn bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
  }
  
  .btn-success {
    @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
  }
  
  .btn-warning {
    @apply btn bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500;
  }
  
  .btn-danger {
    @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
  }
  
  .btn-outline {
    @apply btn border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow border border-gray-200;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }
  
  .card-body {
    @apply px-6 py-4;
  }
  
  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }
  
  /* Badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply badge bg-primary-100 text-primary-800;
  }
  
  .badge-success {
    @apply badge bg-success-100 text-success-800;
  }
  
  .badge-warning {
    @apply badge bg-warning-100 text-warning-800;
  }
  
  .badge-danger {
    @apply badge bg-danger-100 text-danger-800;
  }
  
  .badge-gray {
    @apply badge bg-gray-100 text-gray-800;
  }
  
  /* Forms */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .form-error {
    @apply mt-1 text-sm text-danger-600;
  }
  
  /* Loading */
  .loading {
    @apply animate-spin h-5 w-5 text-primary-600;
  }
  
  /* Terminal */
  .terminal {
    @apply bg-gray-900 text-green-400 font-mono p-4 rounded-lg border;
    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  }
  
  /* Status indicators */
  .status-healthy {
    @apply text-success-600 bg-success-100;
  }
  
  .status-warning {
    @apply text-warning-600 bg-warning-100;
  }
  
  .status-error {
    @apply text-danger-600 bg-danger-100;
  }
  
  .status-creating {
    @apply text-primary-600 bg-primary-100;
  }
  
  /* Animations */
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }
  
  .slide-up-enter-active, .slide-up-leave-active {
    transition: all 0.3s ease;
  }
  
  .slide-up-enter-from {
    transform: translateY(20px);
    opacity: 0;
  }
  
  .slide-up-leave-to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/* Utilitaires */
@layer utilities {
  .text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .glass {
    @apply backdrop-blur-sm bg-white/80 border border-white/20;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
}