/* ============================================
   Composants Réutilisables
   ============================================ */

/* === CARTES MODERNES === */

.card-modern {
    @apply bg-white/80 backdrop-blur-md rounded-2xl shadow-sm border border-gray-200/50 
           overflow-hidden hover:shadow-lg transition-all duration-300;
}

.card-header {
    @apply px-6 py-4 shadow-lg;
}

/* Variants de headers */
.card-header-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-700;
}

.card-header-success {
    @apply bg-gradient-to-r from-green-500 to-emerald-600;
}

.card-header-warning {
    @apply bg-gradient-to-r from-amber-500 to-orange-600;
}

.card-header-danger {
    @apply bg-gradient-to-r from-red-500 to-rose-600;
}

.card-header-info {
    @apply bg-gradient-to-r from-cyan-500 to-blue-600;
}

.card-header-agent-shopping {
    @apply bg-gradient-to-r from-blue-500 to-purple-600;
}

.card-header-agent-support {
    @apply bg-gradient-to-r from-amber-500 to-red-600;
}

.card-header-agent-router {
    @apply bg-gradient-to-r from-purple-600 to-pink-600;
}

.card-header-neutral {
    @apply bg-gradient-to-r from-gray-700 to-gray-900;
}

/* Éléments de header */
.card-header-icon {
    @apply w-8 h-8 bg-white/30 rounded-xl flex items-center justify-center shadow-sm;
}

.card-title {
    @apply text-xl font-bold text-white drop-shadow-lg;
}

.card-subtitle {
    @apply text-white/95 text-sm mt-1;
}

.card-content {
    @apply p-6;
}

/* Variantes de cartes */
.card-stat {
    @apply card-modern hover:-translate-y-1 cursor-pointer;
}

.card-stat:hover {
    @apply shadow-xl;
}

/* === BADGES === */

.badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium;
}

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

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

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

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

.badge-info {
    @apply bg-cyan-100 text-cyan-800;
}

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

.badge-pulse {
    @apply animate-pulse;
}

/* === ALERTES === */

.alert {
    @apply rounded-xl p-4 border-l-4;
}

.alert-success {
    @apply bg-green-50 border-green-500 text-green-900;
}

.alert-error {
    @apply bg-red-50 border-red-500 text-red-900;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-500 text-yellow-900;
}

.alert-info {
    @apply bg-blue-50 border-blue-500 text-blue-900;
}

/* === TABS === */

.tab-button {
    @apply py-4 px-6 font-medium text-sm border-b-2 transition-all duration-200;
}

.tab-button-active {
    @apply border-blue-500 text-blue-600 bg-blue-50/50;
}

.tab-button-inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

/* === LOADING === */

.loading-spinner {
    @apply inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full;
    animation: spin 0.8s linear infinite;
}

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

.loading-overlay {
    @apply absolute inset-0 bg-white/90 backdrop-blur-sm flex items-center justify-center rounded-xl z-10;
}

/* === STAT CARDS === */

.stat-number {
    @apply text-3xl font-bold text-gray-900 mb-1;
    animation: countUp 0.8s ease-out;
}

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

/* === INFO BOXES === */

.info-box {
    @apply rounded-xl p-4 border;
}

.info-box-blue {
    @apply bg-blue-50 border-blue-200;
}

.info-box-green {
    @apply bg-green-50 border-green-200;
}

.info-box-amber {
    @apply bg-amber-50 border-amber-200;
}

.info-box-purple {
    @apply bg-purple-50 border-purple-200;
}

/* === DIVIDERS === */

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

.divider-vertical {
    @apply border-l border-gray-200 mx-4;
}

/* === CODE BLOCKS === */

.code-block {
    @apply bg-gray-900 text-gray-100 rounded-xl p-4 overflow-x-auto font-mono text-sm;
}

.code-inline {
    @apply bg-gray-100 text-gray-900 px-2 py-1 rounded font-mono text-sm;
}

/* === PROGRESS BARS === */

.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-bar-fill {
    @apply bg-blue-600 h-full rounded-full transition-all duration-300;
}

/* === TOOLTIPS === */

.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg pointer-events-none;
    opacity: 0;
    transition: opacity 0.2s;
}

.tooltip-visible {
    opacity: 1;
}

/* === MODALS === */

.modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden;
}

.modal-header {
    @apply bg-gradient-to-r from-blue-600 to-indigo-700 px-6 py-4 flex items-center justify-between;
}

.modal-body {
    @apply p-6 overflow-y-auto max-h-[calc(90vh-80px)];
}

.modal-footer {
    @apply px-6 py-4 bg-gray-50 flex items-center justify-end gap-3 border-t border-gray-200;
}

/* === ANIMATIONS SUPPLÉMENTAIRES === */

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-out-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out;
}

.animate-fade-out-up {
    animation: fade-out-up 0.3s ease-out;
}

.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

.animate-slide-in-left {
    animation: slide-in-left 0.3s ease-out;
}

/* === PULSE ANIMATION === */

.pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}