/* Barre de progression « Encaissement » des grilles de commandes.
   Utilisée par Devis et Commandes (GridQuotations) et le Tableau de bord
   (GridOrders — Dernières Commandes), via ~/assets/js/encaissement-progress.js.

   Trois zones lues de gauche à droite :
     - encaissé (vert)            : argent réellement perçu
     - facturé non payé (orange)  : facturé au client, pas encore encaissé
     - reste à facturer (neutre)  : part de la commande pas encore facturée */

.encProgress {
    line-height: 1.2;
}

.encProgress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 5px;
}

.encProgress-pct {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Vert dès qu'un paiement existe, orange quand tout le facturé reste dû,
   neutre quand il n'y a encore ni encaissement ni facturation. */
.encProgress-pct.encProgress-collected {
    color: #0ab39c;
}

.encProgress-pct.encProgress-billed {
    color: #d9860f;
}

.encProgress-pct.encProgress-empty {
    color: #878a99;
}

.encProgress-rest {
    font-size: 10.5px;
    color: #878a99;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.encProgress-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background-color: #f1f3f5;
    overflow: hidden;
}

/* Les deux segments partent du bord gauche : l'encaissé est posé par-dessus le
   facturé, la partie orange encore visible est donc exactement le facturé non payé. */
.encProgress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.encProgress-barBilled {
    background-color: #f7b84b;
}

.encProgress-barCollected {
    background-color: #0ab39c;
}

/* Légende, à placer sous la grille (~/Views/Shared/_EncaissementProgressLegend.cshtml) */
.encProgress-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-size: 11.5px;
    color: #878a99;
}

.encProgress-legend > span {
    display: inline-flex;
    align-items: center;
}

.encProgress-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
}

.encProgress-swatchCollected {
    background-color: #0ab39c;
}

.encProgress-swatchBilled {
    background-color: #f7b84b;
}

.encProgress-swatchRemaining {
    background-color: #f1f3f5;
    border: 0.5px solid #e0e3e7;
}