/* Culoarea stării - aceeași în stație, la birou și la transport.
   ---------------------------------------------------------------------------
   Pâna acum fiecare ecran își vopsea singur eticheta, și nu la fel: aceeași
   comandă era verde la stație, galbenă la birou și fără culoare la transport.
   Omul care umblă între ele învăța trei coduri de culori în loc de unul, iar
   „Anulată" arăta ca „Închisă" - amândouă fără culoare.

   Aici stau toate stările, o singură dată. Ecranele scriu pe etichetă clasa
   `status-<STARE>`, cu starea exact cum vine din server, și de mai jos își
   iau culoarea. Foaia se încarcă DUPĂ `styles.css`, ca să bată vechile reguli
   punctuale, iar `.badge.status-X` cântărește mai mult decât `.status-X`.

   Grupele sunt după ce trebuie să facă omul, nu după cuvânt:
     gri        - încă nimic de făcut;
     mov        - se lucrează acum;
     chihlimbar - gata, așteaptă o hotărâre de la un om;
     portocaliu - cere atenție chiar acum;
     turcoaz    - luată de cineva, în regulă;
     albastru   - a plecat / s-a mutat;
     verde      - la locul ei, treaba e făcută;
     roșu       - rău: anulat, șters, greșit.
   =========================================================================== */

/* gri - încă nimic de făcut */
.badge.status-DRAFT,
.badge.status-PLANNED,
.badge.status-OPEN,
.badge.status-NOT_STOCK{ background:#e6ebe8; color:#4a5a52; }

/* mov - se lucrează acum */
.badge.status-IN_PRODUCTION,
.badge.status-ASSIGNED{ background:var(--wf-albastru-91); color:#4d3190; }

/* chihlimbar - gata, așteaptă o hotărâre */
.badge.status-READY_FOR_TRANSPORT,
.badge.status-ARRIVED,
.badge.status-PARTIAL{ background:var(--wf-chihlimbar-95); color:var(--wf-chihlimbar-39); }

/* portocaliu - cere atenție acum */
.badge.status-NOTIFIED,
.badge.status-PARTIALLY_LOADED,
.badge.status-CORRECTED{ background:var(--wf-chihlimbar-93); color:#8a3f06; }

/* turcoaz - luată de cineva */
.badge.status-TRANSPORT_ASSIGNED,
.badge.status-ACCEPTED,
.badge.status-ALLOCATED{ background:#d2eeea; color:#0f5a52; }

/* albastru - a plecat sau s-a mutat */
.badge.status-RELEASED,
.badge.status-LOADED,
.badge.status-DISPATCHED,
.badge.status-MOVED,
.badge.status-MOVED_TO_STOCK,
.badge.status-REPLACED_TO_STOCK,
.badge.status-RESTORED,
.badge.status-RESTORED_TO_STOCK{ background:var(--wf-albastru-92); color:var(--wf-albastru-32); }

/* verde - la locul ei */
.badge.status-CLOSED,
.badge.status-COMPLETE,
.badge.status-AVAILABLE,
.badge.status-ACTIVE{ background:var(--wf-cenusiu-93c); color:var(--wf-verde-36b); }

/* roșu - anulat, șters, greșit */
.badge.status-CANCELLED,
.badge.status-DELETED,
.badge.status-ERROR,
.badge.status-UNROUTED{ background:var(--wf-rosu-90); color:var(--wf-rosu-33); }

/* Starea aleasă de operator rămâne plină, ca să se vadă de la doi metri. */
.badge.route-selected{ background:var(--wf-verde-45); color:var(--wf-alb); }

/* ---------------------------------------------------------------------------
   Așezarea etichetei în colțul din dreapta sus.

   Capul cartonașului este `display:flex`, iar `align-items` nesocotit înseamnă
   `stretch`: eticheta se întindea pe toată înălțimea capului - un balon rotund
   cât numărul comenzii și subtitlul la un loc, lipit de marginea de sus. Se
   vedea limpede la transport, unde sub numărul comenzii mai stă un rând.

   `flex-start` o ține sus, la rândul numărului; `flex:0 0 auto` și `nowrap` o
   opresc să se strângă când numele clientului e lung. Blocul din stânga
   primește `min-width:0`, ca el să fie cel care se rupe, nu eticheta.
   ------------------------------------------------------------------------- */
.top,
.order-top{ align-items:flex-start; }
.top>.badge,
.order-top>.badge,
.top>.order-status-stack,
.order-top>.order-status-stack{ flex:0 0 auto; align-self:flex-start; white-space:nowrap; }
.top>div:first-child,
.top>h2:first-child,
.order-top>div:first-child,
.order-top>h3:first-child{ min-width:0; }