/* ============================================================
   Popup di editing "Articolo materie prime" (GridArticoloMPNew)
   Il popup DevExpress è renderizzato fuori dal componente (portal),
   quindi va stilato qui a livello globale, non nella CSS isolata.
   ============================================================ */
.articolomp-popup {
    width: min(1920px, 96vw) !important;
    height: auto !important;
}

/* Corpo del popup di inserimento rapido (TfxQuickAddCombo): con entità che hanno
   molti campi l'elenco può superare l'altezza dello schermo, quindi scorre. */
.quickadd-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Messaggi delle griglie figlie (TfxChildGrid): articolo non ancora salvato o caricamento. */
.childgrid-hint {
    padding: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

/* Avviso in modalità differita: le righe non sono ancora sul database. */
.childgrid-pending {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--bs-warning, #ffc107);
    background-color: rgba(255, 193, 7, 0.12);
    font-size: 0.875rem;
}
/* Pulsante "+" di inserimento rapido dentro le tendine di lookup:
   il carattere va reso più leggibile e ben centrato nel pulsante dell'editor. */
.quickadd-btn {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
}

/* ============================================================
   Griglia articoli MP (GridArticoloMPNew): toolbar e pager fissi,
   righe scorrevoli — l'effetto del virtual scrolling senza rinunciare
   alla paginazione.

   NB: queste regole stanno qui e non in GridArticoloMPNew.razor.css perche'
   l'host NON carica il bundle di CSS isolato del modulo: nella pagina finiscono
   solo app.css del core, gli stili del client, i temi DevExpress e questo file
   (servito da /api/module/css). Il CSS isolato di un componente del modulo non
   viene mai applicato — per questo anche .articolomp-formpage vive qui.

   La tab dell'host da' al contenitore un'altezza definita
   (.tabs-main-content > :only-child { height: 100% }): rendendolo flex, la
   griglia si ferma al bordo della tab invece di crescere col numero di righe.
   Con un'altezza limitata DxGrid usa la propria struttura nativa:

     .dxbl-grid                      (flex column)
       .dxbl-grid-toolbar-container  ← toolbar, flex-shrink: 0 → sempre visibile
       .dxbl-grid-top-panel          ← pannello di raggruppamento, idem
       .dxbl-scroll-viewer           ← flex-grow: 1, l'unica parte che scorre
         thead  position: sticky; top: 0     (intestazioni e riga dei filtri)
         tfoot  position: sticky; bottom: 0  (riepilogo totale)
       .dxbl-grid-bottom-panel       ← pager e selettore pagina, flex-shrink: 0
   ============================================================ */
.articolomp-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* min-height: la misura minima automatica di un flex item e' quella del contenuto,
   quindi senza un valore esplicito la griglia non si comprimerebbe e continuerebbe
   a sfondare la tab. Sotto le 20rem non conviene comprimerla: in quel caso sfonda
   e subentrano le regole sticky qui sotto. */
.articolomp-container .dxbl-grid {
    flex: 1 1 auto;
    min-height: 20rem;
}

/* Ripiego per la tab troppo bassa (finestra piccola, zoom del browser): lo
   scorrimento passa al contenitore della tab e la griglia scivolerebbe via tutta
   intera. Ancorando toolbar e pager al bordo dello scroller i comandi restano
   raggiungibili. A griglia contenuta nella tab queste regole sono inerti: non c'e'
   nulla che scorra e position: sticky si comporta come static.
   z-index 3 = quello delle celle fissate di DevExpress, cosi' la testata (2) passa sotto. */
.articolomp-container .dxbl-grid > .dxbl-grid-toolbar-container,
.articolomp-container .dxbl-grid > .dxbl-grid-top-panel {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--dxbl-grid-bg);
}

.articolomp-container .dxbl-grid > .dxbl-grid-bottom-panel {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: var(--dxbl-grid-bg);
}

/* Barra di scorrimento dell'area dati. DevExpress nasconde quelle native
   (scrollbar-width: none) e disegna le proprie in overlay, che pero' app.css del core
   annulla: con le griglie a tutta pagina duplicavano quella del browser. Qui a scorrere
   e' la griglia e non la pagina, quindi senza barra si scorrerebbe alla cieca: si
   riabilita quella nativa, coerente con la scelta del core, invece dell'overlay
   DevExpress (che compare solo quando il suo JS aggiunge .dxbl-active).
   I tre livelli di classe servono a passare davanti alla regola del tema. */
.articolomp-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    scrollbar-width: thin;
}

.articolomp-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 10px;
}

