html, body {
    /* ⚠️ IL CARATTERE SI DECIDE IN UN POSTO SOLO: --sedna-font-sans (sedna.tokens.css).
       Qui c'era `system-ui` scritto a mano (nota «D30 ripristinato: zero web font
       download»), che significava: ogni postazione il suo carattere. E' esattamente il
       difetto misurato il 2026-08-04 — due caratteri diversi nella stessa schermata —
       e per ora non si vedeva solo perche' sedna.base.css si carica DOPO questo file e
       vinceva su `body`. Bastava riordinare i <link> in index.html per cambiare faccia
       a tutta l'app senza che nessuno capisse perche'.
       Il ripiego di sistema resta nel token, per il caso in cui il file non arrivi. */
    font-family: var(--sedna-font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--sedna-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--sedna-primary);
    border-color: var(--sedna-primary-active);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--sedna-primary);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sedna-success-500);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px color-mix(in srgb, black 20%, transparent);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--sedna-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--sedna-accent-700);
}

.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;
}

/* ===================================
   FIX OVERFLOW ORIZZONTALE PAGINE CON GRIGLIA
   Il content è un flex child di .sedna-main-layout: senza min-width:0 il suo
   min-width:auto = min-content, quindi una griglia larga (molte colonne) lo fa
   crescere oltre il viewport → l'header e i pulsanti (Nuovo/Salva) finiscono
   fuori schermo. min-width:0 lo lascia restringere alla larghezza disponibile;
   la griglia interna gestisce da sé lo scroll orizzontale.
   (Override locale; il posto "giusto" sarebbe sedna.layout.css del design system.)
   =================================== */
.sedna-main-layout > .sedna-main-content,
.sedna-main-content__inner {
    min-width: 0;
}

/* I container delle pagine dentro __inner (overflow:hidden) devono potersi
   restringere alla larghezza del content, altrimenti una griglia larga li fa
   sforare e header/pulsanti/colonne vengono CLIPPATI a destra. Inoltre il wrapper
   della griglia DevExpress deve scrollare orizzontalmente invece di essere tagliato. */
.sedna-main-content__inner > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.sedna-datagrid-wrapper {
    min-width: 0;
    overflow-x: auto;
}

/* ===================================
   SHARED ENTITY PAGE LAYOUT
   Used by Edit/Detail pages
   =================================== */

.entity-page {
    display: flex;
    flex-direction: column;
    padding: 0 0 1rem;
}

/* ===== Variante "header fisso, corpo scrollabile" =====
   La testata (SednaPageHead con l'action bar) resta sempre a video: scorre solo il
   corpo (.tab-content-grid). Opt-in per-pagina (non tutte le pagine entity hanno un
   .tab-content-grid come corpo, quindi non si può rendere globale senza clipping). */
.entity-page--sticky {
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.entity-page--sticky > :not(.tab-content-grid) {
    flex: 0 0 auto;
}
.entity-page--sticky > .tab-content-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

/* ===== DIRTY INDICATOR ===== */
.dirty-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sedna-warning-600);
    padding: 0.25rem 0.625rem;
    border-radius: var(--sedna-radius-full);
    background: color-mix(in srgb, var(--sedna-warning-600) 10%, transparent);
    animation: dirty-pulse 2s ease-in-out infinite;
    white-space: nowrap;
}

.dirty-indicator i {
    font-size: 0.5rem;
}

@keyframes dirty-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== VIES LOOKUP BUTTON ===== */
/* ⚠️ ALTEZZA DEGLI INPUT, non dei bottoni (Antonio, 21/08). Sta in fila con la casella
   della P.IVA: due altezze diverse sulla stessa riga si vedono, e il pulsante piu' alto
   fa sembrare la casella affondata. Il fallback resta control-height-md per i temi che
   non dichiarano il token degli input. */
.vies-lookup-btn {
    min-width: var(--sedna-input-height, var(--sedna-control-height-md));
    height: var(--sedna-input-height, var(--sedna-control-height-md));
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sedna-input-height, var(--sedna-control-height-md));
    border: 1px solid var(--sedna-primary);
    border-radius: var(--sedna-radius-input);
    background: transparent;
    color: var(--sedna-primary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    font-size: 0.85rem;
}

.vies-lookup-btn:hover:not(:disabled) {
    background: var(--sedna-primary);
    color: #fff;
}

.vies-lookup-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== FIELD VALIDATION ERROR ===== */
.field-validation-error .dxbl-input-group,
.field-validation-error .dxbl-checkbox,
.field-validation-error .dxbl-combobox {
    border-color: var(--sedna-error) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sedna-error) 15%, transparent);
}

.field-validation-error .dxbl-input-group:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sedna-error) 30%, transparent);
}

.field-validation-error-msg {
    color: var(--sedna-error);
    font-size: 0.75rem;
    margin-top: 0.125rem;
    line-height: 1.2;
}

/* ===== TAB ERROR INDICATOR ===== */
.tab-has-errors {
    position: relative;
}

.tab-has-errors::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sedna-error);
    margin-left: 0.25rem;
    vertical-align: middle;
    animation: dirty-pulse 2s ease-in-out infinite;
}

/* ===== RECORD NAVIGATION BAR ===== */
.entity-nav-bar {
    display: flex;
    align-items: center;
    gap: var(--sedna-space-3);
    padding: var(--sedna-space-1) 0;
    margin-bottom: var(--sedna-space-1);
    border-bottom: 1px solid var(--sedna-border);
}

.entity-nav-bar__arrows {
    display: flex;
    align-items: center;
    gap: var(--sedna-space-1);
}

.entity-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sedna-control-height-sm);
    height: var(--sedna-control-height-sm);
    padding: 0;
    border-radius: var(--sedna-radius-input, 0.375rem);
    font-size: var(--sedna-text-xs);
}

    .entity-nav-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.entity-nav-bar__position {
    font-size: var(--sedna-text-xs);
    color: var(--sedna-text-secondary);
    white-space: nowrap;
    min-width: 5rem;
    text-align: center;
}

.entity-nav-bar__search {
    flex: 1;
    max-width: 320px;
}

/* Make the lookups compact inside nav bar */
.entity-nav-search-lookup,
.entity-nav-field-lookup {
    font-size: var(--sedna-text-sm);
}

.entity-nav-bar__field-search {
    flex: 1;
    max-width: 280px;
}

@media (max-width: 576px) {
    .entity-nav-bar__search,
    .entity-nav-bar__field-search {
        display: none;
    }

    .entity-nav-bar {
        gap: 0.5rem;
    }
}

/* Full-width sections inside CSS grid need grid-column span on wrapper div */
.tab-content-grid > .sedna-form-section--full {
    grid-column: 1 / -1;
}

/* ── L'ETICHETTA SOPRA IL CAMPO, anche nelle maschere a schede ────────────────
   ⚠️ Antonio, 27/08, sulle causali contabili: «tra l'etichetta e i campi perdiamo
   tantissimo spazio». Non e' quella pagina: DevExpress mette l'etichetta A FIANCO e le
   da' una colonna larga (--dxbl-fl-caption-width-large-screen), quindi accanto a
   «Codice *» restano centosessanta pixel di niente prima che cominci l'input.

   ⚠️ La correzione esisteva gia', ma solo per META' del programma: le stesse tre
   righe sono scritte piu' su per .pz-primary__form e .pz-main, cioe' le maschere delle
   anagrafiche. Le maschere a schede — causali contabili, causali di magazzino, registri
   IVA, aliquote, dati ditta, banche d'appoggio, unita' di misura, causali di trasporto:
   otto in tutto — erano rimaste indietro, e lo stesso programma sembrava disegnato da
   due mani diverse a seconda del modulo.

   L'etichetta SOPRA, e non una colonna piu' stretta: accorciarla farebbe troncare le
   didascalie lunghe («Causale Giroconto IntraCEE»), e un'etichetta che non si legge e'
   peggio dello spazio sprecato. */
.tab-content-grid .dxbl-fl-item.dxbl-fl-item-horizontal {
    flex-flow: column nowrap !important;
    align-items: stretch;
}

.tab-content-grid .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
    text-align: left;
}

/* Nota informativa sotto un form (es. "le rate si gestiscono nella pagina dedicata"). */
.entity-hint {
    display: flex;
    align-items: center;
    gap: var(--sedna-space-2, .5rem);
    margin-top: var(--sedna-space-3, .75rem);
    font-size: var(--sedna-text-sm, .875rem);
    color: var(--sedna-text-secondary);
}

/* Campo di sola lettura nei form (es. E/P ereditato dal padre): allinea il badge
   all'altezza degli input adiacenti del DxFormLayout. */
.sedna-readonly-field {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
}

.entity-alert {
    display: flex;
    align-items: center;
    gap: var(--sedna-space-3);
    padding: var(--sedna-space-3) var(--sedna-space-4);
    margin-bottom: var(--sedna-space-4);
    border-radius: var(--sedna-radius-lg);
    background: var(--sedna-state-error-bg);
    border: 1px solid var(--sedna-error-500);
    color: var(--sedna-error-700);
    font-size: var(--sedna-text-sm);
    font-weight: 500;
}

    .entity-alert i {
        font-size: var(--sedna-text-base);
        flex-shrink: 0;
    }

    .entity-alert span {
        flex: 1;
    }

