html, body {
    height: 100%;
}

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

.header-logo {
    background: url('../images/logoHorizontal.png');
    background-size: cover;
    width: 140px;
    height: 35px;
}

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


/* CUSTOMIZATION */

.loading-image {
    width: 90px !important;
    height: auto !important;
}

.loading-image-wrapper-custom {
    width: 120px;
    height: 120px;
    transition: 0.5s;
    background-color: white;
}
/* --- ICONE BOOTSTRAP NEI BOTTONI DEGLI EDITOR: alla scala di quelle DevExpress (§55) ---
   IL DIFETTO (segnalato dall'utente sul bottone di upload): i bottoni con icona `bi`
   sembrano "magri" accanto agli altri. Misurato sui campi data, dove convivono:
     bottone con icona bi            20.8px   (glifo <span> a font-size 14 -> 14x14.7)
     bottone di serie DevExpress     26.8px   (icona <svg> 20x20)
   Il padding e' IDENTICO in entrambi (0 3px): i 6px di differenza sono tutti nel GLIFO.
   ⚠️ Per questo NON si allarga col padding: si otterrebbe la larghezza giusta lasciando
   pero' l'icona visibilmente piu' piccola delle vicine — si sposterebbe il sintomo.
   Portando il glifo alla misura dell'icona vicina, la larghezza viene DA SE'.

   ⚠️⚠️ IL VALORE NON E' UN NUMERO, E' IL TOKEN CHE DIMENSIONA LE ICONE DEVEXPRESS.
   Prima stesura: `20px` fisso, tarato su Nitido — SBAGLIATO, e la misura l'ha smentito
   subito. Quella misura cambia da tema a tema:
     Nitido   svg 20px   ->  bottone 26.8   (li' i bi a 20.8 erano DAVVERO piu' stretti)
     simplex  svg 16px   ->  bottone 28.8   (col 20px fisso sforavo a 32.8)
     Indice   svg 14px   ->  bottone 20.8   (li' i bi erano GIA' allineati: col 20px fisso
                                             rompevo una vista sana)
   La misura la governa `--dxds-spacing-200`, lo stesso token che il §23.4 aveva
   individuato come dimensionatore delle ICONE. Leggendo quello, il glifo bi vale sempre
   quanto l'svg che ha accanto, in OGNI tema e per costruzione — niente valori per-tema
   nel foglio condiviso, e i temi che un domani ritarassero quel token si porterebbero
   dietro anche queste icone.
   💡 `--bi-editor-icon-size` resta come scavalco esplicito, se un tema volesse discostarsi.

   ⚠️ Sta QUI e non in un foglio di tema perche' le due catene sono disgiunte (§49.5) e
   questa non e' una scelta di palette: e' allineamento a una misura di DevExpress.
   site.css e' linkato nell'_Host.cshtml per TUTTI i temi.
   ⚠️ Scoped ai soli bottoni degli editor: le altre icone bi (flyout, colonne di griglia)
   non si toccano — e su simplex, che dichiara `.bi::before { font-size: 1rem }` in
   globale, questa vince per specificita' solo dentro gli editor. */
.dxbl-text-edit .dxbl-btn .dxbl-image.bi,
.dxbl-text-edit .dxbl-btn .dxbl-image.bi::before {
    font-size: var(--bi-editor-icon-size, var(--dxds-spacing-200));
    line-height: 1;
}

