/* ==========================================================================
   SCDD — componenti e guscio della piattaforma
   Ripresi da SMDDP (smddp-ui.css, smddp-craft.css, smddp-lift.css) e uniti in un solo strato: dove là una regola
   veniva corretta da un foglio successivo, qui c'è già la versione finale. Sopra MudBlazor 9, nessun componente
   sostituito: cambia la grammatica, restano le affordance.
   I valori stanno in trama-token.css; le regole delle singole pagine di SCDD in app.css.
   ========================================================================== */

/* ==========================================================================
   1. Guscio: barra alta, rail di navigazione, area di lavoro
   ========================================================================== */

/* La barra alta si stacca dal contenuto solo quando sotto qualcosa scorre: a riposo è piatta. */
.mud-appbar.tr-topbar {
	height: var(--tr-topbar);
	min-height: var(--tr-topbar);
	background: color-mix(in srgb, var(--tr-paper) 93%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--tr-line);
	box-shadow: none;
	color: var(--tr-ink);
	transition: box-shadow var(--tr-dur) var(--tr-ease);
}

	.mud-appbar.tr-topbar .mud-toolbar {
		height: var(--tr-topbar);
		min-height: var(--tr-topbar);
		padding-inline: var(--tr-3) var(--tr-4);
		gap: var(--tr-1);
	}

@supports (animation-timeline: scroll()) {
	.mud-appbar.tr-topbar {
		animation: tr-stick linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 64px;
	}
}

@keyframes tr-stick {
	from {
		box-shadow: none;
	}

	to {
		box-shadow: var(--tr-shadow-stick);
	}
}

/* Il titolo della pagina è l'h1, ed è l'unico: le pagine non ripetono il proprio nome sotto. */
.tr-topbar__title {
	min-width: 0;
	margin: 0 var(--tr-3) 0 var(--tr-1);
	font-size: var(--tr-t-md);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-title);
	line-height: 1.2;
	color: var(--tr-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Le icone della barra: piccole, spente, si accendono al passaggio. */
.tr-topbar .mud-icon-button {
	color: var(--tr-ink-3);
}

/* --- Rail ---------------------------------------------------------------- */
.mud-drawer.tr-rail {
	background: var(--tr-sunken);
	border-right: 1px solid var(--tr-line);
	box-shadow: none;
	color: var(--tr-ink-2);
}

.tr-rail__head {
	display: flex;
	align-items: center;
	height: var(--tr-topbar);
	min-height: var(--tr-topbar);
	padding: 0 var(--tr-2);
	border-bottom: 1px solid var(--tr-line);
}

/* Il marchio e l'organizzazione corrente. Con più organizzazioni è il pulsante che le cambia: si cerca qui, in
   alto a sinistra, come lo spazio di lavoro negli strumenti di questa categoria. */
.tr-rail__brand {
	display: flex;
	align-items: center;
	gap: var(--tr-3);
	width: 100%;
	min-width: 0;
	padding: var(--tr-1);
	border: 0;
	border-radius: var(--tr-r);
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: left;
}

button.tr-rail__brand {
	cursor: pointer;
	transition: background-color var(--tr-dur-fast) var(--tr-ease-snap);
}

	button.tr-rail__brand:hover {
		background: rgba(255,255,255,.66);
	}

.tr-rail__mark {
	display: block;
	width: 26px;
	height: 26px;
	flex: none;
}

.tr-rail__name {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

	.tr-rail__name b {
		font-size: var(--tr-t-sm);
		font-weight: var(--tr-w-semi);
		color: var(--tr-ink);
		letter-spacing: -.01em;
	}

	.tr-rail__name span {
		font-size: var(--tr-t-2xs);
		color: var(--tr-ink-3);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.tr-rail__switch {
	flex: none;
	color: var(--tr-ink-4);
	font-size: 18px;
}

/* Il menu delle organizzazioni prende la larghezza del rail. */
.tr-rail__head .mud-menu {
	display: block;
	width: 100%;
}

.tr-rail__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--tr-3) var(--tr-2) var(--tr-2);
}

.tr-rail__foot {
	border-top: 1px solid var(--tr-line);
	padding: var(--tr-2);
}

.tr-rail__group {
	padding: 0 var(--tr-2);
	margin: var(--tr-5) 0 var(--tr-1);
	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);
}

/* Voci di menu. La voce corrente porta due segni insieme: il foglio bianco sollevato sopra il piano incassato del
   rail, e un tacchetto d'accento che entra da sinistra. Il tacchetto è un elemento, non un bordo: si anima. */