.entity-alert__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--sedna-error-700);
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

    .entity-alert__dismiss:hover {
        opacity: 1;
    }

.entity-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--sedna-bg) 75%, transparent);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.entity-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sedna-space-4);
    padding: var(--sedna-space-8);
    background: var(--sedna-surface, white);
    border-radius: var(--sedna-radius-xl);
    box-shadow: var(--sedna-shadow-lg);
    font-weight: 500;
    color: var(--sedna-text-secondary);
}

/* ===================================
   SHARED FORM TAB LAYOUT
   Used by FormTab child components
   =================================== */

/* Fix DxTabs layout: ensure all containers in the tab hierarchy stretch full width.
   Uses wildcard with entity-page scope to catch any DevExpress internal wrappers. */
.entity-page .sedna-tabs,
.entity-page .sedna-tabs * {
    max-width: 100%;
}

/* Override the display:flex on .dxbl-tabs to use flex-wrap so the content panel
   drops below the tab buttons instead of sitting beside them */
.entity-page .dxbl-tabs {
    flex-wrap: wrap !important;
}

/* Force the tab page content to take full row width in the flex layout */
.entity-page [class*="tab-page"],
.entity-page [class*="tab-panel"],
.entity-page [class*="tabs-panel"],
.entity-page [class*="tabs-content"],
.entity-page [class*="tab-pane"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Two-column grid layout for form sections (collapsible accordion tabs) */
.tab-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sedna-space-4);
    padding: var(--sedna-space-4) 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: start;
}

/* Full-width sections span both columns */
.tab-content-grid > .sedna-form-section--full {
    grid-column: 1 / -1;
}

/* Legacy: single row with 2 columns (kept for backward compat) */
.tab-content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sedna-space-3);
    width: 100%;
    min-width: 0;
    align-items: start;
}

/* Ensure cards fill available width and prevent overflow */
.tab-content-grid > .sedna-card,
.tab-content-row > .sedna-card {
    min-width: 0;
    width: 100%;
}

/* Compact card variant for form sections */
.sedna-card--compact .sedna-card__header {
    padding: var(--sedna-space-2) var(--sedna-space-3);
    border-bottom: 1px solid var(--sedna-border);
}

.sedna-card--compact .sedna-card__body {
    padding: var(--sedna-space-3);
}

.sedna-card--compact .sedna-card__title {
    font-size: var(--sedna-text-sm);
}

/* ===================================
   PRIORITY ZONES LAYOUT (pz-*)
   3 zones: primary (hero), main (2-col), secondary (collapsed)
   Designed for low-tech-literacy users
   =================================== */

/* --- Layout container --- */
.pz-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
    width: 100%;
}

/* --- ZONA PRIMARIA: campi essenziali (D30: niente border-left side-tab) ---
   Fondo leggermente distinto (banda) per dare focus primario chiaro come da
   design Dettaglio: la zona dati-principali risalta sopra le sezioni bianche. */
.pz-primary {
    background: var(--sedna-bg-subtle);
    border: 1px solid var(--sedna-border);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
}

/* D33: tabella Bootstrap con header chiaro (no più table-dark heavy).
   Riusabile per Invoices e qualunque tabella semplice non-DxGrid. */
.sedna-invoices-table thead th {
    background: var(--sedna-bg-subtle);
    color: var(--sedna-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--sedna-border);
}

/* D32: sotto-gruppi nella zona primaria (Identificazione vs Contatti)
   Mini-heading muted uppercase + divider sottile per separare visivamente
   le 2 famiglie di campi senza appesantire il layout. */
.pz-primary__group-label {
    font-size: 0.6875rem;        /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sedna-text-tertiary);
    margin-bottom: 0.375rem;
}

.pz-primary__group-divider {
    height: 1px;
    background: var(--sedna-border);
    margin: 0.75rem 0;
}

.pz-primary__form .dxbl-fl-group {
    gap: 0.375rem 0.75rem;
}

/* V1: zona primaria — impila la caption SOPRA l'editor (fix sistemico).
   DevExpress rende i FormLayoutItem in orizzontale (.dxbl-fl-item-horizontal):
   la caption prende --dxbl-fl-caption-width-large-screen e su ColSpanMd piccoli
   (Codice=2, P.IVA/CF=3) all'editor restano pochi px -> valori troncati/invisibili.
   Forzando il flow a colonna l'editor usa l'intera larghezza della sua colonna.
   Vale per tutti i GeneraleFormTab (Clienti/Fornitori/Vettori/Articoli/Imballaggi). */
.pz-primary__form .dxbl-fl-item.dxbl-fl-item-horizontal {
    flex-flow: column nowrap !important;
}

.pz-primary__form .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
}

/* B (audit pattern input-stretto): stessa logica caption-verticale anche per la
   ZONA PRINCIPALE (.pz-main). I form a 2 colonne con ColSpanMd piccoli schiacciavano
   l'editor (caption | editor orizzontale); impilando la caption sopra, l'editor usa
   tutta la larghezza della sua colonna. Coerente con .pz-primary già adottata.
   Vale per tutti i FormTab in .pz-main (Clienti/Fornitori/Vettori/Articoli/Imballaggi/Ditte). */
.pz-main .dxbl-fl-item.dxbl-fl-item-horizontal {
    flex-flow: column nowrap !important;
}

.pz-main .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
}

/* Input leggermente piu grande nella zona primaria */
.pz-primary .dxbl-text-edit,
.pz-primary .dxbl-spin-edit,
.pz-primary .dxbl-combobox {
    font-size: 0.9375rem;
}

/* --- ZONA PRINCIPALE: 2 colonne, campi normali --- */
.pz-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

.pz-main__col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* --- Sezione generica (usata in main + secondary) --- */
.pz-section {
    border: 1px solid var(--sedna-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    background: var(--sedna-surface);
}

.pz-section__title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sedna-text-secondary);
    margin: 0 0 0.375rem 0;
    padding-bottom: 0.3125rem;
    border-bottom: 1px solid var(--sedna-border);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pz-section__title i {
    font-size: 0.75rem;
    opacity: 0.65;
}

/* Variante muted per zona secondaria */
.pz-section--muted {
    background: var(--sedna-surface-muted);
    border-color: var(--sedna-border-light);
}