/* --- BADGE del list editor a CARD (PictureItemRender) — misura e accento (§56) -------
   I due badge sopra ogni immagine: il numero d'ordine e la "C" di copertina.
   (a) MISURA. Di serie prendono il `.badge` di Bootstrap, cioe' .75em -> misurato 10.5px,
       minuti sopra una miniatura. Il token li alza in un punto solo, ed e' tarabile.
   (b) COLORE della copertina. Prima era `bg-primary`, la utility di Bootstrap: #0F6CBD
       FISSO su tutti e otto i temi, sordo alla palette (stesso vizio del bottone di
       upload, §55.1). Ora lo porta `--grid-link-color`, che e' il colore-link e cioe'
       l'ACCENTO di ciascun tema — ed e' l'unico token d'accento dichiarato da TUTTI e
       sette gli editoriali (verificato: Ampio #8a3348, Indice #306174, Nitido #5b5443,
       Repertorio #3c6251, Notturno/Vespro/Ardesia col proprio token).
   ⚠️⚠️ IL TESTO PRENDE `--toolbar-bg`, NON il bianco. Gli accenti sono scuri sui temi
   chiari e CHIARI sui due dark (Vespro #5fbe93): col bianco fisso la "C" sparirebbe
   proprio li'. `--toolbar-bg` e' la carta del tema — anch'essa 7/7 — e specchia
   l'accento: chiara dove l'accento e' scuro, scura dove e' chiaro. Contrasto garantito
   per costruzione, senza un valore per-tema.
   ⚠️ I fallback ci sono perche' nella famiglia BOOTSWATCH quei token non esistono: senza,
   il var() cadrebbe per intero (§8.24) e il badge resterebbe senza fondo. Col fallback
   simplex tiene esattamente l'aspetto di prima.
   ⚠️ Niente !important: `bg-primary` e' stata tolta dal componente, quindi non c'e' piu'
   una utility con cui litigare. */
.picturegrid-badge {
    font-size: var(--picturegrid-badge-size, 0.85rem);
}