.tr-rail .mud-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	margin: 1px 0;
	padding: 5px var(--tr-2);
	border-radius: var(--tr-r);
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-regular);
	line-height: 1.35;
	color: var(--tr-ink-2);
	background: transparent;
	transition: background-color var(--tr-dur-fast) var(--tr-ease-snap), color var(--tr-dur-fast) var(--tr-ease-snap), box-shadow var(--tr-dur) var(--tr-ease);
}

	.tr-rail .mud-nav-link::before {
		content: "";
		position: absolute;
		left: -8px;
		top: 50%;
		width: 3px;
		height: 16px;
		border-radius: 0 var(--tr-r-xs) var(--tr-r-xs) 0;
		background: var(--tr-accent-600);
		transform: translateY(-50%) scaleY(0);
		transform-origin: center;
		opacity: 0;
		transition: transform var(--tr-dur-slow) var(--tr-ease-move), opacity var(--tr-dur-fast) linear;
	}

	.tr-rail .mud-nav-link .mud-nav-link-icon {
		margin: 0;
		color: var(--tr-ink-4);
		font-size: 17px;
		transition: color var(--tr-dur-fast) var(--tr-ease-snap);
	}

	.tr-rail .mud-nav-link .mud-nav-link-text {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		margin-inline-start: 0;
	}

	.tr-rail .mud-nav-link:hover {
		background: rgba(255,255,255,.66);
		color: var(--tr-ink);
	}

		.tr-rail .mud-nav-link:hover .mud-nav-link-icon {
			color: var(--tr-ink-2);
		}

	.tr-rail .mud-nav-link.active,
	.tr-rail .mud-nav-link.mud-nav-link-active {
		background: var(--tr-paper);
		color: var(--tr-ink) !important;
		font-weight: var(--tr-w-medium);
		box-shadow: var(--tr-shadow-2);
	}

		.tr-rail .mud-nav-link.active::before,
		.tr-rail .mud-nav-link.mud-nav-link-active::before {
			transform: translateY(-50%) scaleY(1);
			opacity: 1;
		}

		.tr-rail .mud-nav-link.active .mud-nav-link-icon,
		.tr-rail .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
			color: var(--tr-accent-700);
		}

/* Una voce che apre un'altra scheda lo dice con la freccetta, non con una sorpresa. */
.tr-rail__esterno {
	margin-left: auto;
	font-size: 14px;
	color: var(--tr-ink-off);
}

/* --- Chi sei, in fondo al rail ------------------------------------------- */
.tr-who {
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	margin-top: var(--tr-1);
	padding: var(--tr-2);
	border-radius: var(--tr-r);
	min-width: 0;
}

.tr-who__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: var(--tr-r-pill);
	background: var(--tr-accent-600);
	color: #fff;
	font-size: var(--tr-t-2xs);
	font-weight: 700;
}

.tr-who__text {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;
}

	.tr-who__text b {
		display: block;
		font-size: var(--tr-t-sm);
		font-weight: 550;
		color: var(--tr-ink);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tr-who__text span {
		display: block;
		font-size: var(--tr-t-2xs);
		color: var(--tr-ink-3);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.tr-who form {
	margin: 0;
}

/* --- Area di lavoro ------------------------------------------------------ */
.tr-main {
	background: var(--tr-ground);
	min-height: 100vh;
}

.tr-page {
	padding: var(--tr-6) var(--tr-6) var(--tr-12);
	max-width: 1560px;
}

@media (max-width: 960px) {
	.tr-page {
		padding: var(--tr-4) var(--tr-4) var(--tr-10);
	}
}

/* ==========================================================================
   2. Primitive di pagina
   ========================================================================== */

/* Riga di istruzione in testa alla pagina: una frase, misura da prosa. */
.tr-lede {
	margin: 0 0 var(--tr-5);
	font-size: var(--tr-t-md);
	line-height: 1.55;
	color: var(--tr-ink-3);
	max-width: 72ch;
}

.tr-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tr-4);
	flex-wrap: wrap;
	margin-bottom: var(--tr-5);
}

.tr-head__title {
	margin: 0;
	font-size: var(--tr-t-xl);
	font-weight: var(--tr-w-strong);
	letter-spacing: var(--tr-track-display);
	color: var(--tr-ink);
	line-height: 1.2;
}

.tr-head__sub {
	margin: var(--tr-1) 0 0;
	font-size: var(--tr-t-base);
	color: var(--tr-ink-3);
	max-width: 68ch;
}

/* Barra strumenti: filtri e ricerca, appoggiata sopra i dati senza scatola. */
.tr-toolbar {
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	flex-wrap: wrap;
	margin-bottom: var(--tr-3);
}

.tr-toolbar__spacer {
	flex: 1 1 auto;
}

.tr-toolbar__count {
	font-size: var(--tr-t-xs);
	font-weight: var(--tr-w-medium);
	color: var(--tr-ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Sezione: titolo minore, senza riquadro attorno. */
.tr-section {
	margin-top: var(--tr-8);
}

	.tr-section:first-child {
		margin-top: 0;
	}

.tr-section__title {
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	margin: 0 0 var(--tr-3);
	font-size: var(--tr-t-lg);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-title);
	color: var(--tr-ink);
}

.tr-label {
	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);
}

/* Superficie: galleggia sul piano di lavoro. Le scatole non si annidano. */
.tr-surface {
	background: var(--tr-paper);
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-1);
}

.tr-surface--flush {
	overflow: hidden;
}

.tr-surface .tr-surface {
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* Coppie etichetta/valore. */
.tr-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--tr-4) var(--tr-6);
	margin: 0;
}

.tr-fact dt {
	font-size: var(--tr-t-2xs);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tr-ink-4);
	margin-bottom: 2px;
}

.tr-fact dd {
	margin: 0;
	font-size: var(--tr-t-base);
	color: var(--tr-ink);
	font-variant-numeric: tabular-nums;
}

/* Stato: una sola pastiglia in tutta la piattaforma, a capsula con il pallino. Ha la stessa forma dei MudChip
   ridisegnati sotto: uno stato scritto a mano e uno reso da MudBlazor sono lo stesso oggetto. Il nome dello stato è
   sempre scritto: il colore rinforza, non sostituisce. */
