/*
 * Regole delle singole pagine di SCDD (prefisso trama-). Il sistema (token, guscio, componenti MudBlazor, primitive
 * tr-) sta in css/trama-token.css e css/trama-componenti.css, caricati prima di questo da App.razor.
 */

/* ==========================================================================
   Pagine di accesso (statiche, senza componenti interattivi): la soglia di SMDDP (sm-gate).
   Una scheda sola su fondo di lavoro, il marchio sopra, le lingue sotto.
   ========================================================================== */

.trama-accesso {
	min-height: 100vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh var(--tr-4) var(--tr-8);
	background: var(--tr-ground);
	color: var(--tr-ink);
	font-family: var(--tr-font);
	font-size: var(--tr-t-base);
}

.trama-accesso-scheda {
	width: 100%;
	max-width: 440px;
	background: var(--tr-paper);
	border-radius: var(--tr-r-xl);
	box-shadow: var(--tr-shadow-2);
	padding: var(--tr-8) var(--tr-8) var(--tr-6);
}

	.trama-accesso-scheda h1 {
		margin: 0 0 var(--tr-2);
		font-size: var(--tr-t-xl);
		font-weight: var(--tr-w-strong);
		letter-spacing: var(--tr-track-display);
		line-height: 1.2;
		text-align: center;
		color: var(--tr-ink);
	}

.trama-accesso-marchio {
	display: flex;
	justify-content: center;
	margin-bottom: var(--tr-6);
}

	.trama-accesso-marchio a {
		display: inline-flex;
		align-items: center;
		gap: var(--tr-3);
		color: var(--tr-ink);
		font-size: var(--tr-t-lg);
		font-weight: var(--tr-w-semi);
		letter-spacing: var(--tr-track-title);
		text-decoration: none;
	}

	.trama-accesso-marchio img {
		display: block;
	}

.trama-accesso-sottotitolo {
	margin: 0 0 var(--tr-5);
	font-size: var(--tr-t-sm);
	color: var(--tr-ink-3);
	text-align: center;
}

.trama-accesso p {
	line-height: 1.55;
}

.trama-accesso-link {
	margin: var(--tr-3) 0 0;
	font-size: var(--tr-t-sm);
	text-align: center;
	color: var(--tr-ink-3);
}

.trama-accesso-lingue {
	display: flex;
	gap: var(--tr-3);
	justify-content: center;
	margin-top: var(--tr-6);
	padding-top: var(--tr-4);
	border-top: 1px solid var(--tr-line-soft);
	font-size: var(--tr-t-xs);
	font-weight: var(--tr-w-semi);
	letter-spacing: .06em;
}

	.trama-accesso-lingue a {
		color: var(--tr-ink-3);
		text-decoration: none;
	}

		.trama-accesso-lingue a:hover {
			color: var(--tr-accent-700);
		}

.trama-accesso fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--tr-5);
}

.trama-accesso legend {
	margin-bottom: var(--tr-1);
	padding: 0;
	font-size: var(--tr-t-micro);
	font-weight: var(--tr-w-semi);
	font-stretch: var(--tr-stretch-label);
	letter-spacing: var(--tr-track-label);
	text-transform: uppercase;
	color: var(--tr-ink-4);
}

.trama-accesso label,
.trama-etichetta {
	display: block;
	margin: var(--tr-3) 0 var(--tr-1);
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-medium);
	color: var(--tr-ink-2);
}

/* I campi nativi hanno la forma dei campi MudBlazor ridisegnati: stesso bordo, stesso anello di focus. */
.trama-campo {
	width: 100%;
	height: 38px;
	padding: 0 var(--tr-3);
	border: 1px solid var(--tr-line-strong);
	border-radius: var(--tr-r);
	background: var(--tr-paper);
	font: inherit;
	font-size: var(--tr-t-base);
	color: var(--tr-ink);
	transition: border-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
}

	select.trama-campo {
		padding-right: var(--tr-2);
	}

	textarea.trama-campo {
		height: auto;
		min-height: 80px;
		padding: var(--tr-2) var(--tr-3);
	}

	.trama-campo:hover {
		border-color: var(--tr-ink-off);
	}

	.trama-campo:focus,
	.trama-campo:focus-visible {
		outline: none;
		border-color: var(--tr-accent-600);
		box-shadow: 0 0 0 3px var(--tr-accent-50);
	}

.trama-riga {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tr-3);
}

