/* ------------------------------------------------------------------------------------------------
   Icone

   La classe `material-symbols-outlined` viene usata in tutta l'applicazione, ma non era mai stata
   definita: senza una regola che assegni il font, il browser rendeva il nome dell'icona come TESTO
   NORMALE — "calculate", "insights", "filter_alt" comparivano scritti a lettere accanto alle voci.

   Il font non viene scaricato da internet: Radzen lo distribuisce gia' con il pacchetto (lo stesso
   che usa per le proprie icone) ed espone il nome in `--rz-icon-font-family`. Riusarlo evita una
   richiesta esterna, e soprattutto evita che le icone spariscano se la rete verso Google non c'e'.
   ------------------------------------------------------------------------------------------------ */
.material-symbols-outlined {
    font-family: var(--rz-icon-font-family, "Material Symbols");
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Trasforma il nome scritto nel tag nel glifo corrispondente: e' il meccanismo su cui si basano
       i font a icone di Material, e senza di esso resterebbe comunque testo. */
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    /* L'icona accompagna sempre del testo: allinearla alla base evita che sporga sopra la riga. */
    vertical-align: middle;
    user-select: none;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------- Nexus design system ---------- */
:root {
    --nexus-bg: #f4f6fb;
    --nexus-surface: #ffffff;
    --nexus-border: #e4e8f1;
    --nexus-text: #1c2333;
    --nexus-text-muted: #6b7280;
    --nexus-primary: #4f46e5;
    --nexus-primary-soft: #eef0fe;
    /* Superficie secondaria: pastiglie di conteggio e righe in evidenza. Non e' il bianco delle schede
       ne' lo sfondo della pagina, ma il gradino intermedio fra i due. */
    --nexus-surface-alt: #f1f3f9;
    /* Azzurro leggero delle schede dataset: tinta e bordo dedicati, cosi' la scheda si distingue dalle
       altre superfici bianche della pagina senza toccare il resto del sistema di stili. */
    /* Le tinte dei tre gruppi di fattori. Appena accennate: sotto ci va del testo da leggere a
       lungo, e un fondo pieno lo renderebbe faticoso. Definite qui perche' servono sia alla
       linguetta sia al riquadro sotto, e devono restare identiche o le due parti non combaciano. */
    --nexus-fattori-positivi-fondo: #f2fbf6;
    --nexus-fattori-positivi-bordo: #c6ead8;
    --nexus-fattori-negativi-fondo: #fef5f4;
    --nexus-fattori-negativi-bordo: #f4d3cf;
    --nexus-fattori-rilevanti-fondo: #fffaef;
    --nexus-fattori-rilevanti-bordo: #f5e3bd;

    --nexus-dataset-card-bg: #eaf4fd;
    --nexus-dataset-card-border: #bcdcf5;
    --nexus-radius: 12px;
    --nexus-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--nexus-bg);
    color: var(--nexus-text);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Form: etichetta sempre sopra il campo, mai sulla stessa riga (Radzen di default e' inline) ---------- */
.rz-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: var(--nexus-text) !important;
}

/* ---------- Campi di input piu' compatti (altezza/padding ridotti rispetto al tema Material di default) ---------- */
.rz-textbox, .rz-textarea, .rz-numeric input, .rz-dropdown, .rz-datepicker input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: .88rem !important;
    min-height: unset !important;
}

.rz-dropdown .rz-dropdown-trigger, .rz-dropdown .rz-inputtext {
    min-height: unset !important;
}

/* ---------- Pulsanti/tab: capitalizzazione naturale (il tema Material di Radzen forza MAIUSCOLO di default) ---------- */
.rz-button, .rz-button-text,
.rz-tabview-nav-link, .rz-tabview-nav-link .rz-tabview-title,
.rz-navigation-item-link {
    text-transform: none !important;
}

/* ---------- Notifiche: barra a comparsa sotto la topbar, meta' destra dello schermo (non sopra il titolo pagina) ---------- */
.rz-notification {
    inset-block-start: 60px !important;
    inset-inline-end: 0 !important;
    top: 60px !important;
    right: 0 !important;
    left: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
.rz-notification-item-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    background-color: transparent !important;
}
.rz-notification-item {
    border-radius: 0 !important;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12) !important;
}

.nexus-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.nexus-topbar {
    flex-shrink: 0;
    background: var(--nexus-surface);
    border-bottom: 1px solid var(--nexus-border);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 60px;
}

.nexus-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}


.nexus-brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nexus-primary);
    box-shadow: 0 0 0 4px var(--nexus-primary-soft);
}

.nexus-brand-text {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.nexus-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Le icone della barra superiore parlano tutte con la stessa voce: stessa famiglia (Material Symbols),
   stessa dimensione, stesso colore del testo che accompagnano. Prima meta' erano icone Radzen, con una
   famiglia e un peso propri: affiancate alle altre sembravano di due applicazioni diverse. */
.nexus-topbar .material-symbols-outlined {
    font-size: 20px;
    color: inherit;
    line-height: 1;
}

.nexus-topbar-caret { font-size: 18px !important; opacity: .7; }

.nexus-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--nexus-text-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.nexus-nav-link:hover {
    background: var(--nexus-bg);
    color: var(--nexus-text);
}

.nexus-nav-link.active {
    background: var(--nexus-primary-soft);
    color: var(--nexus-primary);
}

.nexus-user-menu {
    position: relative;
    flex-shrink: 0;
}

.nexus-user-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--nexus-text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    transition: background-color .15s ease;
}

.nexus-user-trigger:hover {
    background: var(--nexus-bg);
}

/* Superficie trasparente che copre la pagina mentre il menu utente e' aperto: chiude al click fuori.
   Sta SOTTO al menu (z-index minore) perche' i click sulle voci arrivino a destinazione. */
.nexus-user-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.nexus-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    box-shadow: var(--nexus-shadow);
    min-width: 200px;
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Copre lo stacco fra il pulsante e il riquadro: senza, il puntatore che scende verso una voce
   attraversa una zona che non appartiene al menu. */
.nexus-user-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}

.nexus-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--nexus-text);
    text-decoration: none;
    font-size: .85rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.nexus-user-dropdown-item:hover {
    background: var(--nexus-bg);
}

.nexus-user-dropdown-btn {
    color: #b42318;
}

.nexus-main {
    flex: 1;
    padding: 32px 40px;
    min-width: 0;
    animation: nexus-fade-in .25s ease;
}

@keyframes nexus-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nexus-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.nexus-page-subtitle {
    color: var(--nexus-text-muted);
    margin: 0 0 24px;
    font-size: .92rem;
}

.nexus-card {
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    box-shadow: var(--nexus-shadow);
    padding: 20px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.nexus-card-clickable {
    cursor: pointer;
}

/* Scheda di un dataset nell'elenco: azzurro leggero invece del bianco delle superfici generiche. */
.nexus-card-dataset {
    background: var(--nexus-dataset-card-bg);
    border-color: var(--nexus-dataset-card-border);
}

.nexus-card-clickable:hover {
    box-shadow: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 24px rgba(16, 24, 40, .08);
    transform: translateY(-1px);
}

/* Schede piu' strette: a 340px ne entravano tre per riga anche su schermi larghi, e l'elenco costringeva
   a scorrere per vedere dieci dataset. A 240px ne entrano cinque su una pagina da 1280px in su, e su
   schermi piccoli la griglia si riadatta da sola. */
.nexus-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* Lo stato in cima e a DESTRA: e' la prima cosa da sapere di un dataset — se si puo' interrogare — e
   all'angolo opposto rispetto al numero delle viste, in basso a destra... anzi: entrambi a destra, uno in
   alto e uno in basso, cosi' la colonna destra della scheda dice "com'e' messo" e la sinistra "cos'e'". */
/* Le due etichette della scheda — stato e numero di viste — incolonnate nell'angolo in basso a
   destra, lo stato sopra. Prima lo stato stava in cima: separato dal resto, lo si leggeva come
   un'intestazione della scheda invece che come uno dei suoi attributi. */
.nexus-dataset-card-etichette {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    flex: 0 0 auto;
}

/* Le due pillole della scheda hanno la STESSA larghezza, e quella larghezza e' dettata dal caso piu'
   largo che devono contenere: "99 viste", cioe' un numero a due cifre.

   Incolonnate con larghezze diverse si leggevano come due elementi scollegati e il bordo destro
   sembrava sbilanciato. Dimensionarle sul contenuto piu' largo, invece che lasciarle adattare, evita
   anche che la colonna cambi forma passando da una scheda con 3 viste a una con 12. */
.nexus-dataset-card-etichette .nexus-badge {
    min-width: 5.6rem;
    justify-content: center;
    padding: 3px 10px;
    text-align: center;
}

/* --- testa della pagina dataset: titolo, ricerca al centro, comando -------
   Le colonne laterali hanno la stessa larghezza perche' la ricerca resti centrata rispetto alla PAGINA e
   non rispetto a cio' che le sta accanto: con un flex si sposterebbe ogni volta che il titolo cambia. */
.nexus-datasets-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) minmax(0, 1fr);

    /* Allineati in ALTO, alla riga del titolo, non al centro del blocco: il titolo porta sotto di se' un
       sottotitolo, quindi centrare la riga faceva scendere ricerca e pulsante sotto al titolo — accanto
       al sottotitolo, dove sembravano appartenergli. */
    align-items: start;
    gap: 16px;
    margin-bottom: 18px;
}

/* Il margine inferiore del sottotitolo non serve qui: lo spazio sotto la testata lo da' gia' il
   contenitore, e sommandosi allungava la riga della griglia allontanando ancora ricerca e pulsante. */
.nexus-datasets-titolo .nexus-page-subtitle { margin-bottom: 0; }

.nexus-datasets-comandi { display: flex; justify-content: flex-end; }

.nexus-datasets-ricerca {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--nexus-border);
    border-radius: 999px;
    background: var(--nexus-surface);
    min-height: 38px;
}

.nexus-datasets-ricerca:focus-within {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 3px var(--nexus-primary-soft);
}

.nexus-datasets-ricerca .material-symbols-outlined {
    font-size: 19px;
    color: var(--nexus-text-muted);
}

.nexus-datasets-ricerca-campo {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    font-size: .86rem;
    color: var(--nexus-text);
}

.nexus-datasets-ricerca-pulisci {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--nexus-text-muted);
    cursor: pointer;
}

.nexus-datasets-ricerca-pulisci:hover { color: var(--nexus-text); }

@media (max-width: 860px) {
    .nexus-datasets-testa { grid-template-columns: 1fr; }
    .nexus-datasets-comandi { justify-content: flex-start; }
}

.nexus-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;

    /* Su una riga sola, sempre. Con le schede piu' strette "3 viste" andava a capo dentro la pillola e
       la forma tonda si spezzava in due mezzelune: una pillola su due righe non si legge piu' come una
       pillola. Non potendo allargare la scheda, e' l'etichetta che non deve spezzarsi. */
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Sospeso in ROSSO e non in grigio: non e' una classificazione ma una funzione tolta — il dataset non si
   puo' interrogare — e il grigio si legge come "nessuna informazione" invece che come un impedimento. */
.nexus-badge-archived {
    background: #fdecea !important;
    color: #b42318 !important;
    border: 1px solid #f3b0a6;
}

/* Il bordo dello stesso verde del testo: senza, la pillola "attivo" era l'unica delle tre senza
   contorno e in fondo alla scheda sembrava sfumare nel fondo, mentre "sospeso" e il numero di viste
   avevano un profilo netto. Tre pillole incolonnate devono avere la stessa consistenza. */
.nexus-badge-active {
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #027a48;
}

.nexus-badge-archived {
    background: #f2f4f7;
    color: #475467;
}

.nexus-btn-normal-case, .nexus-btn-normal-case .rz-button-text {
    text-transform: none !important;
}

.nexus-empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--nexus-text-muted);
}

.nexus-chat-history-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
}
.nexus-chat-history-item:hover {
    background: var(--nexus-bg);
}
.nexus-chat-history-item-active {
    background: var(--nexus-primary-light, rgba(59, 130, 196, 0.12));
}

/* ---------- Bolle di chat: contenuto renderizzato (tabelle, citazioni, elenchi), non testo grezzo ---------- */
.ai-chat-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.5;
}
.ai-chat-bubble-user {
    background: var(--nexus-primary);
    color: white;
}
.ai-chat-bubble-assistant {
    background: var(--nexus-bg);
    color: var(--nexus-text);
}
.ai-chat-bubble p {
    margin: 0 0 8px;
}
.ai-chat-bubble p:last-child {
    margin-bottom: 0;
}
.ai-chat-bubble .ai-chat-heading {
    font-weight: 700;
    margin-top: 4px;
}
.ai-chat-bubble .ai-chat-list {
    margin: 0 0 8px;
    padding-left: 20px;
}
.ai-chat-bubble .ai-chat-list li {
    margin-bottom: 3px;
}
.ai-chat-quote {
    margin: 0 0 8px;
    padding: 4px 12px;
    border-left: 3px solid var(--nexus-border);
    color: var(--nexus-text-muted);
    font-style: italic;
}
.ai-chat-bubble-user .ai-chat-quote {
    border-left-color: rgba(255, 255, 255, .5);
    color: rgba(255, 255, 255, .85);
}
.ai-chat-table-wrap {
    overflow-x: auto;
    margin: 4px 0 10px;
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
}
.ai-chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.ai-chat-table th, .ai-chat-table td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--nexus-border);
    white-space: nowrap;
}
.ai-chat-table th {
    background: var(--nexus-surface);
    font-weight: 600;
    color: var(--nexus-text-muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ai-chat-table tbody tr:last-child td {
    border-bottom: none;
}
.ai-chat-bubble-user .ai-chat-table th {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
}
.ai-chat-bubble-user .ai-chat-table td {
    border-bottom-color: rgba(255, 255, 255, .25);
}

/* ---------- Textarea: impedisce che il resize orizzontale ecceda il bordo della form ---------- */
.nexus-textarea, .rz-textarea {
    resize: vertical !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- File picker (import dati) ---------- */
.nexus-file-picker {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.nexus-file-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nexus-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.nexus-file-button:hover {
    background: #4338ca;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}
.nexus-file-name {
    color: var(--nexus-text-muted);
    font-size: .85rem;
}

/* ---------- Loading indicator ---------- */
.nexus-loading-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--nexus-bg);
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    color: var(--nexus-text-muted);
    font-size: .85rem;
    width: fit-content;
}

/* ---------- Griglia definizione colonne (primo import) ---------- */
.nexus-column-grid {
    border-collapse: collapse;
    width: 100%;
    font-size: .82rem;
}
.nexus-column-grid th {
    text-align: left;
    padding: 5px 8px;
    color: var(--nexus-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--nexus-border);
}
.nexus-column-grid td {
    padding: 2px 8px;
    border-bottom: 1px solid var(--nexus-border);
    vertical-align: middle;
}
.nexus-column-grid .rz-textbox {
    padding: 3px 8px !important;
    height: auto !important;
    font-size: .8rem !important;
}
.nexus-column-grid .rz-dropdown {
    min-height: unset !important;
    font-size: .8rem !important;
}
.nexus-column-grid .rz-dropdown .rz-inputtext,
.nexus-column-grid .rz-dropdown .rz-dropdown-trigger {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: unset !important;
}
.nexus-column-row-excluded {
    opacity: .5;
}

/* ---------- Nota informativa inline ---------- */
.nexus-inline-note {
    font-size: .82rem;
    color: var(--nexus-text-muted);
    background: var(--nexus-bg);
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    padding: 8px 12px;
}

/* ---------- Toast puramente JS (usato dai suggerimenti AI, indipendenti dal circuito Blazor) ---------- */
.nexus-toast-host {
    position: fixed;
    top: 60px;
    left: 50%;
    right: 0;
    width: 50%;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
}
.nexus-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
    pointer-events: auto;
}
.nexus-toast-success {
    background: #ecfdf3;
    color: #027a48;
}
.nexus-toast-warn {
    background: #fffaeb;
    color: #b54708;
}
.nexus-toast-title {
    font-weight: 700;
    font-size: .88rem;
}
.nexus-toast-message {
    font-size: .85rem;
    margin-top: 2px;
}

/* ---------- Tabella anteprima import: colonne numeriche allineate a destra ---------- */
.nexus-preview-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .85rem;
}
.nexus-preview-table th, .nexus-preview-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--nexus-border);
}
.nexus-preview-table th {
    color: var(--nexus-text-muted);
}
.nexus-preview-table .nexus-col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Login page ---------- */
.login-page {
    min-height: 100vh;
    background: #0e1120;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

/* Sfondo animato "noise terrain" — griglia 3D deformata da rumore, disegnata su
   canvas via js/login-terrain.js. Resta dietro la card di login (z-index 0). */
.login-terrain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.login-card {
    display: flex;
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .08);
    position: relative;
    z-index: 1;
    background: #151936;
}

.login-brand {
    flex: 0 0 44%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(79, 70, 229, .07) 0%, transparent 70%);
    pointer-events: none;
}
.login-brand-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.login-logo {
    width: 100%;
    max-width: 320px;
    object-fit: contain;
}

