/*
 * Tabelle prezzo (tab Prezzi: dispositivi Marte e dispositivi MatiPay), template html/include/vm-custom-prices-table-include.html.
 *
 * Angular (global.js, mht-details-custom-prices.js) decide solo lo stato delle celle e restituisce nomi di classe:
 * qui c'e' tutto l'aspetto. I selettori partono da .vm-prices-table per avere specificita' sufficiente a battere le regole del tema
 * (.table th, .form-control:focus) senza ricorrere a !important.
 */

.vm-prices-table {
	--vm-prices-main-color: #039BB5;          /* come maincolor01 */
	--vm-prices-accent-color: #FF5A0F;        /* come btn-danger / maincolor03: colonne e celle coinvolte dalla stessa tabella prezzo */
	--vm-prices-error-color: #d9534f;         /* errore: prezzi in conflitto, linea o prezzi mancanti */
	--vm-prices-error-background: #fbe4e4;    /* rosso appena accennato: distingue l'errore dal bordo arancio su sfondo bianco */
	--vm-prices-line-color: #ddd;
}

/*
 * Intestazione ancorata (sticky) sotto la barra fissa dell'app. --vm-prices-sticky-top e' scritta dal controller (dipende dall'altezza
 * reale della barra); "inset box-shadow" ridisegna il bordo inferiore, che con i bordi collassati non segue l'intestazione ancorata.
 * Testi allineati in alto: "Linea prezzo" segue i nomi delle colonne e non il selettore di tabella.
 */
.vm-prices-table th.vm-prices-th {
	position: sticky;
	top: var(--vm-prices-sticky-top, 0px);
	z-index: 2;
	white-space: nowrap;
	vertical-align: top;
	box-shadow: inset 0 -1px 0 var(--vm-prices-line-color);
}

/* Colonne coinvolte (stessa tabella prezzo della cella in modifica o del selettore in uso): look di btn-danger */
.vm-prices-table th.vm-prices-th.vm-prices-th--ref {
	background-color: var(--vm-prices-accent-color);
	color: #fff;
}

/* Selettore della tabella prezzo del metodo di pagamento */
.vm-prices-table select.vm-prices-select {
	display: inline-block;
	font-weight: normal;
	text-align: center;
}

.vm-prices-table select.vm-prices-select.vm-prices-select--ref {
	font-weight: bold;
	color: var(--vm-prices-accent-color);
}

/* Celle: prezzi a destra, linea prezzo al centro */
.vm-prices-table td.vm-prices-cell {
	position: relative;
	text-align: right;
}

.vm-prices-table td.vm-prices-cell.vm-prices-line {
	text-align: center;
}

/*
 * Stati della cella (input; cell-modified vale anche per il testo della linea prezzo in sola lettura).
 * L'ordine e' la precedenza: modificata < collegata alla cella in modifica < in errore.
 * I bordi sono sottili (1px) come quelli delle celle normali.
 */
.vm-prices-table .cell-modified {
	font-weight: bold;
	color: var(--vm-prices-main-color);
}

.vm-prices-table input.form-control.cell-modified {
	border-color: var(--vm-prices-main-color);
}

.vm-prices-table input.form-control.cell-linked {
	font-weight: bold;
	color: var(--vm-prices-accent-color);
	border-color: var(--vm-prices-accent-color);
	box-shadow: 0 0 0 1px var(--vm-prices-accent-color);
}

.vm-prices-table input.form-control.cell-invalid {
	border-color: var(--vm-prices-error-color);
	background-color: var(--vm-prices-error-background);
}

/* Aggiungi linea non disponibile (raggiunto il massimo di linee) */
.vm-prices-table .vm-prices-add--disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Tab interni del tab Prezzi bloccati durante una modifica: il click viene ignorato */
.box-inside-new .vm-prices-inner-tab.disabled {
	cursor: not-allowed;
}