/* ==========================================================================
   SCDD — token del sistema di design della piattaforma
   Stessa grammatica di SMDDP (..\SanMarinoDueDiligencePlatform\wwwroot\css\smddp-tokens.css): console di lavoro,
   un solo carattere, un solo accento. Cambia solo la palette, che è quella di SCDD (il blu del marchio, che va da
   #2563EB a #38BDF8, su neutri freddi chiari), non quella di San Marino Innovation. Il sito pubblico è scuro
   (sito.css), l'app resta chiara: è un posto dove si lavora a lungo.

   I nomi seguono quelli di SMDDP con il prefisso tr- al posto di sm-: un pezzo copiato da là si adatta cambiando
   solo il prefisso. Lo carica App.razor per le pagine dell'app e di accesso, mai per il sito pubblico (sito.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archivo variabile (SIL Open Font License 1.1), auto-ospitato in wwwroot/fonts: nessun CDN di terze parti su
   pagine dietro autenticazione.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('/fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('/fonts/archivo-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('/fonts/archivo-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ---- Neutri freddi ----------------------------------------------------
	   Tre piani: il rail è incassato, il lavoro sta sul fondo, i fogli di dati e le superfici sovrapposte salgono.
	   La punta di freddo è quella del blu notte del sito pubblico. */
	--tr-sunken: #EEF1F6; /* piano incassato: rail di navigazione          */
	--tr-paper: #FFFFFF; /* piano sollevato: tabelle, dialoghi, popover   */
	--tr-ground: #F6F7F9; /* piano di lavoro                              */
	--tr-ground-2: #EEF1F5; /* riempimenti tenui, hover, celle alternate     */
	--tr-line-soft: #E7EAF0; /* filetti interni a un gruppo                   */
	--tr-line: #DCE1E8; /* filetti di separazione, bordi dei campi       */
	--tr-line-strong: #C7CED8; /* bordi che devono reggere da soli              */

	--tr-ink: #0F172A; /* testo primario            17.9:1 su bianco   */
	--tr-ink-2: #334155; /* titoli minori, icone      10.4:1             */
	--tr-ink-3: #5A6475; /* testo secondario           5.6:1 sul fondo   */
	--tr-ink-4: #6B7588; /* segnaposto                 4.6:1 su bianco   */
	--tr-ink-off: #A3ACB9; /* disabilitato                                */

	/* ---- Accento: il blu del marchio SCDD --------------------------------
	   Il marchio va da #2563EB a #38BDF8. Il primo è l'accento: come campitura porta il bianco (5.2:1), quindi regge
	   bottoni primari e marchio; il 700 è il testo e i collegamenti su bianco, l'800 il testo sui fondi tinti. Il
	   secondo è troppo chiaro per il testo e per i bordi: sta solo nella sfumatura del marchio (immagini/scdd.svg). */
	--tr-accent-50: #EFF6FF;
	--tr-accent-100: #DBEAFE;
	--tr-accent-200: #BFDBFE;
	--tr-accent-300: #93C5FD;
	--tr-accent: #2563EB; /* blu del marchio SCDD                         */
	--tr-accent-550: #1D4ED8; /* passaggio sulla campitura                    */
	--tr-accent-600: #2563EB; /* bordi, icone, focus, barre       5.2:1     */
	--tr-accent-700: #1D4ED8; /* testo e collegamenti su bianco   6.7:1     */
	--tr-accent-800: #1E3A8A; /* testo sui fondi tinti dell'accento  9.5:1  */
	--tr-accent-ink: #FFFFFF; /* inchiostro sopra la campitura    5.2:1     */

	/* ---- Cielo: il secondo colore del marchio ----------------------------
	   L'azzurro verso cui va il marchio, scurito quanto basta per leggersi. Solo in pochi richiami (il tema del
	   framework, l'aiuto): non è un secondo accento delle azioni. */
	--tr-cielo: #0284C7; /* icone: 4.1:1 su bianco                       */
	--tr-cielo-testo: #0369A1; /* per il testo piccolo: 5.9:1 su bianco    */
	--tr-cielo-50: #F0F9FF;
	--tr-cielo-100: #E0F2FE;

	/* ---- Stati semantici: funzionali, mai decorativi ---------------------- */
	--tr-ok: #1F7A4D;
	--tr-ok-bg: #E8F4EC;
	--tr-ok-line: #BFE0CD;
	--tr-warn: #8A5A00;
	--tr-warn-bg: #FBF1DE;
	--tr-warn-line: #EAD4A6;
	--tr-danger: #A32B2B;
	--tr-danger-bg: #FBECEB;
	--tr-danger-line: #EFC9C6;
	--tr-neutral-bg: #EEF1F5;

	/* ---- Spaziatura: passo 4px ------------------------------------------- */
	--tr-1: 4px;
	--tr-2: 8px;
	--tr-3: 12px;
	--tr-4: 16px;
	--tr-5: 20px;
	--tr-6: 24px;
	--tr-8: 32px;
	--tr-10: 40px;
	--tr-12: 48px;
	--tr-16: 64px;

	/* ---- Raggi ------------------------------------------------------------ */
	--tr-r-xs: 4px;
	--tr-r-sm: 6px;
	--tr-r: 8px;
	--tr-r-lg: 12px;
	--tr-r-xl: 16px;
	--tr-r-pill: 999px;

	/* ---- Profondità -------------------------------------------------------
	   Ogni gradino somma un filetto che regge il bordo, un'ombra di contatto corta e una diffusa: l'oggetto sembra
	   appoggiato invece che disegnato. */
	--tr-shadow-1: 0 0 0 1px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.06), 0 3px 6px rgba(15,23,42,.05);
	--tr-shadow-2: 0 0 0 1px rgba(15,23,42,.055), 0 2px 4px rgba(15,23,42,.07), 0 8px 18px rgba(15,23,42,.09);
	--tr-shadow-3: 0 0 0 1px rgba(15,23,42,.06), 0 4px 8px rgba(15,23,42,.07), 0 18px 40px rgba(15,23,42,.13);
	--tr-shadow-pop: 0 0 0 1px rgba(15,23,42,.07), 0 10px 20px rgba(15,23,42,.10), 0 36px 72px rgba(15,23,42,.20);
	--tr-shadow-lift: 0 0 0 1px rgba(15,23,42,.06), 0 6px 12px rgba(15,23,42,.09), 0 20px 40px rgba(15,23,42,.14);
	--tr-shadow-stick: 0 6px 12px -6px rgba(15,23,42,.18);

	/* ---- Tipografia ------------------------------------------------------- */
	--tr-font: 'Archivo', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--tr-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

	--tr-t-micro: .625rem; /* 10px — etichette maiuscole      */
	--tr-t-2xs: .6875rem; /* 11px — meta minuta              */
	--tr-t-xs: .75rem; /* 12px — didascalie               */
	--tr-t-sm: .8125rem; /* 13px — interfaccia densa        */
	--tr-t-base: .875rem; /* 14px — corpo, tabelle           */
	--tr-t-md: .9375rem; /* 15px                            */
	--tr-t-lg: 1.125rem; /* 18px — titolo di sezione        */
	--tr-t-xl: 1.375rem; /* 22px — titolo di pagina         */
	--tr-t-2xl: 1.75rem; /* 28px                            */
	--tr-t-3xl: 2.25rem; /* 36px — numeri e cifre di stato  */

	--tr-w-regular: 420;
	--tr-w-medium: 520;
	--tr-w-semi: 600;
	--tr-w-strong: 680;
	--tr-stretch-label: 96%;

	--tr-track-label: .09em;
	--tr-track-body: -.003em;
	--tr-track-title: -.025em;
	--tr-track-display: -.035em;

	/* ---- Struttura -------------------------------------------------------- */
	--tr-rail: 244px;
	--tr-topbar: 48px;

	/* ---- Movimento -------------------------------------------------------- */
	--tr-ease: cubic-bezier(.16, 1, .3, 1);
	--tr-ease-snap: cubic-bezier(.2, 0, 0, 1);
	--tr-ease-move: cubic-bezier(.32, .72, 0, 1);
	--tr-dur-fast: 110ms;
	--tr-dur: 160ms;
	--tr-dur-slow: 220ms;
}