@media (max-width: 480px) {
	.trama-riga {
		grid-template-columns: 1fr;
	}

	.trama-accesso-scheda {
		padding: var(--tr-6) var(--tr-5) var(--tr-5);
	}
}

.trama-aiuto {
	display: block;
	margin-top: var(--tr-1);
	font-size: var(--tr-t-xs);
	color: var(--tr-ink-3);
}

.trama-accesso .trama-spunta {
	display: flex;
	gap: var(--tr-2);
	align-items: flex-start;
	font-weight: var(--tr-w-regular);
}

	.trama-accesso .trama-spunta input {
		margin-top: 3px;
	}

.trama-accesso .trama-termini {
	margin-top: var(--tr-4);
	font-size: var(--tr-t-sm);
}

.trama-scelta span {
	display: flex;
	flex-direction: column;
}

.trama-scelta small {
	color: var(--tr-ink-3);
}

/* Il bottone primario delle pagine statiche: la stessa campitura dei bottoni MudBlazor. */
.trama-bottone {
	width: 100%;
	height: 40px;
	margin-top: var(--tr-5);
	padding: 0 var(--tr-4);
	border: 0;
	border-radius: var(--tr-r);
	background: var(--tr-accent);
	color: var(--tr-accent-ink);
	font: inherit;
	font-size: var(--tr-t-base);
	font-weight: var(--tr-w-semi);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(29,78,216,.16), 0 3px 8px rgba(29,78,216,.18);
	transition: background-color var(--tr-dur-fast) var(--tr-ease-snap), box-shadow var(--tr-dur) var(--tr-ease), transform 90ms var(--tr-ease-snap);
}

	.trama-bottone:hover {
		background: var(--tr-accent-550);
		box-shadow: 0 2px 4px rgba(29,78,216,.18), 0 8px 18px rgba(29,78,216,.24);
	}

	.trama-bottone:active {
		transform: scale(.985);
	}

.trama-errore {
	margin: var(--tr-3) 0;
	padding: var(--tr-3);
	border: 1px solid var(--tr-danger-line);
	border-radius: var(--tr-r);
	background: var(--tr-danger-bg);
	color: var(--tr-danger);
	font-size: var(--tr-t-sm);
}

	.trama-errore ul {
		margin: 0;
		padding-left: 1.2rem;
	}

/* ==========================================================================
   Errori di Blazor
   ========================================================================== */

#blazor-error-ui {
	display: none;
	position: fixed;
	left: 50%;
	bottom: var(--tr-4);
	z-index: 2000;
	transform: translateX(-50%);
	width: min(560px, calc(100vw - 32px));
	padding: var(--tr-3) var(--tr-10) var(--tr-3) var(--tr-4);
	border: 1px solid var(--tr-danger-line);
	border-radius: var(--tr-r-lg);
	background: var(--tr-paper);
	box-shadow: var(--tr-shadow-pop);
	color: var(--tr-ink);
	font-family: var(--tr-font);
	font-size: var(--tr-t-base);
}

	#blazor-error-ui .reload {
		margin-left: var(--tr-2);
		font-weight: var(--tr-w-semi);
	}

	#blazor-error-ui .dismiss {
		position: absolute;
		right: var(--tr-3);
		top: var(--tr-3);
		cursor: pointer;
		color: var(--tr-ink-3);
	}

.blazor-error-boundary {
	padding: var(--tr-4);
	border: 1px solid var(--tr-danger-line);
	border-radius: var(--tr-r);
	background: var(--tr-danger-bg);
	color: var(--tr-danger);
}

	.blazor-error-boundary::after {
		content: "Si è verificato un errore.";
	}

/* ==========================================================================
   Utilità
   ========================================================================== */

.text-nowrap {
	white-space: nowrap;
}

.trama-destra {
	text-align: right;
}

.trama-icona-testo {
	vertical-align: text-bottom;
	margin-left: var(--tr-1);
}

.trama-alta {
	height: 100%;
}

/* ==========================================================================
   Percorso guidato («Inizia da qui») e riquadri «Come funziona»
   ========================================================================== */

.trama-percorso {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tr-2);
}

/* Il passo da fare adesso: sollevato e con il filetto dell'accento, come la domanda su cui si sta lavorando in
   SMDDP. Non una barra colorata. */
.trama-passo-prossimo {
	box-shadow: 0 0 0 1px var(--tr-accent-300), 0 6px 12px rgba(15,23,42,.08), 0 16px 32px rgba(15,23,42,.10) !important;
}