.login-form {
    flex: 1;
    background: #151936;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}
.login-form-inner {
    width: 100%;
    max-width: 320px;
}
.login-title {
    font-size: 24px;
    font-weight: 600;
    color: #f5f6fa;
    margin: 0 0 28px;
    letter-spacing: -.01em;
}

.login-alert {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: .85rem;
}
.login-alert-warning { background: #3a2c0f; color: #f7c463; }
.login-alert-danger { background: #3a1616; color: #ff8a8a; }

.login-field { margin-bottom: 18px; }
.login-field label {
    display: block;
    color: #9aa0c3;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.login-field input {
    background: #1c2145;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #f5f6fa;
    font-size: 14px;
    padding: 10px 14px;
    width: 100%;
    transition: border-color .18s, box-shadow .18s;
}
.login-field input:focus {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
    outline: none;
}

.login-page form button[type=submit] {
    background: var(--nexus-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 11px 28px;
    width: 100%;
    margin-top: 8px;
    cursor: pointer;
    transition: background .18s, box-shadow .18s;
}
.login-page form button[type=submit]:hover {
    background: #4338ca;
    box-shadow: 0 4px 16px rgba(79, 70, 229, .35);
}

.login-footer {
    font-size: 11px;
    color: #6b7192;
    margin-top: 20px;
    text-align: center;
    letter-spacing: .03em;
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .login-card { flex-direction: column; }
    .login-brand { flex: none; padding: 28px; }
    .login-logo { max-width: 220px; }
    .login-form { padding: 32px 24px; border-left: none; border-top: 1px solid rgba(255, 255, 255, .08); }
}
/* ---------- Progress bar import (animata, professionale) ---------- */
.nexus-import-progress {
    margin-top: 20px;
    width: 100%;
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: 12px;
    padding: 16px 18px;
}
.nexus-import-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.nexus-import-progress-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--nexus-text);
}
.nexus-import-progress-pct {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--nexus-primary);
    font-variant-numeric: tabular-nums;
}
.nexus-import-progress-track {
    height: 12px;
    border-radius: 999px;
    background: var(--nexus-bg);
    border: 1px solid var(--nexus-border);
    overflow: hidden;
}
.nexus-import-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nexus-primary), #7c73f0, var(--nexus-primary));
    background-size: 200% 100%;
    animation: nexus-progress-shimmer 1.4s linear infinite;
    transition: width .3s ease;
}
@keyframes nexus-progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: 0 0; }
}
.nexus-import-progress-detail {
    margin-top: 8px;
    font-size: .82rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Insight: linguaggio visivo ispirato a DataBot, adattato al tema chiaro di Nexus ---------- */
.ai-period-analysis {
    margin-top: 20px;
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-left: 3px solid var(--nexus-primary);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: var(--nexus-shadow);
}
.ai-period-analysis-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--nexus-text);
}
.ai-period-analysis p {
    margin: 4px 0;
    color: var(--nexus-text);
    font-size: .92rem;
    line-height: 1.5;
}

/* --- fattori: tre linguette, contenuto sempre aperto sotto -----------------
   Prima erano tre riquadri richiudibili affiancati: per leggere un gruppo bisognava aprirlo, e una
   volta aperto spingeva gli altri due in basso. Le linguette tolgono quel passaggio, e i conteggi
   restano tutti visibili in testa — che era la cosa utile delle intestazioni chiuse.

   I tre colori sono gli stessi di prima (verde, rosso, arancio): cambiare il contenitore non e' un
   motivo per cambiare anche il codice cromatico che le persone hanno gia' imparato. */

.ai-insight-fattori {
    margin-top: 20px;
}

/* La fila poggia SUL corpo, non dentro un contenitore proprio: e' l'aggancio fra la linguetta scelta
   e il riquadro sotto a farle leggere come cartelline, e un bordo attorno a tutto lo spezzerebbe. */
.ai-insight-fattori-linguette {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 0 4px;
    /* Su schermo stretto le linguette scorrono invece di andare a capo: spezzate su due righe il
       riquadro sembrerebbe contenerne sei. */
    overflow-x: auto;
    overflow-y: hidden;
}

.ai-insight-linguetta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    position: relative;
    /* La curva marcata in alto e squadrata in basso e' cio' che rende la forma una linguetta e non un
       pulsante: la parte bassa deve sembrare che continui nel foglio sotto. */
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--nexus-border);
    border-bottom: none;
    padding: 9px 16px 8px;
    background: var(--nexus-surface-alt);
    color: var(--nexus-text-muted);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, padding .12s ease;
}

.ai-insight-linguetta .material-symbols-outlined { font-size: 17px; }

.ai-insight-linguetta:not(.ai-insight-linguetta--attiva):hover {
    background: var(--nexus-surface);
    color: var(--nexus-text);
}

/* La linguetta scelta si alza, prende il fondo del corpo e copre il filo che li separa: e' quel
   millimetro di sovrapposizione a far leggere le due parti come un pezzo solo. */
.ai-insight-linguetta--attiva {
    padding-top: 11px;
    padding-bottom: 10px;
    margin-bottom: -1px;
    z-index: 1;
}

.ai-insight-linguetta--positivi.ai-insight-linguetta--attiva {
    background: var(--nexus-fattori-positivi-fondo);
    border-color: var(--nexus-fattori-positivi-bordo);
    color: #027a48;
}
.ai-insight-linguetta--negativi.ai-insight-linguetta--attiva {
    background: var(--nexus-fattori-negativi-fondo);
    border-color: var(--nexus-fattori-negativi-bordo);
    color: #b42318;
}
.ai-insight-linguetta--rilevanti.ai-insight-linguetta--attiva {
    background: var(--nexus-fattori-rilevanti-fondo);
    border-color: var(--nexus-fattori-rilevanti-bordo);
    color: #b54708;
}

.ai-insight-linguetta:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: -2px;
}

/* Il conteggio resta colorato anche sulla linguetta a riposo: e' l'informazione che si cerca senza
   aprire nulla, e spegnerlo insieme al resto la renderebbe illeggibile proprio li'. */
.ai-insight-linguetta--positivi  .ai-insight-summary-conteggio { background: #027a48; color: #fff; }
.ai-insight-linguetta--negativi  .ai-insight-summary-conteggio { background: #b42318; color: #fff; }
.ai-insight-linguetta--rilevanti .ai-insight-summary-conteggio { background: #b54708; color: #fff; }

.ai-insight-summary-conteggio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Il corpo prende il colore appena accennato del gruppo scelto: dice a colpo d'occhio cosa si sta
   guardando anche dopo aver scorso, quando le linguette sono uscite dallo schermo. Appena accennato
   e non pieno, perche' sotto ci va del testo da leggere a lungo. */
.ai-insight-fattori-corpo {
    padding: 18px 20px;
    border: 1px solid var(--nexus-border);
    border-radius: 0 12px 12px 12px;
    background: var(--nexus-surface);
}

.ai-insight-fattori-corpo--positivi {
    background: var(--nexus-fattori-positivi-fondo);
    border-color: var(--nexus-fattori-positivi-bordo);
}
.ai-insight-fattori-corpo--negativi {
    background: var(--nexus-fattori-negativi-fondo);
    border-color: var(--nexus-fattori-negativi-bordo);
}
.ai-insight-fattori-corpo--rilevanti {
    background: var(--nexus-fattori-rilevanti-fondo);
    border-color: var(--nexus-fattori-rilevanti-bordo);
}

/* Tre colonne: i fattori sono voci brevi e indipendenti, e in colonna sola su schermo largo si
   otteneva una striscia di testo con meta' pagina vuota accanto.
   `break-inside: avoid` e' la riga che rende utilizzabile il tutto: senza, una voce si spezza fra il
   fondo di una colonna e la cima della successiva, e si legge come due fattori diversi. */
.ai-insight-fattori-elenco {
    margin: 0;
    padding-left: 18px;
    column-count: 3;
    column-gap: 28px;
    column-rule: 1px solid var(--nexus-border);
}

@media (max-width: 1200px) { .ai-insight-fattori-elenco { column-count: 2; } }
@media (max-width: 780px)  { .ai-insight-fattori-elenco { column-count: 1; column-rule: none; } }

.ai-insight-fattori-elenco li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14px;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--nexus-text);
}

.ai-insight-fattori-elenco li::marker { color: var(--nexus-text-muted); }

/* Titolo e spiegazione separati: prima era un paragrafo unico in cui non si capiva dove finisse un
   fattore e cominciasse il successivo. */
.ai-insight-fattori-titolo {
    display: block;
    font-weight: 600;
    color: var(--nexus-text);
    margin-bottom: 2px;
}

.ai-insight-fattori-testo {
    display: block;
    color: var(--nexus-text-muted);
}

.ai-insight-summary-empty {
    color: var(--nexus-text-muted);
    font-style: italic;
    margin: 0;
}

.ai-insight-results-header {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: .85rem;
    color: var(--nexus-text-muted);
}

/* ---------- Timeline orizzontale delle fasi di calcolo ---------- */
/* Su UNA riga sola, e se non ci sta si scorre.

   Andando a capo, il primo elemento di ogni riga successiva disegnava comunque la sua linea di
   collegamento verso sinistra: una linea che non collega niente, appesa nel vuoto all'inizio della riga.
   La regola che la nasconde guarda `:first-child`, che e' il primo dell'INTERO elenco — non il primo di
   ogni riga, che il CSS non sa riconoscere. Togliere il ritorno a capo elimina il problema alla radice
   invece di rincorrerlo. */
.nexus-phase-timeline {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: flex-start;
    list-style: none;
    margin: 22px 0 8px;
    padding: 0;
    counter-reset: phase;
}
.nexus-phase {
    position: relative;
    /* Non si restringe sotto la larghezza minima: e' preferibile scorrere che comprimere le fasi fino a
       renderne illeggibili i nomi. */
    flex: 1 0 92px;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
/* Linea di collegamento fra un pallino e il successivo: disegnata dietro il marker. */
.nexus-phase::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--nexus-border);
}
.nexus-phase:first-child::before { display: none; }
.nexus-phase--done::before,
.nexus-phase--active::before { background: var(--nexus-primary); }

.nexus-phase-marker {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--nexus-border);
    background: var(--nexus-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.nexus-phase-marker .rz-icon { font-size: 13px; }

.nexus-phase--done .nexus-phase-marker {
    background: var(--nexus-primary);
    border-color: var(--nexus-primary);
}
.nexus-phase--active .nexus-phase-marker {
    border-color: var(--nexus-primary);
    background: var(--nexus-surface);
    box-shadow: 0 0 0 4px rgba(59, 130, 196, .18);
    animation: nexus-phase-pulse 1.2s ease-in-out infinite;
}
@keyframes nexus-phase-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 196, .16); }
    50%      { box-shadow: 0 0 0 7px rgba(59, 130, 196, .05); }
}
@media (prefers-reduced-motion: reduce) {
    .nexus-phase--active .nexus-phase-marker { animation: none; }
}

.nexus-phase-label {
    font-size: .74rem;
    line-height: 1.25;
    color: var(--nexus-text-muted);
    padding: 0 4px;
}
.nexus-phase--active .nexus-phase-label {
    color: var(--nexus-primary);
    font-weight: 600;
}
.nexus-phase--done .nexus-phase-label { color: var(--nexus-text); }

/* ---------- Barra filtri insight ---------- */
.ai-insight-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    margin-top: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nexus-border);
}
.ai-insight-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-insight-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--nexus-border);
    background: var(--nexus-surface);
    color: var(--nexus-text-muted);
    font-size: .8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ai-insight-chip:hover {
    background: var(--nexus-bg);
    color: var(--nexus-text);
}
.ai-insight-chip:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 2px;
}
.ai-insight-chip--active {
    background: var(--nexus-primary);
    border-color: var(--nexus-primary);
    color: #fff;
}
.ai-insight-chip--active:hover {
    background: var(--nexus-primary);
    color: #fff;
}
.ai-insight-chip-count {
    font-size: .72rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}
/* I chip di sentiment mantengono il colore semantico quando sono attivi. */
.ai-insight-chip--positivo.ai-insight-chip--active { background: #027a48; border-color: #027a48; }
.ai-insight-chip--negativo.ai-insight-chip--active { background: #b42318; border-color: #b42318; }
.ai-insight-chip--rilevante.ai-insight-chip--active { background: #b54708; border-color: #b54708; }

.ai-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.ai-insight-card {
    /* Fondo leggermente azzurrato, in linea con il colore primario del tema: distingue le schede di
       analisi dalle card neutre del resto dell'app senza competere con il bordo colorato per sentiment. */
    background: color-mix(in srgb, var(--nexus-primary) 5%, var(--nexus-surface));
    border: 1px solid color-mix(in srgb, var(--nexus-primary) 18%, var(--nexus-border));
    border-left: 3px solid;
    border-radius: 10px;
    padding: 14px 16px;
    animation: nexus-fade-in .2s ease;
}
.ai-insight-card--positivo { border-left-color: #027a48; }
.ai-insight-card--negativo { border-left-color: #b42318; }
.ai-insight-card--rilevante { border-left-color: #b54708; }
.ai-insight-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 8px;
}
.ai-insight-card--positivo .ai-insight-card-header { color: #027a48; }
.ai-insight-card--negativo .ai-insight-card-header { color: #b42318; }
.ai-insight-card--rilevante .ai-insight-card-header { color: #b54708; }
.ai-insight-card-body {
    font-size: .88rem;
    color: var(--nexus-text);
    line-height: 1.45;
}
.ai-insight-card-detail {
    font-size: .74rem;
    color: var(--nexus-text-muted);
    margin-top: 8px;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}
.ai-insight-card-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--nexus-border);
}
.ai-insight-card-footer .rz-button {
    width: 100%;
    justify-content: center;
}

/* ---------- Spiegazione del calcolo (chat) ---------- */

.nexus-trace {
    margin-top: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}

/* Aperta, la spiegazione assume una superficie propria; chiusa resta una riga discreta sotto il risultato. */
.nexus-trace[open] {
    border-color: var(--nexus-border);
    background: var(--nexus-surface);
    margin-top: 8px;
}

.nexus-trace-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 500;
    color: var(--nexus-text-muted);
    list-style: none;
    user-select: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* La freccia predefinita di <details> viene sostituita dall'icona, che resta allineata al testo. */
.nexus-trace-summary::-webkit-details-marker { display: none; }
.nexus-trace-summary::marker { content: ""; }

.nexus-trace-summary:hover { color: var(--nexus-text); }

.nexus-trace-summary-icon {
    font-size: .85rem;
    color: var(--nexus-primary);
}

.nexus-trace[open] .nexus-trace-summary {
    display: flex;
    padding: 8px 14px;
    border-bottom: 1px solid var(--nexus-border);
    color: var(--nexus-text);
    text-decoration: none;
}

.nexus-trace-steps {
    margin: 0;
    padding: 12px 14px 14px 34px;
    list-style: none;
    counter-reset: nexus-trace-counter;
    /* Filo verticale che unisce i passaggi: rende leggibile la sequenza a colpo d'occhio. */
    position: relative;
}

.nexus-trace-steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: var(--nexus-border);
}

.nexus-trace-step {
    position: relative;
    counter-increment: nexus-trace-counter;
    padding: 6px 0 10px;
}

.nexus-trace-step::before {
    content: counter(nexus-trace-counter);
    position: absolute;
    left: -25px;
    top: 6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--nexus-primary-soft);
    color: var(--nexus-primary);
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nexus-trace-step-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
    margin-bottom: 5px;
}

.nexus-trace-step-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nexus-trace-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: .78rem;
    line-height: 1.45;
    border: 1px solid transparent;
}

.nexus-trace-chip strong { font-weight: 600; }

.nexus-trace-chip-neutral {
    background: var(--nexus-bg);
    border-color: var(--nexus-border);
    color: var(--nexus-text);
}

.nexus-trace-chip-muted {
    background: transparent;
    color: var(--nexus-text-muted);
    font-style: italic;
}

.nexus-trace-chip-filter {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.nexus-trace-chip-group {
    background: #eef6ff;
    border-color: #bcdcf5;
    color: #14538a;
}

.nexus-trace-chip-metric {
    background: var(--nexus-primary-soft);
    border-color: #c7c9fb;
    color: #3730a3;
}

/* Casella della chat: parte a una riga e cresce fino a un tetto, cosi' una domanda lunga resta leggibile
   mentre la conversazione sopra non viene schiacciata. */
.nexus-chat-input {
    flex: 1;
    min-height: 38px;
    max-height: 140px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* ---------- Grafici della chat ---------- */

/* Tutti i grafici e le loro legende partono dal bordo sinistro, come il testo della risposta: un grafico
   centrato rispetto alla bolla rompe la linea di lettura e rende difficile confrontare due risposte. */
.nexus-chart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.nexus-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px 16px;
    font-size: .8rem;
    max-width: 420px;
}

/* --- Barre orizzontali: molte voci, etichette in colonna --- */

.nexus-chart-bars {
    gap: 5px;
    min-width: 320px;
}

.nexus-chart-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: .82rem;
}

.nexus-chart-bar-label {
    width: 130px;
    flex-shrink: 0;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.nexus-chart-bar-track {
    position: relative;
    flex: 1;
    min-width: 60px;
    height: 16px;
    background: var(--nexus-bg);
    border-radius: 4px;
}

.nexus-chart-bar-fill {
    position: absolute;
    top: 0;
    height: 16px;
    border-radius: 3px;
    background: var(--nexus-primary);
    min-width: 1px;
}

.nexus-chart-bar-fill-negative { background: #ef4444; }

/* Asse dello zero: compare solo quando la serie contiene valori di entrambi i segni. */
.nexus-chart-bar-zero {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--nexus-text-muted);
    opacity: .5;
}

.nexus-chart-bar-value {
    width: 92px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Colonne verticali: poche voci, altezze confrontabili a colpo d'occhio --- */

.nexus-chart-columns {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 14px;
    padding-top: 4px;
}

.nexus-chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 62px;
}

.nexus-chart-column-value {
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* La traccia ha altezza fissa: e' il riferimento comune rispetto a cui le colonne sono proporzionali. */
.nexus-chart-column-track {
    position: relative;
    height: 130px;
    width: 34px;
    background: var(--nexus-bg);
    border-radius: 4px;
}

.nexus-chart-column-fill {
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--nexus-primary);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.nexus-chart-column-fill-negative {
    background: #ef4444;
    border-radius: 0 0 3px 3px;
}

.nexus-chart-column-zero {
    position: absolute;
    left: -3px;
    right: -3px;
    height: 1px;
    background: var(--nexus-text-muted);
    opacity: .5;
}

.nexus-chart-column-label {
    font-size: .72rem;
    color: var(--nexus-text-muted);
    text-align: center;
    line-height: 1.25;
    max-width: 62px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Tabella riepilogativa --- */

.nexus-chart-table {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    width: 100%;
    max-width: 520px;
}

.nexus-table-total-label,
.nexus-table-total-value {
    padding: 8px 12px;
    background: var(--nexus-bg);
    border-top: 2px solid var(--nexus-border);
    font-weight: 700;
    position: sticky;
    bottom: 0;
}

.nexus-table-total-label { text-align: left; }

.nexus-table-total-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Schede di valore: pochi valori indipendenti a confronto ---------- */

.nexus-value-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.nexus-value-card {
    min-width: 130px;
    padding: 12px 16px;
    border: 1px solid var(--nexus-border);
    border-top: 3px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
}

/* Il valore piu' alto e' l'informazione che si cerca per prima in un confronto. */
.nexus-value-card-best {
    border-top-color: var(--nexus-primary);
    background: var(--nexus-primary-soft);
}

.nexus-value-card-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--nexus-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-value-card-value {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nexus-value-card-best .nexus-value-card-value { color: var(--nexus-primary); }

/* ---------- Matrice: incrocio di due dimensioni ---------- */

.nexus-matrix-wrap {
    max-width: 100%;
    overflow: auto;
    max-height: 420px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
}

.nexus-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
    width: max-content;
    min-width: 100%;
}

.nexus-matrix th,
.nexus-matrix td {
    padding: 7px 12px;
    white-space: nowrap;
}

/* L'angolo resta fermo su entrambi gli assi: senza, scorrendo si perde il riferimento delle intestazioni. */
.nexus-matrix-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--nexus-bg);
    text-align: left;
    font-weight: 600;
    color: var(--nexus-text-muted);
    font-size: .72rem;
    border-bottom: 1px solid var(--nexus-border);
    border-right: 1px solid var(--nexus-border);
}

.nexus-matrix-col-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nexus-bg);
    text-align: right;
    font-weight: 600;
    border-bottom: 1px solid var(--nexus-border);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-matrix-row-head {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--nexus-surface);
    text-align: left;
    font-weight: 600;
    border-right: 1px solid var(--nexus-border);
    border-top: 1px solid var(--nexus-bg);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-matrix-cell {
    text-align: right;
    border-top: 1px solid var(--nexus-bg);
    font-variant-numeric: tabular-nums;
}

/* Una combinazione senza dati non e' uno zero: va distinta, non riempita con un numero inventato. */
.nexus-matrix-cell-empty {
    color: var(--nexus-text-muted);
    opacity: .5;
}

.nexus-matrix-total,
.nexus-matrix-total-head {
    background: var(--nexus-bg);
    font-weight: 700;
}

.nexus-matrix tfoot .nexus-matrix-cell,
.nexus-matrix tfoot .nexus-matrix-row-head {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--nexus-bg);
    border-top: 2px solid var(--nexus-border);
}

.nexus-matrix-grand-total { color: var(--nexus-primary); }

/* ---------- Azioni su un risultato: spiegazione del calcolo + esportazione ---------- */

.nexus-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* La spiegazione occupa lo spazio disponibile, i pulsanti restano compatti a destra. */
.nexus-result-actions > .nexus-trace { flex: 1; min-width: 200px; }

.nexus-export-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.nexus-export-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--nexus-border);
    border-radius: 7px;
    background: var(--nexus-surface);
    color: var(--nexus-text-muted);
    font-size: .72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.nexus-export-button:hover {
    border-color: var(--nexus-primary);
    color: var(--nexus-primary);
    background: var(--nexus-primary-soft);
}

.nexus-export-button .material-symbols-outlined { font-size: .95rem; }

/* Quando la spiegazione e' aperta occupa tutta la larghezza: i pulsanti scendono sotto invece di
   comprimerla in una colonna stretta. */
.nexus-result-actions:has(.nexus-trace[open]) {
    flex-direction: column;
    align-items: stretch;
}

.nexus-result-actions:has(.nexus-trace[open]) .nexus-export-buttons {
    justify-content: flex-start;
}

/* ---------- Costruttore di filtri per i dataset derivati ---------- */

.nexus-filter-builder {
    background: var(--nexus-surface);
    border: 0.5px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    padding: 12px;
}

.nexus-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.nexus-filter-column { width: 170px; flex-shrink: 0; }
.nexus-filter-operator { width: 165px; flex-shrink: 0; }
.nexus-filter-period { width: 170px; }

.nexus-filter-value {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 36px;
}

.nexus-filter-input { flex: 1; min-width: 120px; }

.nexus-filter-hint {
    font-size: .78rem;
    color: var(--nexus-text-muted);
    font-style: italic;
}

/* Avverte che il periodo si sposta da solo: senza, l'utente crederebbe di aver fissato un intervallo. */
.nexus-filter-dynamic {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.nexus-filter-remove {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--nexus-border);
    border-radius: 7px;
    background: var(--nexus-surface);
    color: var(--nexus-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nexus-filter-remove:hover { border-color: #ef4444; color: #ef4444; }
.nexus-filter-remove .material-symbols-outlined { font-size: 1rem; }

/* Il connettore "E" rende esplicito che le condizioni si sommano, senza mostrare sintassi booleana. */
.nexus-filter-join {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 8px 4px;
}

.nexus-filter-join-badge {
    background: var(--nexus-bg);
    border: 1px solid var(--nexus-border);
    font-size: .68rem;
    font-weight: 600;
    color: var(--nexus-text-muted);
    padding: 1px 9px;
    border-radius: 6px;
}

.nexus-filter-join-line { flex: 1; height: 1px; background: var(--nexus-border); }

.nexus-filter-add {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--nexus-border);
}

.nexus-filter-add button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--nexus-border);
    border-radius: 7px;
    background: var(--nexus-surface);
    color: var(--nexus-text);
    font-family: inherit;
    font-size: .8rem;
    padding: 5px 12px;
    cursor: pointer;
}

.nexus-filter-add button:hover { border-color: var(--nexus-primary); color: var(--nexus-primary); }
.nexus-filter-add .material-symbols-outlined { font-size: 1rem; }

/* --- Elenco valori a spunte --- */

.nexus-filter-values {
    flex: 1;
    min-width: 240px;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    overflow: hidden;
}

.nexus-filter-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--nexus-border);
    padding: 7px 10px;
    font-family: inherit;
    font-size: .82rem;
}

