/* ==========================================================================
   XLAB — raccordo fra i form di accettazione (markup storico) e il tema nuovo
   Il layer style/accettazione_merceologia.css resta la base: qui ne allineiamo
   i colori ai token del tema e correggiamo impaginazione e pulsanti.
   I selettori sono più specifici di quelli del file legacy perché quel foglio
   viene iniettato dopo, insieme al contenuto della pagina.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette: le variabili del layer legacy puntano ai token del tema
   -------------------------------------------------------------------------- */
form.am-form {
	--am-primary:      var(--xl-brand-600);
	--am-primary-dark: var(--xl-brand-800);
	--am-primary-soft: var(--xl-brand-50);
	--am-text:         var(--xl-text);
	--am-muted:        var(--xl-text-muted);
	--am-border:       var(--xl-border);
	--am-bg:           transparent;
	--am-card:         var(--xl-surface);
	--am-radius:       var(--xl-radius);
	padding: 0;
	font-family: var(--bs-font-sans-serif);
}

#divRegistraiAccettazione form.am-form,
#divInserisciAccettazione form.am-form {
	border-left: 0;
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   2. Sezioni (fieldset + legend) come card del design system
   -------------------------------------------------------------------------- */
form.am-form fieldset {
	background: var(--xl-surface);
	border: 1px solid var(--xl-border);
	border-radius: var(--xl-radius);
	box-shadow: var(--xl-shadow-sm);
	padding: .9rem 1.1rem !important;
	margin-bottom: .7rem;
	/* i <td> hanno display:flex inline: senza questo il fieldset,
	   come flex item, si restringe al contenuto invece di riempire la riga */
	width: 100%;
	flex: 1 1 100%;
}

/* float + width portano la legend nel flusso interno della card:
   altrimenti il browser la disegna a cavallo del bordo superiore */
form.am-form legend {
	float: left;
	width: 100%;
	padding: 0 0 .2rem;
	margin-bottom: .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--xl-brand-600);
	border-bottom: 0;
}
form.am-form fieldset::after { content: ""; display: table; clear: both; }

/* --------------------------------------------------------------------------
   3. Campi: ogni etichetta resta attaccata al proprio controllo
   Il wrapper .campo-legacy è creato da app.js (XLab.normalizzaFormLegacy):
   senza di esso label e input sono due flex item distinti e si separano
   quando la riga va a capo.
   -------------------------------------------------------------------------- */
form.am-form .campo-legacy {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
	flex: 0 1 auto;
}

form.am-form .campo-legacy > label,
form.am-form .campo-legacy > .accettazione_label {
	font-size: .7rem !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--xl-text-subtle) !important;
	white-space: nowrap;
}

/* le larghezze inline storiche (width: 400px e simili) non devono sfondare */
form.am-form .campo-legacy > input:not([type="radio"]):not([type="checkbox"]),
form.am-form .campo-legacy > select,
form.am-form .campo-legacy > textarea {
	max-width: 100%;
	width: 100% !important;
	min-width: 120px;
}

/* scelte singole: casella a sinistra, etichetta leggibile accanto */
form.am-form .campo-legacy--scelta {
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: .45rem;
	padding: .15rem 0;
}
form.am-form .campo-legacy--scelta > label {
	font-size: .85rem !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--xl-text) !important;
	cursor: pointer;
}
form.am-form .campo-legacy--scelta > input {
	width: 16px !important;
	height: 16px;
	min-width: 0;
	margin: 0;
	accent-color: var(--xl-brand-600);
	cursor: pointer;
}

/* sezioni con un campo per tabella: griglia invece di una colonna sola */
form.am-form fieldset.am-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .35rem 1.1rem;
	align-items: start;
}
form.am-form fieldset.am-griglia > legend { grid-column: 1 / -1; float: none; }
form.am-form fieldset.am-griglia > table.tab1 { min-width: 0; }
form.am-form fieldset.am-griglia > table.tab1.am-largo { grid-column: 1 / -1; }