/* Le righe si trascinano SOLO dalla maniglia che DxGrid aggiunge a sinistra quando
   AllowDragRows e' attivo (RowDragAnchorCell): non esiste un'opzione per trascinare
   dal corpo della riga, quindi il cursore lo rende evidente — altrimenti si prova a
   spostare la riga afferrandola altrove e sembra che il riordino non funzioni. */
.articolomp-container .dxbl-grid-row-drag-anchor-cell {
    cursor: grab;
}

.articolomp-container .dxbl-grid-row-drag-anchor-cell:active {
    cursor: grabbing;
}

/* Form articoli MP a pagina intera (ArticoloMPForm), ospitato in una tab dell'host.
   Stessa impostazione della griglia: il contenitore riempie la tab, la barra dei comandi
   resta ferma in alto e a scorrere e' solo l'area delle sezioni. */
.articolomp-formpage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0.5rem;
}

/* EditForm renderizza un <form>, che si trova in mezzo fra il contenitore e le sue parti:
   se resta un blocco l'altezza non arriva piu' giu' e la catena flex si interrompe qui. */
.articolomp-formpage > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Barra dei comandi del form: navigazione a sinistra, titolo al centro, azioni a destra.
   Ferma in alto come la toolbar della griglia: flex-shrink: 0 la tiene fuori dall'area che
   scorre (le sezioni), position: sticky copre il caso in cui a scorrere sia la tab — finestra
   bassa, zoom del browser, sezioni tutte espanse. Dove non scorre nulla sticky si comporta
   come static, quindi la regola e' inerte.

   Lo sfondo e' obbligatorio: da trasparente il contenuto passerebbe sotto la barra
   restando visibile. Il token e' quello della superficie neutra del tema (lo stesso valore
   dello sfondo pagina) e non --dxbl-grid-bg, che il tema definisce solo dentro .dxbl-grid.

   La spaziatura sotto e' padding e non margin: il margine non fa parte del riquadro
   incollato, quindi le righe in scorrimento si vedrebbero in quella fascia. */
.formpage-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--dxbl-grid-border-color, rgba(128, 128, 128, 0.3));
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
}

/* Elenco degli errori di ValidationSummary: sta fra barra e sezioni e deve restare intero. */
.articolomp-formpage .validation-errors {
    flex: 0 0 auto;
    margin: 0;
}

/* Corpo della richiesta di conferma all'uscita (DxPopup): senza un po' d'aria il testo
   resta incollato ai bordi della finestra. */
.formpage-confirm {
    padding: 0.5rem 0.25rem;
}

.articolomp-editform {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
}

/* La barra comandi ora contiene un solo figlio, il TfxToolbarBase: gli si lascia
   tutta la riga, e l'allineamento a destra di "Chiudi" lo gestisce la toolbar. */
.formpage-toolbar > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Riga con l'identita' del record, sotto la barra comandi. */
.formpage-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
}

.formpage-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* "n di m": indica dove ci si trova mentre si scorre coi chevron. */
.formpage-position {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Menu di filtro personalizzato sulle colonne di testo: criterio, testo e pulsanti
   incolonnati, con una larghezza minima perché il menu non nasca troppo stretto. */
.colfilter {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    min-width: 17rem;
}

.colfilter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.colfilter-field {
    display: block;
    margin-top: 0.125rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
}

.colfilter-label {
    margin-top: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    font-weight: 600;
}

.colfilter-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: lowercase;
}

