/* Styles globaux */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Customisation des éléments de formulaire */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Personnalisation des boutons */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
}

.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

.btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
}

/* Personnalisation des tableaux */
.table-responsive {
    @apply overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply bg-gray-50;
}

.table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

.table-row {
    @apply hover:bg-gray-50;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

/* Classes d'animation */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Classes d'utilitaires personnalisées */
.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
}

.card-header {
    @apply px-4 py-5 border-b border-gray-200 sm:px-6;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.card-footer {
    @apply px-4 py-4 border-t border-gray-200 sm:px-6;
}