/*
 * badge.css — Badge utility classes for DaLMS (Tailwind + Font Awesome Pro)
 *
 * Provides utility classes for colored badges with optional Font Awesome Pro icons via CSS pseudo-elements.
 *
 * Usage (dans vos vues ERB/HTML) :
 *   <span class="badge badge-success">Réussi</span>
 *   <span class="badge badge-danger">Échoué</span>
 *   <span class="badge badge-info">Information</span>
 *   <span class="badge badge-warning">Attention</span>
 *   <span class="badge badge-secondary">Secondaire</span>
 *
 * Les icônes sont ajoutées automatiquement avant le texte grâce à ::before, sans balise <i> nécessaire.
 *
 * Espace insécable :
 *   - Un espace insécable (\00a0) est ajouté après l'icône dans le content du ::before.
 *   - Cela garantit que l'icône et le texte du badge restent toujours sur la même ligne (pas de retour à la ligne entre les deux).
 *   - C'est important pour l'accessibilité et l'esthétique des badges.
 *
 * Font Awesome Pro doit être chargé en mode police dans le projet.
 *
 * Codes FontAwesome utilisés :
 *   - Success   : \f058 (fa-circle-check, regular)
 *   - Info      : \f05a (fa-circle-info, regular)
 *   - Danger    : \f057 (fa-circle-xmark, regular)
 *   - Warning   : \f071 (fa-triangle-exclamation, regular)
 *   - Secondary : \f0c8 (fa-square, regular)
 *
 * Pour changer l'icône ou le style (solid, light...), modifiez font-weight et content.
 *
 * Personnalisation :
 *   - Ajoutez d'autres variantes en suivant le même modèle.
 *   - Pour désactiver l'icône, retirez la règle ::before correspondante.
 */

.badge {
    @apply inline-block px-2 py-0.5 rounded-full text-xs font-medium align-middle whitespace-nowrap;
}

.badge-success {
    @apply bg-green-200 text-green-900 border border-green-300;
}

.badge-info {
    @apply bg-blue-200 text-blue-900 border border-blue-300;
}

.badge-danger {
    @apply bg-red-200 text-red-900 border border-red-300;
}

.badge-warning {
    @apply bg-amber-200 text-amber-900 border border-amber-300;
}

.badge-secondary {
    @apply bg-gray-200 text-gray-900 border border-gray-300;
}

.badge-success::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f058\00a0";
    display: inline-block;
}


.badge-info::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f05a\00a0";
    display: inline-block;
}

.badge-danger::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f057\00a0";
    display: inline-block;
}

.badge-warning::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f071\00a0";
    display: inline-block;
}

.badge-secondary::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f0c8\00a0";
    display: inline-block;
}