/* --- ZONA SECONDARIA: raramente usata, collapsata --- */
.pz-secondary {
    border: 1px solid var(--sedna-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.pz-secondary__toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: var(--sedna-surface-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sedna-text);
    transition: background 0.15s;
}

.pz-secondary__toggle:hover {
    background: var(--sedna-surface-hover);
}

.pz-secondary__toggle i {
    font-size: 1rem;
    color: var(--sedna-primary);
}

.pz-secondary__hint {
    font-weight: 400;
    color: var(--sedna-text-secondary);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.pz-secondary__hint::before {
    content: "—";
    margin-right: 0.375rem;
}

.pz-secondary__content {
    padding: 0.625rem 0.75rem 0.75rem;
    border-top: 1px solid var(--sedna-border);
}

.pz-secondary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.625rem;
    align-items: start;
}

/* ===================================
   RESPONSIVE FORM TAB LAYOUT
   =================================== */

@media (max-width: 1200px) {
    .pz-secondary__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .pz-main {
        grid-template-columns: 1fr;
    }

    .pz-secondary__grid {
        grid-template-columns: 1fr;
    }

    .tab-content-grid,
    .tab-content-row {
        grid-template-columns: 1fr;
    }

    /* Full-width override not needed on single column */
    .tab-content-grid > .sedna-form-section--full {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .entity-page {
        padding: 0 0 1rem;
    }

    .tab-content-grid {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .tab-content-row {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .tab-content-grid {
        gap: 0.375rem;
        padding: 0.5rem 0;
    }

    .sedna-card--compact .sedna-card__body {
        padding: 0.5rem;
    }

    .sedna-card--compact .sedna-card__header {
        padding: 0.375rem 0.5rem;
    }

    .entity-page {
        padding: 0 0 0.5rem;
    }
}

/* ===== DEVEXPRESS SLIM HEIGHT OVERRIDES ===== */
/* Force DevExpress components to use Sedna slim control heights.
   DX SizeMode.Medium generates its own height CSS which we must override. */

.sedna-app .dxbl-combobox,
.sedna-app .dxbl-tagbox,
.sedna-app .dxbl-dropdownedit,
.sedna-app .dxbl-edit,
.sedna-app .dxbl-textbox,
.sedna-app .dxbl-spin-edit,
.sedna-app .dxbl-date-edit,
.sedna-app .form-control {
    height: var(--sedna-control-height-md) !important;
    min-height: var(--sedna-control-height-md) !important;
}

/* DxComboBox internal input must also shrink */
.sedna-app .dxbl-combobox .dxbl-edit,
.sedna-app .dxbl-combobox input.dxbl-edit,
.sedna-app .dxbl-tagbox .dxbl-edit,
.sedna-app .dxbl-dropdownedit .dxbl-edit,
.sedna-app .dxbl-dropdownedit input {
    height: 100% !important;
    min-height: 0 !important;
    padding: var(--sedna-input-padding-y) var(--sedna-input-padding-x) !important;
    font-size: var(--sedna-text-sm) !important;
}

/* DX input-group wrapper must match */
.sedna-app .dxbl-input-group {
    height: var(--sedna-control-height-md) !important;
    min-height: var(--sedna-control-height-md) !important;
    border-radius: var(--sedna-radius-input) !important;
}

/* DX dropdown arrow button inside combobox */
.sedna-app .dxbl-edit-btn,
.sedna-app .dxbl-combobox .dxbl-btn-group .dxbl-edit-btn {
    height: 100% !important;
    width: var(--sedna-control-height-sm) !important;
    padding: 0 !important;
    font-size: var(--sedna-text-xs) !important;
}

/* Pulsante "clear" (X) compatto: di default è largo quanto il pulsante dropdown e
   nelle celle/campi stretti ruba spazio al valore. Lo restringiamo e riduciamo la
   sua icona così il testo resta leggibile. */
.sedna-app .dxbl-edit-btn-clear,
.sedna-app .dxbl-btn-clear {
    width: 1.1rem !important;
    min-width: 1.1rem !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.sedna-app .dxbl-edit-btn-clear .dxbl-image,
.sedna-app .dxbl-edit-btn-clear svg,
.sedna-app .dxbl-edit-btn-clear i,
.sedna-app .dxbl-btn-clear .dxbl-image,
.sedna-app .dxbl-btn-clear svg,
.sedna-app .dxbl-btn-clear i {
    font-size: 0.7rem !important;
    width: 0.7rem !important;
    height: 0.7rem !important;
}

/* Allineamento di default in base al contenuto: input TESTUALI a sinistra, input
   NUMERICI a destra.

   ⚠️ IL `:not(.sedna-num)` È LA PARTE CHE CONTA, e ci è costato caro (Antonio, 2026-08-17:
   «numero protocollo e numero documento non sono allineati a destra»). Nella 25.2 il
   DxSpinEdit rende un input di classe `dxbl-text-edit-input` DENTRO un `.dxbl-text-edit`:
   quindi combaciava con la regola testuale qui sopra e NON con quella numerica sotto —
   `.dxbl-spin-edit` non esiste più nel markup. Risultato: ogni numero della testata stava
   a sinistra, e la regola numerica sembrava esserci mentre non prendeva niente.
   `sedna-num` è il marcatore che SednaSpinEdit mette su ogni suo input: escluderlo qui è
   il modo di non far dipendere l'allineamento dal nome che DevExpress dà alle sue classi.
   Override per-istanza via CssClass se serve. */
.sedna-app .dxbl-text-edit input:not(.sedna-num),
.sedna-app input[type="text"]:not(.sedna-num) {
    text-align: left;
}

.sedna-app input.sedna-num,
.sedna-app .dxbl-spin-edit input,
.sedna-app .dxbl-spin-edit-input,
.sedna-app input[type="number"] {
    text-align: right;
}

/* Memo/textarea exemption (multi-line must auto-height) */
.sedna-app .dxbl-memo,
.sedna-app textarea.dxbl-edit {
    height: auto !important;
    min-height: calc(var(--sedna-control-height-md) * 2) !important;
}

/* ===== SednaLookup con pulsante ricerca avanzata ===== */

/* Container: input-group style */
.sedna-lookup-container {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}

/* Il DxComboBox occupa tutto lo spazio disponibile */
.sedna-lookup-container > :first-child {
    flex: 1;
    min-width: 0;
}

/* Rimuovi border-radius destro a TUTTI i livelli interni del DxComboBox */
.sedna-lookup--grouped,
.sedna-lookup--grouped > div,
.sedna-lookup--grouped .dxbl-input-group,
.sedna-lookup--grouped .dxbl-dropdownedit,
.sedna-lookup--grouped .dxbl-edit,
.sedna-lookup--grouped .dxbl-combobox,
.sedna-lookup--grouped .dxbl-btn-group,
.sedna-lookup--grouped .dxbl-btn-group > :last-child,
.sedna-lookup--grouped .dxbl-edit-btn:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Rimuovi bordo destro del combo nel gruppo per fusione seamless */
.sedna-lookup--grouped .dxbl-input-group {
    border-right: none !important;
}

/* Pulsante ricerca avanzata: visivamente fuso col combo */
.sedna-lookup-search-btn {
    border-radius: 0 var(--sedna-radius-input, 0.375rem) var(--sedna-radius-input, 0.375rem) 0 !important;
    padding: 0 var(--sedna-space-2) !important;
    min-width: var(--sedna-control-height-md);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sedna-text-sm);
    border: 1px solid var(--sedna-border) !important;
    border-left: none !important;
    background: var(--sedna-surface);
    color: var(--sedna-text-secondary);
    cursor: pointer;
    transition: all var(--sedna-transition-fast, 150ms ease);
    margin: 0;
    box-sizing: border-box;
    align-self: stretch;
}

.sedna-lookup-search-btn:hover {
    background: var(--sedna-primary-subtle);
    color: var(--sedna-primary);
    border-color: var(--sedna-primary) !important;
    border-left: 1px solid var(--sedna-primary) !important;
    z-index: 1;
}

.sedna-lookup-search-btn:active {
    background: var(--sedna-primary-subtle-hover);
}

.sedna-lookup-search-btn:focus-visible {
    outline: 2px solid var(--sedna-focus-color);
    outline-offset: -2px;
    z-index: 2;
}

/* Assicura che il combo non abbia margine destro */
.sedna-lookup-container > .sedna-lookup--grouped {
    margin-right: 0 !important;
}

/* Dropdown del DxComboBox dentro SednaLookup: garantisce una larghezza minima
   leggibile anche quando l'editor e' molto stretto (es. lookup Causale a 170px)
   e quando l'auto-search filtra a pochi elementi. */
.sedna-lookup-dropdown,
.dxbl-popup-list-edit.sedna-lookup-dropdown {
    min-width: 320px !important;
}

/* La griglia nella modal ricerca avanzata riempie lo spazio */
/* --- Ricerca avanzata popup --- */

/* Forza la popup ad adattarsi al contenuto, non riempire lo schermo */
.sedna-lookup-popup .dxbl-popup-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

/* Impedisce alla popup di avere un'altezza fissa - si adatta al contenuto */
.sedna-lookup-popup .dxbl-popup-content {
    height: auto !important;
}

.sedna-lookup-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

/* Banner "codice non valido" mostrato quando la ricerca avanzata viene aperta
   perché il codice digitato non corrisponde a nessun elemento. */
.sedna-lookup-invalid-code {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.75rem 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--sedna-radius-md, 0.375rem);
    background: var(--sedna-error-50);
    color: var(--sedna-error-700);
    border: 1px solid var(--sedna-error-500);
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sedna-lookup-search-box {
    flex: 1;
    min-width: 0;
}

.sedna-lookup-search-input {
    width: 100%;
}

.sedna-lookup-colchooser-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-input, 0.375rem);
    background: var(--sedna-surface);
    color: var(--sedna-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.sedna-lookup-colchooser-btn:hover {
    background: var(--sedna-surface-hover);
    color: var(--sedna-text);
    border-color: var(--sedna-primary);
}

.sedna-lookup-grid-wrapper {
    overflow: auto;
    max-height: 50vh;
    padding: 0 0.75rem 0.5rem;
}

.sedna-lookup-grid {
    width: 100%;
    /* Nessuna personalizzazione di focus/selezione: stile riga focused/selezionata
       100% NATIVO DevExpress (testo leggibile, radio visibile e selezionabile). Le
       precedenti override subtle, sul tema 25.2.8, rendevano testo e radio invisibili. */
}

/* La griglia di ricerca avanzata occupa TUTTA la larghezza disponibile nella popup:
   forziamo il root .dxbl-grid e la table interna a riempire il wrapper (DevExpress
   imposta una larghezza inline sul contenuto che lascia spazio vuoto a destra —
   per questo serve !important). */
/* La griglia riempie la larghezza della popup come le griglie lista: DxGrid si stira
   quando il root è width:100% E c'è una colonna FLESSIBILE (MinWidth senza Width) che
   assorbe il residuo — quella colonna è garantita lato componente (SednaLookup).
   NB: niente table-layout:fixed, che renderebbe rigide le larghezze e impedirebbe alla
   colonna flessibile di stirarsi. */
.sedna-lookup-grid,
.sedna-lookup-grid .dxbl-grid,
.sedna-lookup-grid .dxbl-grid-table,
.sedna-lookup-grid .dxbl-grid-table-container {
    width: 100% !important;
    min-width: 100% !important;
}

/* Righe compatte, no text-wrap in celle e header */
.sedna-lookup-grid .dxbl-grid-table td,
.sedna-lookup-grid .dxbl-grid-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Editor anagrafica in modal (dalla ricerca avanzata) ===== */
/* UN SOLO scroll: scrolla il BODY del popup (header e footer del modal restano fissi);
   l'host interno non ha overflow proprio (evita la doppia barra di scroll). */
.sedna-entity-editor-popup .dxbl-popup-body {
    padding: 0;
    overflow-y: auto;
}

.sedna-entity-editor-host {
    padding: 0.25rem 0.75rem 0.5rem;
}

/* ═══ Spinner Bootstrap → marchio SednaNext ═══
   Un solo loader in tutta l'app: ovunque il markup usi ancora .spinner-border
   (~90 file), al posto dell'anello Bootstrap si vede il simbolo brand con
   l'animazione "respiro" del SednaBrandLoader. Override centralizzato: niente
   caccia ai 90 markup, e copre anche gli usi futuri. app.css carica DOPO
   bootstrap.min.css, quindi vince in cascata a parità di specificità. */
.spinner-border {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    animation: sn-spinner-breathe 1.6s ease-in-out infinite;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L85 28.5 L85 71.5 L50 92 L15 71.5 L15 28.5 Z' fill='none' stroke='%231976d2' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M50 72 L50 52' stroke='%231976d2' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M50 56 C40 56 33 48 33 37 C45 37 50 46 50 56 Z' fill='%231976d2'/%3E%3Cpath d='M50 51 C60 51 67 43 67 32 C55 32 50 41 50 51 Z' fill='%23ffb300'/%3E%3Ccircle cx='50' cy='58' r='3.4' fill='%23ffb300'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Variante piccola (dentro i bottoni "Salvataggio…"): stesso simbolo, 20px. */
.spinner-border-sm {
    width: 20px;
    height: 20px;
}

@keyframes sn-spinner-breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.1); opacity: 1; }
}

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

/* Header dei TAB fissi durante lo scroll del body della modal (es. editor causale
   aperto dalla Prima Nota): la strip dei tab si incolla in cima allo scrollport e
   scorre solo il contenuto. Selettori VERIFICATI a DOM su staging (22/07): lo
   scroll-container della DxPopup è .dxbl-modal-body e la strip è la
   dxbl-tab-list.dxbl-tabs-tablist figlia diretta di dxbl-tabs. Il box-shadow
   copre il filo di padding sopra la strip. */
.sedna-entity-editor-popup .dxbl-modal-body .dxbl-tabs-tablist {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--sedna-surface);
    box-shadow: 0 -0.5rem 0 0 var(--sedna-surface);
}

/* ===== Configurazione documento in modal (ingranaggio nell'header) ===== */
/* Il popup è alto (MaxHeight 92vh): senza questo il contenuto spinge il footer
   Salva/Annulla oltre lo schermo. Come per le altre modal scrolla SOLO il body,
   header e footer restano fissi. min-height:0 è la chiave perché il body, figlio
   flex, possa rimpicciolirsi sotto l'altezza del contenuto e mostrare la barra. */
.doc-config-popup .dxbl-popup-body {
    min-height: 0;
    overflow-y: auto;
}

/* ===== Ricerca avanzata: azioni anagrafica (Nuovo/Modifica) a sinistra ===== */
/* Il blocco azioni viene spinto a sinistra (margin-right:auto) così Annulla/Seleziona
   restano a destra; i suoi due pulsanti hanno un gap interno. */
.sedna-lookup-popup .sedna-lookup-footer-actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-right: auto;
}