.tr-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--tr-r-pill);
	font-size: var(--tr-t-xs);
	font-weight: var(--tr-w-semi);
	line-height: 1.5;
	background: var(--tr-neutral-bg);
	color: var(--tr-ink-2);
	border: 1px solid transparent;
	white-space: nowrap;
}

	.tr-state::before {
		content: "";
		width: 6px;
		height: 6px;
		flex: none;
		border-radius: 50%;
		background: currentColor;
	}

.tr-state--live {
	background: var(--tr-accent-50);
	color: var(--tr-accent-800);
	border-color: var(--tr-accent-100);
}

.tr-state--ok {
	background: var(--tr-ok-bg);
	color: var(--tr-ok);
	border-color: var(--tr-ok-line);
}

.tr-state--warn {
	background: var(--tr-warn-bg);
	color: var(--tr-warn);
	border-color: var(--tr-warn-line);
}

.tr-state--danger {
	background: var(--tr-danger-bg);
	color: var(--tr-danger);
	border-color: var(--tr-danger-line);
}

/* Vuoto che insegna, non "nessun risultato". */
.tr-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--tr-12) var(--tr-6);
	border: 1px dashed var(--tr-line-strong);
	border-radius: var(--tr-r-lg);
	background: var(--tr-paper);
}

.tr-empty__icon {
	color: var(--tr-ink-off);
	margin-bottom: var(--tr-3);
}

.tr-empty__title {
	font-size: var(--tr-t-md);
	font-weight: 600;
	color: var(--tr-ink);
	margin: 0;
}

.tr-empty__text {
	font-size: var(--tr-t-base);
	color: var(--tr-ink-3);
	margin: var(--tr-1) 0 0;
	max-width: 46ch;
}

.tr-empty__actions {
	margin-top: var(--tr-5);
	display: flex;
	gap: var(--tr-2);
}

/* Dentro una tabella il riquadro c'è già: il vuoto non ne aggiunge un secondo. */
.tr-empty--inline {
	border: 0;
	background: transparent;
	padding: var(--tr-8) var(--tr-6);
}

/* --- Numeri di testa ------------------------------------------------------
   Grandi, in cifre tabulari, con l'etichetta incisa sopra e la nota sotto. Lo zero si spegne: a colpo d'occhio resta
   acceso solo quello che chiede qualcosa. Il colore entra solo dove c'è un giudizio, e sempre con un testo. */
.tr-kpi-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: var(--tr-3);
}

/* Due o tre numeri che si leggono insieme (prontezza, scadenze, punteggio): colonne più larghe. */
.tr-kpi-griglia--larga {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.tr-kpi {
	display: flex;
	flex-direction: column;
	gap: var(--tr-1);
	min-width: 0;
	padding: var(--tr-4);
	background: var(--tr-paper);
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-1);
	color: inherit;
	text-decoration: none;
}

a.tr-kpi {
	transition: box-shadow var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}

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

	a.tr-kpi:focus-visible {
		outline: 2px solid var(--tr-accent-600);
		outline-offset: 2px;
	}

.tr-kpi__testa {
	display: flex;
	align-items: flex-start;
	gap: var(--tr-2);
	color: var(--tr-ink-4);
}

	.tr-kpi__testa .mud-icon-root {
		font-size: 16px;
	}

/* L'etichetta va a capo invece di troncarsi: in inglese e francese è spesso più lunga. */
.tr-kpi__etichetta {
	font-size: var(--tr-t-2xs);
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--tr-ink-4);
}

/* Cifra e nota in fondo: con un'etichetta su due righe restano allineate a quelle delle altre voci. */
.tr-kpi__valore {
	margin: auto 0 0;
	font-size: var(--tr-t-3xl);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-display);
	line-height: 1.1;
	color: var(--tr-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Due cifre affiancate sotto la stessa etichetta (scaduti e in scadenza). */
.tr-kpi__coppia {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-2) var(--tr-8);
	margin-top: auto;
}

	.tr-kpi__coppia .tr-kpi__valore {
		margin-top: 0;
	}

.tr-kpi.is-vuoto .tr-kpi__valore {
	color: var(--tr-ink-off);
}

.tr-kpi__valore.is-attenzione {
	color: var(--tr-warn);
}

.tr-kpi__valore.is-pericolo {
	color: var(--tr-danger);
}

.tr-kpi__nota {
	margin: 0;
	font-size: var(--tr-t-xs);
	line-height: 1.4;
	color: var(--tr-ink-3);
}

	.tr-kpi__nota.is-attenzione {
		color: var(--tr-warn);
		font-weight: var(--tr-w-semi);
	}

	.tr-kpi__nota.is-pericolo {
		color: var(--tr-danger);
		font-weight: var(--tr-w-semi);
	}

/* --- Pannello: un riquadro con la sua testata ----------------------------- */
.tr-pannello {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--tr-paper);
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-1);
	overflow: hidden;
}

.tr-pannello__testa {
	display: flex;
	align-items: center;
	gap: var(--tr-2);
	padding: var(--tr-3) var(--tr-4);
	border-bottom: 1px solid var(--tr-line-soft);
}

.tr-pannello__titolo {
	margin: 0;
	font-size: var(--tr-t-md);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-title);
	color: var(--tr-ink);
}

.tr-pannello__conta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--tr-r-pill);
	background: var(--tr-ground-2);
	color: var(--tr-ink-2);
	font-size: var(--tr-t-2xs);
	font-weight: var(--tr-w-semi);
	font-variant-numeric: tabular-nums;
}