.colfilter-mode-contains { background: #6c757d; }
.colfilter-mode-starts   { background: var(--bs-primary, #0d6efd); }

.colfilter-hint {
    display: flex;
    gap: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
}

.colfilter-hint b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.15rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    font-size: 0.7rem;
}

/* Indicatore persistente nella testata: il filtro resta riconoscibile anche
   dopo la chiusura del popup. Al passaggio del mouse la lettera si espande
   nel significato completo, senza consumare spazio nella griglia. */
.articolomp-filter-active {
    position: relative;
}

.articolomp-filter-active::after {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 2rem;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.articolomp-filter-contains::after {
    content: "c";
    background: #6c757d;
}

.articolomp-filter-starts::after {
    content: "i";
    background: var(--bs-primary, #0d6efd);
}

/* Righe alternate (classe assegnata da CustomizeElement alle righe dispari).

   NON si imposta background-color: il tema lo applica già con
   `.dxbl-grid .dxbl-grid-table>tbody>tr { background-color: var(--dxbl-grid-row-bg) }`,
   selettore a specificità (0,3,3) contro cui una singola classe perde sempre — è il
   motivo per cui la prima versione sembrava non fare nulla.

   Si sovrascrive invece la *variabile* sulla riga: la regola del tema resta quella, ma
   risolve al nostro valore. Hover, selezione e focus leggono variabili diverse
   (--dxbl-grid-hover-bg, --dxbl-grid-selection-bg, --dxbl-grid-focus-bg) con selettori
   più specifici, quindi continuano a prevalere senza bisogno di !important.
   Il fallback del var() copre il caso in cui il token del design system non sia caricato.

   NB: la documentazione mostra anche una variante per i temi DevExpress/Bootstrap che
   colora le `td` con !important. Le due varianti sono ALTERNATIVE per famiglia di tema,
   non cumulative: qui il tema e' Fluent e l'hover di riga si applica al <tr>, quindi celle
   opache lo coprirebbero facendo sparire l'hover proprio sulle righe alternate. */
.alt-item {
    --dxbl-grid-row-bg: var(--dxds-color-surface-neutral-subdued-rest, rgba(180, 180, 180, 0.09));
}

/* Zoom su FK composita (TfxPairZoom): i comandi sono DxEditorButton dentro la casella,
   come in TfxZoom, quindi non serve alcun layout aggiuntivo — solo l'hint sotto. */

/* Spiega perché il pulsante di apertura è disabilitato (campo collegato ancora vuoto). */
.pairzoom-hint {
    margin-top: 0.15rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
    font-style: italic;
}

/* La griglia della lookup vive dentro il popup: le va dato un tetto in altezza,
   altrimenti con molte righe il footer con Conferma/Annulla finisce fuori schermo. */
.pairzoom-popup .dxbl-grid {
    max-height: 60vh;
}

/* Messaggi delle griglie figlie (TfxChildGrid): articolo non ancora salvato o caricamento. */

/* ============================================================
   Icone della toolbar (Nuovo/Modifica/Elimina/Aggiorna/Colonne).
   Renderizzate come maschera SVG in currentColor: seguono il colore
   del testo del pulsante e quindi si adattano a tema e RenderStyle.
   !important perché DevExpress applica le proprie regole (mask/size)
   sullo stesso elemento icona e va sovrascritto.
   ============================================================ */
.tbi {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: 18px 18px !important;
}        



.tbi-new {    
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") !important;
}

.tbi-edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
}

.tbi-delete {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") !important;
}

.tbi-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") !important;
}

.tbi-columns {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h4v14H4zm6 0h4v14h-4zm6 0h4v14h-4z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h4v14H4zm6 0h4v14h-4zm6 0h4v14h-4z'/%3E%3C/svg%3E") !important;
}

/* Note lunghe (nvarchar(max)) nelle griglie figlie: senza un limite la misura automatica
   delle colonne allargherebbe la cella quanto il testo più lungo, spingendo tutte le altre
   colonne fuori schermo. Il testo intero resta visibile aprendo la cella in modifica. */
.childgrid-memo-cell {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}   

/* ============================================================
   Dettaglio della variante selezionata (ArticoloMPVarianteDettaglio),
   dentro la sezione Varianti del form articoli MP.

   Come per il resto del modulo gli stili stanno qui e non in un .razor.css:
   l'host non carica il bundle di CSS isolato del modulo (vedi la nota sopra
   su .articolomp-container).
   ============================================================ */
.variante-dettaglio {
    margin-top: 0.75rem;
}

/* Terna che identifica la variante: sta sopra le schede perche' e' il contesto
   di tutto quello che segue, comprese le colonne che le griglie non mostrano. */
.variante-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0.75rem 1rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.variante-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
}

.variante-chip-label {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.variante-chip-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

/* Campione del colore: quadratino accanto alla descrizione. Il bordo serve
   quando il colore e' chiarissimo, altrimenti sparirebbe sullo sfondo. */
.variante-chip-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.variante-tab-body {
    padding-top: 0.75rem;
}

/* Le tre anagrafiche affiancate finche' c'e' spazio: sotto i 900px la riga si
   spezza e i riquadri si impilano. */
.variante-anagrafiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
}

.variante-card {
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.variante-card-title {
    font-weight: 600;
}

.variante-card-code {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.variante-card-empty {
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
}

/* Etichetta a sinistra e valore a destra, allineati su due colonne: con un dl
   normale le descrizioni lunghe manderebbero fuori registro le righe sotto. */
.variante-card-fields {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}

.variante-card-fields dt {
    font-weight: 400;
    color: var(--bs-secondary-color, #6c757d);
}

.variante-card-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ============================================================
   Barra comandi del form generato dal core (TfxFormLayout): sempre visibile.

   Struttura verificata sul DOM dell'app in esecuzione, aprendo un record in
   Visualizza/Modifica:

     .dxbl-tabs-content   ← overflow-y: auto, altezza fissa: e' QUESTO che scorre
       .tabs-main-content
         .external-form-container
           form
             dxbl-form-layout.dxbl-fl
               .dxbl-row                     (flex wrap)
                 .tfx-base-toolbar-container ← la barra
                 .content-container          ← i campi

   A scorrere non e' un contenitore interno al form ma la tab che lo ospita,
   quindi la barra — elemento in flusso come tutto il resto — se ne andava su
   con il contenuto. Non serve rifare la catena flex del form (come per
   .articolomp-formpage, dove a scorrere e' il form stesso): basta ancorarla,
   perche' il riquadro di riferimento di sticky e' .dxbl-row, che copre tutta
   l'altezza del form, e nessun antenato fra scroller e barra ritaglia
   (overflow visible su tutti, verificato).

   Nessuno sfondo qui: la barra ne ha gia' uno opaco dal core
   (--tfx-toolsbar-bgcolor, #f4f4f3), quindi i campi non traspaiono.
   z-index 3 come le altre regole incollate di questo file.

   Il secondo selettore prende la stessa barra quando il form si apre in un
   popup invece che in una tab (EditMode = PopupEditForm, es. la variante MP):
   li' manca .external-form-container, ma il markup del form e' identico. Il
   primo selettore, che non usa :has(), copre da solo il caso della tab.
   ============================================================ */
.external-form-container .tfx-base-toolbar-container,
.dxbl-row:has(> .content-container) > .tfx-base-toolbar-container {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ============================================================
   Lista materie prime in stile Arca Evolution (GridArticoloMPDemo).

   Tre cose sole, che sono quelle che danno l'aria del gestionale:
   righe fitte con i separatori di colonna, colore di riga per stato,
   legenda in fondo. Tutto il resto e' la griglia del core.

   Vale anche qui la nota generale del file: il CSS isolato del modulo
   non arriva mai in pagina, quindi queste regole stanno qui.
   ============================================================ */

/* La tab dell'host da' altezza al contenitore (.tabs-main-content > :only-child):
   rendendolo flex, la griglia si ferma sopra la legenda invece di spingerla fuori. */
.arca-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

    .arca-shell .dxbl-grid {
        flex: 1 1 auto;
        min-height: 0;
    }

/* Densita': carattere piu' piccolo e celle strette, con il filo verticale fra le
   colonne che in Arca c'e' sempre. Le righe restano su una riga sola: il testo
   troncato e' preferibile a righe di altezza diversa quando se ne leggono trenta. */
.arca-grid {
    font-size: 0.78rem;
}

    .arca-grid .dxbl-grid-table > tbody > tr > td,
    .arca-grid .dxbl-grid-table > thead > tr > th {
        padding: 0.15rem 0.4rem;
        border-right: 1px solid var(--dxbl-grid-border-color, rgba(128, 128, 128, 0.25));
        white-space: nowrap;
    }

    .arca-grid .dxbl-grid-table > thead > tr > th {
        font-weight: 600;
    }

/* Stato della riga. Si colora il testo e non lo sfondo: il tema applica lo sfondo
   con un selettore piu' specifico (vedi la nota su .alt-item qui sopra), e la
   selezione della riga deve restare riconoscibile. */
.arca-row-sospeso > td {
    color: #c05600;
}

.arca-row-misure > td {
    color: #0a58ca;
}

/* Quadratino della colonna "Attributi" e della legenda. */
.arca-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
}

.arca-badge-sospeso {
    background-color: #e8890c;
}

.arca-badge-misure {
    background-color: #0a58ca;
}

.arca-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--dxbl-grid-border-color, rgba(128, 128, 128, 0.25));
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.arca-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* =========================================================
   Upload immagine (TfxImageUploadEditor)
   I *.razor.css del modulo non arrivano mai in pagina: gli
   stili dei componenti stanno qui.
   ========================================================= */
.tfx-image-upload {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.tfx-image-upload__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid var(--dxbl-grid-border-color, rgba(128, 128, 128, 0.25));
    border-radius: 6px;
    background-color: var(--bs-body-bg, #fff);
}

.tfx-image-upload__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tfx-image-upload__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 260px;
    min-width: 0;
}

.tfx-image-upload__info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.tfx-image-upload__name {
    font-weight: 600;
    overflow-wrap: anywhere;
    color: var(--bs-body-color, #212529);
}

.tfx-image-upload__error {
    color: var(--bs-danger, #dc3545);
}