/*
 * Margine (scheda cliente e costruttore listino): colonna Margine per riga nella tabella
 * prodotti e blocco margine complessivo in cima alla scheda cliente. File componente separato
 * da application.css per mantenibilita' (agganciato con stylesheet_link_tag nel layout).
 * Regole: una property per riga, niente box-shadow (design system).
 */

.col-margin {
  width: 6rem;
  text-align: right;
  white-space: nowrap;
}

/* Il margine per riga e' una pill leggibile a colpo d'occhio: la tinta (verde/arancio/rosso)
   segue il semaforo del prezzo, allineata a margin_status_class / sale_price_controller. */
.margin-value {
  display: inline-block;
  min-width: 3.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--azure-soft);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

.margin-green {
  background: color-mix(in srgb, var(--semaforo-verde) 12%, white);
  color: var(--semaforo-verde);
}

.margin-orange {
  background: color-mix(in srgb, var(--semaforo-arancio) 14%, white);
  color: var(--semaforo-arancio);
}

.margin-red {
  background: color-mix(in srgb, var(--danger) 12%, white);
  color: var(--danger);
}

/* Blocco margine complessivo del cliente, nell'header della scheda: card con il numero grande,
   l'etichetta, e (pezzo C) il bottone che apre il grafico dell'andamento. */
.client-margin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--azure-soft);
}

.client-margin-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}

.client-margin-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.client-margin-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.client-margin-window {
  font-size: 0.8rem;
  color: var(--gray-text);
}

.client-margin-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.72rem;
  color: var(--gray-text);
}

/* Bottone "Andamento" (apre il modale grafico): compatto, allineato a destra nella card. */
.client-margin-chart-btn {
  margin-left: auto;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--navy);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.client-margin-chart-btn:hover {
  background: var(--navy);
  color: var(--surface);
}

/* Su mobile la colonna margine sta nella "riga card" della tabella prodotti */
@media (max-width: 600px) {
  .col-margin {
    width: auto;
  }

  .client-margin-chart-btn {
    margin-left: 0;
    flex-basis: 100%;
  }
}