/* gruppi di scelte: spaziatura orizzontale più generosa */
form.am-form .campo-legacy--scelta + .campo-legacy--scelta { margin-left: .6rem; }

/* campo senza etichetta (es. i due minuti dell'orario): non deve allargarsi */
form.am-form .campo-legacy--muto > label { visibility: hidden; }

form.am-form input[type="text"]:focus,
form.am-form input[type="number"]:focus,
form.am-form select:focus,
form.am-form textarea:focus {
	border-color: var(--xl-brand-400) !important;
	box-shadow: 0 0 0 3px rgba(0, 103, 144, .13) !important;
	outline: none;
}

form.am-form input:disabled,
form.am-form select:disabled,
form.am-form textarea:disabled {
	background: var(--xl-surface-alt) !important;
	color: var(--xl-text-muted) !important;
}

/* --------------------------------------------------------------------------
   4. Pulsanti: i colori erano inline, quindi servono regole !important.
   Il rosso indicava indistintamente "salva", "paga" e "annulla": ora il
   colore segue il significato dell'azione.
   -------------------------------------------------------------------------- */
form.am-form .btn,
.am-azioni .btn {
	border-radius: var(--xl-radius-sm) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	padding: .52rem 1rem !important;
	height: auto !important;
	margin-right: .5rem !important;
	box-shadow: var(--xl-shadow-xs);
}

/* azione primaria: salvataggio */
#btnAccettazioneMerceologiaRegistra,
#btnAccettazioneMerceologiaInserisci {
	background-color: var(--xl-brand-600) !important;
	border-color: var(--xl-brand-600) !important;
	color: #fff !important;
	margin-left: 0 !important;
}
#btnAccettazioneMerceologiaRegistra:hover,
#btnAccettazioneMerceologiaInserisci:hover {
	background-color: var(--xl-brand-700) !important;
	border-color: var(--xl-brand-700) !important;
}

/* conferma di un pagamento: esito positivo */
#btnAccettazioneMerceologiaPagamento {
	background-color: var(--xl-accent-500) !important;
	border-color: var(--xl-accent-500) !important;
	color: #fff !important;
}
#btnAccettazioneMerceologiaPagamento:hover {
	background-color: var(--xl-accent-600) !important;
	border-color: var(--xl-accent-600) !important;
}

/* annullamento: unica azione realmente distruttiva */
#btnAccettazioneMerceologiaAnnullaPagamento {
	background-color: transparent !important;
	border-color: #f0c2c2 !important;
	color: var(--xl-danger) !important;
	box-shadow: none;
}
#btnAccettazioneMerceologiaAnnullaPagamento:hover {
	background-color: #fdeeee !important;
}

/* stampe e referto: azioni secondarie */
#btnAccettazioneMerceologiaStampa,
#btnAccettazioneMerceologiaStampaEtichette,
#btnAccettazioneMerceologiaReferto {
	background-color: var(--xl-surface) !important;
	border-color: var(--xl-border) !important;
	color: var(--xl-brand-700) !important;
}
#btnAccettazioneMerceologiaStampa:hover,
#btnAccettazioneMerceologiaStampaEtichette:hover,
#btnAccettazioneMerceologiaReferto:hover {
	background-color: var(--xl-brand-50) !important;
	border-color: var(--xl-brand-200) !important;
}

/* barra delle azioni in fondo alla scheda */
.am-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	padding: .9rem 1.1rem;
	background: var(--xl-surface);
	border: 1px solid var(--xl-border);
	border-radius: var(--xl-radius);
	box-shadow: var(--xl-shadow-sm);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   5. Modali del form (parametri, risultati, giudizio)
   -------------------------------------------------------------------------- */
.modal .am-form fieldset { box-shadow: none; }
.modal-dialog .table { font-size: .875rem; }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	form.am-form .campo-legacy { flex: 1 1 100%; }
	form.am-form fieldset { padding: .9rem !important; }
}