.tr-pannello__link {
	margin-left: auto;
	font-size: var(--tr-t-xs);
	font-weight: var(--tr-w-medium);
	color: var(--tr-accent-700);
	text-decoration: none;
	white-space: nowrap;
}

	.tr-pannello__link::after {
		content: " \2192";
	}

	.tr-pannello__link:hover {
		text-decoration: underline;
	}

.tr-pannello__corpo {
	padding: var(--tr-4);
}

.tr-pannello__piede {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-1) var(--tr-4);
	margin: 0;
	padding: var(--tr-2) var(--tr-4);
	border-top: 1px solid var(--tr-line-soft);
	background: var(--tr-ground);
	font-size: var(--tr-t-xs);
	color: var(--tr-ink-3);
}

/* Righe tutte cliccabili dentro un pannello. */
.tr-righe {
	display: flex;
	flex-direction: column;
}

.tr-riga {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--tr-3);
	padding: var(--tr-3) var(--tr-4);
	color: inherit;
	text-decoration: none;
	transition: background var(--tr-dur-fast) var(--tr-ease-snap);
}

	.tr-riga + .tr-riga {
		border-top: 1px solid var(--tr-line-soft);
	}

	a.tr-riga:hover {
		background: var(--tr-ground);
	}

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

.tr-riga__corpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tr-riga__titolo {
	font-size: var(--tr-t-base);
	font-weight: var(--tr-w-medium);
	color: var(--tr-ink);
}

.tr-riga__meta {
	font-size: var(--tr-t-xs);
	line-height: 1.5;
	color: var(--tr-ink-3);
}

/* --- Cruscotto (Components/Pages/Cruscotto.razor) -------------------------
   La scrivania di SMDDP (smddp-home.css): il saluto, il percorso finché c'è un passo da fare, i numeri. */
.tr-home {
	display: flex;
	flex-direction: column;
	gap: var(--tr-6);
}

.tr-home__saluto {
	margin: 0;
	font-size: var(--tr-t-2xl);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-display);
	line-height: 1.15;
	color: var(--tr-ink);
}

.tr-home__data {
	margin: var(--tr-1) 0 0;
	font-size: var(--tr-t-sm);
	color: var(--tr-ink-3);
}

.tr-home-passo {
	display: flex;
	align-items: center;
	gap: var(--tr-4) var(--tr-6);
	flex-wrap: wrap;
}

.tr-home-passo__testo {
	flex: 1 1 360px;
	min-width: 0;
}

.tr-home-passo__titolo {
	margin: 0;
	font-size: var(--tr-t-md);
	font-weight: var(--tr-w-semi);
	letter-spacing: var(--tr-track-title);
	color: var(--tr-ink);
}

.tr-home-passo__cosa {
	margin: var(--tr-1) 0 0;
	max-width: 72ch;
	font-size: var(--tr-t-base);
	color: var(--tr-ink-2);
}

.tr-home-passo__avanzamento {
	margin: var(--tr-1) 0 0;
	font-size: var(--tr-t-xs);
	color: var(--tr-ink-3);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.tr-home__saluto {
		font-size: var(--tr-t-xl);
	}

	.tr-kpi-griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tr-kpi__valore {
		font-size: var(--tr-t-2xl);
	}
}

/* ==========================================================================
   3. Bottoni
   ========================================================================== */
.mud-button-root {
	border-radius: var(--tr-r);
	font-family: var(--tr-font);
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-semi);
	letter-spacing: 0;
	text-transform: none;
	min-width: 0;
	transition: background-color var(--tr-dur-fast) var(--tr-ease-snap), border-color var(--tr-dur-fast) var(--tr-ease-snap), color var(--tr-dur-fast) var(--tr-ease-snap), box-shadow var(--tr-dur) var(--tr-ease), transform 90ms var(--tr-ease-snap);
}

	/* Risposta al tocco: un cedimento minimo, non un rimbalzo. */
	.mud-button-root:active:not(.mud-button-disabled) {
		transform: scale(.985);
	}

/* MudBlazor 9 nomina la taglia per variante (mud-button-filled-size-large, ...): il selettore per sottostringa le
   copre tutte. */
.mud-button {
	padding: 6px 12px;
	height: 32px;
}

.mud-button-root[class*="-size-large"] {
	height: 38px;
	padding: 8px 16px;
	font-size: var(--tr-t-base);
}

.mud-button-root[class*="-size-small"] {
	height: 26px;
	padding: 3px 9px;
	font-size: var(--tr-t-xs);
}

/* Primaria: la campitura del marchio, che proietta. */
.mud-button-filled.mud-button-filled-primary {
	background-color: var(--tr-accent);
	color: var(--tr-accent-ink);
	box-shadow: 0 1px 2px rgba(29,78,216,.16), 0 3px 8px rgba(29,78,216,.18);
}

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

	.mud-button-filled.mud-button-filled-primary:active {
		background-color: var(--tr-accent-800);
		box-shadow: none;
	}

.mud-button-filled.mud-button-filled-error {
	background-color: var(--tr-danger);
	color: #fff;
}

.mud-button-filled.mud-button-filled-success {
	background-color: var(--tr-ok);
	color: #fff;
}

/* Secondaria: contorno neutro, mai un secondo accento. */
.mud-button-outlined {
	background-color: var(--tr-paper);
	border-color: var(--tr-line-strong);
	color: var(--tr-ink);
}

	.mud-button-outlined:hover {
		background-color: var(--tr-ground-2);
		border-color: var(--tr-ink-off);
	}