/* ===== Footer modal/popup: spazio tra i pulsanti (es. Salva/Annulla) ===== */
/* Globale: i DxButton nel footer delle modal (DxPopup → .dxbl-modal-footer) sono
   fratelli diretti senza margine e risultano "appiccicati". Aggiungiamo un gap. */
.dxbl-modal-footer > * + *,
.dxbl-popup-footer > * + * {
    margin-left: 0.5rem;
}

/* ===== SednaFormGroup: slim labels ===== */
.sedna-form-group {
    margin-bottom: var(--sedna-space-2);
}

.sedna-form-label {
    font-size: var(--sedna-text-xs, 0.75rem);
    font-weight: var(--sedna-font-medium, 500);
    color: var(--sedna-text-secondary);
    margin-bottom: var(--sedna-space-1);
    letter-spacing: 0.02em;
}

.sedna-form-help-text {
    font-size: var(--sedna-text-xs);
    margin-top: var(--sedna-space-0);
}

.sedna-form-error {
    font-size: var(--sedna-text-xs);
    margin-top: var(--sedna-space-0);
}

/* =============================================================================
   SIDEBAR ACTIONS (Tema, Notifiche, Bozze - riga orizzontale)
   ============================================================================= */

.sidebar-actions {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--sedna-border);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.sidebar-actions__btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    color: var(--sedna-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-actions__btn:hover {
    background: var(--sedna-surface-hover);
    color: var(--sedna-text);
    border-color: var(--sedna-border-hover);
}

.sidebar-actions__btn--drafts {
    color: var(--sedna-warning-600);
    border-color: color-mix(in srgb, var(--sedna-warning-600) 30%, transparent);
}

.sidebar-actions__btn--drafts:hover {
    background: color-mix(in srgb, var(--sedna-warning-600) 10%, transparent);
    border-color: color-mix(in srgb, var(--sedna-warning-600) 50%, transparent);
}

.sidebar-actions__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    line-height: 1;
}

.sidebar-actions__badge--warning {
    background: var(--sedna-warning-600);
}

/* Collapsed: piu' compatto */
.sedna-sidenav--collapsed .sidebar-actions {
    padding: 0.5rem 0.25rem;
    gap: 0.25rem;
}

.sedna-sidenav--collapsed .sidebar-actions__btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

/* Dark mode */
.sedna-theme-dark .sidebar-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.sedna-theme-dark .sidebar-actions__btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.sedna-theme-dark .sidebar-actions__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Dashboard hero: in dark theme il gradient del boot si abbassa di luminosita'
   invece di sparire — la continuita' col boot vale anche di notte, ma senza
   accendere un faro. Qui e non nel CSS isolato della pagina perché il selettore
   parte da un antenato ([data-theme]/classe tema). */
.sedna-theme-dark .dash-hero,
[data-theme="dark"] .dash-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        linear-gradient(135deg, #0d2f57 0%, #113f74 55%, #071d38 100%);
}

/* =============================================================================
   SIDEBAR DRAFT PANEL (Flyout lista bozze)
   ============================================================================= */

.sidebar-draft-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1059;
}

.sidebar-draft-panel {
    position: fixed;
    bottom: 6rem;
    left: var(--sedna-sidenav-width, 260px);
    width: 300px;
    max-height: 360px;
    background: var(--sedna-surface);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg, 0.5rem);
    box-shadow: 0 10px 40px color-mix(in srgb, black 15%, transparent), 0 2px 10px color-mix(in srgb, black 8%, transparent);
    overflow: hidden;
    z-index: 1060;
    animation: sidebar-draft-panel-in 0.15s ease-out;
}

.sedna-sidenav--collapsed ~ .sidebar-draft-panel {
    left: var(--sedna-sidenav-collapsed-width, 72px);
}

@keyframes sidebar-draft-panel-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.sidebar-draft-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--sedna-border);
    font-size: 0.8125rem;
}

.sidebar-draft-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sedna-text-secondary);
    padding: 0.25rem;
    border-radius: var(--sedna-radius-sm, 0.25rem);
    display: flex;
    align-items: center;
}

.sidebar-draft-panel__close:hover {
    background: var(--sedna-surface-hover);
}

.sidebar-draft-panel__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sedna-border-light);
}

.sidebar-draft-panel__item:last-child {
    border-bottom: none;
}

.sidebar-draft-panel__item-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

.sidebar-draft-panel__item-content:hover {
    background: var(--sedna-surface-hover);
}

.sidebar-draft-panel__item-icon {
    color: var(--sedna-warning-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sidebar-draft-panel__item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sedna-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sidebar-draft-panel__item-time {
    font-size: 0.6875rem;
    color: var(--sedna-text-secondary);
}

.sidebar-draft-panel__item-discard {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sedna-text-secondary);
    padding: 0.375rem;
    margin-right: 0.5rem;
    border-radius: var(--sedna-radius-sm, 0.25rem);
    display: flex;
    align-items: center;
    font-size: 1rem;
    transition: all 0.15s;
}

.sidebar-draft-panel__item-discard:hover {
    color: var(--sedna-error);
    background: color-mix(in srgb, var(--sedna-error) 10%, transparent);
}

/* =============================================================================
   POPUP AUTO-HEIGHT (si adatta al contenuto)
   ============================================================================= */

.sedna-popup-autoheight .dxbl-popup {
    height: auto !important;
    max-height: 80vh;
}

.sedna-popup-autoheight .dxbl-popup-body {
    flex: 0 1 auto;
}

/* =============================================================================
   CENTRI DI COSTO - Master-Detail Layout
   ============================================================================= */

.master-detail-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    min-height: 500px;
}

.master-panel {
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg, 0.5rem);
    background: var(--sedna-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.master-panel__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sedna-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.875rem;
}

.master-panel__list {
    flex: 1;
    overflow-y: auto;
}

.master-panel__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--sedna-border-light);
    transition: background 0.15s;
    font-size: 0.8125rem;
}

.master-panel__item:hover {
    background: var(--sedna-surface-hover);
}

.master-panel__item--selected {
    /* D30: niente border-left side-tab. Background tinted basta a indicare selected. */
    background: color-mix(in srgb, var(--sedna-primary) 12%, transparent);
}

.master-panel__item-info {
    flex: 1;
    min-width: 0;
}

.master-panel__item-code {
    font-weight: 600;
    color: var(--sedna-text);
}

.master-panel__item-desc {
    font-size: 0.75rem;
    color: var(--sedna-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-panel__item-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.master-panel__item:hover .master-panel__item-actions {
    opacity: 1;
}

.master-panel__item-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--sedna-radius-sm, 0.25rem);
    color: var(--sedna-text-secondary);
    font-size: 0.875rem;
}

