/* 23-missions-badges.css — lignes 1582-1663 de l'ancien style.css unique, contenu inchangé */

/* ===========================
   MISSIONS
=========================== */
.mission-card{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.mission-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-3);
}

/* Badge de statut, tous domaines confondus (missions, factures, clients,
   documents). Les variantes couvrent l'ENSEMBLE des statuts réellement
   définis dans les Engines — un statut sans variante retombe sur le style
   neutre, ce qui reste lisible.
   `.mission-statut*` est conservé comme alias historique. */
.badge,
.mission-statut{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    padding:var(--space-1) var(--space-3);
    border-radius:var(--radius-full);
    background:var(--badge-neutre-fond);
    color:var(--badge-neutre-texte);
    white-space:nowrap;
}

/* En cours / envoyée — action engagée, en attente d'aboutissement */
.badge-en_cours,
.badge-envoyee,
.badge-validee,
.badge-en_preparation,
.mission-statut-en_cours{
    background:var(--badge-info-fond);
    color:var(--badge-info-texte);
}

/* Succès — encaissé, achevé, relation active */
.badge-terminee,
.badge-archivee,
.badge-payee,
.badge-actif,
.mission-statut-terminee,
.mission-statut-archivee{
    background:var(--badge-succes-fond);
    color:var(--badge-succes-texte);
}

/* En attente — pas encore engagé ou pas encore encaissé.
   Cohérent avec AnalyticsEngine, qui compte BROUILLON et ENVOYEE comme
   « factures en attente ». ENVOYEE apparaît volontairement aussi en info
   ci-dessus : la règle la plus tardive gagne, donc ENVOYEE ressort en
   attente — c'est l'information la plus utile (argent non encaissé). */
.badge-brouillon,
.badge-proposition,
.badge-prospect,
.badge-envoyee{
    background:var(--badge-attente-fond);
    color:var(--badge-attente-texte);
}

/* Danger — annulé, interrompu, relation éteinte */
.badge-suspendue,
.badge-annulee,
.badge-inactif,
.mission-statut-suspendue,
.mission-statut-annulee{
    background:var(--badge-danger-fond);
    color:var(--badge-danger-texte);
}

.mission-client{
    color:var(--text-light);
    font-size:14px;
}

/* Notes libres d'une fiche client. Elles ne sont pas une ligne de coordonnée
   de plus : le filet vertical les sépare du reste, et les retours à la ligne
   saisis par l'utilisateur sont conservés. */
.client-notes{
    margin-top:var(--space-2);
    padding-left:var(--space-3);
    border-left:2px solid var(--border);
    color:var(--text-light);
    font-size:13px;
    white-space:pre-wrap;
}

.mission-avancement{
    font-size:13px;
    color:var(--text-light);
}

.mission-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
    align-items:center;
    margin-top:var(--space-3);
}

.mission-actions select{
    flex:1 1 100%;
    padding:var(--space-3);
    border-radius:var(--radius-sm);
    border:1px solid #d1d5db;
}

.mission-actions .primary-button{
    margin-top:0;
    padding:10px 16px;
    font-size:14px;
    flex:1 1 auto;
    white-space:nowrap;
    justify-content:center;
}

body.dark .badge,
body.dark .mission-statut{
    background:#334155;
    color:#e2e8f0;
}

/* ---------------------------------------------------------------------
   Les actions d'une mission en petite largeur — V3, Cycle 25.

   Vu à 390 px : le menu déroulant de statut s'affichait en PAVÉ GRIS de
   150 px de haut, à côté des boutons. Deux causes qui se combinent.

   1. La règle responsive vivait dans `22-responsive.css`, chargé avant
      ce fichier. Son `align-items:stretch` était écrasé par le
      `align-items:center` posé plus haut ici, à specificité égale.
      Une règle responsive écrite avant le composant qu'elle vise perd
      toujours — c'est la famille du Cycle 13, une règle qui ne
      s'applique pas.

   2. En colonne, `flex-basis` change de sens. Le `flex:1 1 100%` du
      sélecteur, écrit pour une rangée où il veut toute la LARGEUR,
      réclame alors toute la HAUTEUR disponible.

   Aucun test ne pouvait le voir : pas de débordement, pas d'erreur,
   juste un contrôle méconnaissable.
   --------------------------------------------------------------------- */
@media (max-width: 600px){

    .mission-actions{
        align-items:stretch;
    }

    .mission-actions select{
        flex:0 0 auto;
        width:100%;
    }

}