/**
 * La sezione FATTURE dell'area cliente.
 *
 * Poche regole: la tabella è quella di WooCommerce, che il tema veste già.
 * Qui si aggiusta solo quello che il tema non può sapere.
 */

.fi-fattura-nota {
	margin: 0 0 20px;
	font-size: .92em;
	line-height: 1.55;
	color: #4a5568;
}

.fi-fattura-elenco {
	width: 100%;
}

.fi-fattura-elenco .fi-fattura-azione {
	text-align: right;
	white-space: nowrap;
}

/* Su schermo stretto la tabella diventa un elenco di schede: l'etichetta
   della colonna va ripetuta accanto al dato, o non si capisce cosa si legge. */
@media (max-width: 600px) {
	.fi-fattura-elenco thead {
		display: none;
	}

	.fi-fattura-elenco tr {
		display: block;
		margin-bottom: 18px;
		padding-bottom: 14px;
		border-bottom: 1px solid #e2e8f0;
	}

	.fi-fattura-elenco td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0 !important;
		border: 0 !important;
		text-align: right;
	}

	.fi-fattura-elenco td::before {
		content: attr(data-title);
		font-weight: 600;
		text-align: left;
	}

	.fi-fattura-elenco .fi-fattura-azione {
		display: block;
		margin-top: 8px;
		text-align: left;
	}
}