.mud-button-outlined.mud-button-outlined-primary {
	color: var(--tr-accent-700);
	border-color: var(--tr-accent-200);
}

	.mud-button-outlined.mud-button-outlined-primary:hover {
		background-color: var(--tr-accent-50);
		border-color: var(--tr-accent-300);
	}

.mud-button-outlined.mud-button-outlined-error {
	color: var(--tr-danger);
	border-color: var(--tr-danger-line);
}

	.mud-button-outlined.mud-button-outlined-error:hover {
		background-color: var(--tr-danger-bg);
	}

.mud-button-text {
	color: var(--tr-ink-2);
}

	.mud-button-text:hover {
		background-color: var(--tr-ground-2);
	}

.mud-button-text.mud-button-text-primary {
	color: var(--tr-accent-700);
}

	.mud-button-text.mud-button-text-primary:hover {
		background-color: var(--tr-accent-50);
	}

.mud-button-text.mud-button-text-error {
	color: var(--tr-danger);
}

	.mud-button-text.mud-button-text-error:hover {
		background-color: var(--tr-danger-bg);
	}

.mud-button-root.mud-button-disabled,
.mud-button-root:disabled {
	background-color: var(--tr-ground-2) !important;
	border-color: var(--tr-line) !important;
	color: var(--tr-ink-off) !important;
	box-shadow: none !important;
}

.mud-button-text.mud-button-disabled {
	background-color: transparent !important;
	border-color: transparent !important;
}

/* Bottone icona */
.mud-icon-button {
	border-radius: var(--tr-r-sm);
	color: var(--tr-ink-3);
	transition: background-color var(--tr-dur) var(--tr-ease), color var(--tr-dur) var(--tr-ease), transform 90ms var(--tr-ease-snap);
}

	.mud-icon-button:hover {
		background-color: var(--tr-ground-2);
		color: var(--tr-ink);
	}

	.mud-icon-button:active {
		transform: scale(.94);
	}

.mud-icon-button.mud-icon-button-color-error:hover {
	background-color: var(--tr-danger-bg);
	color: var(--tr-danger);
}

/* Collegamenti di MudBlazor: lo stesso blu del testo dei collegamenti, non la campitura. */
.mud-link.mud-primary-text {
	color: var(--tr-accent-700);
}

/* Gruppo di scelte (esiti, periodo): un segmento solo campito, gli altri su carta. */
.mud-toggle-group {
	border-radius: var(--tr-r);
}

.mud-toggle-group-outlined {
	border-color: var(--tr-line-strong) !important;
	background: var(--tr-paper);
}

.mud-toggle-group .mud-toggle-item {
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-medium);
	color: var(--tr-ink-2);
}

	.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected,
	.mud-toggle-group .mud-toggle-item-selected {
		background-color: var(--tr-accent);
		color: var(--tr-accent-ink);
	}

/* ==========================================================================
   4. Campi e controlli
   ========================================================================== */
.mud-input-control {
	font-family: var(--tr-font);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
	border-color: var(--tr-line);
	border-radius: var(--tr-r);
	transition: border-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
}

/* L'hover si ferma davanti al focus, come fa MudBlazor sulla propria regola. */
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(:focus-within) .mud-input-outlined-border {
	border-color: var(--tr-line-strong);
}

/* Focus su :focus-within e non su .mud-focused, che MudBlazor 9 mette solo sui campi filled. */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
	border-color: var(--tr-accent-600) !important;
	border-width: 1px !important;
	box-shadow: 0 0 0 3px var(--tr-accent-50);
}

.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
	border-color: var(--tr-danger) !important;
}

/* MudBlazor 9.11 dà ai campi la classe della tipografia subtitle1, che in SCDD è un titoletto: qui il campo torna
   al corpo del testo. */
.mud-input.mud-typography-subtitle1,
.mud-input.mud-typography-input {
	font-size: var(--tr-t-base);
	font-weight: var(--tr-w-regular);
	letter-spacing: var(--tr-track-body);
}

.mud-input-root,
.mud-input-slot,
.mud-input input,
.mud-input textarea {
	font-family: var(--tr-font);
	font-size: var(--tr-t-base);
	color: var(--tr-ink);
}

	.mud-input input::placeholder,
	.mud-input textarea::placeholder,
	.mud-input-root::placeholder {
		color: var(--tr-ink-4);
		opacity: 1;
	}

.mud-input-label {
	font-family: var(--tr-font);
	font-size: var(--tr-t-base);
	color: var(--tr-ink-3);
}

.mud-input-label.mud-input-label-inputcontrol.mud-shrink {
	color: var(--tr-ink-3);
}

.mud-input.mud-input-underline::before {
	border-bottom-color: var(--tr-line);
}

.mud-input.mud-input-underline::after {
	border-bottom-color: var(--tr-accent-600);
}

.mud-input-helper-text {
	font-size: var(--tr-t-xs);
	color: var(--tr-ink-3);
}

	.mud-input-helper-text.mud-input-error {
		color: var(--tr-danger);
	}

.mud-input-adornment,
.mud-input-adornment-start .mud-icon-root,
.mud-input-adornment-end .mud-icon-root {
	color: var(--tr-ink-4);
}

/* Sola lettura: si vede che non si tocca, senza sembrare guasto. */
.mud-input.mud-disabled {
	background-color: var(--tr-ground-2);
}

	.mud-input.mud-disabled .mud-input-root {
		color: var(--tr-ink-3);
	}

