.ui-badge,
.ui-status-button {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 630;
  line-height: 1.1;
}

.ui-badge {
  cursor: default;
}

.ui-status-button {
  cursor: pointer;
  transition: box-shadow var(--ui-duration-fast) var(--ui-easing);
}

.ui-badge--neutral {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
}

.ui-badge--primary {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
}

.ui-badge--info {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}

.ui-badge--success {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

.ui-badge--warning {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.ui-badge--danger {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

/*
 * Coloration de ligne pour la transmission electronique (PDP) - decision du
 * porteur de projet du 30/08/2026 (todo/v1.0.1-pdp/00_perimetre_et_contrat.md,
 * section 3), etendue le 01/09/2026 au repli des sept etats en trois
 * (src/pdp/AGENTS.md) : ligne rouge sur l'etat affiche « Erreur » (rejetee,
 * refusee, erreur), ligne verte sur « Transmise » (en_cours, transmise), fond
 * neutre sur « Non transmise ». La classe rouge s'appelait `--rejetee` quand
 * `rejetee` etait seul a la porter ; elle porte desormais le nom de ce
 * qu'elle montre. Aucune ligne de tableau n'etait coloree par statut avant
 * cette convention (research/pdp_superpdp/01_inventaire_ui_existante.md,
 * section 7) ; on reutilise donc les tokens `--ui-danger-soft`/`--ui-success-soft`
 * deja poses dans tokens.css plutot que d'en creer de nouveaux. Le selecteur
 * explicite ":hover"/":focus-within" evite que le survol/la selection de
 * `.serena-data-table` (shell.css, charge apres ce fichier) n'efface la teinte.
 */
.serena-data-table tbody tr.ui-row-status--erreur,
.serena-data-table tbody tr.ui-row-status--erreur:hover,
.serena-data-table tbody tr.ui-row-status--erreur:focus-within {
  background: var(--ui-danger-soft);
}

.serena-data-table tbody tr.ui-row-status--transmise,
.serena-data-table tbody tr.ui-row-status--transmise:hover,
.serena-data-table tbody tr.ui-row-status--transmise:focus-within {
  background: var(--ui-success-soft);
}

/*
 * Le badge de la colonne « Facture élec. » porte le fond « soft » de sa
 * famille — exactement celui que la ligne vient de prendre. Sur une ligne
 * teintee il perdait donc sa pastille et se lisait comme du texte nu, alors
 * que c'est lui qui nomme l'etat ; la ligne, elle, ne fait que le repeter de
 * loin. On lui rend le fond de la carte : la ligne garde sa couleur, le badge
 * garde sa forme.
 */
.serena-data-table tbody tr.ui-row-status--transmise .ui-badge--success,
.serena-data-table tbody tr.ui-row-status--erreur .ui-badge--danger {
  background: var(--ui-surface);
}

.ui-status-button:hover {
  box-shadow: 0 0 0 3px rgb(23 33 32 / 8%);
}