.master-panel__item-btn:hover {
    background: var(--sedna-surface-hover);
}

.master-panel__item-btn--danger:hover {
    color: var(--sedna-error);
    background: color-mix(in srgb, var(--sedna-error) 10%, transparent);
}

.detail-panel {
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg, 0.5rem);
    background: var(--sedna-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.detail-panel__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sedna-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.875rem;
}

.detail-panel__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sedna-text-secondary);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .master-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ═══ SednaEditableGrid - Row variant classes (global, used via RowCssClass) ═══ */
.sedna-editable-grid__row--dare {
    background-color: var(--sedna-dare-row);
}

.sedna-editable-grid__row--dare:hover {
    background-color: var(--sedna-dare-bg);
}

.sedna-editable-grid__row--avere {
    background-color: var(--sedna-avere-row);
}

.sedna-editable-grid__row--avere:hover {
    background-color: var(--sedna-avere-bg);
}

/* --- Nascondi frecce SpinEdit dentro SednaEditableGrid --- */
.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit .dxbl-btn-group,
.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit .dxbl-edit-spin-btn,
.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit button,
.sedna-editable-grid .dxbl-grid-table .dxbl-spin-edit .dxbl-btn-group {
    display: none !important;
}

.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit input[type="number"],
.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit input[type="text"] {
    -moz-appearance: textfield;
}

.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit input::-webkit-inner-spin-button,
.sedna-editable-grid [data-seg-cell] .dxbl-spin-edit input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Modal "Parametri causale" (PrimaNotaParametriCausaleModal) — corpo scrollabile
   + footer (Salva/Annulla) sticky. Il DxPopup è portalato fuori dallo scope del
   componente, quindi serve CSS globale. Senza questo, .dxbl-modal-body cresce col
   contenuto (min-height:auto, overflow:visible) e spinge il footer sotto il bordo
   del popup (overflow:hidden) → i pulsanti spariscono. Forzando overflow:auto +
   min-height:0 il corpo scrolla e header/footer restano fissi.
   ─────────────────────────────────────────────────────────────────────────── */
.pn-parametri-popup .dxbl-modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Banda errore lista (globale, riusabile) — pattern canonico di ClientiListNew.
   Mostrata sopra la griglia quando una pagina lista imposta errorMessage.
   ─────────────────────────────────────────────────────────────────────────── */
.list-error-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--sedna-error-50);
    border: 1px solid var(--sedna-error-600);
    border-radius: var(--sedna-radius-md, 0.5rem);
    color: var(--sedna-error-700);
    font-size: 0.875rem;
}
.list-error-banner__icon { font-size: 1rem; flex-shrink: 0; }
.list-error-banner__text { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.list-error-banner__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

/* Badge tipo articolo (AR/AC/MA) — tokenizzato, niente hex inline nelle pagine Gerarchia. */
.tipo-badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1;
    border: 1px solid transparent;
}
.tipo-badge--ar { background: var(--sedna-info-50); color: var(--sedna-info-700); border-color: var(--sedna-info-600); }
.tipo-badge--ac { background: var(--sedna-accent-50); color: var(--sedna-accent-700); border-color: var(--sedna-accent-600); }
.tipo-badge--ma { background: var(--sedna-warning-50); color: var(--sedna-warning-700); border-color: var(--sedna-warning-600); }
.tipo-badge--default { background: var(--sedna-surface-variant); color: var(--sedna-text-secondary); border-color: var(--sedna-border); }

/* V2: Dashboard "Prossime scadenze" — nome + riferimento su una riga ciascuno,
   troncati con ellissi (niente break una-parola-per-riga né token spezzato).
   Importo e badge stato non comprimono il testo: tengono la loro larghezza.
   (Le classi .due-* sono globali nel componente Dashboard; queste proprietà
   non sono dichiarate nello scoped CSS, quindi non c'è conflitto di specificità.) */
.due-main .stack { min-width: 0; }
.due-main .top,
.due-main .sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.due-amount,
.due-row .badge { flex-shrink: 0; }

/* V5: liste DevExpress — niente overflow orizzontale di pagina, lo scroll resta
   INTERNO alla griglia. Il wrapper della griglia è un flex item: senza min-width:0
   non si restringe sotto il contenuto e spinge la pagina oltre il viewport.
   Le regole scoped delle liste puntavano alla classe legacy .dx-datagrid (DevExtreme),
   che NON combacia col DOM reale di DevExpress Blazor (.dxbl-grid) → la griglia non
   veniva mai vincolata in larghezza. Qui il fix è globale e copre tutte le liste
   (Clienti, Fornitori, Vettori, Articoli, Imballaggi, Ditte Associate, lookup).
   Pattern già validato su Prima Nota. */
.sedna-datagrid-wrapper {
    min-width: 0;
    max-width: 100%;
}

.sedna-datagrid-wrapper .dxbl-grid {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* Modal "Genera documento": input USABILI (le date collassavano a ~7px) —
   globale perché la popup DevExpress non porta l'attributo del CSS isolato. */
.gen-modal .dxbl-text-edit { min-width: 130px; }
.gen-modal .dxbl-fl-cpt { white-space: nowrap; }

/* Popup DevExpress: gli editor di testo/numerici non devono MAI collassare
   (il flex del form layout li schiaccia a ~20px, come le date della modal
   Genera documento). Regola generale per tutte le modal. */
.dxbl-popup .dxbl-text-edit,
.dxbl-popup .dxbl-spin-edit { min-width: 160px; }

/* ═══════════ Modal "Trasporto e note" (DocumentoPiede) ═══════════
   Il DxPopup viene portaled in fondo al <body>, FUORI dal sottoalbero del
   componente: le regole ::deep del CSS scoped non lo raggiungono. Gli stili
   della modal vivono quindi qui, globali, sui token del design system.
   Struttura (2026-08-18, sulle sei schede del vecchio «Dati Accompagnatore»):
   intestazione sempre in vista (Mod. Pagamento, Aspetto Beni + i tre campi
   spenti) + SednaTabs a sette schede (Vettore / Vettore 2 / Banche-Note /
   Banche C-Anticipo / Dati FE 2.1 / Dati FE Causali / Trasporto). */
.doc-trasp-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 2px 0;
}

.doc-trasp-modal .f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.doc-trasp-modal .f > label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sedna-text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── INTESTAZIONE (sopra le schede, come nel vecchio) ──
   SEI caselle su una riga (erano cinque fino al 18/08): l'aspetto esteriore dei
   beni si è sdoppiato in codice + descrizione da quando la testata ha la colonna
   del codice e il campo è diventato un lookup. Il filetto sotto le separa dalle
   schede: sono dati del documento, non di una scheda, e vanno lette come una
   fascia a sé. */
.doc-trasp-modal__head {
    display: grid;
    /* Le colonne seguono quello che ci sta dentro, non la simmetria: la notifica
       di spedizione è un protocollo lungo («00000780NOSP01042025 PROT. N. …»), il
       Num.Ban. sono tre cifre e il codice dell'aspetto ne sono quattro. A colonne
       uguali il primo si troncava e gli ultimi sprecavano mezza casella. */
    grid-template-columns: 1.1fr 0.6fr 1.2fr 1fr 0.5fr 1.4fr;
    gap: 10px 14px;
    padding: 2px 2px 12px;
    border-bottom: 1px solid var(--sedna-border-light);
}
/* Sotto i 1100px la fascia va a capo invece di schiacciare sei caselle in una
   riga: su un 14" i codici diventavano illeggibili prima ancora di essere
   scritti. Tre per riga è la stessa griglia delle schede, quindi l'occhio non
   deve reimparare niente. */
@media (max-width: 1100px) {
    .doc-trasp-modal__head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Corpo scheda: una colonna di SEZIONI (i gruppi del vecchio: «Vettore»,
   «Annotazioni», «Banca», «Causali»). I campi stanno dentro __grid, non qui:
   una scheda può avere due gruppi con griglie diverse. min-height comune:
   cambiando scheda la modal non "balla". */
.doc-trasp-modal__pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-content: start;
    min-height: 176px;
    padding: 12px 2px 4px;
}

/* Griglia dei campi: TRE colonne. minmax(0,..): gli editor DX non sbordano
   nelle celle vicine (era il motivo dei campi accavallati). Tre e non due
   perché la finestra è passata a 960px per far stare sette schede in fila: a
   due colonne la scheda Vettore veniva lunga il doppio dello schermo. */
.doc-trasp-modal__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    align-content: start;
}
/* Quattro colonne: le due righe dei Dati Ricezione FE, che nel vecchio stanno
   su una riga da quattro campi ciascuna e vanno lette in coppia verticale. */
.doc-trasp-modal__grid--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-trasp-modal__grid .span2 { grid-column: span 2; }
.doc-trasp-modal__grid .span3 { grid-column: 1 / -1; }

/* Titolo di gruppo: è il group box del vecchio, ridotto a un'etichetta con un
   filetto. Serve a ritrovare «Annotazioni» dove ci si aspetta che sia. */
.doc-trasp-modal__sec-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sedna-text-secondary);
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sedna-border-light);
}

/* L'avviso in testa a una scheda in attesa del backend: si legge prima dei
   campi spenti, così la scheda non sembra guasta. Tono informativo, non
   allarmato: non c'è niente da correggere. */