/* Interruttori, spunte, radio */
.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root {
	color: var(--tr-ink-4);
}

.mud-checkbox .mud-checked .mud-icon-root,
.mud-radio .mud-checked .mud-icon-root {
	color: var(--tr-accent-700);
}

.mud-switch .mud-switch-track {
	background: var(--tr-line-strong);
}

/* ==========================================================================
   5. Tabelle — la superficie più usata
   ========================================================================== */
.mud-table {
	background: var(--tr-paper);
	border: 0;
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-1);
	overflow: hidden;
}

/* Una tabella dentro una superficie che galleggia già non ne aggiunge una seconda. */
.mud-paper .mud-table,
.tr-surface .mud-table,
.tr-pannello .mud-table,
.mud-dialog .mud-table,
.mud-tabs-panels .mud-table {
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.mud-table-toolbar {
	min-height: 48px;
	height: auto;
	padding: var(--tr-2) var(--tr-4);
	border-bottom: 1px solid var(--tr-line);
	flex-wrap: wrap;
	gap: var(--tr-2);
}

	.mud-table-toolbar .mud-typography-h6 {
		font-size: var(--tr-t-md);
	}

.mud-table-root {
	font-size: var(--tr-t-sm);
}

/* La testata resta leggibile mentre le righe le scorrono sotto. */
.mud-table-root .mud-table-head .mud-table-cell {
	position: sticky;
	top: 0;
	z-index: 2;
	height: 30px;
	padding: 0 var(--tr-3);
	background: var(--tr-ground);
	border-bottom: 1px solid var(--tr-line);
	font-size: var(--tr-t-micro);
	font-weight: var(--tr-w-semi);
	font-stretch: var(--tr-stretch-label);
	letter-spacing: var(--tr-track-label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--tr-ink-4);
}

.mud-table-root .mud-table-head .mud-button-root.mud-table-sort-label {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.mud-table-root .mud-table-body .mud-table-cell {
	height: 36px;
	padding: var(--tr-2) var(--tr-3);
	border-bottom: 1px solid var(--tr-line-soft);
	font-size: var(--tr-t-sm);
	color: var(--tr-ink);
}

.mud-table-dense .mud-table-root .mud-table-body .mud-table-cell {
	height: 30px;
	padding-block: 6px;
}

.mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
	border-bottom: 0;
}

.mud-table-hover .mud-table-body .mud-table-row {
	transition: background-color var(--tr-dur-fast) var(--tr-ease-snap);
}

	.mud-table-hover .mud-table-body .mud-table-row:hover {
		background-color: var(--tr-ground);
	}

.mud-table-body .mud-table-row.mud-table-row-selected,
.mud-table-body .mud-table-row.mud-selected-row {
	background-color: var(--tr-accent-50) !important;
}

.mud-table-foot .mud-table-cell,
.mud-table-pagination {
	border-top: 1px solid var(--tr-line);
	font-size: var(--tr-t-sm);
	color: var(--tr-ink-3);
}

.mud-table-pagination-caption,
.mud-table-pagination-select {
	font-size: var(--tr-t-sm);
	color: var(--tr-ink-3);
}

/* Sotto il punto di rottura MudTable impila le celle: l'etichetta incisa a sinistra, il valore a destra. */
.mud-xs-table .mud-table-root .mud-table-body .mud-table-cell,
.mud-sm-table .mud-table-root .mud-table-body .mud-table-cell,
.mud-md-table .mud-table-root .mud-table-body .mud-table-cell {
	height: auto;
}

.mud-table-cell::before {
	font-size: var(--tr-t-2xs);
	font-weight: var(--tr-w-semi);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-ink-4);
}

/* Tabelle semplici: stessa testata e stesse righe. */
.mud-simple-table table {
	font-size: var(--tr-t-sm);
}

	.mud-simple-table table thead tr th {
		height: 30px;
		padding: 0 var(--tr-3);
		background: var(--tr-ground);
		border-bottom: 1px solid var(--tr-line);
		font-size: var(--tr-t-micro);
		font-weight: var(--tr-w-semi);
		letter-spacing: var(--tr-track-label);
		text-transform: uppercase;
		color: var(--tr-ink-4);
	}

	.mud-simple-table table tbody tr td {
		padding: var(--tr-2) var(--tr-3);
		border-bottom: 1px solid var(--tr-line-soft);
		color: var(--tr-ink);
	}

	.mud-simple-table table tbody tr:last-child td {
		border-bottom: 0;
	}

/* ==========================================================================
   6. Pastiglie, allerte, avvisi
   ========================================================================== */

/* Le pastiglie portano uno stato: capsula tinta con il pallino, come .tr-state. Piena o a contorno, in SCDD sono
   lo stesso oggetto. */
.mud-chip {
	height: 24px;
	border-radius: var(--tr-r-pill);
	padding-inline: 10px;
	font-size: var(--tr-t-xs);
	font-weight: var(--tr-w-semi);
	letter-spacing: 0;
}

	.mud-chip::before {
		content: "";
		width: 6px;
		height: 6px;
		flex: none;
		margin-right: 6px;
		border-radius: 50%;
		background: currentColor;
	}

	/* Con l'icona il pallino è di troppo. */
	.mud-chip:has(.mud-chip-icon)::before {
		display: none;
	}

	.mud-chip .mud-chip-icon {
		font-size: 14px;
		margin-inline-end: 4px;
	}

