/*
 * Couleurs des statuts de réservation, communes à l'espace client et à
 * l'admin. Chaque vue pose une classe is-status-{statut} sur l'élément qui
 * englobe la réservation ; la pastille et la frise lisent --status-color.
 *
 * Teintes franches choisies pour garder un contraste suffisant avec un texte
 * blanc (4,8:1 au minimum).
 */
:root {
    --status-pending-payment: #b45309;
    --status-confirmed: #279c52;
    --status-cancellation-requested: #df4747;
    --status-cancelled: #bfae29;
    --status-finished: #2e88ee;
    --status-abandoned: #64748b;
}

.is-status-pending_payment { --status-color: var(--status-pending-payment); }
.is-status-confirmed { --status-color: var(--status-confirmed); }
.is-status-cancelled { --status-color: var(--status-cancelled); }
.is-status-finished { --status-color: var(--status-finished); }
.is-status-abandoned { --status-color: var(--status-abandoned); }

/* Le paiement s'est bien passé : le chemin déjà parcouru reste vert, seule
   l'étape finale de la frise prend le rouge (voir les feuilles des frises). */
.is-status-cancellation_requested {
    --status-color: var(--status-cancellation-requested);
    --status-track-color: var(--status-confirmed);
}

/* Puce de filtre (liste admin) : les variables du bouton Bootstrap prennent
   la couleur du statut. « Toutes » n'a pas de statut et reste sombre. */
.status-chip {
    --chip-color: var(--status-color, #212529);
    --bs-btn-color: var(--chip-color);
    --bs-btn-border-color: var(--chip-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--chip-color);
    --bs-btn-hover-border-color: var(--chip-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--chip-color);
    --bs-btn-active-border-color: var(--chip-color);
    --bs-btn-bg: transparent;
}

.status-chip.is-active {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--chip-color);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background-color: var(--status-color, var(--status-abandoned));
    color: #fff;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}