/* ==========================================================================
   Ponte verso MudBlazor.

   html:root e non :root: il MudThemeProvider inietta a runtime un blocco :root { ... } dopo i fogli della pagina,
   e a parità di specificità vincerebbe lui. La palette resta quella di TemaGrafico.cs.
   ========================================================================== */
html:root {
	--mud-typography-default-family: var(--tr-font);
	--mud-typography-default-size: var(--tr-t-base);
	--mud-typography-default-weight: var(--tr-w-regular);
	--mud-typography-default-lineheight: 1.5;
	--mud-typography-default-letterspacing: var(--tr-track-body);

	--mud-typography-body1-family: var(--tr-font);
	--mud-typography-body1-size: var(--tr-t-base);
	--mud-typography-body1-lineheight: 1.55;
	--mud-typography-body1-letterspacing: var(--tr-track-body);

	--mud-typography-body2-family: var(--tr-font);
	--mud-typography-body2-size: var(--tr-t-sm);
	--mud-typography-body2-lineheight: 1.5;
	--mud-typography-body2-letterspacing: var(--tr-track-body);

	--mud-typography-caption-family: var(--tr-font);
	--mud-typography-caption-size: var(--tr-t-xs);
	--mud-typography-caption-lineheight: 1.45;
	--mud-typography-caption-letterspacing: var(--tr-track-body);

	--mud-typography-button-family: var(--tr-font);
	--mud-typography-button-size: var(--tr-t-sm);
	--mud-typography-button-weight: var(--tr-w-medium);
	--mud-typography-button-letterspacing: 0;
	--mud-typography-button-text-transform: none;

	--mud-typography-overline-family: var(--tr-font);
	--mud-typography-overline-size: var(--tr-t-micro);
	--mud-typography-overline-weight: var(--tr-w-semi);
	--mud-typography-overline-letterspacing: var(--tr-track-label);
	--mud-typography-overline-text-transform: uppercase;

	--mud-typography-subtitle1-family: var(--tr-font);
	--mud-typography-subtitle1-size: var(--tr-t-md);
	--mud-typography-subtitle1-weight: var(--tr-w-medium);
	--mud-typography-subtitle1-lineheight: 1.45;
	--mud-typography-subtitle1-letterspacing: var(--tr-track-title);

	--mud-typography-subtitle2-family: var(--tr-font);
	--mud-typography-subtitle2-size: var(--tr-t-sm);
	--mud-typography-subtitle2-weight: var(--tr-w-semi);
	--mud-typography-subtitle2-lineheight: 1.45;
	--mud-typography-subtitle2-letterspacing: 0;

	/* Scala dei titoli fissa in rem: in un prodotto la clamp fluida rimpicciolisce i titoli dentro un pannello. */
	--mud-typography-h1-family: var(--tr-font);
	--mud-typography-h1-size: var(--tr-t-3xl);
	--mud-typography-h1-weight: var(--tr-w-strong);
	--mud-typography-h1-lineheight: 1.15;
	--mud-typography-h1-letterspacing: var(--tr-track-display);

	--mud-typography-h2-family: var(--tr-font);
	--mud-typography-h2-size: var(--tr-t-2xl);
	--mud-typography-h2-weight: var(--tr-w-strong);
	--mud-typography-h2-lineheight: 1.2;
	--mud-typography-h2-letterspacing: var(--tr-track-display);

	--mud-typography-h3-family: var(--tr-font);
	--mud-typography-h3-size: var(--tr-t-xl);
	--mud-typography-h3-weight: var(--tr-w-semi);
	--mud-typography-h3-lineheight: 1.25;
	--mud-typography-h3-letterspacing: var(--tr-track-title);

	--mud-typography-h4-family: var(--tr-font);
	--mud-typography-h4-size: var(--tr-t-xl);
	--mud-typography-h4-weight: var(--tr-w-strong);
	--mud-typography-h4-lineheight: 1.25;
	--mud-typography-h4-letterspacing: var(--tr-track-display);

	--mud-typography-h5-family: var(--tr-font);
	--mud-typography-h5-size: var(--tr-t-lg);
	--mud-typography-h5-weight: var(--tr-w-semi);
	--mud-typography-h5-lineheight: 1.3;
	--mud-typography-h5-letterspacing: var(--tr-track-title);

	/* In SCDD h6 è il titolo delle sezioni e delle tabelle (h2 nel markup): stesso peso del titolo di sezione
	   di SMDDP, un gradino sotto. */
	--mud-typography-h6-family: var(--tr-font);
	--mud-typography-h6-size: var(--tr-t-md);
	--mud-typography-h6-weight: var(--tr-w-semi);
	--mud-typography-h6-lineheight: 1.35;
	--mud-typography-h6-letterspacing: var(--tr-track-title);

	--mud-default-borderradius: var(--tr-r);
	--mud-elevation-1: var(--tr-shadow-1);
	--mud-elevation-2: var(--tr-shadow-1);
	--mud-elevation-3: var(--tr-shadow-2);
	--mud-elevation-4: var(--tr-shadow-2);
	--mud-elevation-6: var(--tr-shadow-3);
	--mud-elevation-8: var(--tr-shadow-3);
	--mud-elevation-10: var(--tr-shadow-pop);
	--mud-elevation-12: var(--tr-shadow-pop);
	--mud-elevation-16: var(--tr-shadow-pop);
	--mud-elevation-24: var(--tr-shadow-pop);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--tr-font);
	font-size: var(--tr-t-base);
	font-weight: var(--tr-w-regular);
	line-height: 1.5;
	letter-spacing: var(--tr-track-body);
	color: var(--tr-ink);
	background: var(--tr-ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Le cifre stanno in colonna: date, percentuali, conteggi. */
table, .mud-table, input[type=number], time, .tr-num {
	font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tr-font);
	color: var(--tr-ink);
	letter-spacing: var(--tr-track-title);
	text-wrap: balance;
}