.trama-percorso-evidenza {
	box-shadow: 0 0 0 1px var(--tr-accent-200), var(--tr-shadow-2) !important;
}

/* L'aiuto è contesto, non lavoro: sta su un piano incassato, con l'azzurro del marchio sull'icona. */
.trama-riquadro-aiuto {
	background: var(--tr-cielo-50) !important;
	box-shadow: inset 0 0 0 1px var(--tr-cielo-100) !important;
}

	.trama-riquadro-aiuto .trama-riquadro-aiuto__icona {
		color: var(--tr-cielo);
	}

/* ==========================================================================
   Abbonamento
   ========================================================================== */

.trama-piani {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--tr-3);
}

/* ==========================================================================
   Catalogo del framework
   ========================================================================== */

.trama-tema {
	color: var(--tr-cielo-testo);
	font-weight: var(--tr-w-semi);
}

/* Le righe di sezione delle aspettative: il pilastro sul piano incassato, il tema in azzurro. Hanno un fondo proprio,
   così il passaggio del mouse resta sulle righe delle aspettative. */
.trama-tabella-aspettative table tbody tr.trama-riga-pilastro > th {
	padding: var(--tr-2) var(--tr-3);
	background: var(--tr-sunken);
	border-top: 1px solid var(--tr-line);
	border-bottom: 1px solid var(--tr-line);
	font-size: var(--tr-t-base);
	font-weight: var(--tr-w-semi);
	color: var(--tr-ink);
	text-align: start;
}

.trama-tabella-aspettative table tbody:first-of-type tr.trama-riga-pilastro > th {
	border-top: 0;
}

.trama-tabella-aspettative table tbody tr.trama-riga-tema > th {
	padding: var(--tr-3) var(--tr-3) var(--tr-1);
	background: var(--tr-paper);
	border-bottom: 1px solid var(--tr-line-soft);
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-semi);
	color: var(--tr-cielo-testo);
	text-align: start;
}

.trama-col-numero {
	width: 3.5rem;
}

.trama-col-media {
	width: 9rem;
}

.trama-originale {
	font-size: var(--tr-t-xs);
	color: var(--tr-ink-3);
}

.trama-equivalente {
	font-size: var(--tr-t-sm);
}

.trama-sempre {
	color: var(--tr-ink-3);
	font-size: var(--tr-t-sm);
}

.trama-filtro {
	min-width: 220px;
	max-width: 320px;
}

/* ==========================================================================
   Domande di applicabilità
   ========================================================================== */

.trama-domanda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tr-2) var(--tr-6);
	padding: var(--tr-3) 0;
	border-bottom: 1px solid var(--tr-line-soft);
}

	.trama-domanda:last-child {
		border-bottom: 0;
	}

.trama-domanda-testo {
	flex: 1 1 320px;
}

/* ==========================================================================
   Autovalutazione e fascicolo: la scheda di un'aspettativa o di un tipo di documento.
   Ogni scheda è un oggetto che sale al passaggio; l'esito lo porta il suo filetto (come le domande giudicate di
   SMDDP), e resta sempre scritto anche in chiaro, nella scelta o nella pastiglia di stato.
   ========================================================================== */

.trama-scheda {
	transition: box-shadow var(--tr-dur-slow) var(--tr-ease), transform var(--tr-dur-slow) var(--tr-ease);
}

	.trama-scheda:hover {
		box-shadow: var(--tr-shadow-lift);
		transform: translateY(-1px);
	}

	.trama-scheda:focus-within {
		box-shadow: 0 0 0 1px var(--tr-accent-300), 0 6px 12px rgba(15,23,42,.09), 0 20px 40px rgba(15,23,42,.13);
	}

	.trama-scheda.esito-si {
		box-shadow: 0 0 0 1px var(--tr-ok-line), 0 1px 2px rgba(15,23,42,.06), 0 3px 6px rgba(15,23,42,.05);
	}

	.trama-scheda.esito-parziale {
		box-shadow: 0 0 0 1px var(--tr-warn-line), 0 1px 2px rgba(15,23,42,.06), 0 3px 6px rgba(15,23,42,.05);
	}

	.trama-scheda.esito-no {
		background: var(--tr-danger-bg);
		box-shadow: 0 0 0 1px var(--tr-danger-line), 0 1px 2px rgba(15,23,42,.06), 0 3px 6px rgba(15,23,42,.05);
	}

	.trama-scheda.esito-na {
		background: var(--tr-ground);
		box-shadow: 0 0 0 1px var(--tr-line);
	}

