/* Styles personnalisés pour llmlogs.fr */

.card {
    background-color: #ffffff;
    border-radius: 0.75rem; /* 12px */
    padding: 1.5rem; /* 24px */
    border: 1px solid #e5e7eb; /* gray-200 */
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
                0 4px 6px -4px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12),
                0 10px 10px -5px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.card-gradient {
    @apply bg-gradient-to-br from-purple-50 via-indigo-50 to-purple-100 rounded-xl shadow-lg p-6 border border-purple-200;
}

.card-site {
    @apply bg-white rounded-xl shadow-lg p-8 border-2 border-transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3), rgba(34, 211, 238, 0.3)) border-box;
    transition: all 0.3s ease;
}

.card-site:hover {
    @apply shadow-2xl;
    transform: translateY(-4px);
    border-image: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.6), rgba(34, 211, 238, 0.6)) 1;
}

.stat-badge {
    @apply inline-flex items-center justify-center px-3 py-1 rounded-full text-xs font-semibold;
}

.stat-badge-purple {
    @apply bg-gradient-to-r from-purple-100 to-purple-200 text-purple-700;
}

.stat-badge-indigo {
    @apply bg-gradient-to-r from-indigo-100 to-indigo-200 text-indigo-700;
}

.stat-badge-cyan {
    @apply bg-gradient-to-r from-cyan-100 to-cyan-200 text-cyan-700;
}

.stat-badge-pink {
    @apply bg-gradient-to-r from-pink-100 to-pink-200 text-pink-700;
}

.stat-badge-orange {
    @apply bg-gradient-to-r from-orange-100 to-orange-200 text-orange-700;
}

.stat-badge-emerald {
    @apply bg-gradient-to-r from-emerald-100 to-emerald-200 text-emerald-700;
}

.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold border-2 border-purple-600 hover:bg-purple-50 transition-all duration-200;
}

.input-field {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none transition-all;
}

.nav-link {
    @apply px-4 py-2 rounded-lg transition-colors text-gray-600 hover:text-purple-600;
}

.nav-link-active {
    @apply bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 font-semibold;
}

/* Couleurs pour les statistiques */
.stat-number-purple {
    @apply text-2xl font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent;
}

.stat-number-indigo {
    @apply text-2xl font-bold bg-gradient-to-r from-indigo-600 to-indigo-700 bg-clip-text text-transparent;
}

.stat-number-cyan {
    @apply text-2xl font-bold bg-gradient-to-r from-cyan-500 to-cyan-600 bg-clip-text text-transparent;
}

.stat-number-pink {
    @apply text-2xl font-bold bg-gradient-to-r from-pink-500 to-pink-600 bg-clip-text text-transparent;
}

.stat-number-orange {
    @apply text-2xl font-bold bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent;
}

.stat-number-emerald {
    @apply text-2xl font-bold bg-gradient-to-r from-emerald-500 to-emerald-600 bg-clip-text text-transparent;
}