.nexus-filter-search:focus { outline: none; }

.nexus-filter-value-list { max-height: 190px; overflow-y: auto; }

.nexus-filter-value-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    font-size: .83rem;
    cursor: pointer;
}

.nexus-filter-value-item:hover { background: var(--nexus-bg); }
.nexus-filter-value-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Il conteggio dice quante righe si stanno tenendo: senza, la scelta e' alla cieca. */
.nexus-filter-value-count {
    font-size: .74rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Anteprima delle righe risultanti --- */

.nexus-filter-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--nexus-radius);
    padding: 8px 14px;
}

.nexus-filter-preview .material-symbols-outlined { font-size: 1.1rem; color: #047857; }
.nexus-filter-preview-main { font-size: .88rem; font-weight: 600; color: #065f46; }
.nexus-filter-preview-sub { font-size: .76rem; color: #047857; }

/* --- Contrassegno del dataset derivato nell'elenco --- */

/* Piu' marcata dello stato: il numero di viste e' un'informazione che si CERCA scorrendo l'elenco
   ("da quali dataset pendono delle viste?"), mentre lo stato si controlla solo quando qualcosa non
   torna. Fondo pieno e bordo dello stesso tono la fanno emergere senza gridare. */
.nexus-badge-derived {
    background: #dbeafe;
    color: #0f4c81;
    border: 1px solid #93c0e8;
    font-weight: 700;
}

/* ---------- Scelta delle colonne di una vista derivata ---------- */

.nexus-column-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 10px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    padding: 8px;
}

.nexus-column-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: .83rem;
    cursor: pointer;
}

.nexus-column-pick:hover { background: var(--nexus-bg); }
.nexus-column-pick-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nexus-column-pick-type {
    font-size: .7rem;
    color: var(--nexus-text-muted);
    text-transform: lowercase;
}

/* Report disponibile ma non piu' allineato ai dati: dichiararlo e' l'unica alternativa onesta a nasconderlo. */
.nexus-insight-stale {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    padding: 3px 10px;
    font-size: .74rem;
    font-weight: 600;
}

.nexus-insight-stale .material-symbols-outlined { font-size: .9rem; }

/* ------------------------------------------------------------------------------------------------
   Grafico ad andamento

   La spezzata da sola dice la forma ma non i numeri. Gli indicatori (scala a destra, valori sui punti
   notevoli, riepilogo sotto) esistono per rispondere a "di quanto?" senza costringere a passare sopra
   ogni punto — e restano leggibili anche stampati o in uno screenshot, dove il passaggio del mouse
   non esiste.
   ------------------------------------------------------------------------------------------------ */
/* I numeri esatti sotto un grafico di confronto: chiusi di partenza, perche' il grafico e' la risposta e
   la tabella e' la verifica. */
.nexus-chart-dati {
    margin-top: 10px;
    border-top: 1px solid var(--nexus-border);
    padding-top: 8px;
}

.nexus-chart-dati > summary {
    cursor: pointer;
    font-size: .76rem;
    color: var(--nexus-text-muted);
    list-style: none;
    user-select: none;
}

.nexus-chart-dati > summary::-webkit-details-marker { display: none; }

.nexus-chart-dati > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform .15s ease;
}

.nexus-chart-dati[open] > summary::before { content: "▾ "; }

.nexus-chart-dati > summary:hover { color: var(--nexus-text); }

/* La tabella dentro il riquadro non deve mai allargare la pagina. */
.nexus-chart-dati > .nexus-chart,
.nexus-chart-dati > div { overflow-x: auto; margin-top: 8px; }

.nexus-linechart {
    /* Un andamento si legge nella sua estensione: comprimerlo in mezza pagina appiattisce le differenze
       fra un periodo e l'altro proprio dove servirebbe distinguerle. Occupa quindi tutta la larghezza
       disponibile, con un'altezza minima perche' resti leggibile anche su schermi stretti. */
    width: 100%;
    min-height: 260px;
    height: auto;
    display: block;
    overflow: visible;
}

.nexus-linechart-grid {
    stroke: var(--nexus-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 2 4;
}

.nexus-linechart-line {
    fill: none;
    stroke: var(--nexus-primary);
    stroke-width: 2.25;

    /* Lo spessore resta in pixel di SCHERMO qualunque sia la larghezza del riquadro: senza, una pagina
       larga ingrandisce il sistema di coordinate e con esso la linea, che diventa un nastro. */
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* La linea si disegna da sinistra a destra al primo render: e' il verso in cui si legge il tempo,
       quindi l'animazione ripete il gesto invece di distrarre da esso. */
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: nexus-linechart-draw 900ms cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes nexus-linechart-draw {
    to { stroke-dashoffset: 0; }
}

.nexus-linechart-point {
    fill: var(--nexus-surface);
    stroke: var(--nexus-primary);
    stroke-width: 1.75;
    transition: r 120ms ease-out;
}

.nexus-linechart-point--key {
    fill: var(--nexus-primary);
}

.nexus-linechart-point:hover {
    r: 6;
    cursor: pointer;
}

.nexus-linechart-scale,
.nexus-linechart-label {
    font-size: 10px;
    fill: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-linechart-value {
    font-size: 10.5px;
    font-weight: 650;
    fill: var(--nexus-text);
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    /* Il valore puo' finire sopra l'area colorata: un contorno del colore di sfondo lo stacca senza
       aggiungere un riquadro che affollerebbe il grafico. */
    stroke: var(--nexus-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.nexus-linechart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--nexus-border);
    width: 100%;
}

.nexus-linechart-legend-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: .78rem;
}

.nexus-linechart-legend-label {
    color: var(--nexus-text-muted);
}

.nexus-linechart-legend-value {
    color: var(--nexus-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nexus-linechart-delta {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 999px;
}

.nexus-linechart-delta--su {
    color: #047857;
    background: #ecfdf5;
}

.nexus-linechart-delta--giu {
    color: #b91c1c;
    background: #fef2f2;
}

@media (prefers-reduced-motion: reduce) {
    .nexus-linechart-line {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Nota sotto un campo di modulo: spiega a cosa serve il campo senza allungare l'etichetta. */
.nexus-field-hint {
    margin-top: 4px;
    font-size: .76rem;
    color: var(--nexus-text-muted);
    line-height: 1.4;
}

/* ------------------------------------------------------------------------------------------------
   Diagramma di derivazione

   Le connessioni sono curve di Bezier disegnate PRIMA dei riquadri nel markup, cosi' passano sotto
   e non attraversano il testo. Le curve si disegnano progressivamente al primo render, una dopo
   l'altra: il ritardo scalato fa leggere la derivazione come una discendenza invece che come un
   grafo comparso tutto insieme.
   ------------------------------------------------------------------------------------------------ */
.nexus-lineage {
    margin-top: 18px;
    padding: 16px 18px 14px;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: linear-gradient(180deg, var(--nexus-surface) 0%, #fbfcfe 100%);
}

.nexus-lineage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--nexus-text);
    margin-bottom: 10px;
}

.nexus-lineage-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--nexus-primary);
}

.nexus-lineage-count {
    margin-left: auto;
    font-weight: 500;
    font-size: .76rem;
    color: var(--nexus-text-muted);
    background: var(--nexus-bg);
    border-radius: 999px;
    padding: 2px 10px;
}

.nexus-lineage-svg {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    overflow: visible;
}

.nexus-lineage-link {
    fill: none;
    stroke: var(--nexus-primary);
    stroke-width: 1.75;
    stroke-opacity: .45;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: nexus-lineage-draw 700ms cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes nexus-lineage-draw {
    to { stroke-dashoffset: 0; }
}

.nexus-lineage-node {
    stroke-width: 1.25;
    filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .06));
}

.nexus-lineage-node--origine {
    fill: var(--nexus-primary-soft);
    stroke: var(--nexus-primary);
}

.nexus-lineage-node--derivata {
    fill: var(--nexus-dataset-card-bg);
    stroke: var(--nexus-dataset-card-border);
}

.nexus-lineage-node-title {
    font-size: 13.5px;
    font-weight: 600;
    fill: var(--nexus-text);
}

.nexus-lineage-node-sub {
    font-size: 11px;
    fill: var(--nexus-text-muted);
}

.nexus-lineage-node-group {
    cursor: pointer;
    opacity: 0;
    animation: nexus-lineage-appear 360ms ease-out forwards;
    transition: transform 140ms ease-out;
    transform-box: fill-box;
}

@keyframes nexus-lineage-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Il nodo che si sta guardando: riempimento pieno e bordo spesso, non una
   sfumatura. Il disegno mostra la parentela, ma senza un segno forte non dice
   DOVE ci si trova dentro di essa — e con quattro o cinque viste tutte simili
   l'unico modo di capirlo era rileggere il titolo della pagina. */
.nexus-lineage-node--aperto {
    fill: var(--nexus-primary);
    stroke: var(--nexus-primary);
    stroke-width: 2.5;
}

/* Sul riempimento pieno il testo scuro sparisce. */
.nexus-lineage-node-group:has(.nexus-lineage-node--aperto) .nexus-lineage-node-title,
.nexus-lineage-node-group:has(.nexus-lineage-node--aperto) .nexus-lineage-node-sub {
    fill: #ffffff;
}

.nexus-lineage-node-group:has(.nexus-lineage-node--aperto) .nexus-lineage-node-sub {
    opacity: .85;
}

/* Il nodo aperto non reagisce al passaggio del mouse: e' gia' dove si e', e
   un cambio di aspetto suggerirebbe che ci sia qualcosa da aprire. */
.nexus-lineage-node-group:hover .nexus-lineage-node--derivata:not(.nexus-lineage-node--aperto),
.nexus-lineage-node-group:focus-visible .nexus-lineage-node--derivata:not(.nexus-lineage-node--aperto) {
    fill: #ffffff;
    stroke: var(--nexus-primary);
    stroke-width: 2;
}

.nexus-lineage-node-group:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 3px;
    border-radius: 10px;
}

.nexus-lineage-note {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--nexus-text-muted);
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .nexus-lineage-link {
        animation: none;
        stroke-dashoffset: 0;
    }

    .nexus-lineage-node-group {
        animation: none;
        opacity: 1;
    }
}

/* ================================================================================================
   Rifinitura visiva

   Nessuna di queste regole cambia cosa c'e' sulla pagina: cambiano il modo in cui compare, come
   risponde al mouse e alla tastiera, e quanto peso ha rispetto a cio' che le sta intorno.
   ================================================================================================ */

/* --- Titolo di pagina ---------------------------------------------------------------------------
   Un titolo e' un titolo per posizione e dimensione, ma senza un segno che lo stacchi dal contenuto
   la pagina resta una colonna uniforme di testo. Il filetto verticale a sinistra fa quel lavoro con
   un elemento che non aggiunge nulla da leggere. */
.nexus-page-title {
    position: relative;
    padding-left: 14px;
    line-height: 1.25;
}

.nexus-page-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--nexus-primary) 0%, #8b84f0 100%);
}

.nexus-page-subtitle {
    padding-left: 14px;
    line-height: 1.55;
}

/* Il limite di 78 caratteri vale per i sottotitoli che si LEGGONO come testo — dove una riga troppo
   lunga stanca l'occhio. Nell'intestazione di un dataset il sottotitolo e' invece la sua descrizione,
   che si scorre: costringerla a meta' schermo lasciava mezza pagina vuota accanto. */
.nexus-page-subtitle:not(.nexus-page-subtitle--in-testata):not(.nexus-governo-head *) {
    max-width: 78ch;
}

/* --- Schede -------------------------------------------------------------------------------------
   L'ombra passa da piatta a stratificata: due livelli, uno stretto e scuro per il distacco dal
   fondo e uno ampio e tenue per la profondita'. Una sola ombra deve scegliere fra le due cose e
   finisce per non farne bene nessuna. */
.nexus-card {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .05),
        0 6px 16px -4px rgba(16, 24, 40, .07);
    transition: box-shadow .18s cubic-bezier(.22, .61, .36, 1),
                transform .18s cubic-bezier(.22, .61, .36, 1),
                border-color .18s ease;
}

.nexus-card-clickable:hover {
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .06),
        0 14px 32px -8px rgba(79, 70, 229, .22);
    border-color: var(--nexus-primary);
    transform: translateY(-2px);
}

.nexus-card-clickable:active {
    transform: translateY(0);
    transition-duration: 60ms;
}

/* La scheda cliccabile deve essere raggiungibile e visibile anche da tastiera: senza, esiste solo
   per chi usa il mouse. */
.nexus-card-clickable:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 3px;
}

/* --- Comparsa progressiva -----------------------------------------------------------------------
   Le schede entrano una dopo l'altra invece che tutte insieme: il ritardo scalato guida lo sguardo
   nell'ordine in cui vanno lette. Oltre la sesta si smette di scaglionare — un'attesa che cresce
   con la lunghezza dell'elenco smette di essere un accompagnamento e diventa un ritardo. */
.nexus-card-grid > * {
    animation: nexus-card-enter 320ms cubic-bezier(.22, .61, .36, 1) backwards;
}

.nexus-card-grid > *:nth-child(1) { animation-delay: 0ms; }
.nexus-card-grid > *:nth-child(2) { animation-delay: 40ms; }
.nexus-card-grid > *:nth-child(3) { animation-delay: 80ms; }
.nexus-card-grid > *:nth-child(4) { animation-delay: 120ms; }
.nexus-card-grid > *:nth-child(5) { animation-delay: 160ms; }
.nexus-card-grid > *:nth-child(n+6) { animation-delay: 200ms; }