.mud-chip.mud-chip-filled.mud-chip-color-default,
.mud-chip.mud-chip-outlined.mud-chip-color-default,
.mud-chip.mud-chip-filled.mud-chip-color-secondary,
.mud-chip.mud-chip-outlined.mud-chip-color-secondary,
.mud-chip.mud-chip-outlined:not([class*="mud-chip-color-"]) {
	background-color: var(--tr-neutral-bg);
	border: 1px solid transparent;
	color: var(--tr-ink-2);
}

.mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-chip.mud-chip-outlined.mud-chip-color-primary,
.mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-chip.mud-chip-outlined.mud-chip-color-info {
	background-color: var(--tr-accent-50);
	border: 1px solid var(--tr-accent-100);
	color: var(--tr-accent-800);
}

.mud-chip.mud-chip-filled.mud-chip-color-success,
.mud-chip.mud-chip-outlined.mud-chip-color-success {
	background-color: var(--tr-ok-bg);
	border: 1px solid var(--tr-ok-line);
	color: var(--tr-ok);
}

.mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-chip.mud-chip-outlined.mud-chip-color-warning {
	background-color: var(--tr-warn-bg);
	border: 1px solid var(--tr-warn-line);
	color: var(--tr-warn);
}

.mud-chip.mud-chip-filled.mud-chip-color-error,
.mud-chip.mud-chip-outlined.mud-chip-color-error {
	background-color: var(--tr-danger-bg);
	border: 1px solid var(--tr-danger-line);
	color: var(--tr-danger);
}

.mud-chip.mud-chip-text {
	background: transparent;
	padding-inline: 4px;
}

.mud-alert {
	border-radius: var(--tr-r);
	border: 1px solid transparent;
	box-shadow: none;
	font-size: var(--tr-t-base);
	align-items: flex-start;
}

.mud-alert-filled-error,
.mud-alert-text-error,
.mud-alert-outlined-error {
	background: var(--tr-danger-bg);
	border-color: var(--tr-danger-line);
	color: var(--tr-danger);
}

.mud-alert-filled-warning,
.mud-alert-text-warning,
.mud-alert-outlined-warning {
	background: var(--tr-warn-bg);
	border-color: var(--tr-warn-line);
	color: var(--tr-warn);
}

.mud-alert-filled-success,
.mud-alert-text-success,
.mud-alert-outlined-success {
	background: var(--tr-ok-bg);
	border-color: var(--tr-ok-line);
	color: var(--tr-ok);
}

.mud-alert-filled-info,
.mud-alert-text-info,
.mud-alert-outlined-info,
.mud-alert-filled-normal,
.mud-alert-text-normal,
.mud-alert-outlined-normal {
	background: var(--tr-accent-50);
	border-color: var(--tr-accent-100);
	color: var(--tr-accent-800);
}

	.mud-alert .mud-alert-icon .mud-icon-root,
	.mud-alert .mud-alert-icon {
		color: inherit;
	}

	.mud-alert .mud-link {
		color: inherit;
		font-weight: var(--tr-w-semi);
		text-decoration: underline;
	}

.mud-badge.mud-badge-error > .mud-badge {
	background-color: var(--tr-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

/* ==========================================================================
   7. Superfici: carta, dialoghi, popover, menu, tooltip, snackbar
   ========================================================================== */
.mud-paper {
	background-color: var(--tr-paper);
	color: var(--tr-ink);
	border-radius: var(--tr-r-lg);
}

/* MudPaper Outlined è la superficie di SCDD: galleggia invece di essere disegnata. */
.mud-paper-outlined {
	border: 0;
	box-shadow: var(--tr-shadow-1);
}

	.mud-paper-outlined .mud-paper-outlined {
		box-shadow: 0 0 0 1px var(--tr-line);
	}

.mud-dialog {
	border: 0;
	border-radius: var(--tr-r-xl);
	box-shadow: var(--tr-shadow-pop);
	animation: tr-rise var(--tr-dur-slow) var(--tr-ease) both;
}

	.mud-dialog .mud-dialog-title {
		padding: var(--tr-5) var(--tr-6) var(--tr-2);
	}

		.mud-dialog .mud-dialog-title,
		.mud-dialog .mud-dialog-title .mud-typography {
			font-size: var(--tr-t-lg);
			font-weight: var(--tr-w-semi);
			letter-spacing: var(--tr-track-title);
		}

	.mud-dialog .mud-dialog-content {
		padding: var(--tr-2) var(--tr-6) var(--tr-4);
		overflow-y: auto;
		font-size: var(--tr-t-base);
	}

	.mud-dialog .mud-dialog-actions {
		padding: var(--tr-3) var(--tr-6) var(--tr-5);
		border-top: 1px solid var(--tr-line-soft);
		gap: var(--tr-2);
	}

		.mud-dialog .mud-dialog-actions button:not(:first-child) {
			margin-left: 0;
			margin-inline-start: 0;
			margin-inline-end: 0;
		}

		/* L'azione primaria del dialogo resta primaria anche scritta come testo. */
		.mud-dialog .mud-dialog-actions .mud-button-text-primary {
			background-color: var(--tr-accent);
			color: var(--tr-accent-ink);
		}

			.mud-dialog .mud-dialog-actions .mud-button-text-primary:hover {
				background-color: var(--tr-accent-550);
			}

.mud-popover {
	border: 0;
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-3);
}

	.mud-popover.mud-popover-open {
		animation: tr-rise var(--tr-dur) var(--tr-ease) both;
	}

.mud-list {
	padding: var(--tr-1);
}

.mud-list-item,
.mud-menu-item {
	border-radius: var(--tr-r-sm);
	font-size: var(--tr-t-sm);
	min-height: 32px;
	transition: background-color var(--tr-dur) var(--tr-ease);
}

	.mud-list-item:hover,
	.mud-menu-item:hover {
		background-color: var(--tr-ground-2);
	}

	.mud-list-item.mud-selected-item {
		background-color: var(--tr-accent-50);
		color: var(--tr-accent-800);
	}

.mud-tooltip {
	background: var(--tr-ink);
	color: #fff;
	border-radius: var(--tr-r-sm);
	font-size: var(--tr-t-xs);
	font-weight: 450;
	padding: 4px 8px;
	box-shadow: var(--tr-shadow-2);
}

.mud-snackbar {
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-3);
	font-size: var(--tr-t-base);
}

