/* Variabili colori */
:root {
  --pg-default-bg: #2A2250; /* Sfondo barra in linea con pannello */
  --bar-handleos: #9575cd;
  --bar-windows: #3798d9;
}

/* Contenitore progress bar */
.cssProgress {
  width: 100%;
  margin-bottom: 24px;
}

/* Stile contenitore della progress bar */
.progress2 {
  position: relative;
  background-color: var(--pg-default-bg); /* Sfondo scuro */
  border-radius: 9px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Arrotonda anche la barra dentro */
  height: 18px;
}

/* Barra di progresso - STATO INIZIALE */
.cssProgress-bar {
  position: relative;
  height: 100%;
  border-radius: 9px;
  width: 0%; /* Inizia da 0% */
  transition: none; /* Nessuna transizione di default */
}

/* Label FPS posizionato a destra */
.cssProgress-label {
  position: absolute;
  right: 10px;
  color: #fff;
  font-size: 0.8em;
  text-align: right;
  line-height: 18px;
  font-weight: 600;
  z-index: 1;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Label visibile quando la barra è animata */
.cssProgress-bar.animate .cssProgress-label {
  opacity: 1;
  transition-delay: 0.8s; /* Appare a metà animazione */
}

/* Keyframes per l'animazione */
@keyframes progressBarAnimation {
  from {
    width: 0%;
  }
  to {
    width: var(--target-width); /* La larghezza finale sarà dinamica */
  }
}

/* Classe che attiva l'animazione */
.cssProgress-bar.animate {
  animation-name: progressBarAnimation;
  animation-duration: 1.8s; /* Durata totale dell'animazione */
  animation-fill-mode: forwards; /* Mantiene lo stato finale dopo l'animazione */
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); /* Effetto lento-veloce-lento */
}

/* Label fallback sul contenitore (es. errore) */
.cssProgress-fallback {
  position: absolute;
  left: 0;
  right: 0;
  color: #ff4c4c; /* Rosso errore */
  font-size: 0.8em;
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  z-index: 2; /* Sopra allo sfondo ma sotto a una barra se presente */
  pointer-events: none;
  top: 0;
}

/* Label fallback sul contenitore (es. errore) */
.cssProgress-fallback-increase-perf {
  position: absolute;
  left: 0;
  right: 0;
  color: #4cff73a9; /* Rosso errore */
  font-size: 0.8em;
  text-align: right;
  line-height: 18px;
  font-weight: 700;
  z-index: 2; /* Sopra allo sfondo ma sotto a una barra se presente */
  pointer-events: none;
  top: 0;
}

/* Varianti colore */
.cssProgress-handleos { background-color: var(--bar-handleos) !important; }
.cssProgress-windows { background-color: var(--bar-windows) !important; }

/* Etichetta sopra la barra */
.bar-title {
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 4px;
}
.bar-title.handleos { color: var(--bar-handleos); }
.bar-title.windows { color: var(--bar-windows); }

/* Legenda in alto */
.legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  font-weight: 600;
  color: white;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px; /* se vuoi tondo metti 50% */
}
.legend-handleos { background-color: var(--bar-handleos); }
.legend-windows { background-color: var(--bar-windows); }