/* Il chip, uno solo per tutta l'app (21/10/2026): il «Checkbox Chips» stile badge del designer,
   bordo 2 px, raggio 6, 600 12, 24 px di altezza, riempimento 2/8; e la sua versione piccola
   (.chip--soft) senza bordo, raggio 4, 600 10, fondo chiaro, per i chip dentro le righe. Il colore
   ha un significato fisso: blu = in corso/bozza, viola = da confermare, indaco = dato informativo,
   verde = fatto/ok, giallo = attesa/avviso, rosso = problema, corallo = promozione/sconto, grigio =
   neutro. .chip--filled è pieno, per il fatto più grave della riga (bloccato). */
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--app-placeholder);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--app-placeholder);
  background: var(--app-surface);
}

/* Un chip che è un link (insoluto, segnalazione) non si sottolinea. */
a.chip {
  text-decoration: none;
}

.chip .icon {
  width: 1rem;
  height: 1rem;
}

.chip--blue {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

.chip--purple {
  border-color: var(--app-purple);
  color: var(--app-purple);
}

.chip--indigo {
  border-color: var(--app-indigo);
  color: var(--app-indigo);
  background: var(--app-indigo-faint);
}

.chip--green {
  border-color: var(--app-success);
  color: var(--app-success);
}

.chip--yellow {
  border-color: var(--app-warning);
  color: var(--app-warning);
}

.chip--red {
  border-color: var(--app-danger);
  color: var(--app-danger);
}

.chip--coral {
  border-color: var(--app-brand-gold);
  color: var(--app-brand-gold);
}

.chip--grey {
  border-color: var(--app-border-strong);
  color: var(--app-muted);
}

.chip--filled {
  color: var(--app-on-color);
}

.chip--filled.chip--blue {
  background: var(--app-accent);
}

.chip--filled.chip--purple {
  background: var(--app-purple);
}

.chip--filled.chip--green {
  background: var(--app-success);
}

.chip--filled.chip--yellow {
  background: var(--app-warning);
}

.chip--filled.chip--red {
  background: var(--app-danger);
}

/* La versione piccola: niente bordo, fondo chiaro del suo colore. */
.chip--soft {
  min-height: auto;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  background: var(--app-surface-muted);
}

.chip--soft.chip--blue {
  background: var(--app-accent-faint);
}

.chip--soft.chip--purple {
  background: var(--app-purple-faint);
}

.chip--soft.chip--indigo {
  background: var(--app-indigo-faint);
}

.chip--soft.chip--green {
  background: var(--app-success-faint);
}

.chip--soft.chip--yellow {
  background: var(--app-warning-faint);
}

.chip--soft.chip--red {
  background: var(--app-danger-faint);
}

.chip--soft.chip--coral {
  background: var(--app-brand-gold-faint);
}

.chip--soft.chip--grey {
  color: var(--app-muted);
  background: var(--app-canvas-background);
}

/* Una funzione non ancora sviluppata, detta chiaramente (Mattias, 20/10/2026): bordo tratteggiato
   grigio, scritta grigia; non è un bottone. */
.chip--todo {
  border-style: dashed;
  border-color: var(--app-border-strong);
  color: var(--app-placeholder);
  background: transparent;
}

/* Una nota libera dentro un chip piccolo: in corsivo, per distinguerla dai dati. */
.chip--note {
  font-weight: 500;
  font-style: italic;
}