::selection {
	background: var(--tr-accent-200);
	color: var(--tr-accent-800);
}

:root {
	caret-color: var(--tr-accent-700);
	accent-color: var(--tr-accent-700);
	scrollbar-color: var(--tr-line-strong) transparent;
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--tr-line-strong);
	border: 3px solid transparent;
	border-radius: var(--tr-r-pill);
	background-clip: content-box;
}

	::-webkit-scrollbar-thumb:hover {
		background: var(--tr-ink-off);
		border: 3px solid transparent;
		background-clip: content-box;
	}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* Un solo anello di focus per tutta la piattaforma. */
:focus-visible {
	outline: 2px solid var(--tr-accent-600);
	outline-offset: 2px;
	border-radius: var(--tr-r-xs);
}

/* FocusOnNavigate porta il fuoco sull'h1 a ogni navigazione per annunciare la pagina: è un fuoco da codice su un
   elemento non interattivo, l'anello non deve comparire. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus,
h1:focus-visible {
	outline: none;
}

.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-table-row:focus-visible {
	outline: 2px solid var(--tr-accent-600);
	outline-offset: 2px;
}

a {
	color: var(--tr-accent-700);
	text-decoration-color: color-mix(in srgb, var(--tr-accent-700) 35%, transparent);
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

	a:hover {
		text-decoration-color: currentColor;
	}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}