.doc-trasp-modal__nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sedna-surface-variant);
    border: 1px solid var(--sedna-border-light);
    color: var(--sedna-text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
}
.doc-trasp-modal__nota i { color: var(--sedna-text-tertiary); margin-top: 1px; }

/* Campo SPENTO (in attesa del backend): l'etichetta si spegne insieme alla
   casella. Senza questo, un'etichetta nera sopra una casella grigia si legge
   come un campo da compilare che non si riesce a compilare. */
.doc-trasp-modal .f--attesa > label { color: var(--sedna-text-tertiary); opacity: 0.75; }
.doc-trasp-modal .f--attesa { cursor: help; }

/* Editor DX: larghezza piena della cella, altezza standard uniforme.
   Il min-width 160px delle popup qui non serve (celle da ~310px) ma si
   azzera per sicurezza: era lui a far sbordare i campi nella griglia. */
.doc-trasp-modal .dxbl-text-edit,
.doc-trasp-modal .dxbl-edit { width: 100%; min-width: 0; min-height: 2rem; }
.doc-trasp-modal .dxbl-text-edit-input,
.doc-trasp-modal input[type="text"] {
    font-size: 0.8125rem;
    height: calc(2rem - 2px);
    min-height: calc(2rem - 2px);
}

/* Le textarea delle note non ereditano l'altezza da input: solo font e resize */
.doc-trasp-modal textarea {
    font-size: 0.8125rem;
    height: auto;
    min-height: 0;
}

/* La pulsantiera del documento NON ha più regole sue: qui c'era un blocco
   .doc-head__actions che dava ai pulsanti del documento un'altezza e dei fianchi
   diversi dal resto dell'app. Con la testata del documento passata a SednaPageHead
   (canone barra azioni) quella classe non esiste più e i pulsanti prendono lo
   standard — che è il punto della richiesta: entrando su documento e su cliente si
   deve vedere la STESSA barra. Se un giorno i pulsanti del documento sembrano
   stretti, la risposta è cambiare lo standard per tutti, non riaprire un'eccezione
   qui. */

/* ============================================================
   Anteprime in MODAL (registrazione contabile, documento)
   Globale e non scoped: le due modal condividono la stessa
   grammatica e una .razor.css varrebbe solo per una delle due.
   ============================================================ */
.mc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc__head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px 18px;
}

.mc__field {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mc__k {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sedna-text-tertiary);
}

.mc__v {
    font-size: 0.8125rem;
    color: var(--sedna-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc__v.strong { font-weight: 600; }

.mc .mono { font-family: var(--sedna-font-mono, "JetBrains Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* Righe: la tabella è il cuore della modal, quindi scrolla lei e non la finestra. */
.mc__grid {
    max-height: 42vh;
    overflow: auto;
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-base, .375rem);
}

.mc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mc__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sedna-surface);
    border-bottom: 1px solid var(--sedna-border);
    padding: 5px 8px;
    text-align: left;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sedna-text-tertiary);
}

.mc__table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--sedna-border-light));
    color: var(--sedna-text);
}

.mc__table .num { text-align: right; }

.mc__table tbody tr.is-focus {
    background: color-mix(in srgb, var(--sedna-primary) 10%, transparent);
}

.mc__table tfoot td {
    font-weight: 600;
    border-top: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
}