@media (prefers-reduced-motion: reduce) {
	.trama-scheda:hover {
		transform: none;
	}
}

.trama-esiti {
	flex-wrap: wrap;
}

.trama-dettagli summary {
	cursor: pointer;
	color: var(--tr-accent-700);
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-medium);
}

.trama-dettagli ul {
	margin: var(--tr-2) 0 0;
	padding-left: 1.2rem;
	font-size: var(--tr-t-sm);
	line-height: 1.6;
	color: var(--tr-ink-2);
}

.trama-impegno {
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	padding: 6px 0;
	border-bottom: 1px solid var(--tr-line-soft);
}

	.trama-impegno:last-child {
		border-bottom: 0;
	}

/* ==========================================================================
   Fascicolo documenti
   ========================================================================== */

.trama-documento {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--tr-2) var(--tr-4);
	margin-top: var(--tr-3);
	padding-top: var(--tr-3);
	border-top: 1px solid var(--tr-line-soft);
}

.trama-documento-testo {
	flex: 1 1 320px;
	min-width: 0;
}

.trama-documento-comandi {
	display: flex;
	gap: var(--tr-1);
}

.trama-scarica {
	color: var(--tr-accent-700);
	font-weight: var(--tr-w-medium);
	word-break: break-word;
}

.trama-nota {
	white-space: pre-line;
	margin-top: var(--tr-1);
}

.trama-data {
	flex: 1 1 200px;
}

.trama-elenco-stati {
	list-style: none;
	padding-left: 0 !important;
}

.trama-stato-documento {
	vertical-align: text-bottom;
	margin-right: var(--tr-1);
}

/* ==========================================================================
   Persone
   ========================================================================== */

.trama-scelta-ruolo {
	min-width: 160px;
	max-width: 220px;
}

.trama-scelta-data {
	min-width: 150px;
	max-width: 190px;
}

/* ==========================================================================
   Capacità produttiva: griglia linee × settimane, conto delle fasi
   ========================================================================== */

.trama-griglia-carico {
	overflow-x: auto;
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-r);
	background: var(--tr-paper);
}

.trama-griglia-carico:focus-visible {
	outline: 2px solid var(--tr-accent-600);
	outline-offset: 2px;
}

.trama-griglia-carico table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--tr-t-sm);
}

.trama-griglia-carico th,
.trama-griglia-carico td {
	padding: var(--tr-1) var(--tr-2);
	border-bottom: 1px solid var(--tr-line-soft);
	text-align: center;
	white-space: nowrap;
}

.trama-griglia-carico tbody tr:last-child > * {
	border-bottom: 0;
}

.trama-griglia-carico thead th {
	padding-block: var(--tr-2);
	background: var(--tr-ground-2);
	color: var(--tr-ink-2);
	font-weight: 600;
}

.trama-griglia-carico thead th.is-oggi {
	box-shadow: inset 0 -2px 0 var(--tr-accent-600);
	color: var(--tr-accent-700);
}

.trama-griglia-carico th small {
	display: block;
	color: var(--tr-ink-3);
	font-size: var(--tr-t-xs);
	font-weight: 400;
}

/* La colonna delle linee resta ferma mentre le settimane scorrono. */
.trama-griglia-carico__linea {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 160px;
	max-width: 260px;
	background: var(--tr-paper);
	text-align: left !important;
	white-space: normal !important;
	font-weight: 600;
}

.trama-griglia-carico thead .trama-griglia-carico__linea {
	background: var(--tr-ground-2);
}

.trama-carico {
	min-width: 84px;
}

.trama-carico > button,
.trama-carico > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: var(--tr-1) var(--tr-2);
	border: 1px solid transparent;
	border-radius: var(--tr-r-sm);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.25;
}

.trama-carico > button {
	cursor: pointer;
}

.trama-carico > button:hover {
	border-color: var(--tr-line-strong);
}

.trama-carico > button:focus-visible {
	outline: 2px solid var(--tr-accent-600);
	outline-offset: 1px;
}

.trama-carico small {
	font-size: var(--tr-t-xs);
}

.trama-carico.is-normale > * {
	background: var(--tr-ok-bg);
	color: var(--tr-ok);
}

.trama-carico.is-quasi > * {
	background: var(--tr-warn-bg);
	color: var(--tr-warn);
}