.mud-overlay-scrim {
	background-color: rgba(15, 23, 42, .32);
}

@keyframes tr-rise {
	from {
		opacity: 0;
		transform: translateY(6px) scale(.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   8. Schede, pannelli, avanzamento
   ========================================================================== */
.mud-tabs-tabbar .mud-tabs-tabbar-inner {
	min-height: 38px;
}

.mud-tab {
	font-size: var(--tr-t-sm);
	font-weight: var(--tr-w-medium);
	text-transform: none;
	letter-spacing: 0;
	min-height: 38px;
	min-width: 0;
	padding: 0 var(--tr-3);
	color: var(--tr-ink-3);
}

	/* Solo la scheda attiva è campita, con il titolo in bianco. Il passaggio del mouse va ridetto, altrimenti
	   MudBlazor sostituisce la campitura con un velo chiaro e il bianco sparisce. */
	.mud-tab.mud-tab-active {
		background-color: var(--tr-accent-700);
		color: #FFFFFF;
	}

		.mud-tab.mud-tab-active:hover {
			background-color: var(--tr-accent-800);
		}

		.mud-tab.mud-tab-active:focus-visible {
			outline: 2px solid #FFFFFF;
			outline-offset: -4px;
		}

/* Il badge di una scheda (BadgeData) nel flusso, dopo il titolo: MudBlazor lo posiziona in assoluto oltre il bordo
   destro del testo, e con titoli lunghi come «Salute e sicurezza» finiva sopra la scheda accanto. */
.mud-tab .mud-tab-badge .mud-badge-wrapper,
.mud-tab .mud-tab-badge .mud-badge {
	position: static;
}

.mud-tab-slider {
	display: none;
}

.mud-expand-panel {
	border: 0;
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-shadow-1);
	background: var(--tr-paper);
}

	.mud-expand-panel + .mud-expand-panel {
		margin-top: var(--tr-2);
	}

.mud-expand-panel-header {
	font-size: var(--tr-t-base);
	font-weight: 550;
	min-height: 44px;
}

.mud-progress-linear {
	border-radius: var(--tr-r-pill);
	overflow: hidden;
}

/* Le barre d'attesa e d'avanzamento sono dell'accento, qualunque colore chieda la pagina (Secondary, in SCDD, è il
   grigio del testo secondario); verde, ambra e rosso restano dove c'è un giudizio. */
.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer)::before,
.mud-progress-linear.mud-progress-linear-color-secondary:not(.mud-progress-linear-buffer)::before {
	background-color: var(--tr-ground-2);
	opacity: 1;
}

.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar,
.mud-progress-linear.mud-progress-linear-color-secondary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
	background-color: var(--tr-accent-600);
}

.mud-progress-circular-circle {
	stroke: var(--tr-accent-600);
}

.mud-divider {
	border-color: var(--tr-line);
}

.mud-skeleton {
	background: linear-gradient(90deg, var(--tr-ground-2) 25%, var(--tr-line-soft) 37%, var(--tr-ground-2) 63%);
	border-radius: var(--tr-r-sm);
}

/* ==========================================================================
   9. Utilità strette
   ========================================================================== */
.tr-mono {
	font-family: var(--tr-font-mono);
	font-size: .9em;
	color: var(--tr-ink-2);
}

.tr-muted {
	color: var(--tr-ink-3);
}

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

.tr-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Azioni di riga: spente finché non ci si passa sopra. Su una tabella lunga tre pulsanti accesi per riga sono la
   cosa più rumorosa della schermata. */
.tr-row-actions {
	display: inline-flex;
	gap: var(--tr-1);
	padding: 2px;
	border-radius: var(--tr-r);
	background: var(--tr-paper);
	opacity: .55;
	transition: opacity var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
}

.mud-table-row:hover .tr-row-actions,
.tr-row-actions:focus-within {
	opacity: 1;
	box-shadow: var(--tr-shadow-1);
}

@media (hover: none) {
	.tr-row-actions {
		opacity: 1;
	}
}

kbd,
.tr-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 1px solid var(--tr-line);
	border-bottom-width: 2px;
	border-radius: var(--tr-r-xs);
	background: var(--tr-paper);
	font-family: var(--tr-font);
	font-size: var(--tr-t-micro);
	font-weight: var(--tr-w-semi);
	color: var(--tr-ink-3);
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	a.tr-kpi:hover {
		transform: none;
	}
}