.mc__table tfoot .mc__sbil td { color: var(--sedna-danger, #dc3545); }

.mc__iva {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sedna-surface-hover);
    color: var(--sedna-text-secondary);
    font-size: 0.625rem;
}

.mc__tot {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px 14px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

/* ═══ Modal inserimento merce produttori: il corpo del popup è DevExpress e il CSS
   isolato non lo raggiunge (regola di casa: override globali qui). Il body diventa
   una colonna flex così la griglia prende TUTTA l'altezza disponibile e la segue
   quando il popup viene ridimensionato; a scrollare sono le righe, non il popup. ═══ */
.mp-ins-popup .dxbl-modal-body,
.mp-ins-popup .dxbl-popup-body,
.insrm-popup .dxbl-modal-body,
.insrm-popup .dxbl-popup-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ═══ Popup «Liquidazione merce produttori» ═══
   Sta in app.css e non nel CSS scoped della pagina perché il corpo di un DxPopup è
   markup DevExpress: gli attributi di scoping non ci arrivano, e una regola scoped lì
   dentro semplicemente non si applica (già visto su altri popup).
   Serve a una cosa sola: quando si liquida SENZA selezione, i criteri devono staccarsi
   dal resto del testo. Chi legge quella riga sta decidendo se liquidare otto righe o un
   periodo intero. */
.merceprod-liq-criteri {
    margin-top: 4px;
    font-family: var(--sedna-font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    line-height: 1.4;
    word-break: break-word;
}

.merceprod-liq-tutto {
    margin-bottom: 10px;
}

/* ⚠️ IL PERIMETRO SENZA IL RIQUADRO. «Nessuna riga selezionata: si liquida tutto ciò che
   rispetta i criteri» era un alert giallo alto tre righe, in una finestra dove l'altezza
   è la risorsa scarsa (Antonio, 2026-08-18). Il fatto resta — chi non spunta niente deve
   sapere su cosa sta per lavorare — ma in una riga sola, in linea, con i criteri in
   monospazio a staccarsi dal resto. Niente fondo giallo: il giallo qui compariva SEMPRE
   che non c'era selezione, cioè quasi sempre, e un avviso perenne smette di essere letto. */
.merceprod-liq-perimetro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--sedna-text-secondary);
}

.merceprod-liq-perimetro__testa {
    font-weight: 600;
    color: var(--sedna-text);
}

/* I criteri dentro la riga non hanno più bisogno dello stacco verticale del riquadro. */
.merceprod-liq-perimetro .merceprod-liq-criteri {
    margin-top: 0;
}

/* L'unico punto che resta colorato: le due date che non sono la stessa. Il perché intero
   sta nel title — qui basta il fatto. */
.merceprod-liq-perimetro__attenzione {
    color: var(--sedna-warning-text, var(--sedna-warning-600, #a16207));
    cursor: help;
}

/* La riga sotto «Tipo stampa»: dice cosa succederà premendo, e che la ristampa non c'è
   ancora. Stesso posto degli altri stili di questo popup, e per la stessa ragione — dentro
   un DxPopup il CSS scoped non arriva. */
.merceprod-liq-nota {
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--sedna-text-tertiary);
}

/* Gli intervalli nella finestra «Liquida»: etichetta sopra, i due estremi in linea.
   Stessa forma della riga filtri delle liste — un intervallo si legge da sinistra a
   destra, non impilato. In app.css e non scoped: il corpo del DxPopup è markup
   DevExpress e gli attributi di scoping non ci arrivano. */
.merceprod-liq-filtri {
    display: flex; flex-direction: column; gap: 6px;
    margin: 10px 0 4px;
}

/* ⚠️ DUE SEZIONI AFFIANCATE, come i due riquadri del vecchio: «Impostazioni fornitori»
   (CHI si liquida) e «Impostazioni stampa» (COSA ne esce). Sono le due domande della
   finestra, e in un elenco unico non si vedeva dove finiva l'una e cominciava l'altra.
   Affiancate stanno anche in metà altezza — sul MacBook di Antonio (1512×741) la finestra
   scrollava, ed era il motivo per cui la lettura si perdeva. */
/* ⚠️ IN COLONNA, NON AFFIANCATE (Antonio, 2026-08-18: «non possiamo replicare esattamente
   il layout del vecchio?»). Prima questa griglia metteva IN FILA tutte le sezioni che
   conteneva: aggiungendo la numerazione sono diventate tre colonne strette — filtri,
   numerazione e stampa una accanto all'altra — con le tendine della stampa schiacciate in un
   terzo di finestra e la nota della numerazione lunga come una colonna di giornale.
   Nel vecchio le righe sono DUE: sopra «Impostazioni Fornitori» e «Numerazione Doc.»
   affiancate, sotto «Impostazioni Stampa» a tutta larghezza. Qui si dichiara solo la
   direzione: chi va affiancato lo decide `.merceprod-liq-alto`. */
.merceprod-liq-sezioni {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 4px;
}

.merceprod-liq-sez {
    border: 1px solid var(--sedna-border, #e5e7eb);
    border-radius: var(--sedna-radius-md, .375rem);
    padding: 6px 10px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.merceprod-liq-sez__tit {
    margin: 0 0 2px; padding-bottom: 4px;
    border-bottom: 1px solid var(--sedna-divider, #eef2f7);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sedna-text-secondary);
}

/* Più campi sulla stessa riga, ognuno con la sua etichetta sopra: «stampa per + tipo» e
   «tipo stampa + controllati + data stampa», come stanno nel vecchio. */
.merceprod-liq-campi { display: flex; gap: 10px; align-items: flex-end; }
.merceprod-liq-campo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ⚠️ I CAMPI A ELENCO CHIUSO NON PRENDONO PIÙ SPAZIO DI QUELLO CHE MOSTRANO (Antonio,
   2026-08-08). «Tipo» ha tre voci e la più lunga è «Non socio»: dividendo la riga in parti
   uguali si prendeva metà larghezza per undici caratteri, e la toglieva a «Stampa per», dove
   si legge «Fornitore-Mezzadro». Qui la misura è il contenuto, non la matematica. */
.merceprod-liq-campo--corto { flex: 0 0 auto; width: 9.5rem; }
.merceprod-liq-campo > label {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--sedna-text-tertiary);
}
/* I criteri che il server non accetta ancora: si vedono (è il posto giusto, ed è quello del
   vecchio) ma si capisce a colpo d'occhio che non comandano. Il perché sta nel title. */
.merceprod-liq-campo--spento { opacity: 0.55; }
.merceprod-liq-campo--spento > label::after {
    content: " · non attivo";
    font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* ⚠️ ETICHETTA SOPRA, non a fianco (Antonio, 2026-08-07). A fianco l'etichetta si mangiava
   120px di larghezza su ogni riga — dentro una sezione larga metà finestra restavano due
   campi stretti, e su «dal produttore → al produttore» non si leggeva più chi si era scelto.
   Sopra, i campi prendono tutta la riga, e le etichette restano allineate fra sezioni
   diverse senza dover accordare due griglie. È anche la forma del vecchio (LabelPosition="Top"). */
.merceprod-liq-riga {
    display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2px 8px;
}
.merceprod-liq-riga > label { grid-column: 1 / -1; }
/* Le voci con un campo solo (articolo, tipo documento, raggruppamento…): il campo prende
   tutta la riga, sotto la sua etichetta. */
.merceprod-liq-riga--uno { grid-template-columns: 1fr; }
.merceprod-liq-riga > label {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--sedna-text-tertiary);
}

/* ── «Numerazione documento» nella finestra Liquida ──
   Il riquadro del vecchio (Numerazione Doc.): sezionale, ultimo numero, lettera. Sta dentro
   la sezione stampa perché è una CONSEGUENZA del documento scelto, non un criterio; e si
   distingue dai campi che si compilano perché qui non si scrive niente. */
.merceprod-liq-numeraz {
    border: 1px dashed var(--sedna-border, #e5e7eb);
    border-radius: var(--sedna-radius-md, .375rem);
    padding: 6px 8px 8px;
    background: var(--sedna-surface-variant, #f8fafc);
    display: flex; flex-direction: column; gap: 4px;
}
.merceprod-liq-numeraz__tit {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--sedna-text-tertiary);
}
.merceprod-liq-numeraz__nota {
    font-size: 0.7rem; color: var(--sedna-text-tertiary);
}


/* ═══ FINESTRA ANAGRAFICA: la barra e' quella della PAGINA ═══
   Il DxPopup non ha piu' la sua intestazione: al suo posto c'e' SednaPageHead, identico a
   quello che si vede aprendo l'anagrafica intera. Qui solo la misura: la barra resta
   ferma in alto e a scorrere e' il contenuto della scheda. */
.sedna-entity-editor-popup .sedna-entity-editor-head {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 8px;
}

/* La X di chiusura: e' l'unico pezzo del cromo del popup che resta, e sta in fondo alla
   barra come su ogni finestra. */
.sedna-entity-editor-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--sedna-radius-base, .375rem);
    background: transparent;
    color: var(--sedna-text-tertiary);
    cursor: pointer;
}
.sedna-entity-editor-close:hover { background: var(--sedna-surface-variant); color: var(--sedna-text); }


/* ═══ LIQUIDAZIONE: I CAMPI CHE DECIDONO DAVVERO ═══
   Periodo e tipo stampa non sono filtri come gli altri: il periodo dice QUALI conferimenti
   entrano nella liquidazione — cioe' cosa viene pagato — e il tipo stampa decide se nascono
   documenti veri o solo una prova. Gli altri restringono; questi due determinano il
   risultato, e finora si leggevano come tutto il resto.

   ⚠️ EVIDENZA DISCRETA, NON UN ALLARME. Un fondo colorato o un bordo rosso direbbero
   «attenzione, qualcosa non va», e non c'e' niente che non va: c'e' qualcosa che conta.
   Bastano il contenuto in grassetto e un bordo azzurro appena piu' spesso.

   ⚠️ IL BORDO NON STA SULL'INPUT. Misurato a video: sui campi data l'`input` ha bordo
   ZERO e a disegnarlo e' l'elemento DevExpress che lo avvolge (`.dxbl-text-edit`). La prima
   versione scriveva la regola sul solo `input` e non si vedeva niente — sembrava che il CSS
   non arrivasse, mentre arrivava e colpiva l'elemento sbagliato.

   ⚠️ E STA QUI, IN app.css, non nel .razor.css della modal: le classi sorelle di questa
   finestra stanno tutte qui, e una regola scoped avrebbe avuto bisogno di ::deep per
   raggiungere i componenti figli — due meccanismi diversi per lo stesso pannello. */
.merceprod-liq--chiave .dxbl-text-edit,
.merceprod-liq--chiave .dxbl-edit,
.merceprod-liq--chiave .sedna-combobox-native,
.merceprod-liq--chiave select {
    border-width: 2px;
    border-color: var(--sedna-primary-300, #93c5fd);
}

.merceprod-liq--chiave input,
.merceprod-liq--chiave select,
.merceprod-liq--chiave .sedna-combobox-native {
    font-weight: 600;
}

/* Col fuoco dentro, il bordo diventa quello pieno: «questo campo conta» e «sto scrivendo
   qui» devono restare due cose distinte. */
.merceprod-liq--chiave .dxbl-text-edit:focus-within,
.merceprod-liq--chiave .sedna-combobox-native:focus {
    border-color: var(--sedna-primary);
}

/* L'etichetta segue, appena piu' marcata: senza, il campo in grassetto sembra scollegato
   dal suo nome. */
.merceprod-liq--chiave > label {
    color: var(--sedna-text-secondary);
    font-weight: 700;
}


/* ═══ CONFERMA DELLA LIQUIDAZIONE DEFINITIVA ═══
   La data sta in cima e staccata: e' l'unica cosa di questa finestra che si puo' ancora
   sbagliare senza accorgersene. Il resto e' spiegazione.
   ⚠️ Qui e non in un .razor.css: la finestra e' figlia di un componente condiviso, e una
   regola scoped avrebbe avuto bisogno di ::deep per raggiungerla. */
.mpliq-def p { margin: 0 0 var(--sedna-space-2); line-height: var(--sedna-leading-relaxed); }

.mpliq-def__data {
    display: flex;
    gap: var(--sedna-space-2);
    align-items: center;
    padding: var(--sedna-space-2) var(--sedna-space-3);
    border-radius: var(--sedna-radius-md);
    background: var(--sedna-primary-subtle);
    border: 1px solid color-mix(in srgb, var(--sedna-primary) 35%, transparent);
    color: var(--sedna-primary);
    font-size: var(--sedna-text-sm);
}

.mpliq-def__data i { font-size: 1rem; }

.mpliq-def__nota {
    font-size: var(--sedna-text-sm);
    color: var(--sedna-text-secondary);
    margin-bottom: 0;
}


/* ═══ LARGHEZZE DEI CAMPI IN ANAGRAFICA (pz-*) ═══
   In `ch`, cioe' in CARATTERI: e' la misura che il campo dichiara davvero. Un codice fiscale
   e' lungo 16, una partita IVA 11: caselle larghe un quarto di schermo per contenerli dicono
   all'occhio che ci sta molto di piu' di quello che ci sta, e chi compila si ferma a chiedersi
   se manca qualcosa.

   ⚠️ MAX-WIDTH E NON WIDTH: la griglia a dodicesimi continua a decidere quanto spazio ha il
   campo, questo mette solo un tetto. Con `width` un campo si sarebbe stretto anche dentro una
   colonna gia' stretta, e su schermi piccoli sarebbe diventato illeggibile.

   ⚠️ E si applica all'input, non al contenitore: la casella e' un componente, e sul suo
   involucro il tetto non arriverebbe al bordo che si vede. */
/* ⚠️ IL TETTO VA SUL CONTENITORE, NON SOLO SULL'INPUT (corretto il 21/08 su segnalazione
   di Antonio, che vedeva caselle larghe quanto tutta la cella nonostante il tetto).
   `SednaTextBox` fuori dalle griglie e' un involucro attorno a DxTextBox: il BORDO che si
   vede a video e' quello del contenitore DevExpress, e l'`<input>` vero e' dentro, senza
   bordo. Cappare solo l'input restringeva una cosa invisibile e lasciava la casella larga
   com'era. */
.pz-w-cod, .pz-w-8, .pz-w-12, .pz-w-18, .pz-w-20 { display: block; }
.pz-w-cod { max-width: 13ch; }
.pz-w-8   { max-width: 9ch; }
.pz-w-12  { max-width: 14ch; }
.pz-w-18  { max-width: 20ch; }
.pz-w-20  { max-width: 23ch; }

.pz-w-cod input, .pz-w-cod .sedna-native-input { max-width: 12ch; }
.pz-w-8   input, .pz-w-8   .sedna-native-input { max-width: 8ch; }
.pz-w-12  input, .pz-w-12  .sedna-native-input { max-width: 13ch; }
.pz-w-18  input, .pz-w-18  .sedna-native-input { max-width: 19ch; }
.pz-w-20  input, .pz-w-20  .sedna-native-input { max-width: 22ch; }

/* Le tendine e le lenti portano una freccetta a destra: senza questo il tetto taglierebbe
   proprio quella, e il campo sembrerebbe una casella di testo. */
.pz-w-12.sedna-lookup-container, .pz-w-18.sedna-lookup-container,
.pz-w-20.sedna-lookup-container, .pz-w-8.sedna-lookup-container { max-width: 26ch; }


/* Dove finisce l'articolo, scritto sotto la lente della sotto famiglia: si legge, non si
   tocca. Piccolo e in grigio perche' e' una CONSEGUENZA della scelta fatta sopra, non un
   secondo dato da compilare. */
.art-collocazione {
    margin-top: 2px;
    font-size: var(--sedna-text-xs, 0.75rem);
    color: var(--sedna-text-secondary);
    display: flex;
    gap: 0.35rem;
    align-items: center;
}


/* ═══ LE CELLE DEVONO POTER RESTRINGERSI ═══
   Una cella di griglia (flex o grid) ha `min-width:auto` di serie: non scende MAI sotto la
   larghezza naturale del suo contenuto. Con dentro una casella DevExpress larga al 100% il
   conto non torna, e la cella esce dal riquadro — e' quello che si vedeva sul fornitore
   (campi oltre il bordo del pannello) e nella modal delle famiglie (la lookup fuori dalla
   finestra). `min-width:0` toglie quel pavimento. */
.pz-layout .dxbl-fl-cell,
.pz-layout .dxbl-fl-ctrl,
.sedna-modal-form .dxbl-fl-cell,
.sedna-modal-form .dxbl-fl-ctrl { min-width: 0; }

.pz-layout .dxbl-text-edit,
.pz-layout .dxbl-combobox,
.sedna-modal-form .dxbl-text-edit,
.sedna-modal-form .dxbl-combobox { max-width: 100%; }


/* ═══ IL PULSANTE «FILTRA» E' ALTO QUANTO I CAMPI CHE FILTRA ═══
   Antonio, 21/08: su Saldi Clienti/Fornitori e Scadenze Attive il bottone era 28px contro
   i 20-22 dei campi, e in una fascia di filtri la differenza si vede — sembra un elemento
   di un'altra maschera capitato li'.

   ⚠️ SI RICONOSCE DALL'IMBUTO, non dalla pagina. Ogni pagina chiama la sua fascia filtri
   in un modo suo (`sa-filters`, `filter-row`, `dl-f`…): una regola per pagina sarebbe una
   regola che alla pagina numero otto qualcuno dimentica. L'icona dell'imbuto invece e' la
   stessa ovunque, ed e' esattamente l'insieme che vogliamo colpire.

   ⚠️ Vale per i BOTTONI DI FILTRO soltanto. Il resto dei bottoni resta su
   --sedna-control-height-md: un «Salva» alto 20px sarebbe difficile da centrare col dito,
   e li' non c'e' nessun campo accanto con cui allinearsi. */
button:has(> .bi-funnel),
button:has(> .bi-funnel-fill),
.sedna-btn:has(.bi-funnel),
.sedna-btn:has(.bi-funnel-fill) {
    height: var(--sedna-input-height);
    min-height: var(--sedna-input-height);
    padding-block: 0;
    padding-inline: 0.75rem;
    font-size: var(--sedna-text-xs, 0.75rem);
    line-height: 1;
}

/* ===================================
   SCHEDA ARTICOLO (art-*) — dal design «Articolo - Scheda»
   Le sezioni restano quelle condivise (.pz-section): qui c'e' solo cio' che il
   design aggiunge e che le altre schede non hanno — griglia a larghezza libera,
   riga di comandi nel titolo di sezione, segmentato dei conti, tabelle di sola
   lettura e la banda che spiega dove e' finito un campo.
   =================================== */

/* Il design dispone le sezioni con auto-fit e non a due colonne fisse: con dodici
   campi corti (i pesi) due colonne lasciavano mezza riga vuota su ogni schermo largo. */
.pz-main--auto {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Sezione a tutta larghezza dentro una griglia auto-fit (tabelle, segmentato). */
.pz-section--wide {
    grid-column: 1 / -1;
}

/* --- Titolo di sezione con comandi a destra ---
   Il design mette «Storico Prezzi», «Aggiungi riga», «Rimpiazza Conti» NELLA riga del
   titolo: sotto sarebbero tre pulsanti che sembrano appartenere al primo campo. */
.pz-section__title .pz-section__sep {
    flex: 1 1 auto;
}

.pz-section__hint {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sedna-text-tertiary);
}

/* --- Banda informativa dentro una scheda ---
   Nel design dice dove sta un campo che qui non c'e' («la Varieta' e' in
   Classificazione»): senza, l'utente lo cerca e conclude che manca. */
.art-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--sedna-info-600);
    border-radius: var(--sedna-radius-md);
    background: var(--sedna-info-50);
    color: var(--sedna-info-700);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.art-nota i {
    flex: none;
    margin-top: 0.1rem;
}

/* --- Segmentato Vendita / Acquisto / Acquisto Socio ---
   I ventiquattro conti erano sei sezioni impilate: il segmentato ne mostra quattro
   per volta, che sono quelli che si confrontano fra loro. */
.art-seg {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--sedna-radius-md);
    background: var(--sedna-bg-subtle);
    border: 1px solid var(--sedna-border);
    margin-bottom: 0.625rem;
}

.art-seg__btn {
    height: 1.625rem;
    padding: 0 0.875rem;
    border: none;
    border-radius: var(--sedna-radius-sm);
    background: transparent;
    color: var(--sedna-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.art-seg__btn:hover {
    color: var(--sedna-accent-700);
}

.art-seg__btn--on {
    background: var(--sedna-surface);
    color: var(--sedna-accent-600);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
}

/* --- Tabella dei conti: etichetta di riga + due lenti --- */
.art-conti {
    width: 100%;
    border-collapse: collapse;
}

.art-conti th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sedna-text-tertiary);
    padding: 0 0.375rem 0.3125rem;
    border-bottom: 1px solid var(--sedna-border);
}

.art-conti td {
    padding: 0.25rem 0.375rem;
    vertical-align: middle;
}

.art-conti td:first-child {
    width: 8.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sedna-text-secondary);
    white-space: nowrap;
}

/* --- Tabelle di sola lettura (situazione magazzino, ultimi documenti) --- */
.art-dati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.art-dati__voce {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--sedna-border-light);
    border-radius: var(--sedna-radius-sm);
    background: var(--sedna-surface-muted);
}