.trama-carico.is-oltre > * {
	background: var(--tr-danger-bg);
	color: var(--tr-danger);
}

.trama-carico.is-vuota > * {
	color: var(--tr-ink-4);
}

/* Lo stesso colore come etichetta in linea, nella verifica della commessa. */
.trama-carico--etichetta {
	display: inline-block;
	min-width: 0;
}

.trama-carico--etichetta > span {
	display: inline-flex;
	flex-direction: row;
	gap: var(--tr-1);
	min-height: 0;
	padding: 0 var(--tr-2);
}

.trama-legenda-carico {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-2) var(--tr-4);
	margin: var(--tr-3) 0 0;
	padding: 0;
	list-style: none;
	color: var(--tr-ink-3);
	font-size: var(--tr-t-xs);
}

.trama-legenda-carico li::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	vertical-align: -1px;
	border: 1px solid var(--tr-line-strong);
	border-radius: 2px;
	background: var(--tr-paper);
}

.trama-legenda-carico .is-normale::before {
	border-color: var(--tr-ok-line);
	background: var(--tr-ok-bg);
}

.trama-legenda-carico .is-quasi::before {
	border-color: var(--tr-warn-line);
	background: var(--tr-warn-bg);
}

.trama-legenda-carico .is-oltre::before {
	border-color: var(--tr-danger-line);
	background: var(--tr-danger-bg);
}

.trama-elenco-fasi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.trama-elenco-fasi li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tr-1);
	padding: var(--tr-1) 0;
	border-bottom: 1px solid var(--tr-line-soft);
}

.trama-elenco-fasi .trama-destra {
	margin-left: auto;
	color: var(--tr-ink-2);
}

.trama-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Il conto della capacità di una linea, sotto i campi che lo compongono. */
.trama-conto {
	padding: var(--tr-3) var(--tr-4);
	border-radius: var(--tr-r);
	background: var(--tr-accent-50);
	color: var(--tr-accent-800);
	font-size: var(--tr-t-sm);
}

.trama-vincolo {
	font-weight: 600;
}

.trama-fase {
	padding: var(--tr-2) 0 var(--tr-3);
	border-bottom: 1px solid var(--tr-line-soft);
}

/* Editor delle checklist proprie: una riga per voce, con i comandi sempre a destra. */
.trama-voce-editor {
	display: flex;
	align-items: flex-start;
	gap: var(--tr-2);
	padding: var(--tr-2) 0;
	border-top: 1px solid var(--tr-line-soft);
}

.trama-voce-editor__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.trama-voce-editor__comandi {
	display: flex;
	flex: 0 0 auto;
}

/* Domande delle voci: sotto la guida, una per blocco; le tabelle scorrono in orizzontale su schermi stretti. */
.trama-campo-domanda {
	padding: var(--tr-3) 0;
	border-bottom: 1px solid var(--tr-line-soft);
}

	.trama-campo-domanda + :not(.trama-campo-domanda) {
		margin-top: var(--tr-3);
	}

.trama-tabella-domanda {
	overflow-x: auto;
	margin-top: var(--tr-1);
}

.trama-tabella-domanda td {
	min-width: 140px;
	vertical-align: top;
}

.trama-domande-voce + .trama-domande-voce {
	margin-top: var(--tr-3);
	padding-top: var(--tr-3);
	border-top: 1px solid var(--tr-line-soft);
}

.trama-domande-elenco {
	display: grid;
	grid-template-columns: minmax(180px, 2fr) 3fr;
	gap: var(--tr-1) var(--tr-3);
	margin: var(--tr-1) 0 0;
}

.trama-domande-elenco dt {
	color: var(--tr-ink-2);
}

.trama-domande-elenco dd {
	margin: 0;
}

@media (max-width: 600px) {
	.trama-domande-elenco {
		grid-template-columns: 1fr;
	}

	.trama-domande-elenco dd {
		margin-bottom: var(--tr-2);
	}
}

/* Una domanda sì / no: due bottoni stretti sotto il testo, non la barra intera degli esiti. */
.trama-sino {
	width: 180px;
	margin-top: var(--tr-1);
}

/* Le caselle del mandato dello studio hanno un testo lungo: la casella sta sulla prima riga, non a metà del paragrafo. */
.trama-mandato .mud-checkbox {
	align-items: flex-start;
}

.trama-mandato .mud-checkbox > .mud-typography {
	padding-top: 9px;
}