/* ===================================================================
   COMMON COMPONENTS - Composants réutilisables partagés
   Utilisés dans admin ET client
   =================================================================== */

/* Gradient cards */
.gradient-card-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.gradient-card-info {
    background: linear-gradient(135deg, var(--info-500), #2563EB);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.gradient-card-success {
    background: linear-gradient(135deg, var(--success-500), #16A34A);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.gradient-card-warning {
    background: linear-gradient(135deg, var(--warning-500), #D97706);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

/* Color boxes - Utilisés pour highlight information */
.color-box-success {
    background: var(--success-50);
    border-bottom: 2px solid var(--success-500);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

.color-box-danger {
    background: var(--error-50);
    border-bottom: 2px solid var(--error-500);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

.color-box-warning {
    background: var(--warning-100);
    border-bottom: 2px solid var(--warning-500);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

.color-box-info {
    background: var(--info-100);
    border-bottom: 2px solid var(--info-500);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

/* Icon utilities */
.icon-inline-opacity {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.5;
}

.icon-arrow-large {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Badge système (utilisé via composant status_badge) */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    text-align: center;
}

.badge-primary { background: var(--primary-100); color: var(--primary-700); }
.badge-success { background: var(--success-100); color: var(--success-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger { background: var(--error-100); color: var(--error-700); }
.badge-info { background: var(--info-100); color: var(--info-700); }
.badge-secondary { background: var(--neutral-200); color: var(--neutral-700); }

/* Section labels */
.section-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}