@keyframes nexus-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Icone accanto al testo ---------------------------------------------------------------------
   Un'icona alla stessa dimensione del testo che accompagna compete con esso; leggermente piu'
   grande e in colore attenuato guida senza rubare la lettura. */
.nexus-page-title .material-symbols-outlined,
.nexus-card h3 .material-symbols-outlined {
    color: var(--nexus-primary);
    margin-right: 6px;
}

/* --- Numeri -------------------------------------------------------------------------------------
   Le cifre tabulari hanno tutte la stessa larghezza: incolonnate restano allineate, e un valore che
   cambia non fa ballare l'elemento accanto. */
.nexus-badge,
.nexus-value-card-value,
.nexus-kpi-value,
td, th {
    font-variant-numeric: tabular-nums;
}

/* --- Stato di attenzione uniforme ---------------------------------------------------------------
   Un solo modo di segnalare "sei qui" su tutto cio' che si puo' raggiungere da tastiera. */
.nexus-user-trigger:focus-visible,
.nexus-user-dropdown-item:focus-visible,
.nexus-column-pick:focus-within {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .nexus-card-grid > * {
        animation: none;
    }

    .nexus-card,
    .nexus-card-clickable:hover {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------------------------------------
   Avvisi durante l'importazione

   Un avviso che dice "questi dati non entreranno nel dataset" non puo' avere lo stesso peso visivo di
   un suggerimento: chi lo salta resta convinto di aver caricato qualcosa che non c'e'.
   ------------------------------------------------------------------------------------------------ */
.nexus-warning-card {
    background: #fffaeb;
    border-color: #fec84b;
    margin-bottom: 16px;
}

.nexus-decision-card {
    background: #fffaeb;
    border-color: #fec84b;
    margin-top: 16px;
}

.nexus-warning-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #b54708;
    font-size: .95rem;
}

.nexus-warning-card-title .material-symbols-outlined {
    font-size: 20px;
}

/* ================================================================================================
   Griglia dati

   E' una tabella da leggere, non da sfogliare: si privilegia la quantita' di righe visibili insieme.
   Carattere piccolo, righe compatte, cifre incolonnate, intestazione che resta ferma durante lo
   scorrimento — senza quest'ultima, dopo venti righe non si sa piu' quale colonna si sta guardando.
   ================================================================================================ */
.nexus-datagrid {
    width: 100%;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.nexus-datagrid-toolbar,
.nexus-datagrid-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: .78rem;
    color: var(--nexus-text-muted);
    background: linear-gradient(180deg, #fbfcfe 0%, var(--nexus-surface) 100%);
}

/* Le tre zone della barra inferiore. Le colonne laterali hanno la stessa larghezza (1fr) perche' il
   centro resti centrato rispetto alla TABELLA e non rispetto a cio' che gli sta intorno: con un flex e
   due spaziatori il totale scivolerebbe ogni volta che il numero di pagina cambia cifra. */
.nexus-datagrid-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.nexus-datagrid-pager .nexus-datagrid-range { justify-self: start; }
.nexus-datagrid-pager .nexus-datagrid-count { justify-self: center; }
.nexus-datagrid-pager .nexus-datagrid-buttons { justify-self: end; }

/* Sotto i 760px le tre zone non ci stanno affiancate: si incolonnano, e il totale resta al centro. */
@media (max-width: 760px) {
    .nexus-datagrid-pager {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 8px;
    }

    .nexus-datagrid-pager .nexus-datagrid-range,
    .nexus-datagrid-pager .nexus-datagrid-buttons { justify-self: center; }
}

.nexus-datagrid-toolbar { border-bottom: 1px solid var(--nexus-border); }
.nexus-datagrid-pager   { border-top: 1px solid var(--nexus-border); }

.nexus-datagrid-spacer { flex: 1 1 auto; }

.nexus-datagrid-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--nexus-text);
    font-variant-numeric: tabular-nums;
}

.nexus-datagrid-count .material-symbols-outlined { font-size: 18px; color: var(--nexus-primary); }

.nexus-datagrid-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nexus-datagrid-pagesize select,
.nexus-datagrid-pagebox input {
    font: inherit;
    color: var(--nexus-text);
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: 6px;
    padding: 2px 6px;
}

.nexus-datagrid-pagebox input {
    width: 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.nexus-datagrid-pagesize select:focus-visible,
.nexus-datagrid-pagebox input:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 1px;
}

/* Lo scorrimento avviene QUI e non sulla pagina: e' cio' che permette all'intestazione di restare
   ferma, perche' `position: sticky` si ancora al contenitore che scorre. */
.nexus-datagrid-scroll {
    overflow: auto;
    max-height: 68vh;
}

.nexus-datagrid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
    line-height: 1.35;
}

.nexus-datagrid-table th,
.nexus-datagrid-table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--nexus-border);
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-datagrid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-weight: 650;
    color: var(--nexus-text);
    background: #f7f8fc;
    border-bottom: 1px solid var(--nexus-border);
    /* Sotto l'intestazione ferma scorrono le righe: una riga netta e una micro-ombra la separano dal
       contenuto, altrimenti sembra parte dei dati. */
    box-shadow: 0 1px 0 var(--nexus-border), 0 4px 8px -6px rgba(16, 24, 40, .3);
}

.nexus-datagrid-type {
    display: block;
    font-size: .64rem;
    font-weight: 500;
    color: var(--nexus-text-muted);
    letter-spacing: .02em;
}

.nexus-datagrid-table tbody tr:nth-child(even) { background: #fcfcfe; }
.nexus-datagrid-table tbody tr:hover           { background: var(--nexus-primary-soft); }

.nexus-datagrid-table td { font-variant-numeric: tabular-nums; }

/* Il numero di riga e' un riferimento, non un dato: resta a sinistra e non compete con il contenuto. */
.nexus-datagrid-rownum {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 1%;
    text-align: right;
    color: var(--nexus-text-muted);
    background: #f7f8fc;
    border-right: 1px solid var(--nexus-border);
}

.nexus-datagrid-table thead .nexus-datagrid-rownum { z-index: 3; }

.nexus-datagrid-table .nexus-col-numeric { text-align: right; }

.nexus-datagrid-range { font-variant-numeric: tabular-nums; }

.nexus-datagrid-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nexus-datagrid-pagebox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px;
    font-variant-numeric: tabular-nums;
}

.nexus-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--nexus-border);
    border-radius: 6px;
    background: var(--nexus-surface);
    color: var(--nexus-text);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.nexus-pager-btn .material-symbols-outlined { font-size: 18px; }

.nexus-pager-btn:hover:not(:disabled) {
    background: var(--nexus-primary-soft);
    border-color: var(--nexus-primary);
}

.nexus-pager-btn:disabled {
    opacity: .4;
    cursor: default;
}

.nexus-pager-btn:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------------------------------------
   Elenco delle importazioni

   Ogni riga rappresenta un insieme di dati entrato nel dataset in un momento preciso. L'icona dice
   com'e' andata prima ancora di leggere, il numero di righe dice quanto pesa quell'importazione.
   ------------------------------------------------------------------------------------------------ */
.nexus-batch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nexus-batch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.nexus-batch-icon .material-symbols-outlined { font-size: 19px; }

.nexus-batch-icon--ok      { background: #ecfdf3; color: #067647; }
.nexus-batch-icon--warn    { background: #fffaeb; color: #b54708; }
.nexus-batch-icon--ko      { background: #fef3f2; color: #b42318; }
.nexus-batch-icon--neutral { background: var(--nexus-bg); color: var(--nexus-text-muted); }

.nexus-batch-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.nexus-batch-rows {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--nexus-text);
}

.nexus-batch-when {
    font-size: .76rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-batch-ago { opacity: .8; }

.nexus-batch-discarded {
    font-weight: 650;
    color: #b54708;
    font-variant-numeric: tabular-nums;
}

/* Dataset creato e mai riempito: dichiarato apertamente, con le due sole azioni che hanno senso —
   finirlo o toglierlo di mezzo. Senza, resta indistinguibile dagli altri se non leggendo "0 righe". */
.nexus-dataset-incomplete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #fffaeb;
    border: 1px solid #fec84b;
    font-size: .78rem;
    flex-wrap: wrap;
}

.nexus-dataset-incomplete .material-symbols-outlined {
    font-size: 20px;
    color: #b54708;
}

.nexus-dataset-incomplete-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    flex: 1 1 160px;
    min-width: 0;
}

.nexus-dataset-incomplete-text strong { color: #b54708; }
.nexus-dataset-incomplete-text span   { color: var(--nexus-text-muted); }

/* ------------------------------------------------------------------------------------------------
   Passi dell'importazione

   I quattro momenti del flusso erano gia' tutti li', ma impliciti: la pagina cambiava aspetto e
   toccava all'utente dedurre a che punto fosse. In un'operazione che scrive per sempre nel dataset,
   sapere dove ci si trova e quanto manca non e' un abbellimento.
   ------------------------------------------------------------------------------------------------ */
.nexus-wizard {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-wrap: wrap;
}

.nexus-wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
    transition: border-color .18s ease, background .18s ease;
}

.nexus-wizard-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    background: var(--nexus-bg);
    color: var(--nexus-text-muted);
    border: 1px solid var(--nexus-border);
}

.nexus-wizard-marker .material-symbols-outlined { font-size: 16px; }

.nexus-wizard-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.nexus-wizard-text strong { font-size: .84rem; color: var(--nexus-text); }
.nexus-wizard-text span   { font-size: .72rem; color: var(--nexus-text-muted); }

.nexus-wizard-step--fatto {
    border-color: #abefc6;
    background: #f6fef9;
}

.nexus-wizard-step--fatto .nexus-wizard-marker {
    background: #ecfdf3;
    color: #067647;
    border-color: #abefc6;
}

.nexus-wizard-step--corrente {
    border-color: var(--nexus-primary);
    background: var(--nexus-primary-soft);
}

.nexus-wizard-step--corrente .nexus-wizard-marker {
    background: var(--nexus-primary);
    color: #fff;
    border-color: var(--nexus-primary);
}

.nexus-wizard-step--futuro { opacity: .62; }

/* ------------------------------------------------------------------------------------------------
   Semaforo di qualita' di una colonna

   Il colore da solo escluderebbe chi non lo distingue: accanto al pallino c'e' sempre la parola, e il
   motivo per esteso compare passandoci sopra. Un indicatore che non si puo' interrogare costringe a
   indovinare cosa non va.
   ------------------------------------------------------------------------------------------------ */
.nexus-rag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: help;
    white-space: nowrap;
}

.nexus-rag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

.nexus-rag--buona {
    color: #067647;
    background: #ecfdf3;
    border-color: #abefc6;
}

.nexus-rag--controllare {
    color: #b54708;
    background: #fffaeb;
    border-color: #fec84b;
}

.nexus-rag--critica {
    color: #b42318;
    background: #fef3f2;
    border-color: #fda29b;
}

.nexus-rag--ignota {
    color: var(--nexus-text-muted);
    background: var(--nexus-bg);
    border-color: var(--nexus-border);
}

/* Il pallino da solo, accanto al nome di una colonna nell'intestazione della griglia: la parola non ci
   sta, ma il motivo resta leggibile passando sopra l'intestazione. */
.nexus-rag-dot--inline {
    display: inline-block;
    margin-right: 5px;
    vertical-align: baseline;
}

.nexus-rag-dot--inline.nexus-rag--buona       { background: #17b26a; }
.nexus-rag-dot--inline.nexus-rag--controllare { background: #f79009; }
.nexus-rag-dot--inline.nexus-rag--critica     { background: #f04438; }
.nexus-rag-dot--inline.nexus-rag--ignota      { background: var(--nexus-border); }

/* ------------------------------------------------------------------------------------------------
   Testata di pagina con icona di tipo

   Due colonne: l'icona nella prima, titolo e descrizione nella seconda. L'allineamento e' esatto per
   costruzione — calcolarlo a mano sulla larghezza del glifo dipende dal carattere e lasciava la
   descrizione fuori posto. L'icona sostituisce anche il filetto verticale del titolo: due marcatori
   sullo stesso lato si contendono lo stesso ruolo.
   ------------------------------------------------------------------------------------------------ */
.nexus-page-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin-bottom: 24px;
}

.nexus-title-icon {
    /* Grigio scuro, non colorato: qui l'icona classifica, non richiama l'attenzione. */
    color: #475467 !important;
    font-size: 30px;
    grid-row: 1;
    grid-column: 1;
}

.nexus-page-title--in-testata {
    grid-row: 1;
    grid-column: 2;
    padding-left: 0;
    margin: 0;
}

.nexus-page-title--in-testata::before { content: none; }

.nexus-page-subtitle--in-testata {
    grid-row: 2;
    grid-column: 2;
    padding-left: 0;
    margin: 4px 0 0;
}

/* ================================================================================================
   Scheda di un dataset nell'elenco

   La scheda si legge dall'alto: icona e nome, descrizione, numeri. Stato e conteggio delle viste
   scendono in fondo a destra — sono etichette di classificazione, e in alto competevano con il nome,
   che e' cio' che si cerca scorrendo l'elenco.
   ================================================================================================ */
.nexus-card-dataset {
    display: flex;
    flex-direction: column;
}

.nexus-dataset-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.nexus-dataset-card-icon {
    font-size: 22px;
    color: #475467;
    flex: 0 0 auto;
}

.nexus-dataset-card-name {
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-dataset-card-desc {
    margin: 6px 0 8px;
    font-size: .84rem;
    color: var(--nexus-text-muted);
    line-height: 1.45;
}

/* Misura del dataset in fondo a sinistra: due righe piccole che stanno sotto la
   descrizione invece di spezzarla a meta'. */
.nexus-dataset-card-misura {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    font-size: .78rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    min-width: 0;
}

.nexus-dataset-card-quando {
    font-size: .74rem;
    opacity: .85;
}

/* Spinto in fondo dal margine automatico: le schede della griglia hanno altezze diverse e senza questo
   le etichette galleggerebbero a mezz'aria invece di allinearsi al bordo inferiore. */
.nexus-dataset-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}

.nexus-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.nexus-filter-chips-label {
    font-size: .74rem;
    color: var(--nexus-text-muted);
    margin-right: 2px;
}

.nexus-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 9px;
    border: 1px solid var(--nexus-primary);
    border-radius: 999px;
    background: var(--nexus-primary-soft);
    color: var(--nexus-primary);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    max-width: 220px;
}

.nexus-filter-chip .material-symbols-outlined {
    font-size: 14px;
    opacity: .75;
}

.nexus-filter-chip:hover {
    background: #fff;
}

.nexus-filter-chip:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------------------------------------
   Controlli del costruttore di filtri: una sola forma per tutti

   I <select> e gli <input> nativi non ereditano il carattere della pagina — usano quello di sistema —
   e hanno altezze intrinseche diverse fra loro. Il risultato era una riga di controlli scritti in un
   font diverso dal resto e allineati male tra loro. Qui prendono tutti la stessa forma, e la riga li
   allinea al centro invece che in alto.
   ------------------------------------------------------------------------------------------------ */
.nexus-filter-row {
    align-items: center;
}

.nexus-filter-column,
.nexus-filter-operator,
.nexus-filter-period,
.nexus-filter-input {
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.2;
    height: 34px;
    padding: 0 9px;
    color: var(--nexus-text);
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .14s ease;
}

/* Le caselle di data e numero riservano spazio al proprio selettore interno: senza questo, il testo
   finisce sotto l'iconcina del calendario o sotto le frecce. */
.nexus-filter-input[type="date"],
.nexus-filter-input[type="number"] {
    padding-right: 4px;
}

.nexus-filter-column:hover,
.nexus-filter-operator:hover,
.nexus-filter-period:hover,
.nexus-filter-input:hover {
    border-color: #c9cfdd;
}

.nexus-filter-column:focus,
.nexus-filter-operator:focus,
.nexus-filter-period:focus,
.nexus-filter-input:focus {
    outline: 2px solid var(--nexus-primary);
    outline-offset: -1px;
    border-color: var(--nexus-primary);
}

/* La zona dei valori sta sulla stessa linea di base dei due menu a tendina. */
.nexus-filter-value {
    align-items: center;
    min-height: 34px;
}

.nexus-filter-hint {
    font-style: normal;
    font-weight: 600;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

/* Riquadro scorrevole della conversazione: era definito a mano nello stile in linea, ma ora gli serve
   un identificativo e una classe perche' il codice possa portarlo in fondo a ogni nuovo messaggio. */
.ai-chat-scroll {
    /* Riempie il riquadro invece di fermarsi a un'altezza fissa. I 560 pixel di prima erano gli stessi
       su qualunque schermo: su un monitor alto restava una finestrella con mezza pagina vuota sotto, e
       si scorreva dentro un riquadro piccolo avendo spazio in abbondanza intorno. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-scroll { scroll-behavior: auto; }
}

/* Un turno di conversazione: le sole parole restano entro una riga leggibile, un turno che porta un
   grafico prende tutta la larghezza — la scala di un andamento si apprezza nella sua estensione. */
.ai-chat-turn {
    max-width: 80%;
    min-width: 0;
}

.ai-chat-turn--largo {
    max-width: 100%;
    width: 100%;
}

/* Nome del file importato, con l'icona di un pacco: un'importazione e' un insieme di dati arrivato
   da fuori, e l'icona lo dice prima del nome. */
.nexus-batch-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.nexus-batch-file .material-symbols-outlined {
    font-size: 19px;
    color: #475467;
    flex: 0 0 auto;
}

.nexus-batch-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accodamento o sostituzione: due colori distinti perche' cambiano il significato di tutto il resto —
   le stesse diecimila righe sono un'aggiunta oppure l'intero contenuto del dataset. */
.nexus-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 7px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 650;
    border: 1px solid transparent;
    white-space: nowrap;
}

.nexus-mode-pill .material-symbols-outlined { font-size: 15px; }

.nexus-mode-pill--accoda {
    color: #175cd3;
    background: #eff8ff;
    border-color: #b2ddff;
}

.nexus-mode-pill--sostituisce {
    color: #b54708;
    background: #fffaeb;
    border-color: #fec84b;
}

/* ================================================================================================
   Scelta della sorgente da interrogare

   Un riquadro per dataset di origine, con le sue viste come rami. Un elenco a discesa piatto
   nascondeva la relazione: due voci consecutive sembravano due dataset diversi quando una discendeva
   dall'altra. Le radici non accessibili compaiono comunque, spente e con un lucchetto — chi ha accesso
   a una sola vista deve capire da dove viene, altrimenti quel nome galleggia senza contesto.
   ================================================================================================ */
/* Le voci vivono ora dentro il pannello del selettore: la classe contenitore
   resta per chi la usa altrove, senza margini propri. */
.nexus-sorgenti {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nexus-sorgente {
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
    padding: 6px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.nexus-sorgente--attiva {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 1px var(--nexus-primary), 0 6px 16px -8px rgba(79, 70, 229, .35);
}

.nexus-sorgente-radice,
.nexus-sorgente-vista {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--nexus-text);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}

.nexus-sorgente-radice { font-weight: 650; }

.nexus-sorgente-vista {
    font-size: .82rem;
    padding-left: 4px;
}

.nexus-sorgente-radice:hover,
.nexus-sorgente-vista:hover { background: var(--nexus-bg); }

.nexus-sorgente-radice:focus-visible,
.nexus-sorgente-vista:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: -2px;
}

/* Radice a cui non si ha accesso: resta leggibile ma non si comporta come un comando. */
.nexus-sorgente-radice--negata {
    cursor: default;
    color: var(--nexus-text-muted);
    background: var(--nexus-bg);
}

.nexus-sorgente-radice--negata:hover { background: var(--nexus-bg); }

.nexus-sorgente-radice .material-symbols-outlined,
.nexus-sorgente-vista .material-symbols-outlined {
    font-size: 19px;
    color: #475467;
    flex: 0 0 auto;
}

.nexus-sorgente-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il gomito che collega la vista alla radice: dice "discende da", che e' l'informazione che l'elenco
   piatto perdeva. */
.nexus-sorgente-ramo {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    flex: 0 0 auto;
    border-left: 1.5px solid var(--nexus-border);
    border-bottom: 1.5px solid var(--nexus-border);
    border-bottom-left-radius: 6px;
    align-self: flex-start;
    margin-top: -2px;
}

.nexus-sorgente-spunta {
    margin-left: auto;
    opacity: 0;
    color: var(--nexus-primary) !important;
    transition: opacity .14s ease;
}

.nexus-sorgente-lucchetto { margin-left: auto; font-size: 16px !important; opacity: .5; }

.nexus-sorgente-voce--scelta {
    background: var(--nexus-primary-soft);
    border-color: var(--nexus-primary);
}

.nexus-sorgente-voce--scelta .nexus-sorgente-spunta { opacity: 1; }

/* ============================================================================
   Governo degli accessi: gestione utenti e gestione autorizzazioni.
   Due pagine, un solo vocabolario visivo — la pastiglia del ruolo e l'iniziale
   della persona compaiono identiche in entrambe, cosi' chi passa dall'una
   all'altra riconosce le stesse persone senza rileggerne i nomi.
   ========================================================================= */

.nexus-governo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Il blocco di testo prende TUTTA la larghezza che avanza accanto ai comandi.
   Senza, si dimensionava sul proprio contenuto e andava a capo molto prima del bordo della pagina:
   una descrizione spezzata su tre righe in mezzo a spazio vuoto sembra un difetto di impaginazione,
   ed e' proprio quello che era. */
.nexus-governo-head > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}

.nexus-governo-layout,
.nexus-permessi-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

/* Gli avvisi hanno il modulo di configurazione piu' ricco di tutta l'applicazione — calcolo, periodo,
   date, condizione, destinatari — mentre le righe dell'elenco sono strette e ripetitive. Qui la
   proporzione va rovesciata rispetto alle altre pagine di governo: l'elenco cede spazio al riquadro. */
.nexus-governo-layout--avvisi { grid-template-columns: minmax(0, 1fr) 430px; }

@media (max-width: 1100px) {
    .nexus-governo-layout--avvisi { grid-template-columns: minmax(0, 1fr); }
}

.nexus-permessi-layout { grid-template-columns: 300px minmax(0, 1fr); }

@media (max-width: 980px) {
    .nexus-governo-layout,
    .nexus-permessi-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- elenco delle persone ------------------------------------------------ */

.nexus-utenti-gruppo { margin-bottom: 18px; }

.nexus-utenti-gruppo-titolo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
    padding: 0 4px 8px;
}

.nexus-utenti-conteggio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--nexus-surface-alt, rgba(127, 127, 127, .12));
    font-size: .7rem;
    letter-spacing: 0;
}

