/* La scheda Anagrafica (clients/show): due colonne alte quanto il loro contenuto, titoli fuori
   dalle card (summary-section__title), card con padding 8/16 perché le righe portino il loro 12. */
.client-sheet {
  align-items: start;
}

.client-sheet__card {
  padding: 0.25rem 1rem;
}

/* I dati aziendali: campi su due colonne a 16 di distanza, etichetta sopra il valore. */
.client-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  padding: 1rem;
}

.client-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.client-field--wide {
  grid-column: 1 / -1;
}

.client-field__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.client-field__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: var(--app-placeholder);
}

.client-field__value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--app-ink);
}

.client-field__link {
  text-decoration: none;
  color: var(--app-accent);
}

/* Un referente: la riga dell'app (components/_list_row) dentro la card, senza il suo bordo, con una
   linea fra una e l'altra; chip WhatsApp e Modifica Small. */
.list-row.contact {
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  border-radius: 0;
  background: none;
}

.contact:last-child {
  border-bottom: 0;
}

.contact .chip .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.contact-form {
  padding: 0.75rem 0;
}

.contact-form__title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  align-items: center;
  gap: 0.75rem 1rem;
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-muted);
}

.contact-form__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.contact-form__actions {
  display: flex;
  gap: 0.75rem;
}

.contact-form__actions .button {
  min-width: 8rem;
}

.contact-form__delete {
  margin: 0 0 0.75rem;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* I numeri dell'ordine Ergon (history_orders/show): cinque riquadri kpi-tile a 16 l'uno
   dall'altro, 16 sotto il banner e sopra le colonne. */
.history-order__kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Il totale in fondo all'elenco degli articoli (21/10/2026): non una card a parte col numero blu a
   sinistra, ma l'ultima riga della lista, con la linea sopra, la nota a sinistra e l'importo 20/700
   allineato sotto la colonna degli importi. */
.history-order__total {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--app-border);
}

.history-order__total-note {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

.history-order__total-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-muted);
}

.history-order__total-amount {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Gli abituali che mancavano: righe con la linea fra l'una e l'altra, nome 14/600, dettagli 12. */
.history-order__missing {
  padding: 0.25rem 1rem;
}

.history-order__missing-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--app-border);
}

.history-order__missing-row:last-of-type {
  border-bottom: 0;
}

.history-order__missing-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.history-order__missing-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

/* Gli altri abituali mancanti si aprono: 12/600 blu col chevron, come «Mostra altri» dell'Analisi. */
.history-order__more {
  border-top: 1px solid var(--app-border);
}

.history-order__more-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  list-style: none;
  color: var(--app-accent);
  cursor: pointer;
}

.history-order__more-toggle::-webkit-details-marker {
  display: none;
}

.history-order__more-toggle .icon {
  width: 1rem;
  height: 1rem;
}

.history-order__more[open] .history-order__more-toggle .icon {
  transform: rotate(180deg);
}

.history-order__more .history-order__missing-row:first-of-type {
  border-top: 1px solid var(--app-border);
}

@media (max-width: 900px) {
  .history-order__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Il nome dell'articolo nell'ordine Ergon porta alla scheda: scritto come gli altri nomi. */
.history-order__product {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--app-ink);
}

.order-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Gli ordini del cliente: data, prodotti e imponibile, allineati in colonna come nel catalogo. */
.list-row__kpis.list-row__kpis--order {
  grid-template-columns: 6rem 4.5rem 7rem;
}

/* Il periodo accanto alla ricerca: il bottone del calendario come la tendina dello stato. */
.client-orders__period .date-range__button {
  width: auto;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .contact-form__grid {
    grid-template-columns: max-content 1fr;
  }

}

/* «Invia / scarica PDF» (statements/_panel) nel pannello laterale: sottotitoli 14/600, le due
   scelte come chip grandi (la scelta piena blu), i canali come List element (spenti in grigio col chip
   tratteggiato), i due bottoni in fondo affiancati. */