.picturegrid-badge-cover {
    background-color: var(--grid-link-color, #0F6CBD);
    color: var(--toolbar-bg, #FFFFFF);
}

/* --- Il RIQUADRO dell'editor immagine: bordo alla tinta di linea del tema (§58) ------
   Segnalato dall'utente sul campo "My Employee Fotos Cover": il riquadro col segnaposto
   della fotocamera ha un contorno troppo acceso, su tutti i temi.
   LA CAUSA e' di XAF, non di Bootstrap: `.img-thumbnail` di serie prende il chiaro
   `--bs-border-color` (#dee2e6), ma `styles.css` di DevExpress.ExpressApp.Blazor lo
   scavalca con `.xaf-image-editor .img-thumbnail { border-color: var(--dxds-utility-gray-80…) }`
   = **#333333**, un grigio quasi nero. Misurato su Indice: bordo #333 contro il #E1E1E0
   dei campi della stessa vista.
   LA CURA: `--grid-line`, cioe' la tinta con cui OGNI tema disegna le proprie linee
   strutturali — dichiarata da tutti e 7 (Indice #D8DCDF, Nitido #E4DECF, Ampio #F0EBE7,
   Repertorio #E4E4DD, e i tre restanti col proprio token). Cosi' il riquadro si sbiadisce
   quanto il resto dell'interfaccia, per tema e senza numeri inventati.
   ⚠️ NON si e' usato `--dxbl-text-edit-border-color` (il bordo dei campi), che sarebbe
   sembrato il bersaglio ovvio: e' una variabile DI COMPONENTE, dichiarata da DevExpress
   sulla `.dxbl-text-edit` stessa, quindi da qui NON e' visibile — provato, cadeva sul
   fallback. E' lo stesso inganno gia' documentato per --dxbl-text-edit-padding-y.
   ⚠️ Il prefisso `.dxbl-fl` porta la regola a (0,3,0) contro la (0,2,0) di XAF: si vince
   per SPECIFICITA'. Servirebbe comunque anche l'ordine (styles.css e site.css sono
   linkati entrambi nel body, in quest'ordine), ma dipendere dall'ordine e' piu' fragile.
   💡 Il fallback copre la famiglia bootswatch, dove `--grid-line` non esiste: li' resta
   il chiaro di Bootstrap invece di cadere per intero (§8.24). */
.dxbl-fl .xaf-image-editor .img-thumbnail {
    border-color: var(--grid-line, var(--bs-border-color));
}

/* --- BOTTONI-LINK: via la sottolineatura fissa, il segnale lo da' il COLORE -----------
   Segnalato dall'utente sui bottoni della prima colonna delle griglie (il FlyoutButton
   della colonna fissa, che e' un DxButton in stile link). Misurato su Indice:
     classe          button.dxbl-btn.dxbl-btn-link
     decorazione     underline        <- sempre, anche a riposo
     colore          rgb(22,22,22)    <- lo STESSO inchiostro del testo normale
   Cioe' oggi l'unico segno che quello e' un comando e' la sottolineatura: toglierla e
   basta lo renderebbe indistinguibile da una cella qualsiasi. Quindi si scambiano i due
   segnali — colore a riposo, sottolineatura al passaggio del mouse — che e' l'idioma gia'
   adottato in casa per i link di cella (`.grid-cell-object-link`, grid-editorial.css).

   ⚠️ NON si scrive `text-decoration: none !important`: DevExpress rende la decorazione e
   il colore attraverso DUE VARIABILI del componente (misurate sull'elemento:
   --dxbl-btn-link-text-decoration = underline, --dxbl-btn-link-color = #161616).
   Riscrivendo le variabili SULLO STESSO elemento che le dichiara si resta dentro il
   meccanismo del componente: niente !important con cui litigare, e lo stato :hover
   continua a funzionare da se'.

   ⚠️ Il colore e' `--grid-link-color`, l'accento dichiarato da tutti e 7 gli editoriali
   (Indice #306174, Nitido #5b5443, Ampio #8a3348, Repertorio #3c6251, e i tre restanti col
   proprio token), con DOPPIO fallback: nella famiglia bootswatch quel token non esiste e
   senza fallback la dichiarazione cadrebbe per intero (§8.24). Il primo ripiego e'
   `--bs-link-color` — il colore-link che ogni tema Bootstrap dichiara per conto suo
   (misurato #0f6cbd sullo stack Fluent) — cosi' anche li' il bottone resta riconoscibile
   senza inventare una tinta.
   💡 Sta in site.css e non in un foglio di tema perche' vale per TUTTI (§54): non e' una
   scelta di palette, e' come si segnala un comando. */
.dxbl-btn.dxbl-btn-link {
    --dxbl-btn-link-text-decoration: none;
    --dxbl-btn-link-color: var(--grid-link-color, var(--bs-link-color, #0F6CBD));
    /* ⚠️ La terza riga NON e' ridondante, e me l'ha insegnata simplex. Di serie il colore
       lo porta la catena `--dxbl-btn-color: var(--dxbl-btn-link-color)`, che DevExpress
       dichiara in core.min.css — ma il ponte BOOTSWATCH (bootstrap-external.bs5.min.css)
       ridichiara `--dxbl-btn-color` sulla `.dxbl-btn` e la catena si spezza: misurato su
       simplex `--dxbl-btn-link-color: #d9230f` (il nostro ripiego, corretto) e insieme
       `--dxbl-btn-color: #212529`, cioe' il bottone restava dell'inchiostro del testo —
       e senza piu' la sottolineatura sarebbe stato INDISTINGUIBILE, un peggioramento.
       Rifacendo il collegamento qui, a specificita' (0,2,0), la catena regge in entrambe
       le famiglie. */
    --dxbl-btn-color: var(--dxbl-btn-link-color);
}

.dxbl-btn.dxbl-btn-link:hover,
.dxbl-btn.dxbl-btn-link:focus-visible {
    --dxbl-btn-link-text-decoration: underline;
}

/* --- La X DI CHIUSURA del popup: una misura propria, non quella delle icone ----------
   Segnalato dall'utente: "in alcuni temi la X è troppo piccola" — ed è vero solo in
   alcuni, perché di serie NON ha una misura sua. Misurato il meccanismo su Vespro:
     svg.dxbl-image { width: var(--dxbl-image-width); height: var(--dxbl-image-height) }
     .dxbl-image    { --dxbl-image-width/height: var(--dxds-spacing-200) }
   cioè la X eredita il token che dimensiona TUTTE le icone DevExpress, e quel token è
   per-tema (già censito nel §55.2: Nitido 20px, simplex 16px, Indice 14px). Da lì la
   differenza fra temi: identica causa, effetto diverso.
   ⚠️ La chiusura di una finestra modale non è un'icona come le altre: è un bersaglio da
   colpire, e deve avere la stessa misura ovunque. Quindi qui NON si eredita il token
   delle icone — se ne dichiara uno proprio, sullo stesso elemento che li consuma.
   💡 `--popup-close-size` resta la manopola: un tema che volesse discostarsi la ridichiara. */
.dxbl-popup-header-button .dxbl-image {
    --dxbl-image-width: var(--popup-close-size, 1.5rem);
    --dxbl-image-height: var(--popup-close-size, 1.5rem);
}