.nexus-utente {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nexus-utente:hover {
    border-color: var(--nexus-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.nexus-utente--attivo {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 1px var(--nexus-primary) inset;
}

/* L'iniziale, non un'icona uguale per tutti: in un elenco di persone e' cio' che
   permette di ritrovare qualcuno con lo sguardo invece che leggendo. */
.nexus-utente-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: #7a8899;
}

.nexus-utente-avatar--admin  { background: linear-gradient(135deg, #b4451f, #d9782f); }
.nexus-utente-avatar--owner  { background: linear-gradient(135deg, #2f5fb4, #4c8fd9); }
.nexus-utente-avatar--viewer { background: linear-gradient(135deg, #5a6672, #808d9b); }

.nexus-utente-testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.nexus-utente-nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-utente-dettaglio {
    font-size: .78rem;
    color: var(--nexus-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-ruolo-pill {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
}

.nexus-ruolo-pill--admin  { color: #b4451f; background: rgba(180, 69, 31, .10); border-color: rgba(180, 69, 31, .28); }
.nexus-ruolo-pill--owner  { color: #2f5fb4; background: rgba(47, 95, 180, .10); border-color: rgba(47, 95, 180, .28); }
.nexus-ruolo-pill--viewer { color: #5a6672; background: rgba(90, 102, 114, .10); border-color: rgba(90, 102, 114, .26); }

.nexus-utente-creatore {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .74rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

.nexus-utente-creatore .material-symbols-outlined { font-size: 15px; }

.nexus-utente-azioni {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

/* --- scheda di creazione/modifica ---------------------------------------- */

.nexus-utente-form { position: sticky; top: 16px; }

.nexus-utente-form-titolo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 16px;
}

.nexus-utente-form-campi {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nexus-utente-form-fisso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.nexus-utente-form-errore {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(180, 35, 24, .08);
    color: #b42318;
    font-size: .84rem;
}

.nexus-utente-form-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* --- autorizzazioni ------------------------------------------------------ */

.nexus-permessi-sezione {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
    padding: 0 4px 8px;
}

.nexus-permessi-persona {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.nexus-permessi-persona:hover { border-color: var(--nexus-primary); }

.nexus-permessi-persona--scelta {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 1px var(--nexus-primary) inset;
}

.nexus-permessi-conteggio {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 600;
    color: var(--nexus-text-muted);
    background: var(--nexus-surface-alt, rgba(127, 127, 127, .12));
}

.nexus-permessi-intestazione {
    font-size: .95rem;
    margin-bottom: 12px;
    color: var(--nexus-text-muted);
}

.nexus-permessi-albero { margin-bottom: 12px; padding: 12px 14px; }

.nexus-permessi-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.nexus-permessi-voce:hover { background: var(--nexus-surface-alt, rgba(127, 127, 127, .08)); }

.nexus-permessi-voce--radice { font-weight: 600; }
.nexus-permessi-voce--vista { padding-left: 10px; }

/* Il ramo che collega la vista alla sua origine: senza, le viste sembrano
   dataset autonomi elencati sotto un titolo qualsiasi. */
.nexus-permessi-ramo {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-left: 1px solid var(--nexus-border);
    border-bottom: 1px solid var(--nexus-border);
    border-bottom-left-radius: 6px;
    transform: translateY(-6px);
}

.nexus-permessi-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-permessi-nota {
    font-size: .8rem;
    color: var(--nexus-text-muted);
    max-width: 62ch;
}

.nexus-user-dropdown-sep {
    height: 1px;
    margin: 6px 0;
    background: var(--nexus-border);
}

/* ============================================================================
   Scostamenti e intervalli: un valore accanto al suo termine di paragone.
   Il colore dice il verso (cresce / cala / fermo) ma non giudica: un calo dei
   resi e' una buona notizia, e la scheda non sa di cosa sta parlando.
   ========================================================================= */

.nexus-scostamento {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
    box-shadow: var(--nexus-shadow);
    overflow: hidden;
}

.nexus-scostamento-corrente,
.nexus-scostamento-confronto {
    padding: 14px 20px;
    min-width: 170px;
    flex: 1 1 auto;
}

.nexus-scostamento-confronto {
    border-left: 1px solid var(--nexus-border);
    background: var(--nexus-surface-alt);
}

.nexus-scostamento-etichetta {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

.nexus-scostamento-valore {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.nexus-scostamento-valore-base {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-scostamento-periodo {
    font-size: .78rem;
    color: var(--nexus-text-muted);
    margin-top: 2px;
}

/* Il blocco centrale: e' la lettura che si cerca per prima, quindi sta in mezzo
   ai due valori che mette in relazione invece che in coda. */
.nexus-scostamento-delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-left: 1px solid var(--nexus-border);
    min-width: 130px;
}

.nexus-scostamento-delta .material-symbols-outlined { font-size: 26px; }

.nexus-scostamento-delta--crescita { color: #1a7f5a; background: rgba(26, 127, 90, .07); }
.nexus-scostamento-delta--calo     { color: #b4451f; background: rgba(180, 69, 31, .07); }
.nexus-scostamento-delta--fermo    { color: var(--nexus-text-muted); }

.nexus-scostamento-assoluto {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nexus-scostamento-percentuale {
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nexus-scostamento-percentuale--assente {
    color: var(--nexus-text-muted);
    font-weight: 500;
    cursor: help;
    border-bottom: 1px dotted currentColor;
}

.nexus-scostamento-avviso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: .8rem;
    color: var(--nexus-text-muted);
}

.nexus-scostamento-avviso .material-symbols-outlined { font-size: 17px; }

/* --- intervallo min—max -------------------------------------------------- */

.nexus-intervallo {
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
    box-shadow: var(--nexus-shadow);
    padding: 14px 20px 16px;
}

.nexus-intervallo-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.nexus-intervallo-metrica {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

.nexus-intervallo-ultimo {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nexus-intervallo-quando {
    font-size: .74rem;
    font-weight: 500;
    color: var(--nexus-text-muted);
    margin-left: 4px;
}

.nexus-intervallo-barra {
    position: relative;
    height: 18px;
    margin: 12px 0 6px;
}

.nexus-intervallo-traccia {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nexus-primary-soft), var(--nexus-primary));
}

.nexus-intervallo-indicatore {
    position: absolute;
    top: 0;
    width: 4px;
    height: 18px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--nexus-text);
    box-shadow: 0 0 0 3px var(--nexus-surface);
}

.nexus-intervallo-estremi {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.nexus-intervallo-estremo-destro { text-align: right; }

.nexus-intervallo-etichetta {
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
    margin-right: 4px;
}

/* --- profilo numerico nel catalogo colonne -------------------------------
   L'intervallo in chiaro, le osservazioni come pastiglie. Le pastiglie non
   ripetono i numeri: dicono cosa comportano, ed e' la differenza fra una
   statistica e un'indicazione utile. */

.nexus-profilo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.nexus-profilo-numeri {
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
    border-bottom: 1px dotted var(--nexus-border);
}

.nexus-profilo-tag {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
    border: 1px solid transparent;
}

.nexus-profilo-tag--info {
    color: #2f5fb4;
    background: rgba(47, 95, 180, .09);
    border-color: rgba(47, 95, 180, .24);
}

/* Ambra e non rosso: non c'e' niente di rotto, c'e' qualcosa che puo' rendere
   ingannevole un'analisi. Il rosso qui verrebbe letto come un errore. */
.nexus-profilo-tag--attenzione {
    color: #925208;
    background: rgba(146, 82, 8, .10);
    border-color: rgba(146, 82, 8, .26);
}

.nexus-profilo-assente {
    font-size: .78rem;
    color: var(--nexus-text-muted);
    font-style: italic;
}

/* --- bacheca delle risposte appuntate ------------------------------------
   Una colonna sola: sono risposte da leggere una per una, e affiancarle
   comprimerebbe proprio le scale che si e' voluto tenere sott'occhio. */

.nexus-bacheca {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nexus-appunto { padding: 16px 20px 18px; }

.nexus-appunto-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.nexus-appunto-titolo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* La domanda com'era stata scritta: e' il titolo piu' onesto possibile, e
   ricorda a cosa il numero sta rispondendo. */
.nexus-appunto-domanda {
    font-weight: 600;
    line-height: 1.35;
}

.nexus-appunto-origine {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--nexus-text-muted);
}

.nexus-appunto-origine .material-symbols-outlined { font-size: 16px; }

.nexus-appunto-azioni {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.nexus-appunto-errore {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(146, 82, 8, .09);
    color: #925208;
    font-size: .85rem;
}

.nexus-appunto-errore .material-symbols-outlined { font-size: 19px; }

/* --- sinonimi ambigui, segnalati nel catalogo ---------------------------- */

.nexus-sinonimi-ambigui {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(146, 82, 8, .08);
    border: 1px solid rgba(146, 82, 8, .22);
    color: #925208;
    font-size: .86rem;
}

.nexus-sinonimi-ambigui .material-symbols-outlined { font-size: 20px; }

.nexus-sinonimi-ambigui code {
    background: rgba(146, 82, 8, .12);
    padding: 0 4px;
    border-radius: 4px;
}

/* --- contesto semantico: invito, intervista, provenienza -----------------
   L'invito compare solo quando c'e' qualcosa da fare: un richiamo permanente
   diventa arredamento e smette di essere letto. */

.nexus-contesto-invito {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 18px;
    border-left: 3px solid var(--nexus-primary);
    background: var(--nexus-primary-soft);
}

.nexus-contesto-invito > .material-symbols-outlined {
    font-size: 26px;
    color: var(--nexus-primary);
    flex: 0 0 auto;
}

.nexus-contesto-invito-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.nexus-contesto-invito-testo span {
    font-size: .85rem;
    color: var(--nexus-text-muted);
}

/* --- contesto attuale ---------------------------------------------------- */

.nexus-contesto-attuale { margin-bottom: 18px; }

.nexus-contesto-testa {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.nexus-contesto-titolo { font-weight: 600; }

.nexus-contesto-quando {
    font-size: .78rem;
    color: var(--nexus-text-muted);
}

/* La provenienza si vede senza doverla cercare: un testo generato e uno scritto
   da una persona meritano fiducia diversa, e a mesi di distanza sono
   indistinguibili guardandoli. */
.nexus-provenienza {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.nexus-provenienza--manuale {
    color: #1a7f5a;
    background: rgba(26, 127, 90, .10);
    border-color: rgba(26, 127, 90, .26);
}

.nexus-provenienza--intervista {
    color: #2f5fb4;
    background: rgba(47, 95, 180, .10);
    border-color: rgba(47, 95, 180, .26);
}

.nexus-provenienza--assente {
    color: var(--nexus-text-muted);
    background: var(--nexus-surface-alt);
    border-color: var(--nexus-border);
}

.nexus-contesto-testo {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
    max-width: 72ch;
}

.nexus-contesto-avviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(146, 82, 8, .09);
    color: #925208;
    font-size: .85rem;
}

.nexus-contesto-avviso .material-symbols-outlined { font-size: 19px; }

/* --- intervista ---------------------------------------------------------- */

.nexus-intervista {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.nexus-domanda {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nexus-domanda-testo {
    font-weight: 600;
    line-height: 1.4;
}

/* L'osservazione da cui nasce la domanda: e' cio' che fa venire in mente la
   risposta, molto piu' della domanda stessa. */
.nexus-domanda-evidenza {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-domanda-evidenza .material-symbols-outlined { font-size: 16px; }

/* --- testata della chat: titolo a sinistra, scelta dei dati a destra -------
   La scelta e' un'impostazione della pagina, non un passo da compiere ogni
   volta: elencata per esteso spingeva la conversazione sotto la piega. */

.nexus-chat-testata {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.nexus-chat-testata .nexus-page-title,
.nexus-chat-testata .nexus-page-subtitle { margin-bottom: 0; }

.nexus-chat-testata .nexus-page-subtitle { margin-top: 4px; }

.nexus-selettore {
    position: relative;
    flex: 0 0 auto;
    /* Allineato alla riga del titolo, non al suo bordo superiore. */
    margin-top: 4px;
}

.nexus-selettore-scelta {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 340px;
    padding: 9px 12px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
    color: inherit;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nexus-selettore-scelta:hover {
    border-color: var(--nexus-primary);
    box-shadow: 0 1px 6px rgba(16, 24, 40, .07);
}

.nexus-selettore-scelta > .material-symbols-outlined:first-child {
    font-size: 19px;
    color: var(--nexus-primary);
    flex: 0 0 auto;
}

.nexus-selettore-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.nexus-selettore-freccia {
    font-size: 19px;
    color: var(--nexus-text-muted);
    flex: 0 0 auto;
}

/* Sotto al pannello e sopra al resto: intercetta il click fuori. */
.nexus-selettore-fondale {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.nexus-selettore-pannello {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 300px;
    max-width: 400px;
    max-height: 60vh;
    overflow-y: auto;
    /* Compatto: e' un menu di scelta, non una pagina. Con l'aria di prima tre
       dataset con le loro viste non ci stavano senza scorrere. */
    padding: 4px;
    border: 1px solid var(--nexus-border);
    border-radius: 12px;
    background: var(--nexus-surface);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
}

/* Il pannello e' ancorato a destra e i sei pixel di stacco lo separano dal
   pulsante: il fondale copre quel varco, quindi attraversarlo col mouse non
   chiude piu' nulla prima che il click arrivi. */
.nexus-selettore-pannello::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

/* Le voci riusano lo stile dell'albero: stessa iconografia, stessa struttura. */
.nexus-selettore-pannello .nexus-sorgente {
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Un filo di stacco fra un dataset e il successivo, non fra le sue viste: e'
   quello che tiene insieme il gruppo senza allontanarne le parti. */
.nexus-selettore-pannello .nexus-sorgente + .nexus-sorgente {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--nexus-border);
}

.nexus-selettore-pannello .nexus-sorgente-radice,
.nexus-selettore-pannello .nexus-sorgente-vista {
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 7px;
}

.nexus-selettore-pannello .nexus-sorgente:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .nexus-selettore { width: 100%; }
    .nexus-selettore-scelta { max-width: none; width: 100%; }
    .nexus-selettore-pannello { left: 0; right: 0; min-width: 0; }
}

/* --- completamento al cursore, stile editor di codice ---------------------
   Compatto e appoggiato al punto in cui si sta scrivendo. Un riquadro largo
   quanto la pagina si legge come un modulo da compilare e sposta l'attenzione
   via dalla frase in corso: qui l'elenco deve stare a fianco del pensiero,
   non al posto suo. */

.nexus-input-ancora {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.nexus-input-ancora > textarea { width: 100%; }

.nexus-intellisense {
    position: absolute;
    z-index: 60;
    min-width: 240px;
    max-width: 420px;
    max-height: 232px;
    overflow-y: auto;
    padding: 3px;
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    background: var(--nexus-surface);
    box-shadow: 0 6px 22px rgba(16, 24, 40, .16);
    font-size: .84rem;
}

.nexus-is-voce {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    line-height: 1.35;
    white-space: nowrap;
}

.nexus-is-voce:hover { background: var(--nexus-surface-alt); }

.nexus-is-voce--scelta {
    background: var(--nexus-primary-soft);
    color: var(--nexus-primary);
}

/* Un carattere al posto dell'icona: alla dimensione di questa riga un simbolo
   tipografico resta nitido e non porta con se' il riquadro dell'icona. */
/* Il simbolo del TIPO di colonna. Un colore per famiglia: i numeri si distinguono dalle date senza
   leggere l'icona, che e' quello che serve mentre si scorre la tendina scrivendo altro. */
.nexus-is-simbolo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    opacity: .9;
}

.nexus-is-simbolo .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

.nexus-is-simbolo--numero      { color: #2f5fb4; }
.nexus-is-simbolo--intero      { color: #2f5fb4; }
.nexus-is-simbolo--percentuale { color: #7a4bbd; }
.nexus-is-simbolo--data        { color: #1a7f37; }
.nexus-is-simbolo--nota        { color: #925208; }
.nexus-is-simbolo--testo       { color: #6b7280; }

/* Si restringe se serve: un nome lungo deve accorciarsi con i puntini, non
   sfondare il riquadro e finire sotto il bordo. */
.nexus-is-nome {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* La colonna vera a cui porta un sinonimo: piu' chiara, perche' e' la
   conseguenza della scelta e non la scelta. */
.nexus-is-dettaglio {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .78rem;
    color: var(--nexus-text-muted);
}

.nexus-is-ambiguo {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    color: #925208;
    background: rgba(146, 82, 8, .14);
    cursor: help;
}

/* --- riga di riconoscimento sotto la casella ------------------------------
   Discreta di proposito: conferma cio' che si e' capito senza chiedere
   attenzione. Se prendesse peso diventerebbe un passo da compiere, e la
   scrittura libera tornerebbe a sembrare un modulo. */

.nexus-riconosciuto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: .78rem;
    color: var(--nexus-text-muted);
}

.nexus-riconosciuto-titolo {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .68rem;
    opacity: .75;
}

.nexus-riconosciuto-voce {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nexus-surface-alt);
    border: 1px solid var(--nexus-border);
    white-space: nowrap;
}

/* La freccia e' l'informazione: dice che la parola scritta e la colonna
   interrogata non sono la stessa cosa. */
.nexus-riconosciuto-freccia {
    color: var(--nexus-primary);
    font-weight: 700;
    margin: 0 1px;
}

.nexus-riconosciuto-voce--ambigua {
    color: #925208;
    background: rgba(146, 82, 8, .09);
    border-color: rgba(146, 82, 8, .26);
    cursor: help;
}

.nexus-riconosciuto-voce--ambigua .nexus-riconosciuto-freccia { color: #925208; }

/* La pastiglia del profilo diventa un pulsante per chi puo' modificare: porta
   dritta al significato della colonna, che e' l'unica cosa che i dati non
   possono dire da soli. */
button.nexus-profilo-tag {
    border-width: 1px;
    border-style: solid;
    font-family: inherit;
    line-height: 1.4;
}

button.nexus-profilo-tag:hover {
    filter: brightness(.94);
}

/* Compare solo quando manca il significato: e' una domanda, non un'etichetta,
   e sparisce nel momento in cui riceve risposta. */
.nexus-profilo-chiedi {
    padding: 2px 8px;
    border: 1px dashed var(--nexus-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--nexus-primary);
    font-family: inherit;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.nexus-profilo-chiedi:hover {
    background: var(--nexus-primary-soft);
}

/* --- elenco conversazioni: comandi che sembrano comandi -------------------
   In variante testo su fondo chiaro le icone si leggevano come disattivate, ed
   e' il motivo per cui non venivano premute: qui hanno un bordo, un colore e
   uno stato visibile. */

.nexus-conv-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.nexus-conv-titolo { font-weight: 600; }

.nexus-conv-nuova {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px 3px 6px;
    border: 1px solid var(--nexus-primary);
    border-radius: 999px;
    background: var(--nexus-surface);
    color: var(--nexus-primary);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
}

.nexus-conv-nuova .material-symbols-outlined { font-size: 16px; }

.nexus-conv-nuova:hover { background: var(--nexus-primary-soft); }

/* Gia' in una conversazione nuova: il comando resta premibile ma si smorza,
   perche' non c'e' niente da iniziare. */
.nexus-conv-nuova--corrente {
    border-color: var(--nexus-border);
    color: var(--nexus-text-muted);
}

.nexus-conv-azione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--nexus-text-muted);
    cursor: pointer;
    padding: 0;
}

.nexus-conv-azione .material-symbols-outlined { font-size: 17px; }

.nexus-conv-azione:hover {
    background: var(--nexus-surface-alt);
    color: var(--nexus-text);
}

/* Fissata: pieno e colorato, non una sfumatura. Lo stato deve vedersi senza
   passare col mouse. */
.nexus-conv-azione--fissata {
    background: var(--nexus-primary-soft);
    border-color: var(--nexus-primary);
    color: var(--nexus-primary);
}

.nexus-conv-azione--elimina:hover {
    background: rgba(180, 35, 24, .10);
    color: #b42318;
}

/* --- catalogo colonne: sinonimi e profilo in poco spazio ------------------ */

.nexus-sinonimi {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.nexus-sinonimo {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--nexus-surface-alt);
    border: 1px solid var(--nexus-border);
    font-size: .68rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

/* Numeri sopra, osservazioni sotto: in linea si spingevano a vicenda fuori
   dalla colonna, e la prima cosa a sparire era proprio l'osservazione. */
.nexus-profilo--incolonnato {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.nexus-profilo-tag-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* --- autorizzazioni: schede piu' vicine ----------------------------------- */

.nexus-permessi-albero {
    margin-bottom: 8px;
    padding: 8px 12px;
}

.nexus-permessi-voce {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* --- credito giornaliero di domande --------------------------------------
   Si vede solo quando un limite esiste: dirlo a chi non ne ha lo farebbe
   sentire sorvegliato senza motivo. */

.nexus-credito {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--nexus-surface-alt);
    border: 1px solid var(--nexus-border);
    font-size: .82rem;
    color: var(--nexus-text-muted);
}

.nexus-credito .material-symbols-outlined { font-size: 18px; }

/* Esaurito: ambra, non rosso. Non e' un errore — e' una regola che ha fatto il
   suo lavoro, e domani riparte. */
.nexus-credito--esaurito {
    background: rgba(146, 82, 8, .09);
    border-color: rgba(146, 82, 8, .26);
    color: #925208;
}

/* Etichette di impostazione nell'elenco utenti: piccole, perche' descrivono una
   configurazione e non la persona. */
.nexus-utente-limite {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nexus-surface-alt);
    border: 1px solid var(--nexus-border);
    font-size: .7rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

.nexus-utente-limite .material-symbols-outlined { font-size: 14px; }

/* --- riepilogo del dataset ------------------------------------------------ */

.nexus-riepilogo-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.nexus-riepilogo-titolo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

.nexus-riepilogo-stato {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cinque riquadri affiancati: sotto i 1100px diventano tre, poi due. Non uno solo — incolonnati del
   tutto tornerebbero l'elenco di righe da cui si voleva uscire. */
.nexus-riepilogo-griglia {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) { .nexus-riepilogo-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .nexus-riepilogo-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nexus-riepilogo-voce {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    background: var(--nexus-surface-alt);
    min-width: 0;
}

.nexus-riepilogo-etichetta {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nexus-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-riepilogo-valore {
    font-size: 1.1rem;
    color: var(--nexus-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Le date non competono con i conteggi: sono riferimenti, non grandezze. */
.nexus-riepilogo-valore--data { font-size: .92rem; font-weight: 500; }

.nexus-riepilogo-descrizione { margin: 14px 0 0; }

.nexus-riepilogo-sospensione {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nexus-border);
}

.nexus-riepilogo-sospensione .nexus-field-hint { margin-top: 0; flex: 1 1 220px; }

/* Largo e alto quanto il pulsante del contesto: sospendere un dataset e' una decisione dello stesso peso,
   e un pulsante piccolo la faceva leggere come un comando secondario. */
.nexus-bottone-sospensione { min-width: 148px; }

/* La misura accanto all'etichetta del profilo: piu' leggera del testo, perche' e' la prova e non
   l'affermazione. */
.nexus-profilo-tag-misura {
    font-weight: 400;
    opacity: .78;
}

/* --- gruppi del modulo ---------------------------------------------------
   Il modulo segue l'ordine in cui si pensa un avviso: che cosa guardo, quando mi avvisa, su quali righe,
   a chi arriva. Gli stacchi non sono decorazione: prima i campi erano in fila continua e alcuni finivano
   accanto a scelte che non li riguardavano — il periodo accanto al calcolo, che invece appartiene alla
   scelta delle righe. */
.nexus-gruppo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--nexus-border);
}

.nexus-gruppo:first-of-type { border-top: none; padding-top: 0; }

.nexus-gruppo-titolo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

/* Le righe che verranno lette, in date esatte: "da inizio anno" si capisce solo sapendo dove cade oggi. */
.nexus-periodo-esito {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--nexus-surface-alt);
    border: 1px solid var(--nexus-border);
    font-size: .76rem;
    color: var(--nexus-text-muted);
    line-height: 1.4;
}

.nexus-periodo-esito .material-symbols-outlined { font-size: 17px; }

.nexus-periodo-esito--vuota {
    color: #925208;
    border-color: #e6c98f;
    background: #fdf6e8;
}

/* Il prossimo momento utile, nell'elenco delle regole. */
.nexus-avviso-prossimo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 108px;
    font-size: .72rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

.nexus-avviso-prossimo .material-symbols-outlined { font-size: 15px; }

@media (max-width: 1400px) {
    .nexus-avviso-prossimo { display: none; }
}

/* --- pianificatore del riepilogo -----------------------------------------
   Giorni come cerchietti e orari come gettoni: la settimana si legge come una FORMA — quali sono accesi —
   senza leggere nessuna parola, ed e' il motivo per cui sette cerchi battono sette caselle di spunta. */

.nexus-pianificatore {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface-alt);
}

.nexus-pianificatore-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nexus-pianificatore-etichetta {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

.nexus-pianificatore-scorciatoie { display: flex; gap: 6px; }

.nexus-scorciatoia {
    border: none;
    background: none;
    padding: 0 2px;
    font: inherit;
    font-size: .72rem;
    color: var(--nexus-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nexus-giorni { display: flex; gap: 6px; flex-wrap: wrap; }

.nexus-giorno {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--nexus-border);
    background: var(--nexus-surface);
    color: var(--nexus-text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.nexus-giorno:hover { border-color: var(--nexus-primary); color: var(--nexus-text); }

.nexus-giorno--scelto {
    background: var(--nexus-primary);
    border-color: var(--nexus-primary);
    color: #fff;
}

.nexus-giorno:focus-visible,
.nexus-orario-togli:focus-visible,
.nexus-scorciatoia:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 2px;
}

.nexus-orari {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nexus-orario {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--nexus-primary);
    background: var(--nexus-primary-soft);
    color: var(--nexus-primary);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nexus-orario-togli {
    border: none;
    background: none;
    padding: 0;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-size: .95rem;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

.nexus-orario-togli:hover { opacity: 1; }

.nexus-orario-aggiungi { display: inline-flex; align-items: center; gap: 2px; }

/* La riga che rende la pianificazione verificabile PRIMA di salvarla: dice il momento esatto del prossimo
   invio, non la regola con cui si calcola. E' la differenza fra configurare e sperare. */
.nexus-pianificatore-esito {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--nexus-border);
    font-size: .76rem;
    color: var(--nexus-text-muted);
    line-height: 1.4;
}

.nexus-pianificatore-esito strong { color: var(--nexus-text); }

.nexus-pianificatore-esito .material-symbols-outlined { font-size: 17px; }

.nexus-pianificatore-esito--vuota { color: #925208; }
.nexus-pianificatore-esito--vuota strong { color: #925208; }

/* --- colonne della regola nell'elenco -------------------------------------
   Tre colonne di larghezza fissa e incolonnate fra loro: scorrendo l'elenco si leggono per verticale,
   che e' come si cerca "quali sono spente" o "quali arrivano domani". Con larghezze automatiche ogni riga
   le metteva in un punto diverso, e la lettura verticale non esisteva. */
.nexus-avviso-colonna {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    font-size: .74rem;
    color: var(--nexus-text-muted);
    min-width: 0;
}

.nexus-avviso-colonna--creazione { width: 130px; }
.nexus-avviso-colonna--ruolo     { width: 108px; align-items: flex-start; justify-content: center; }
.nexus-avviso-colonna--notifica  { width: 132px; }
.nexus-avviso-colonna--stato     { width: 92px; align-items: flex-start; }
.nexus-avviso-colonna--recapito  { width: 186px; }

.nexus-avviso-colonna-valore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--nexus-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-avviso-colonna-valore .material-symbols-outlined { font-size: 15px; }

.nexus-avviso-colonna-nota {
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "alla prossima importazione" non ci sta su una riga sola nemmeno con la colonna allargata: qui si manda
   a capo invece di troncare, perche' troncata diventa "alla prossima importaz…" e non dice piu' niente. */
.nexus-avviso-colonna--recapito .nexus-avviso-colonna-nota {
    white-space: normal;
    line-height: 1.3;
}

/* Sotto i 1180px le colonne non ci stanno: sparisce per prima quella di creazione, che si consulta di
   rado e resta comunque nel titolo al passaggio del mouse. */
@media (max-width: 1180px) {
    .nexus-avviso-colonna--creazione { display: none; }
}

@media (max-width: 1000px) {
    .nexus-avviso-colonna--notifica { display: none; }
}

@media (max-width: 900px) {
    .nexus-avviso-colonna--recapito { width: auto; }
}

/* Il nome del dataset nell'intestazione del gruppo. */
.nexus-utenti-gruppo-titolo .material-symbols-outlined { font-size: 16px; }

/* --- attributi della regola nell'elenco ---------------------------------- */

.nexus-avviso-attributi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.nexus-pillola {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Acceso e spento si distinguono per COLORE oltre che per parola: scorrendo venti regole si guarda il
   verde o il grigio, non si legge. */
.nexus-pillola--attiva {
    background: #e7f6ec;
    border-color: #a6dfb8;
    color: #1a7f37;
}

/* In allarme e a riposo NON sono acceso/spento: dicono se la condizione e' vera adesso, cosa
   indipendente dal fatto che la sorveglianza sia accesa. Colori diversi da quelli della pillola di
   stato, altrimenti le due si leggono come una sola. */
.nexus-pillola--allarme {
    background: #fdecea;
    border-color: #f3b0a6;
    color: #b42318;
}

.nexus-pillola--riposo {
    background: transparent;
    border-color: var(--nexus-border);
    color: var(--nexus-text-muted);
    font-weight: 500;
}

.nexus-pillola--sospesa {
    background: var(--nexus-surface-alt);
    border-color: var(--nexus-border);
    color: var(--nexus-text-muted);
}

.nexus-avviso-creazione {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 92px;
    font-size: .7rem;
    color: var(--nexus-text-muted);
}

.nexus-avviso-creazione-data { font-variant-numeric: tabular-nums; }

.nexus-avviso-creazione-chi {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1240px) {
    /* Quando lo spazio manca, la prima cosa che sparisce e' chi l'ha creata: e' l'attributo che si
       consulta di rado, e resta nel titolo del riquadro al passaggio del mouse. */
    .nexus-avviso-creazione { display: none; }
}

/* --- tendine piu' compatte -----------------------------------------------
   Le voci del menu a discesa erano alte quanto un pulsante: con otto calcoli e dieci condizioni,
   l'elenco superava lo schermo e sceglierne una significava scorrere.

   I selettori sono globali per forza: Radzen rende il pannello in fondo alla pagina, fuori dal riquadro
   che lo ha aperto, quindi un selettore discendente non lo raggiungerebbe. Vale per tutte le tendine
   dell'applicazione, il che e' anche coerente. */
.rz-dropdown-panel .rz-dropdown-item,
.rz-multiselect-panel .rz-multiselect-item {
    padding: 4px 10px !important;
    font-size: .82rem;
    line-height: 1.35;
    min-height: 0;
}

.rz-dropdown-panel .rz-dropdown-items,
.rz-multiselect-panel .rz-multiselect-items { padding: 2px 0; }

/* --- campanella degli avvisi ---------------------------------------------
   Accanto al nome utente. Si colora SOLO quando c'e' qualcosa da leggere: una
   campanella sempre accesa smette di dire niente. */

.nexus-campanella {
    position: relative;
    display: flex;
    align-items: center;
}

.nexus-campanella-pulsante {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--nexus-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}

.nexus-campanella-pulsante:hover {
    background: var(--nexus-surface-alt);
    color: var(--nexus-text);
}

/* Con avvisi da leggere: cerchio rosso pieno.
   Il rosso e' riservato a questo in tutta la barra, e la forma tonda la stacca dagli altri comandi, che
   sono squadrati: si riconosce con la coda dell'occhio, senza leggere. Spenta resta un'icona qualunque —
   una campanella sempre accesa non e' un avviso, e' decorazione. */
.nexus-campanella-pulsante--nuove {
    color: #fff;
    background: #b42318;
    border-color: #b42318;
    border-radius: 999px;
}

.nexus-campanella-pulsante--nuove:hover {
    color: #fff;
    background: #92150c;
}

.nexus-campanella-conteggio {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fff;
    color: #b42318;
    font-size: .64rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;

    /* Il numero sta SOPRA al cerchio rosso: invertito, con l'anello del colore della barra che lo
       stacca dal bordo della campanella. Rosso su rosso sarebbe illeggibile. */
    box-shadow: 0 0 0 2px var(--nexus-surface);
}

.nexus-campanella-pannello {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 360px;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--nexus-border);
    border-radius: 12px;
    background: var(--nexus-surface);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .16);
}

/* Ponte sopra lo stacco: attraversarlo col mouse non deve chiudere il pannello
   prima che il click arrivi — la stessa trappola del menu utente. */
.nexus-campanella-pannello::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nexus-campanella-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nexus-border);
    font-weight: 600;
    font-size: .88rem;
}

.nexus-campanella-segna {
    border: 0;
    background: transparent;
    color: var(--nexus-primary);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.nexus-campanella-vuoto {
    padding: 18px 14px;
    color: var(--nexus-text-muted);
    font-size: .85rem;
}

.nexus-campanella-voce {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-campanella-voce:last-child { border-bottom: 0; }

/* Non letta: una barra a sinistra, non un fondo colorato. Il fondo colorato su
   piu' righe consecutive diventa un blocco unico e non distingue piu' niente. */
.nexus-campanella-voce--nuova {
    box-shadow: inset 3px 0 0 var(--nexus-primary);
    background: var(--nexus-primary-soft);
}

.nexus-campanella-messaggio {
    font-size: .85rem;
    line-height: 1.4;
}

.nexus-campanella-quando {
    font-size: .72rem;
    color: var(--nexus-text-muted);
}

/* --- elenco degli avvisi configurati -------------------------------------- */

.nexus-avviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nexus-avviso:hover {
    border-color: var(--nexus-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.nexus-avviso--attivo {
    border-color: var(--nexus-primary);
    box-shadow: 0 0 0 1px var(--nexus-primary) inset;
}

/* Sospeso: smorzato, non nascosto. Continua a esistere e va ritrovato. */
.nexus-avviso--sospeso { opacity: .62; }

.nexus-avviso-stato {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nexus-surface-alt);
    color: var(--nexus-text-muted);
}

/* La condizione e' vera adesso: ambra, non rosso. Non e' un guasto — e' la
   regola che sta facendo il suo lavoro. */
.nexus-avviso-stato--scattato {
    background: rgba(146, 82, 8, .12);
    color: #925208;
}

.nexus-avviso-testo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.nexus-avviso-nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-avviso-condizione {
    font-size: .8rem;
    color: var(--nexus-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-avviso-origine {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-avviso-origine .material-symbols-outlined { font-size: 15px; }

.nexus-avviso-errore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    color: #925208;
    cursor: help;
}

.nexus-avviso-errore .material-symbols-outlined { font-size: 15px; }

/* Due campi che si leggono insieme — calcolo e periodo, condizione e valore — stanno sulla stessa riga:
   separarli in verticale li farebbe sembrare due scelte indipendenti. Sotto i 520px tornano incolonnati,
   perche' due tendine affiancate in quello spazio non si leggono piu'. */
.nexus-avviso-riga,
.nexus-avviso-estremi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .nexus-avviso-riga,
    .nexus-avviso-estremi { grid-template-columns: 1fr; }
}

/* Il suggerimento che segnala un ostacolo, non un dettaglio: stesso posto, peso diverso. */
.nexus-field-hint--attenzione { color: #925208; }

/* --- anteprima mentre si configura ---------------------------------------- */

.nexus-anteprima {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px dashed var(--nexus-border);
    border-radius: 8px;
    background: var(--nexus-surface-alt);
}

.nexus-anteprima-valore {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .8rem;
    color: var(--nexus-text-muted);
}

.nexus-anteprima-valore strong {
    font-size: 1.15rem;
    color: var(--nexus-text);
    font-variant-numeric: tabular-nums;
}

.nexus-anteprima-simulazione {
    font-size: .78rem;
    color: var(--nexus-text-muted);
    line-height: 1.4;
}

/* Molti scatti in un mese: chi legge alza la soglia da solo, prima di salvare.
   E' l'antidoto alla fatica da avvisi, quindi deve farsi notare. */
.nexus-anteprima-simulazione--rumorosa {
    color: #925208;
    font-weight: 600;
}

/* --- configurazione della posta ------------------------------------------- */

.nexus-posta { max-width: 720px; }

.nexus-posta-campi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.nexus-posta-largo { grid-column: 1 / -1; }

.nexus-posta-interruttore {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    font-size: .85rem;
    color: var(--nexus-text-muted);
}

.nexus-posta-esito {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.45;
}

.nexus-posta-esito--ok {
    background: rgba(26, 127, 90, .09);
    color: #1a7f5a;
}

.nexus-posta-esito--errore {
    background: rgba(180, 35, 24, .08);
    color: #b42318;
}

@media (max-width: 720px) {
    .nexus-posta-campi { grid-template-columns: 1fr; }
    .nexus-campanella-pannello { width: 300px; }
}


/* ================================================================================================
   Ricerca globale (Ctrl+K)
   Sopra tutto e al centro in alto: e' un comando, non una pagina, e deve poter comparire e sparire
   senza spostare niente di cio' che sta sotto.
   ================================================================================================ */

.nexus-ricerca-fondo {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(16, 24, 40, .38);
    backdrop-filter: blur(2px);
}

.nexus-ricerca {
    position: fixed;
    z-index: 201;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 32px));
    background: var(--nexus-surface);
    border: 1px solid var(--nexus-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .28);
    overflow: hidden;
}

.nexus-ricerca-testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-ricerca-testa .material-symbols-outlined { color: var(--nexus-text-muted); font-size: 20px; }

.nexus-ricerca-campo {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    font-size: 1rem;
    color: var(--nexus-text);
}

.nexus-ricerca-esc {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid var(--nexus-border);
    border-radius: 5px;
    font-size: .68rem;
    color: var(--nexus-text-muted);
    text-transform: uppercase;
}

.nexus-ricerca-vuoto {
    padding: 22px 16px;
    font-size: .84rem;
    color: var(--nexus-text-muted);
    text-align: center;
}

.nexus-ricerca-elenco { max-height: 52vh; overflow-y: auto; padding: 6px; }

.nexus-ricerca-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.nexus-ricerca-voce:hover,
.nexus-ricerca-voce--scelta { background: var(--nexus-primary-soft); }

.nexus-ricerca-icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--nexus-surface-alt);
}

.nexus-ricerca-icona .material-symbols-outlined { font-size: 17px; }

.nexus-ricerca-icona--dataset .material-symbols-outlined { color: #2f5fb4; }
.nexus-ricerca-icona--vista   .material-symbols-outlined { color: #7a4bbd; }
.nexus-ricerca-icona--colonna .material-symbols-outlined { color: #1a7f37; }
.nexus-ricerca-icona--pagina  .material-symbols-outlined { color: var(--nexus-text-muted); }

.nexus-ricerca-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.nexus-ricerca-titolo {
    font-size: .88rem;
    color: var(--nexus-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-ricerca-sottotitolo {
    font-size: .72rem;
    color: var(--nexus-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-ricerca-genere {
    flex: 0 0 auto;
    font-size: .68rem;
    color: var(--nexus-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ================================================================================================
   Registro attivita'
   ================================================================================================ */

/* --- modifica di nome e descrizione nella testata ------------------------ */

.nexus-testa-modifica {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    background: var(--nexus-surface-alt);
    margin-bottom: 8px;
}

.nexus-testa-modifica-azioni { display: flex; gap: 10px; }

/* La matita accanto al titolo: si vede quando serve e non compete col nome. */
.nexus-testa-matita {
    border: none;
    background: none;
    padding: 0 0 0 8px;
    color: var(--nexus-text-muted);
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
}

.nexus-testa-matita:hover { opacity: 1; color: var(--nexus-primary); }

.nexus-testa-matita:focus-visible {
    outline: 2px solid var(--nexus-primary);
    outline-offset: 2px;
    border-radius: 6px;
    opacity: 1;
}

.nexus-testa-matita .material-symbols-outlined { font-size: 20px; }

.nexus-registro-conservazione {
    display: flex;
    /* Allineata in ALTO e non al centro: se il testo occupa due righe, centrandolo l'icona finisce a
       meta' altezza e la nota si legge storta. */
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: .78rem;
    line-height: 1.5;
}

/* L'icona non si stringe e non si allunga: e' il testo che deve prendere lo spazio. */
.nexus-registro-conservazione .material-symbols-outlined {
    font-size: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.nexus-registro-filtri { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.nexus-registro-scorciatoie { display: flex; gap: 8px; flex-wrap: wrap; }

.nexus-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--nexus-border);
    border-radius: 999px;
    background: var(--nexus-surface);
    font: inherit;
    font-size: .78rem;
    color: var(--nexus-text-muted);
    cursor: pointer;
}

.nexus-chip .material-symbols-outlined { font-size: 16px; }

.nexus-chip:hover { border-color: var(--nexus-primary); color: var(--nexus-text); }

.nexus-chip--attivo {
    background: var(--nexus-primary-soft);
    border-color: var(--nexus-primary);
    color: var(--nexus-primary);
    font-weight: 600;
}

.nexus-chip--pulisci { color: var(--nexus-text-muted); }

.nexus-registro-riga {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.nexus-registro { display: flex; flex-direction: column; gap: 0; }

.nexus-registro-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--nexus-border);
    font-size: .78rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
}

.nexus-registro-pagina { display: inline-flex; align-items: center; gap: 8px; }

/* Cinque colonne: data, ora, chi, cosa, dettaglio.

   Data e ora erano una colonna sola con i due valori impilati: raddoppiavano l'altezza di OGNI riga per
   un'informazione che si legge di sfuggita. Affiancati stanno su una riga sola e restano incolonnati fra
   loro, che e' quello che serve per scorrere una data lungo l'elenco.

   Le larghezze delle prime due sono FISSE e non adattive: una colonna che si adatta al contenuto si
   sposta di qualche pixel da una pagina all'altra, e su una tabella di date e' esattamente cio' che rende
   faticoso seguirle in verticale. */
.nexus-registro-voce {
    display: grid;
    grid-template-columns: 78px 44px 140px minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: baseline;
    gap: 10px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--nexus-border);
    font-size: .8rem;
    line-height: 1.35;
}

.nexus-registro-voce:last-child { border-bottom: none; }

/* Le voci che riguardano CHI VEDE COSA hanno un segno proprio: sono la ragione per cui il registro
   esiste, e in mezzo a mille domande poste in chat sparirebbero. */
/* Il segno verticale come OMBRA INTERNA e non come bordo: un bordo aggiunge 3px e obbliga a togliere
   altrettanti di riempimento, e il risultato era che le righe marcate avevano TUTTE le colonne spostate
   di 6px rispetto alle altre — misurato, non supposto. Su un elenco che si scorre in verticale bastano
   a far zigzagare la colonna delle date. L'ombra interna occupa zero spazio. */
.nexus-registro-voce--accessi {
    background: #fdf6e8;
    box-shadow: inset 3px 0 0 #e6c98f;
}

.nexus-registro-data {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    font-weight: 600;
    color: var(--nexus-text);
    white-space: nowrap;
}

.nexus-registro-ora {
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

.nexus-registro-chi {
    color: var(--nexus-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-registro-cosa {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Su una riga sola: andando a capo la riga passava da 30 a 51 pixel di altezza, e in un elenco
       lungo poche righe piu' alte delle altre bastano a far perdere il filo mentre si scorre. Cio' che
       non entra si taglia coi puntini. */
    flex-wrap: nowrap;
    min-width: 0;
    /* La riga e' allineata alla BASE del testo, ma una pillola ha un fondo proprio e allineandola cosi'
       resterebbe alta rispetto alle parole accanto. Questo la riporta in linea. */
    align-self: center;
}

/* Larghezza minima uguale per tutte le pillole del registro: incolonnate lungo l'elenco, larghezze
   diverse facevano zigzagare la parola che le segue, che e' quella che si legge davvero. */
.nexus-registro-cosa .nexus-registro-tipo {
    min-width: 6.5rem;
    justify-content: center;
}
.nexus-registro-cosa strong { white-space: nowrap; }

.nexus-registro-nome {
    color: var(--nexus-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.nexus-registro-nome--id { font-variant-numeric: tabular-nums; opacity: .7; }

.nexus-registro-dettaglio {
    font-size: .74rem;
    color: var(--nexus-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nexus-registro-voce { grid-template-columns: 1fr; gap: 4px; }
    .nexus-registro-voce { grid-template-columns: 78px 44px minmax(0, 1fr); }
    .nexus-registro-cosa .nexus-registro-tipo { min-width: 0; }
    .nexus-registro-dettaglio { white-space: normal; }
}

/* ================================================================================================
   Scheletri di caricamento
   Mostrano la FORMA di cio' che sta arrivando invece di un cerchio che gira: la pagina non salta
   quando i dati compaiono, e l'attesa si legge come "sta caricando questo" invece di "sta facendo
   qualcosa".
   ================================================================================================ */

.nexus-scheletro {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--nexus-surface-alt) 25%,
        rgba(0, 0, 0, .045) 37%,
        var(--nexus-surface-alt) 63%);
    background-size: 400% 100%;
    animation: nexus-scheletro-onda 1.4s ease infinite;
}

.nexus-scheletro--breve { width: 90px; }
.nexus-scheletro--medio { width: 160px; }
.nexus-scheletro--lungo { flex: 1 1 auto; min-width: 120px; }
.nexus-scheletro--titolo { height: 18px; width: 220px; }

.nexus-scheletro-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-scheletro-riga:last-child { border-bottom: none; }

.nexus-scheletro-schede {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.nexus-scheletro-scheda {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    background: var(--nexus-surface);
}

@keyframes nexus-scheletro-onda {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .nexus-scheletro { animation: none; }
}

/* --- registro: la pillola del tipo, un colore per famiglia -----------------
   In un elenco lungo si scorre cercando UNA famiglia di voci; con tutte le pillole dello stesso
   grigio bisogna leggere ogni riga per scartarla. I toni seguono le famiglie: Dataset e Colonna
   condividono la tinta (la colonna piu' tenue, che e' il suo rango), Permesso e Utente stanno nei
   toni caldi perche' rispondono a "chi vede cosa". Il tipo resta comunque scritto per esteso: il
   colore raddoppia l'informazione, non la sostituisce. */

.nexus-registro-tipo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--nexus-border);
    background: var(--nexus-surface-alt);
    color: var(--nexus-text-muted);
    font-size: .7rem;
    font-weight: 500;
    white-space: nowrap;
}

.nexus-registro-tipo--dataset      { background: #e7f0fd; border-color: #c2daf7; color: #1b5c99; }
.nexus-registro-tipo--colonna      { background: #eef3f9; border-color: #d3e0ed; color: #4a6784; }
.nexus-registro-tipo--importazione { background: #e6f6ec; border-color: #bfe6cd; color: #1c7a45; }
.nexus-registro-tipo--domanda      { background: #f0ebfd; border-color: #d8cbf7; color: #5b3fbf; }
.nexus-registro-tipo--permesso     { background: #fdf1e0; border-color: #f5dcb4; color: #8f5c17; }
.nexus-registro-tipo--utente       { background: #fdeaf2; border-color: #f7c9dd; color: #9d3060; }
.nexus-registro-tipo--avviso       { background: #fdeee7; border-color: #f7cfbc; color: #a4491f; }
.nexus-registro-tipo--posta        { background: #e6f6f7; border-color: #bce4e8; color: #14707a; }

/* --- conversazioni: domanda su tre righe, elenco che scorre ----------------
   Il titolo di una conversazione E' la domanda posta. Su una riga sola due conversazioni sullo
   stesso argomento diventavano indistinguibili ("Qual e' il fatturato per..." e basta): tre righe
   bastano quasi sempre a contenere la domanda intera, e oltre si taglia con i puntini. */

.nexus-conv-domanda {
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Una domanda lunga senza spazi (un codice incollato) sfonderebbe il riquadro invece di andare
       a capo: il taglio a tre righe non protegge dalla parola singola troppo larga. */
    overflow-wrap: anywhere;
}

/* L'elenco scorre per conto proprio invece di allungare la pagina: con molte conversazioni il
   riquadro cresceva oltre la chat, e per tornare a scrivere bisognava risalire tutto.
   L'altezza e' relativa alla finestra, non fissa, cosi' su uno schermo alto si vedono piu' voci. */
.nexus-conv-elenco {
    /* Riempie lo spazio che avanza nel riquadro invece di avere un'altezza propria: e' cosi' che il
       fondo dell'elenco coincide col fondo della chat accanto. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Spazio per la barra, altrimenti si sovrappone ai pulsanti di fissa/elimina sulla destra. */
    padding-right: 4px;
    margin-right: -4px;
}

.nexus-conv-elenco::-webkit-scrollbar { width: 8px; }
.nexus-conv-elenco::-webkit-scrollbar-track { background: transparent; }
.nexus-conv-elenco::-webkit-scrollbar-thumb {
    background: var(--nexus-border);
    border-radius: 999px;
}
.nexus-conv-elenco::-webkit-scrollbar-thumb:hover { background: var(--nexus-text-muted); }

/* Un campo che si legge ma non si modifica. Ha l'aspetto di un campo — stessa altezza, stesso
   bordo — perche' occupa il posto di un campo, ma il fondo spento e il lucchetto dicono subito che
   non e' un campo disabilitato per errore: e' un valore che non si tocca, e sotto c'e' scritto
   perche'. */
.nexus-campo-bloccato {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--nexus-border);
    border-radius: 6px;
    background: var(--nexus-surface-alt);
    color: var(--nexus-text-muted);
    font-size: .9rem;
    word-break: break-word;
}

.nexus-campo-bloccato .material-symbols-outlined {
    font-size: 16px;
    flex: 0 0 auto;
}

/* Una fase che su questo dataset non aveva niente da calcolare. Spenta ma non nascosta: toglierla
   dall'elenco farebbe cambiare il numero di passi da un dataset all'altro, e chi ha imparato che sono
   undici si chiederebbe quale manca. */
.nexus-phase--skip { opacity: .55; }

.nexus-phase-nota {
    margin-left: 8px;
    font-size: .72rem;
    font-style: italic;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

/* --- registro: eliminazione definitiva delle voci --------------------------
   Un pannello che si apre nella pagina e non una finestra: si sceglie guardando i conteggi accanto a
   ogni tipo, e in una finestra piccola quei numeri sarebbero stati compressi proprio mentre servono a
   decidere. */

.nexus-registro-elimina {
    border-color: #f3b0a6;
    background: #fffaf9;
}

.nexus-registro-elimina-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.nexus-registro-elimina-testa strong { color: #b42318; }

.nexus-registro-elimina-testa p {
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--nexus-text-muted);
    max-width: 68ch;
}

.nexus-registro-elimina-tutto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--nexus-border);
    border-radius: 8px;
    background: var(--nexus-surface);
    cursor: pointer;
    font-size: .85rem;
}

.nexus-registro-elimina-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.nexus-registro-elimina-voce {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
}

.nexus-registro-elimina-voce:hover { background: var(--nexus-surface-alt); }

/* Le voci che la pulizia automatica non tocca mai: si possono scegliere, ma si vede che sono diverse. */
.nexus-registro-elimina-voce--protetta { background: #fdf6e8; }

.nexus-registro-elimina-quante {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--nexus-text-muted);
}

.nexus-registro-elimina-nota {
    font-size: .7rem;
    font-style: italic;
    color: #8f5c17;
    white-space: nowrap;
}

.nexus-registro-elimina-azioni {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Nel modulo di modifica colonna: cio' che i dati dicono, accanto a cio' che si sta per dichiarare.
   Tono informativo e non di avviso — non c'e' niente di sbagliato da correggere, c'e' una misura da
   tenere presente mentre si sceglie il tipo. */
.nexus-forma-rilevata {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nexus-border);
    border-left: 3px solid var(--nexus-primary);
    border-radius: 0 8px 8px 0;
    background: var(--nexus-surface-alt);
}

.nexus-forma-rilevata .material-symbols-outlined {
    font-size: 18px;
    color: var(--nexus-primary);
    flex: 0 0 auto;
}

.nexus-forma-rilevata strong {
    display: block;
    font-size: .84rem;
    color: var(--nexus-text);
}

.nexus-forma-rilevata p {
    margin: 3px 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--nexus-text-muted);
}

/* --- chat: i due riquadri riempiono la pagina e finiscono alla stessa quota ---
   L'altezza si calcola dal fondo della finestra e non e' un numero fisso: sopra la chat ci sono la barra
   di navigazione, il titolo e la scelta del dataset, che occupano all'incirca sempre lo stesso spazio.
   Il minimo impedisce che su uno schermo basso la conversazione si riduca a due righe. */
.nexus-chat-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
    /* Il layout sta dentro la scheda Chat, quindi sotto la barra delle linguette: l'altezza sottratta
       tiene conto anche di quella, oltre alla barra di navigazione e alla testata della pagina. */
    height: calc(100vh - 290px);
    min-height: 440px;
}

/* La colonna di destra: contiene il riquadro della chat e lo fa crescere fino in fondo. */
.nexus-chat-colonna {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nexus-chat-conversazioni {
    width: 260px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    /* min-height:0 e' la riga che permette al figlio scorrevole di stare dentro invece di sfondare:
       senza, un contenitore flex non scende mai sotto l'altezza del proprio contenuto. */
    min-height: 0;
}

.nexus-chat-principale {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* I contenitori interni di Radzen non sanno di dover crescere: senza questo, l'altezza si ferma al
   primo di loro e il riquadro della chat resta basso comunque. */
.nexus-chat-principale .rz-tabview,
.nexus-chat-principale .rz-tabview-panels,
.nexus-chat-principale .rz-tabview-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.nexus-chat-riquadro {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Su schermo basso o stretto si torna a un'altezza libera: incolonnare due riquadri alti quanto la
   finestra su un portatile piccolo lascia la casella di scrittura fuori dallo schermo. */
@media (max-width: 900px), (max-height: 620px) {
    .nexus-chat-layout {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .nexus-chat-conversazioni { width: 100%; flex: 0 0 auto; }
    .nexus-conv-elenco { max-height: 240px; }
    .ai-chat-scroll { max-height: 60vh; }
}

/* Le testate delle pagine di governo (registro, utenti, autorizzazioni) non hanno il limite di 78
   caratteri degli altri sottotitoli.

   Quel limite serve dove il sottotitolo si LEGGE come testo, e una riga lunga stanca l'occhio. Qui
   invece e' una riga sola di spiegazione, e comprimerla a meta' schermo la spezzava in due o tre
   righe lasciando meta' pagina vuota accanto: si legge come un difetto di impaginazione, e lo era —
   misurato, 459 pixel di testo dentro un blocco da 828. */
.nexus-governo-head .nexus-page-subtitle {
    max-width: none;
}

/* La casella della domanda, piu' alta.

   Due righe bastavano per "fatturato per regione", non per una domanda vera con filtri e periodo: si
   scriveva dentro una fessura, e per rileggere quello che si era scritto bisognava scorrere il campo.
   Cresce da sola col testo fino a un tetto, oltre il quale scorre. */
.nexus-chat-input textarea,
textarea.nexus-chat-input {
    min-height: 96px;
    max-height: 240px;
    line-height: 1.5;
    padding: 10px 12px;
    resize: vertical;
}

/* L'ancora del completamento riempie la riga: la casella deve prendere tutta la larghezza che avanza
   accanto al pulsante di invio. */
.nexus-input-ancora {
    flex: 1 1 auto;
    min-width: 0;
}

/* Il segno che la risposta sta ancora arrivando.
   Sta in fondo al testo e non accanto alla bolla: e' li' che l'occhio e' gia' fermo mentre legge, ed e'
   l'unico punto in cui dice qualcosa — la frase non e' finita, non aspettarti che lo sia. */
.nexus-cursore-scrittura {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: .55;
    animation: nexus-battito 1s steps(2, start) infinite;
}

@keyframes nexus-battito {
    to { opacity: 0; }
}

/* Chi ha chiesto meno movimento non lo vuole nemmeno qui: il cursore resta, fermo. */
@media (prefers-reduced-motion: reduce) {
    .nexus-cursore-scrittura { animation: none; }
}

/* ============================================================================
   Come mostrare i numeri di una colonna.
   Un riquadro appoggiato invece di due campi sciolti nel modulo: le due scelte
   e l'anteprima sono una cosa sola, e separarle costringerebbe a ricomporle. */
.nexus-formato-numero {
    border: 1px solid var(--nexus-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--nexus-surface-alt, #f7f9fc);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nexus-formato-testata {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--nexus-text-muted);
}

.nexus-formato-testata .material-symbols-outlined { font-size: 18px; }

.nexus-formato-righe { display: flex; flex-direction: column; gap: 10px; }

.nexus-formato-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nexus-formato-riga label { font-size: .88rem; }

/* L'anteprima e' il cuore del riquadro: si stacca dal resto con una riga sopra, e il numero e' scritto
   in cifre tabellari perche' cambiando le opzioni non si sposti da sotto gli occhi. */
.nexus-formato-anteprima {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px dashed var(--nexus-border);
    padding-top: 10px;
}

.nexus-formato-anteprima-etichetta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nexus-text-muted);
}

.nexus-formato-anteprima-valore {
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nexus-text);
}

/* ============================================================================
   Grafico a cascata.

   Ogni voce parte dove finisce la precedente. Le tre cose che lo rendono
   leggibile: il filo che collega un gradino al successivo (senza, sono colonne
   staccate), il verde e il rosso che dicono il segno prima di leggere il
   numero, e il totale staccato dai contributi perche' non e' un contributo. */
/* Il contenitore generico dei grafici e' in colonna flessibile. Qui serve un blocco: tutto il contenuto
   della cascata e' posizionato in modo assoluto, quindi non dichiara alcuna larghezza propria — e un
   elemento flessibile che si dimensiona sul contenuto, con dentro solo elementi assoluti, collassa. Le
   barre restavano larghe ZERO: il disegno era geometricamente corretto e invisibile. */
.nexus-waterfall {
    display: block;
    padding-top: 22px;
}

.nexus-waterfall-plot {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 260px;
    padding: 26px 4px 0;
}

.nexus-waterfall-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Uno spazio prima del totale: separa il percorso dal punto d'arrivo. */
.nexus-waterfall-step-total { margin-left: 16px; }

.nexus-waterfall-step-total::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 22px;
    border-left: 1px dashed var(--nexus-border);
}

.nexus-waterfall-bar {
    position: absolute;
    left: 12%;
    right: 12%;
    border-radius: 3px;
    transition: opacity .15s ease;
}

.nexus-waterfall-bar:hover { opacity: .82; }

.nexus-waterfall-bar-up { background: #10b981; }
.nexus-waterfall-bar-down { background: #ef4444; }

/* Il totale in colore neutro e pieno: non compete coi contributi, li conclude. */
.nexus-waterfall-bar-total { background: var(--nexus-primary, #4f46e5); }

/* Il filo verso il gradino successivo: sottile, tratteggiato, di un grigio che
   non compete con le colonne. E' la linea che trasforma una fila di colonne in
   un percorso. */
.nexus-waterfall-link {
    position: absolute;
    left: 88%;
    width: calc(24% + 10px);
    border-top: 1px dashed var(--nexus-text-muted);
    opacity: .5;
}

.nexus-waterfall-zero {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--nexus-border);
}

.nexus-waterfall-value {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nexus-text);
}

.nexus-waterfall-label {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .72rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-waterfall-label-total { font-weight: 600; color: var(--nexus-text); }

/* Sotto una certa larghezza le etichette si sovrappongono: si inclinano invece
   di sparire, perche' un gradino senza nome non dice piu' niente. */
@media (max-width: 640px) {
    .nexus-waterfall-plot { height: 220px; gap: 6px; }

    .nexus-waterfall-label {
        transform: rotate(-38deg);
        transform-origin: top center;
        bottom: -26px;
        font-size: .66rem;
    }

    .nexus-waterfall-value { font-size: .64rem; }
}

/* ============================================================================
   Istogramma: la forma dei dati.

   Le colonne stanno ATTACCATE, a differenza di un grafico a colonne: fra una
   fascia e la successiva non c'e' un salto, c'e' un confine — e lo spazio
   bianco direbbe che in mezzo non ci sono valori. E' la differenza fra
   contare categorie e misurare una grandezza continua. */
.nexus-istogramma {
    display: block;
    padding-top: 4px;
}

.nexus-istogramma-sintesi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-istogramma-misura {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nexus-istogramma-misura-etichetta {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--nexus-text-muted);
}

.nexus-istogramma-misura-valore {
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    color: var(--nexus-text);
}

/* Media e mediana in evidenza: la loro distanza e' l'informazione — quando
   divergono, la distribuzione e' sbilanciata e la media non rappresenta piu'
   nessuno. */
.nexus-istogramma-misura-forte .nexus-istogramma-misura-valore {
    font-weight: 700;
    color: var(--nexus-primary);
}

.nexus-istogramma-plot {
    display: flex;
    align-items: flex-end;
    height: 190px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 18px;
}

.nexus-istogramma-classe {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.nexus-istogramma-conteggio {
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--nexus-text-muted);
    white-space: nowrap;
    overflow: hidden;
}

/* Un filo di bianco fra le colonne le separa senza aprire un varco: restano
   una superficie continua, che e' quello che una distribuzione e'. */
.nexus-istogramma-barra {
    background: var(--nexus-primary);
    border: 1px solid #fff;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    transition: filter .15s ease;
}

.nexus-istogramma-classe:hover .nexus-istogramma-barra { filter: brightness(1.18); }

/* La classe che raccoglie i valori estremi: tratteggiata, perche' non copre un
   intervallo come le altre ma tutto cio' che sta oltre. La differenza si deve
   vedere prima di leggere l'etichetta. */
.nexus-istogramma-barra-coda {
    background: repeating-linear-gradient(
        -45deg,
        var(--nexus-primary), var(--nexus-primary) 4px,
        color-mix(in srgb, var(--nexus-primary) 55%, #fff) 4px,
        color-mix(in srgb, var(--nexus-primary) 55%, #fff) 8px);
}

/* I confini vanno sotto i BORDI delle colonne, non sotto il loro centro:
   ce n'e' uno in piu' delle classi, e ognuno segna dove una finisce e comincia
   l'altra. */
.nexus-istogramma-asse {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid var(--nexus-border);
    padding-top: 5px;
    margin-left: 0;
}

.nexus-istogramma-confine {
    flex: 1 1 0;
    min-width: 0;
    font-size: .66rem;
    color: var(--nexus-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateX(-50%);
    text-align: center;
}

/* L'ultimo confine sporgerebbe oltre il bordo destro: si riporta dentro. */
.nexus-istogramma-confine:last-child { transform: translateX(-100%); }
.nexus-istogramma-confine:first-child { transform: translateX(0); text-align: left; }

.nexus-istogramma-titolo-asse {
    text-align: center;
    font-size: .74rem;
    color: var(--nexus-text-muted);
    margin-top: 8px;
}

@media (max-width: 640px) {
    .nexus-istogramma-plot { height: 150px; }
    .nexus-istogramma-conteggio { display: none; }
    .nexus-istogramma-sintesi { gap: 4px 16px; }
}

/* ============================================================================
   Pareto: barre decrescenti + linea di cio' che si e' accumulato.

   Come la cascata, il contenitore dev'essere un blocco: il contenuto e'
   posizionato in modo assoluto e un elemento flessibile che si dimensiona sul
   contenuto collasserebbe a larghezza zero. */
.nexus-pareto {
    display: block;
    padding-top: 4px;
}

.nexus-pareto-lettura {
    font-size: .88rem;
    color: var(--nexus-text);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-pareto-lettura strong { color: var(--nexus-primary); }

.nexus-pareto-plot {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 220px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
}

.nexus-pareto-voce {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

/* Le voci fino all'80% nel colore pieno, le altre spente: la risposta si legge
   dal colore senza dover seguire la linea con l'occhio. */
.nexus-pareto-barra {
    background: color-mix(in srgb, var(--nexus-primary) 28%, #fff);
    border-radius: 2px 2px 0 0;
    min-height: 1px;
}

.nexus-pareto-barra-chiave { background: var(--nexus-primary); }

.nexus-pareto-etichetta {
    position: absolute;
    bottom: -19px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .66rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La soglia: dove si legge la risposta. */
.nexus-pareto-soglia {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--nexus-text-muted);
    opacity: .45;
    z-index: 0;
}

.nexus-pareto-soglia-etichetta {
    position: absolute;
    right: 2px;
    transform: translateY(50%);
    font-size: .64rem;
    color: var(--nexus-text-muted);
    background: var(--nexus-surface, #fff);
    padding: 0 3px;
    z-index: 3;
}

/* La linea cumulata sopra le barre. Lo spessore non si deforma con la scala
   dell'SVG grazie a vector-effect sul tracciato. */
.nexus-pareto-linea {
    position: absolute;
    inset: 10px 0 0;
    width: 100%;
    height: calc(100% - 10px);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.nexus-pareto-linea polyline {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.nexus-pareto-plot { margin-bottom: 22px; }

@media (max-width: 640px) {
    .nexus-pareto-plot { height: 180px; gap: 2px; }
    .nexus-pareto-etichetta { display: none; }
}

/* ============================================================================
   Calendario: un quadratino per giorno.

   Colonne = settimane, righe = giorni da lunedi' a domenica. E' un calendario
   ruotato, e serve a leggere la POSIZIONE — questo e' un sabato, quella e' la
   settimana di Ferragosto — senza cercarla su un asse. */
.nexus-calendario {
    display: block;
    padding-top: 4px;
}

.nexus-calendario-griglia {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.nexus-calendario-riga {
    display: flex;
    gap: 3px;
    align-items: center;
}

.nexus-calendario-giorno {
    flex: 0 0 30px;
    font-size: .64rem;
    color: var(--nexus-text-muted);
    text-align: right;
    padding-right: 4px;
}

.nexus-calendario-cella {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: var(--nexus-primary);
}

/* Un giorno senza dati e uno con valore zero sono cose diverse: il primo e' un
   contorno vuoto, il secondo una cella appena tinta. Confonderli direbbe che
   quel giorno e' stato misurato quando non lo e' stato. */
.nexus-calendario-cella-vuota {
    background: transparent;
    border: 1px solid var(--nexus-border);
}

/* Fuori dal periodo chiesto: non e' un vuoto, e' un giorno che non c'entra. */
.nexus-calendario-cella-fuori {
    background: transparent;
    border: none;
}

.nexus-calendario-scala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: .7rem;
    color: var(--nexus-text-muted);
}

.nexus-calendario-legenda {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nexus-calendario-legenda i {
    display: inline-block;
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
}

/* ============================================================================
   Scatole e baffi: la forma di piu' distribuzioni, una accanto all'altra.

   Tutte le piste condividono la stessa scala: e' l'unica ragione per metterle
   in fila, e senza sarebbero tre grafici affiancati invece di un confronto. */
.nexus-scatole { display: block; }

.nexus-scatole-testata {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nexus-text-muted);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--nexus-border);
}

.nexus-scatole-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.nexus-scatole-etichetta {
    flex: 0 0 132px;
    font-size: .78rem;
    color: var(--nexus-text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-scatole-pista {
    position: relative;
    flex: 1 1 auto;
    height: 26px;
}

/* Il baffo: sottile, perche' non e' il protagonista — dice fin dove arrivano i
   valori non isolati, mentre l'informazione principale sta nella scatola. */
.nexus-scatole-baffo {
    position: absolute;
    top: 50%;
    height: 1px;
    background: var(--nexus-text-muted);
    opacity: .65;
}

.nexus-scatole-tacca {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 10px;
    margin-top: -5px;
    background: var(--nexus-text-muted);
    opacity: .65;
}

.nexus-scatole-scatola {
    position: absolute;
    top: 50%;
    height: 16px;
    margin-top: -8px;
    background: color-mix(in srgb, var(--nexus-primary) 22%, #fff);
    border: 1px solid var(--nexus-primary);
    border-radius: 3px;
}

/* La mediana e' la riga che conta piu' di tutte: spessa e piena, perche' e' il
   numero che si va a cercare guardando questo grafico. */
.nexus-scatole-mediana {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    margin-left: -1px;
    background: var(--nexus-primary);
    border-radius: 1px;
}

.nexus-scatole-fuori {
    flex: 0 0 88px;
    font-size: .68rem;
    color: var(--nexus-text-muted);
    white-space: nowrap;
}

.nexus-scatole-scala {
    display: flex;
    justify-content: space-between;
    margin-left: 142px;
    margin-right: 98px;
    padding-top: 6px;
    border-top: 1px solid var(--nexus-border);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--nexus-text-muted);
}

.nexus-scatole-nota {
    margin-top: 10px;
    font-size: .7rem;
    color: var(--nexus-text-muted);
}

@media (max-width: 640px) {
    .nexus-scatole-etichetta { flex-basis: 84px; font-size: .7rem; }
    .nexus-scatole-fuori { display: none; }
    .nexus-scatole-scala { margin-left: 94px; margin-right: 0; }
}