.statement {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.statement__section {
  display: flex;
  flex-direction: column;
}

.statement__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

.statement__channels-todo {
  margin: 0;
}

.statement__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* La stessa scelta in una pagina: la card senza riempimento, il contenuto ha il suo. */
.statement-page {
  padding: 0;
}

/* Insoluti di Ergon: il conteggio accanto al totale (neutro: c'è sempre, non è un allarme)
   e l'etichetta rossa sul singolo cliente */
/* La spiegazione dello stato scelto (Attivi = ultimi 3 mesi...), in evidenza accanto al numero. */
.list-header__meaning {
  margin-left: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.list-header__meaning--warning {
  color: var(--app-warning);
  background: var(--app-warning-faint);
}

.list-header__unpaid {
  margin-left: 0.25rem;
  color: var(--app-muted);
}

/* Sotto la ricerca: lo stato del cliente a sinistra, l'ordinamento a destra; sotto, «Mostra solo». */
/* «Mostra solo» (clients/_results): subito sotto la riga dello stato. */
.client-refine {
  margin: -0.25rem 0 1rem;
}

/* I filtri a destra della ricerca, sulla stessa riga (Mattias, 26/10/2026: la ricerca lunga tutta la
   riga coi filtri sotto non serve); a capo solo se non ci stanno. */
.client-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* La riga dell'elenco clienti (clients/_row), come le righe del catalogo: tutta tappabile (il nome
   si allarga sulla riga, i chip-link e il bottone restano sopra), icona tinta 40, nome 16/600 con i
   chip di stato, sotto una riga di dettagli 12 grigi e chip piccoli, a destra i numeri e la freccia. */
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  background: var(--app-surface);
  transition: border-color 0.15s;
}

.list-row--link:hover,
.list-row--link:focus-within {
  border-color: var(--app-accent);
}

.list-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.list-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.list-row__name {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--app-ink);
}

/* Il nome-link copre tutta la riga; quello che sta sopra (chip-link, bottone) resta toccabile. */
.list-row__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.list-row__over {
  position: relative;
  z-index: 1;
}

.list-row__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.list-row__text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

.list-row__line .chip .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.list-row__kpis {
  display: grid;
  flex: none;
  grid-template-columns: 6rem 6.5rem;
  gap: 1rem;
}

.list-row__kpi {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.list-row__kpi span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

.list-row__kpi strong {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.list-row__action {
  flex: none;
}

.list-row__caret {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--app-accent);
}

/* Tablet in verticale (23/10/2026): i numeri della riga restano (data, importi: prima sparivano e
   un ordine era solo un numero), più vicini fra loro; il nome si accorcia coi puntini. */
@media (max-width: 900px) {
  .list-row__kpis {
    gap: 0.75rem;
  }

  /* Righe con numeri e bottoni (bozze: consegna, prodotti, imponibile, Riprendi, Elimina) e righe
     con cinque numeri (agenti e famiglie delle statistiche): in
     verticale i numeri vanno su una seconda riga sotto il nome, allineati al testo; il nome tiene la
     sua larghezza (prima si riduceva a tre lettere). */
  .list-row:has(.list-row__action),
  .list-row.stats-rank {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .list-row:has(.list-row__action) .list-row__kpis,
  .list-row.stats-rank .list-row__kpis {
    order: 1;
    flex-basis: calc(100% - 3.5rem);
    margin-left: 3.5rem;
  }

  /* Con l'icona tinta piccola (32 px, le righe degli ordini) il testo parte prima. */
  .list-row:has(> .icon-tile):has(.list-row__action) .list-row__kpis,
  .list-row.stats-rank:has(> .icon-tile) .list-row__kpis {
    flex-basis: calc(100% - 3rem);
    margin-left: 3rem;
  }

  /* Con la foto del prodotto (56 px, le condizioni) il testo parte dopo. */
  .list-row:has(.commercial__photo):has(.list-row__action) .list-row__kpis {
    flex-basis: calc(100% - 4.5rem);
    margin-left: 4.5rem;
  }

  /* Scegliendo il cliente per un ordine (col bottone «Seleziona») in verticale conta il nome. */
  .list-row__kpis--landscape {
    display: none;
  }
}

/* Le partite aperte (clients/open_items): tre riquadri a 16, poi titolo, ricerca e righe. */
.open-items__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.open-items__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-row__kpis.list-row__kpis--open {
  grid-template-columns: 6rem 7rem;
}

/* Info commerciali (clients/commercial): tre riquadri a 16, poi titolo, ricerca e righe con la foto
   da 56 e tre numeri in colonna (listino, condizione in corallo, prezzo netto). */
.commercial__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.commercial__photo {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

.commercial__photo .thumb {
  width: 100%;
  height: 100%;
}

.list-row__kpis.commercial__kpis-row {
  grid-template-columns: 7rem 6rem 7rem;
}

.commercial__actions {
  display: flex;
  gap: 0.5rem;
}

.commercial__revoke {
  display: contents;
}

.commercial__condition {
  color: var(--app-brand-gold);
}