html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* Marchio dei template XAF standard (pagina di logon, popup), dove il
   componente Templates/NexusLogo.razor non viene renderizzato.
   background-image e non mask (com'era nello scaffolding DevExpress): la
   mask appiattisce tutto su currentColor e perderebbe l'angolo teal e il
   punto finale, che sono l'unico accento del marchio.
   Il box tiene le proporzioni del file (369x96): 123x32 con contain, cosi'
   l'icona resta a 32px, sopra il minimo di 20 previsto per il lockup. */
.header-logo {
    flex-shrink: 0;
    background-image: url('../images/nexus-logo-horizontal.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 123px;
    height: 32px;
}

/* Il logon NON e' sempre su foglio chiaro: il tema arriva dal cookie
   XAF_CurrentTheme prima del login (doc 13 par. 10), quindi chi lavora in
   scuro vede la pagina di accesso scura. Con il lockup navy la parola
   "nexus" spariva nel fondo e restava visibile solo il punto teal: qui va
   la variante inversa, la stessa che usano la shell e lo splash. */
[data-nexus-theme="dark"] .header-logo {
    background-image: url('../images/nexus-logo-horizontal-inverse.svg');
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Il riquadro del circuito caduto. Sta in site.css e non nel foglio mobile
   perche' vale per tutte le superfici: quando questo si vede, non e' detto
   che gli altri fogli siano stati caricati. Nessun token --nx-*, per la
   stessa ragione: colori espliciti, o si finisce con testo bianco su
   bianco proprio nel momento in cui bisogna leggere. */
.nx-crash {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 32rem;
    margin: 0 auto;
    padding: max(env(safe-area-inset-top), 24px) 24px 24px;
    background: #FFFFFF;
    color: #121A2B;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    height: 100%;
}

.nx-crash__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.nx-crash__text {
    margin: 0;
    font-size: 0.9375rem;
    color: #4C566B;
}

.nx-crash__btn {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: #0B1F3A;
    color: #FFFFFF;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}
/* -- Placeholder picker (toolbar + dropdown Ctrl+Space) ------------------
   Pattern riusato dal Portal Platform (ADR-PlaceholderPickerCentralization):
   markup e classi identiche a placeholder-picker.js, colori sui token
   --nx-* della suite (teal al posto dell'arancione VP). Usato dal designer
   degli use case per i modelli del titolo/sommario del task. */
.vp-placeholder-toolbar {
    padding: 0.75rem;
    background: var(--nx-field, #F0F4F9);
    border: 1px solid var(--nx-border, #DEE6EF);
    border-radius: var(--nx-radius-sm, 6px);
}

.vp-placeholder-toolbar__header {
    font-size: 0.875rem;
    color: var(--nx-text, #24292e);
    margin-bottom: 0.5rem;
}

.vp-placeholder-toolbar__header strong {
    color: var(--nx-teal-ink, #0E8F8A);
}

/* Maniglia della testata: e' un <button> per tastiera e lettori di schermo,
   ma deve leggersi come il titolo di prima — niente cornice, niente fondo. */
.vp-placeholder-toolbar__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.vp-placeholder-toolbar__count {
    padding: 0 0.4rem;
    background: var(--nx-teal-ink, #0E8F8A);
    color: var(--nx-surface, #fff);
    border-radius: var(--nx-pill, 12px);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Da chiusa resta la sola riga della testata: niente margine sotto, o il
   riquadro conserva l'aria di quando era pieno. */
.vp-placeholder-toolbar--collapsed {
    padding: 0.5rem 0.75rem;
}

.vp-placeholder-toolbar--collapsed .vp-placeholder-toolbar__header {
    margin-bottom: 0;
}

.vp-placeholder-toolbar__hint {
    display: block;
    font-size: 0.8rem;
    color: var(--nx-text-muted, #5A6B82);
    margin-top: 0.25rem;
}

.vp-placeholder-toolbar__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* L'inchiostro della pastiglia e' la SUPERFICIE del tema, non il bianco:
   --nx-teal-ink e' teal scuro in light (e allora la superficie e' bianca)
   ma teal acceso in dark, dove il bianco sopra scendeva a 1.9:1. Con
   --nx-surface la coppia si ri-deriva da sola in tutti e due i temi.
   L'hover schiarisce/scurisce il fondo invece di cambiarlo in navy: con
   il navy, in dark, testo e fondo diventavano lo stesso colore. */
.vp-placeholder-toolbar__badge {
    padding: 0.25rem 0.55rem;
    background: var(--nx-teal-ink, #0E8F8A);
    color: var(--nx-surface, #fff);
    border: none;
    border-radius: var(--nx-pill, 12px);
    font-size: 0.8rem;
    font-family: var(--nx-font-mono, 'Consolas', monospace);
    cursor: pointer;
    transition: filter 0.12s ease;
}

.vp-placeholder-toolbar__badge:hover {
    filter: brightness(0.92);
}

.vp-placeholder-toolbar__empty {
    font-size: 0.85rem;
    color: var(--nx-text-muted, #888);
    font-style: italic;
}

/* Variante headless: solo dataset nel DOM per il dropdown, niente UI. */
.vp-placeholder-toolbar--headless {
    display: none !important;
}

.vp-placeholder-dropdown {
    z-index: 9999;
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-border, #d1d5da);
    border-radius: var(--nx-radius-sm, 6px);
    box-shadow: var(--nx-shadow-overlay, 0 4px 12px rgba(0, 0, 0, 0.18));
    min-width: 320px;
    max-width: 520px;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
}

.vp-placeholder-dropdown__search {
    padding: 0.4rem 0.6rem;
    border: none;
    border-bottom: 1px solid var(--nx-border, #d1d5da);
    outline: none;
    font-size: 0.85rem;
    background: var(--nx-field, #f8f9fa);
    color: var(--nx-text, #24292e);
}

.vp-placeholder-dropdown__search:focus {
    background: var(--nx-surface, #fff);
    box-shadow: inset 0 -2px 0 var(--nx-teal, #1CCFC9);
}

.vp-placeholder-dropdown__list {
    max-height: 280px;
    overflow-y: auto;
}

.vp-placeholder-dropdown__empty {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--nx-text-muted, #888);
    font-style: italic;
}

.vp-placeholder-dropdown__item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--nx-border, #f0f2f4);
}

.vp-placeholder-dropdown__item:last-child {
    border-bottom: none;
}

.vp-placeholder-dropdown__item:hover,
.vp-placeholder-dropdown__item.is-active {
    background: var(--nx-field-hover, #E9EEF5);
}

.vp-placeholder-dropdown__token {
    display: block;
    font-family: var(--nx-font-mono, 'Consolas', monospace);
    color: var(--nx-teal-ink, #0E8F8A);
    font-weight: 600;
}

.vp-placeholder-dropdown__desc {
    display: block;
    font-size: 0.78rem;
    color: var(--nx-text-muted, #586069);
    margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------
   Avviso di riconnessione (doc 27 par. 7)
   Blazor ne ha uno proprio, che compare quando il circuito cade; qui c'e'
   il nostro (_Host.cshtml), tradotto e con la sola informazione che conta
   per chi sta lavorando: il lavoro non e' perso.
   Nessuna classe = niente da mostrare. Quelle che Blazor mette sono
   -show / -retrying / -paused (sta ritentando, o il circuito e' in pausa),
   -failed (tentativi esauriti) e -rejected / -resume-failed (il circuito
   non esiste piu' lato server: solo la ricarica lo riporta in vita).
   ------------------------------------------------------------------------- */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(10 21 38 / .55);
}

/* La comparsa RITARDATA mentre si sta ancora ritentando (utente 2026-09-04:
   dal telefono l'avviso compariva a ogni riapertura dell'applicazione).
   Riaprendo dopo pochi secondi il socket e' chiuso ma il circuito e' vivo, e
   Blazor lo riprende in poche centinaia di millisecondi: coprire lo schermo
   in quella finestra annuncia un guasto che non c'e'. Per i primi due
   secondi l'avviso resta invisibile e non intercetta i tocchi; se il
   collegamento torna prima, non si e' visto niente.
   Vale SOLO per gli stati di tentativo: -failed e -rejected compaiono subito,
   perche' li' c'e' davvero qualcosa da dire e un pulsante da premere. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused {
    animation: nx-reconnect-appear 140ms linear 2000ms both;
}

@keyframes nx-reconnect-appear {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
}

.nx-reconnect__card {
    max-width: 320px;
    padding: 20px 22px;
    border-radius: var(--nx-radius-card, 12px);
    background: var(--nx-surface, #fff);
    color: var(--nx-text, #0B1F3A);
    box-shadow: 0 12px 28px -12px rgb(11 31 58 / .35);
    text-align: center;
}

.nx-reconnect__title {
    font-weight: 600;
    font-size: 1.0625rem;
    margin-bottom: 6px;
}

.nx-reconnect__text {
    font-size: 0.9375rem;
    color: var(--nx-text-muted, #586069);
}

/* Il pulsante serve solo quando ritentare non ha piu' senso: mentre Blazor
   riprova, ricaricare a mano butterebbe via un circuito che sta per
   tornare. */
.nx-reconnect__btn {
    display: none;
    margin: 14px auto 0;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--nx-radius, 8px);
    background: var(--nx-teal, #1CCFC9);
    color: var(--nx-teal-ink, #0B1F3A);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.components-reconnect-failed .nx-reconnect__btn,
.components-reconnect-rejected .nx-reconnect__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Campi JSON (JsonPropertyEditor): carattere a spaziatura fissa, cosi'
   l'indentazione allinea davvero, e nessun ritorno a capo automatico —
   una riga lunga si scorre, spezzarla nasconde la struttura. */
.nx-json-memo textarea {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;
}

/* -- Link di recupero credenziali sotto il modulo di accesso (doc 36) ----
   Li appende nexus-logon-recovery.js dentro la .card-body della logon page.
   Colori sui token della suite, con i valori di riserva per il caso in cui
   il foglio dei token non sia ancora arrivato: e' la prima pagina che si
   apre, e un link illeggibile per mezzo secondo si nota. */
.nx-logon-recovery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    font-size: 0.8125rem;
}

/* Una riga per volta: sopra i due recuperi alla pari, sotto l'informativa.
   Tre link su una riga sola si spezzavano in tre colonne strette e facevano
   sembrare la nota legale una terza scelta di accesso. */
.nx-logon-recovery__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.nx-logon-recovery__row--privacy {
    font-size: 0.75rem;
    opacity: 0.85;
}

.nx-logon-recovery__link {
    color: var(--nx-teal-ink, #0F7A78);
    text-decoration: none;
}

.nx-logon-recovery__link:hover {
    text-decoration: underline;
}

.nx-logon-recovery__separator {
    color: var(--nx-text-muted, #6B7A8C);
    font-size: 0.75rem;
    user-select: none;
}

/* -- Selettore della lingua sulla riga del titolo dell'accesso (doc 06 §7.1)
   Lo inserisce nexus-logon-language.js nella .card-header della logon, che
   diventa una riga: titolo a sinistra, lingua a destra.
   La tendina e' costruita a mano e NON e' un <select>: il menu di un select
   lo disegna il sistema operativo e in tema scuro sarebbe una lista bianca
   in mezzo a una pagina scura. Qui vestono i token della suite, e il tema
   della pagina di accesso arriva dal cookie prima del login. */
.nx-logon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.nx-logon-language {
    position: relative;
    font-weight: 400;
    /* La testata porta il peso del titolo: le voci della lingua no. */
    font-size: 0.8125rem;
    line-height: 1.2;
}

.nx-logon-language__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    border-radius: var(--nx-radius-sm, 8px);
    color: var(--nx-text-muted, #5A6B82);
    font: inherit;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
    white-space: nowrap;
}

.nx-logon-language__btn:hover,
.nx-logon-language__btn:focus-visible {
    background: var(--nx-field-hover, #E9EEF5);
    color: var(--nx-text, #0F172A);
    outline: none;
}

.nx-logon-language__chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.nx-logon-language.nx-open .nx-logon-language__chevron {
    transform: rotate(180deg);
}

.nx-logon-language__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 13rem;
    padding: 0.25rem;
    background: var(--nx-surface, #FFFFFF);
    border: 1px solid var(--nx-border, #D8E2EC);
    /* Stessi valori del menu dell'account nella shell (nexus-shell.css): un
       menu a discesa della suite si veste sempre allo stesso modo. Il bordo
       in piu' serve qui, e solo qui: il menu cade sulla card della logon,
       che ha esattamente lo stesso fondo. */
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: var(--nx-shadow-float, 0 12px 24px -18px rgb(10 21 38 / .25));
    text-align: left;
}

.nx-logon-language.nx-open .nx-logon-language__menu {
    display: block;
}

.nx-logon-language__opt {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--nx-radius-sm, 8px);
    color: var(--nx-text, #0F172A);
    font: inherit;
    text-align: left;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}

.nx-logon-language__opt:hover,
.nx-logon-language__opt:focus-visible {
    background: var(--nx-field-hover, #E9EEF5);
    outline: none;
}

/* La lingua in uso si riconosce senza leggere: e' l'unica in teal. */
.nx-logon-language__opt.nx-current {
    color: var(--nx-teal-ink, #0B7B77);
    font-weight: 600;
}

/* Il pulsante "Accedi con una passkey" sotto il modulo di accesso (doc 52):
   secondario rispetto ad Accedi — bordo e non pieno — ma largo quanto la
   card, perche' sul telefono e' il modo principale di entrare. */
.nx-logon-passkey {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

/* Metriche prese di peso dal pulsante Accedi di XAF (dxbl-btn-primary:
   min-height 38px, padding 5px, raggio 10px, flex centrato): i due pulsanti
   sono in colonna, uno sopra l'altro, e una differenza di sei pixel in
   altezza o di due nel raggio si vede subito. */
.nx-logon-passkey__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 5px;
    border: 1px solid var(--nexus-teal, #0f9d8a);
    border-radius: 10px;
    background: transparent;
    color: var(--nexus-teal, #0f9d8a);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.nx-logon-passkey__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.nx-logon-passkey__error {
    font-size: 0.8125rem;
    color: var(--nexus-danger, #b42318);
    text-align: center;
}