/* ==========================================================================
   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,
.fx-sales-section .fx-table-footer { margin-left: -20px; margin-right: -20px; }
/* Il -20px IN BASSO solo sull'ULTIMO elemento della card: senza pager è la
   tabella, con pager è il footer. Applicarlo sempre alla tabella farebbe
   sovrapporre il pager (che le sta sotto). */
.fx-sales-section .fx-table-wrap:last-child,
.fx-sales-section .fx-table-footer:last-child { margin-bottom: -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; }

/* --------------------- Tabella transazioni (4 colonne) ------------------- */
/* Testata: titolo a sinistra, filtro stato a destra. */
.fx-sales-tx__head { display: flex; align-items: center; gap: 12px; }
.fx-sales-tx__filter { margin-left: auto; width: auto; }

/* Colonne numeriche/temporali tabellari: Importo (4ª) incolonnato. */
[data-sales="tx"] .fx-table td:nth-child(4),
[data-sales="tx"] .fx-table th:nth-child(4) {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Rif. provider: codice troncato + bottone copia sulla stessa riga. Il codice
   Stripe è lungo (cs_test_…60 char): troncarlo evita che sfondi la colonna, il
   valore intero resta nel title e va negli appunti. */
.fx-sales-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.fx-sales-ref .fx-ellip { max-width: 140px; display: inline-block; vertical-align: middle; }
.fx-sales-copy {
  flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--text-subtle); border-radius: var(--r-sm); line-height: 1;
}
.fx-sales-copy:hover { color: var(--primary); background: var(--primary-tint); }

/* Data d'incasso accanto al badge "pagato": informazione secondaria. */
.fx-sales-paidat { font-size: 12px; white-space: nowrap; }

/* ------------------ Incassato per settimana (uPlot) --------------------- */
/* Navigazione anno a destra nella testata della card (come il selettore
   settimane della heatmap). */
.fx-sales-yearnav { margin-left: auto; display: flex; align-items: center; }
.fx-sales-year {
  font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  align-self: center; padding: 0 6px;
}
.fx-sales-chart { min-height: 280px; width: 100%; overflow: hidden; }
/* Theming uPlot coerente col design system (come la pagina Statistiche). */
.fx-sales-chart .uplot { width: 100% !important; font-family: var(--font-body); }
.fx-sales-chart .u-title,
.fx-sales-chart .u-legend { color: var(--text-muted); font-size: 12px; }
.fx-sales-chart .u-legend .u-value { color: var(--text); font-weight: 600; }