/* ==========================================================================
   FX Hub — pagina Report vendite. Stili specifici: filtro periodo, KPI per
   valuta, tabelle dei tagli. I token colore/tipografia vengono da base.css
   (var(--*)); la griglia (.fx-grid, colonne 280px, data-cols) da shell.css.
   ========================================================================== */

/* La pagina usa la griglia a card come Statistiche: togliamo il cap 1040px di
   .fx-module (fx-kit.css, pensato per i moduli-tabella) così la griglia usa il
   suo cap (2080/7col) e le card hanno colonne a sufficienza. NON tocca il
   .fx-module globale. */
.fx-module[data-fx-init="sales"] { max-width: 2080px; }

.fx-sales-grid { align-items: start; padding-bottom: 24px; }

/* Header: filtro periodo a sinistra, nota esplicativa a destra (che riempie),
   linea grigia sotto entrambi. Stesso linguaggio della pagina Statistiche. */
.fx-sales-header {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px;
}
.fx-sales-daterange {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  flex: 0 0 auto; width: 580px; max-width: 100%;   /* 2col = 2×280 + 20 gap */
}
.fx-sales-daterange .fx-input { width: auto; }
.fx-sales-field { display: flex; flex-direction: column; gap: 4px; }
.fx-sales-field__label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.fx-sales-note { flex: 1 1 260px; max-width: none; margin: 0; font-size: 12px; }

/* KPI per valuta: una card per valuta (i totali non si sommano tra valute). */
.fx-sales-kpi { display: flex; flex-direction: column; gap: 2px; }
.fx-sales-kpi__label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.fx-sales-kpi__value {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-sales-kpi__sub { font-size: 12px; }

/* Sezioni tabellari (Report per provider / per piano). */
.fx-sales-section { display: flex; flex-direction: column; gap: 12px; }
.fx-sales-section .fx-card__title { margin-bottom: 0; }
/* Tabella a FILO dei bordi della card, come le tabelle full-width del BO (es.
   Sessioni attive). Le card dentro .fx-grid hanno padding:20px (shell.css) mentre
   quelle dei moduli-tabella no: i margini negativi annullano quel padding solo per
   la tabella (il titolo lo conserva). Il padding delle celle (.fx-table) fa il resto. */
.fx-sales-section .fx-table-wrap { margin: 0 -20px -20px; }
/* Colonne: Chiave | Ordini | Valuta | Incassato. Le due numeriche (2ª Ordini, 4ª
   Incassato) a destra e tabellari: si confrontano a colpo d'occhio incolonnate.
   Chiave e Valuta (codice ISO) restano a sinistra. */
.fx-sales-section .fx-table td:nth-child(2),
.fx-sales-section .fx-table th:nth-child(2),
.fx-sales-section .fx-table td:nth-child(4),
.fx-sales-section .fx-table th:nth-child(4) {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* BANDA DEDICATA per i due report: forzando la PRIMA card di banda in colonna 1,
   l'auto-placement la manda a nuova riga (le card Incassato, da 1 colonna,
   restano sulla loro). Nessuno spacer: la griglia non ha packing denso e uno
   spacer full-width finirebbe in una riga implicita alta 120px (grid-auto-rows). */
.fx-grid.fx-sales-grid > [data-sales="provider"] { grid-column: 1 / span 2; }
/* Ultima riga: niente bordo sotto (tocca il bordo della card). */
.fx-sales-section .fx-table tbody tr:last-child td { border-bottom: none; }

/* Stato vuoto/caricamento. */
.fx-sales-empty { padding: 24px 4px; font-size: 14px; text-align: center; }