/* Styles personnalisés pour le CRM - Design Noir et Violet Élégant */

/* Variables de couleurs */
:root {
  --primary-purple: #8B5CF6;
  --dark-purple: #6D28D9;
  --light-purple: #A78BFA;
  --accent-violet: #C084FC;
  --dark-bg: #1F2937;
  --darker-bg: #111827;
  --card-bg: #374151;
  --text-light: #F9FAFB;
  --text-gray: #D1D5DB;
  --border-gray: #4B5563;
}

/* Navigation sidebar */
.nav-item {
    @apply block px-6 py-3 text-gray-300 hover:bg-purple-800 hover:text-white transition-all duration-300 border-l-4 border-transparent;
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.1) 100%);
}

.nav-item:hover {
    border-left-color: var(--primary-purple);
    box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.2);
}

.nav-item.active {
    @apply bg-purple-800 text-white;
    border-left-color: var(--accent-violet);
    background: linear-gradient(90deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

/* Cartes de statistiques - Design élégant */
.stat-card {
    @apply rounded-xl shadow-2xl p-6 border border-gray-600;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--dark-bg) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.2);
}

.stat-card-header {
    @apply flex items-center justify-between mb-4;
}

.stat-card-title {
    @apply text-sm font-medium uppercase tracking-wide;
    color: var(--text-gray);
}

.stat-card-value {
    @apply text-3xl font-bold;
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.stat-card-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-white text-xl;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-violet) 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

/* Tableaux - Design moderne */
.table-container {
    @apply rounded-xl shadow-2xl border border-gray-600 overflow-hidden;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--dark-bg) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.table-header {
    @apply px-6 py-4 border-b border-gray-600 flex items-center justify-between;
    background: linear-gradient(90deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
}

.table-title {
    @apply text-lg font-semibold;
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    @apply text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
}

.btn-secondary {
    @apply font-medium py-2 px-4 rounded-lg transition-all duration-300;
    background: var(--card-bg);
    color: var(--text-gray);
    border: 1px solid var(--border-gray);
}

.btn-secondary:hover {
    background: var(--primary-purple);
    color: var(--text-light);
    transform: translateY(-2px);
}

.btn-success {
    @apply text-white font-medium py-2 px-4 rounded-lg transition-all duration-300;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-danger {
    @apply text-white font-medium py-2 px-4 rounded-lg transition-all duration-300;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-sm {
    @apply py-1 px-3 text-sm;
}

/* Badges de statut */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

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

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

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

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

/* Formulaires élégants */
.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-medium mb-2;
    color: var(--text-light);
}

.form-input {
    @apply w-full px-4 py-3 rounded-lg shadow-sm transition-all duration-300;
    background: var(--card-bg);
    border: 1px solid var(--border-gray);
    color: var(--text-light);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.form-select {
    @apply w-full px-4 py-3 rounded-lg shadow-sm transition-all duration-300;
    background: var(--card-bg);
    border: 1px solid var(--border-gray);
    color: var(--text-light);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.form-textarea {
    @apply w-full px-4 py-3 rounded-lg shadow-sm resize-vertical transition-all duration-300;
    background: var(--card-bg);
    border: 1px solid var(--border-gray);
    color: var(--text-light);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Modales élégantes */
.modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.modal-content {
    @apply rounded-2xl shadow-2xl max-w-4xl w-full max-h-full overflow-y-auto;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--dark-bg) 100%);
    border: 1px solid var(--border-gray);
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-600 flex items-center justify-between;
    background: linear-gradient(90deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
}

.modal-title {
    @apply text-xl font-bold;
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.modal-body {
    @apply px-6 py-6;
    background: var(--card-bg);
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-600 flex items-center justify-end space-x-3;
    background: var(--dark-bg);
}

/* Alertes */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

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

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

/* Responsive design */
@media (max-width: 1024px) {
    .stat-card {
        @apply text-center;
    }
    
    .table-container {
        @apply overflow-x-auto;
    }
}

/* Skeleton loaders */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-text {
    @apply h-4 bg-gray-200 rounded animate-pulse;
}

.skeleton-circle {
    @apply rounded-full bg-gray-200 animate-pulse;
}

/* Charts container */
.chart-container {
    @apply relative h-64 w-full;
}