/* ==========================================================================
   Badges pastel partages (style PriceTracker / Search Query)
   - palette douce (background pale + texte fonce)
   - radius 999px, padding 4px 10px, font 12px 600
   Utilisable via <span class="badge badge-{color}">...</span>
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-blue   { background: #eff6ff; color: #1d4ed8; }
.badge-green  { background: #f0fdf4; color: #059669; }
.badge-red    { background: #fef2f2; color: #dc2626; }
.badge-orange { background: #fef3c7; color: #92400e; }
.badge-purple { background: #faf5ff; color: #7c3aed; }
.badge-grey   { background: #f3f4f6; color: #374151; }

/* Override MudBlazor MudChip pour ne pas etre flashy quand on garde MudChip
   (sans avoir a tout migrer). Application: utilise Color.Info / Success / etc.
   et on rend tout en pastel via CSS. */
.mud-chip.mud-chip-color-success {
    background-color: #f0fdf4 !important;
    color: #059669 !important;
}
.mud-chip.mud-chip-color-error {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
.mud-chip.mud-chip-color-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
.mud-chip.mud-chip-color-info {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
.mud-chip.mud-chip-color-secondary {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}
.mud-chip.mud-chip-color-primary {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}