/* Factory labels: machines (.fm), parcels (.fz), state chips (.fst-*). Builds on base.css (.lbl, LOD classes). */

.fm {
  position: relative;
  padding: 0.18em 0.45em 0.22em;
  border-radius: 0.45em;
  background: rgba(14, 22, 48, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #eef3ff;
  font-family: var(--font-body, 'Chakra Petch', sans-serif);
  font-size: 0.78em;
  line-height: 1.15;
  box-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.25);
}
.fm .nm { font-family: var(--font-title); font-size: 1.05em; letter-spacing: 0.02em; }
.fm .l1 { display: flex; align-items: center; gap: 0.4em; }
.fm .l2 small { color: #b9c8ea; font-size: 0.86em; }
.lbl.alert .fm { border-color: #ffd23f; animation: fac-alert 0.9s ease-in-out infinite; }
@keyframes fac-alert { 50% { box-shadow: 0 0 0 0.25em rgba(255, 210, 63, 0.35); } }

.fst {
  display: inline-block;
  padding: 0.05em 0.42em 0.08em;
  border-radius: 0.4em;
  font-family: var(--font-title);
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
}
.fst-working { background: #2fcf78; color: #052a15; }
.fst-idle { background: #ffd23f; color: #3a2a00; }
.fst-blocked { background: #e04848; }
.fst-frozen { background: linear-gradient(180deg, #d9fbff, #7fe3ff); color: #06334a; border: 2px solid #ff3b30; box-shadow: 0 0 0.6em rgba(255, 59, 48, 0.9); animation: fac-blink 1.1s steps(2) infinite; }
.fst-failed { background: #b3261e; animation: fac-blink 0.8s steps(2) infinite; }
.fst-off { background: #3a3d48; color: #aab0c0; }
.fst-unknown { background: #b8791f; color: #fff3d6; }
@keyframes fac-blink { 50% { opacity: 0.45; } }

/* machines: calm ones only show when zoomed in; bad ones always */
#labels.lod-far .lbl.fm-label:not(.alert):not(.hot) { display: none; }
#labels.lod-mid .lbl.fm-label:not(.alert):not(.hot) .fm .l2 { display: none; }
#labels.lod-mid .lbl.fm-label:not(.alert):not(.hot) .fst-working { display: none; }

/* parcels: name tag at the bottom-left corner, anchored above its point */
.fz {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.15em 0.55em 0.2em;
  border-radius: 0.4em;
  background: rgba(22, 32, 74, 0.85);
  border: 1px solid rgba(255, 197, 61, 0.6);
  color: #ffe38a;
  font-family: var(--font-body, 'Chakra Petch', sans-serif);
  font-size: 1.05em;
  transform: translate(50%, 0);
}
.fz .nm { font-family: var(--font-title); font-size: 1.25em; letter-spacing: 0.03em; }
#labels.lod-far .fz { font-size: 1.25em; padding: 0.2em 0.7em 0.25em; border-width: 2px; }
.fz small { color: #c8d4f2; font-size: 0.72em; }
#labels.lod-far .fz small { display: none; }
.lbl.alert .fz { border-color: #ff5a4d; background: rgba(60, 12, 12, 0.9); }

/* throughput on the main lanes: always visible, small */
.fr { display: inline-block; padding: 0.05em 0.45em 0.1em; border-radius: 0.5em; background: rgba(14, 22, 48, 0.85); border: 1px solid rgba(255, 216, 74, 0.7);
  color: #ffe38a; font-family: var(--font-title); font-size: 0.8em; letter-spacing: 0.03em; }
.fr.stalled { border-color: #ff5a4d; color: #ffb3ad; background: rgba(70, 12, 12, 0.9); }
.fr.orphan { border-color: #b08a5a; color: #e8c9a0; }
.fr.empty { opacity: 0.55; }
#labels.lod-far .lbl.fr-label { font-size: 1.15em; }