.art-dati__et {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sedna-text-tertiary);
}

.art-dati__val {
    font-family: var(--sedna-font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sedna-text);
}

/* --- Griglie del design ancora senza dati dal server ---
   Restano a video con la loro intestazione: toglierle avrebbe nascosto che il
   disegno le prevede, e chi apre la scheda non saprebbe che manca il server. */
.art-griglia-vuota {
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--sedna-text-tertiary);
    font-size: 0.8125rem;
    border: 1px dashed var(--sedna-border);
    border-radius: var(--sedna-radius-sm);
    background: var(--sedna-surface-muted);
}

.art-griglia-vuota i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    opacity: 0.5;
}

/* Etichette di stato nella barra di pagina (Attivo / Fuori produzione). */
.art-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--sedna-radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.art-chip--attivo {
    background: var(--sedna-success-50);
    color: var(--sedna-success-700);
}

.art-chip--spento {
    background: var(--sedna-bg-subtle);
    color: var(--sedna-text-tertiary);
}

.art-chip--fuori {
    background: var(--sedna-error-50);
    color: var(--sedna-error-700);
}

@media (max-width: 1200px) {
    .pz-main--auto {
        grid-template-columns: 1fr;
    }
}


/* ═══ L'anteprima della fattura ricevuta e il pannello laterale ═══
   Qui c'era una regola che alzava il popup a z-index 1200, e NON funzionava: cadeva su un
   elemento `position: relative` dentro il `dxbl-modal-root` di DevExpress, quindi valeva solo
   dentro quel contenitore. La soluzione sta dall'altra parte — il drawer del ciclo passivo
   scende sotto le finestre modali (v. FatturePassivePage.razor.css) — e questa regola è stata
   tolta invece di lasciarla lì a non fare niente. */

/* ═══ Le quattro versioni (icona «info» accanto alla versione del portale) ═══
   Le due righe del MOTORE stanno vicine e si accendono insieme quando divergono: è la coppia
   per cui questa finestra esiste. */
.sb-ver__i {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0 0 0 4px;
    cursor: pointer;
    opacity: .75;
}

.sb-ver__i:hover { opacity: 1; }

.sb-vers-panel { max-height: min(70vh, 460px); overflow-y: auto; }

.sb-vers { padding: 10px 12px; }

.sb-vers__r {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: .78rem;
}

.sb-vers__k { color: var(--sedna-text-secondary); }
.sb-vers__v { font-weight: 600; }

/* ⚠️ Rosse tutte e due, non solo quella "sbagliata": non esiste una versione sbagliata delle
   due: esiste una COPPIA che non combacia, e l'informazione è la coppia. */
.sb-vers__r--ko .sb-vers__k,
.sb-vers__r--ko .sb-vers__v { color: var(--sedna-error-700, #d32f2f); }

.sb-vers__sep {
    height: 1px;
    background: var(--sedna-border-light);
    margin: 8px 0;
}

.sb-vers__avv {
    margin: 8px 0 0;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--sedna-error-700, #d32f2f);
}

.sb-vers__avv--muto { color: var(--sedna-text-tertiary); }