/* =============================================================================
   SEDNA DESIGN SYSTEM - DEVEXPRESS OVERRIDES
   Override degli stili DevExpress per coerenza con Sedna Design System
   Versione: 2.0
   ============================================================================= */

/* =============================================================================
   GLOBAL CONTAINER
   ============================================================================= */
.sedna-app {
    /* Font smoothing per tutti i componenti DevExpress */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* La classe .sedna-app (shell) impone min-height:100vh per riempire la pagina.
   Quando viene applicata via CssClass ai popup/modal DevExpress (per ereditare i
   token del design system, dato che vengono renderizzati in un portale fuori dallo
   shell), quel min-height li forza alti quanto la viewport: il footer finisce in
   fondo a un box quasi vuoto. I popup devono dimensionarsi al contenuto (la
   MaxHeight resta come tetto). Specificità 0,2,0 → vince su .sedna-app. */
.dxbl-popup.sedna-app,
.dxbl-window.sedna-app {
    min-height: 0;
}

/* Con min-height:0 il popup si cappa alla MaxHeight: se il contenuto la supera,
   il body (flex 1 1 auto) deve SCROLLARE mantenendo header e footer fissi e
   visibili, altrimenti il footer (es. pulsanti Salva/Reset) finisce clippato fuori
   dal box. min-height:0 sullo flex item è necessario per consentirgli di
   rimpicciolirsi sotto l'altezza del contenuto e attivare lo scroll. */
.dxbl-popup.sedna-app .dxbl-modal-body {
    min-height: 0;
    overflow-y: auto;
}

    /* =============================================================================
   BUTTONS - DxButton, DxDropDownButton, DxSplitButton
   ============================================================================= */
    .sedna-app .dxbl-btn,
    .sedna-app .dx-button,
    .sedna-app .dxbs-btn {
        /* Typography */
        font-family: var(--sedna-font-sans);
        font-size: var(--sedna-text-sm);
        font-weight: var(--sedna-font-medium);
        line-height: var(--sedna-leading-none);
        /* Layout */
        height: var(--sedna-control-height-md);
        padding: 0 var(--sedna-space-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sedna-space-1);
        /* Visual */
        border-radius: var(--sedna-radius-input);
        color: var(--sedna-text);
        /* Effects */
        transition: all var(--sedna-transition-fast);
        cursor: pointer;
        user-select: none;
    }

    /* ── Action bar (SednaPageHead / SednaActionBar): pulsanti EXTRA-COMPATTI ──
       Più bassi e con font più piccolo, per occupare meno spazio in testata. Vale solo
       per la pulsantiera d'azione, non per i bottoni nel corpo delle pagine. */
    .sedna-app .sedna-page__actions .dxbl-btn,
    .sedna-app .sedna-page__actions .dx-button,
    .sedna-app .sedna-page__actions .dxbs-btn {
        height: 24px;
        min-height: 24px;
        padding: 0 var(--sedna-space-2, 0.5rem);
        font-size: var(--sedna-text-xs, 0.72rem);
        gap: 4px;
    }
        .sedna-app .sedna-page__actions .dxbl-btn .bi {
            font-size: 0.82rem;
        }

        .sedna-app .dxbl-btn:hover,
        .sedna-app .dx-button:hover,
        .sedna-app .dxbs-btn:hover {
            background-color: var(--sedna-surface-hover);
            border-color: var(--sedna-primary);
            color: var(--sedna-primary);
        }

        .sedna-app .dxbl-btn:active,
        .sedna-app .dx-button:active,
        .sedna-app .dxbs-btn:active {
            box-shadow: none;
        }

        .sedna-app .dxbl-btn:focus-visible,
        .sedna-app .dx-button:focus-visible,
        .sedna-app .dxbs-btn:focus-visible {
            outline: none;
            box-shadow: var(--sedna-focus-ring);
            border-color: var(--sedna-focus-color);
        }

        .sedna-app .dxbl-btn:disabled,
        .sedna-app .dx-button:disabled,
        .sedna-app .dxbs-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

    /* Primary Button */
    .sedna-app .dxbl-btn-primary,
    .sedna-app .dx-button-primary,
    .sedna-app .btn-primary {
        background-color: var(--sedna-primary);
        border-color: var(--sedna-primary);
        color: var(--sedna-on-primary);
    }

        .sedna-app .dxbl-btn-primary:hover,
        .sedna-app .dx-button-primary:hover,
        .sedna-app .btn-primary:hover {
            background-color: var(--sedna-primary-hover);
            border-color: var(--sedna-primary-hover);
            color: var(--sedna-on-primary);
        }

        .sedna-app .dxbl-btn-primary:active,
        .sedna-app .dx-button-primary:active,
        .sedna-app .btn-primary:active {
            background-color: var(--sedna-primary-active);
            border-color: var(--sedna-primary-active);
        }

    /* Secondary Button */
    .sedna-app .dxbl-btn-secondary,
    .sedna-app .dx-button-secondary {
        background-color: var(--sedna-surface-variant);
        border-color: var(--sedna-border);
        color: var(--sedna-text-secondary);
    }

    /* Danger Button */
    .sedna-app .dxbl-btn-danger,
    .sedna-app .dx-button-danger,
    .sedna-app .btn-danger {
        background-color: var(--sedna-error);
        border-color: var(--sedna-error);
        color: white;
    }

        .sedna-app .dxbl-btn-danger:hover,
        .sedna-app .dx-button-danger:hover,
        .sedna-app .btn-danger:hover {
            background-color: var(--sedna-error-hover);
            border-color: var(--sedna-error-hover);
        }

    /* Button Icons */
    .sedna-app .dxbl-btn i,
    .sedna-app .dx-button i,
    .sedna-app .dxbs-btn i {
        font-size: 0.875rem;
        line-height: 1;
        vertical-align: middle;
    }

    /* Icon-only buttons */
    .sedna-app .dxbl-btn:not(:has(span)),
    .sedna-app .dx-button:not(:has(span)) {
        width: var(--sedna-control-height-md);
        padding: 0;
    }

    /* =============================================================================
   INPUTS - DxTextBox, DxMemo, DxSpinEdit, DxDateEdit, etc.
   ============================================================================= */
    .sedna-app .dxbl-edit,
    .sedna-app .dxbl-textbox,
    .sedna-app .dxbl-memo,
    .sedna-app .dx-texteditor-input,
    .sedna-app .dx-texteditor,
    .sedna-app .form-control {
        /* Typography */
        font-family: var(--sedna-font-sans);
        font-size: var(--sedna-input-font-size, var(--sedna-text-sm));
        line-height: var(--sedna-leading-tight);
        /* Layout — di serie scala XS (vedi --sedna-input-height nei token) */
        height: var(--sedna-input-height, var(--sedna-control-height-md));
        padding: 0 var(--sedna-input-padding-x);
        /* Visual */
        border-radius: var(--sedna-radius-input);
        border: 1px solid var(--sedna-border);
        background-color: var(--sedna-surface);
        color: var(--sedna-text);
        /* Effects */
        transition: border-color var(--sedna-transition-fast), box-shadow var(--sedna-transition-fast);
    }

    /* Forza altezza uniforme su combobox/spin/date (stessa del textbox) */
    .sedna-app .dxbl-combobox,
    .sedna-app .dxbl-spin-edit,
    .sedna-app .dxbl-date-edit,
    .sedna-app .dxbl-time-edit {
        height: var(--sedna-input-height, var(--sedna-control-height-md)) !important;
    }

    /* Una data ha una larghezza NOTA: gg/mm/aaaa + icona calendario. Sotto i
       ~140px il testo maschera va in ellipsis e la data si legge a meta'
       (visto sul bilancio, ma capitava in piu' pagine: la rete sta qui).
       Le griglie restano fuori: li' comanda la larghezza di colonna. */
    .sedna-app .dxbl-date-edit:not(.sedna-editable-grid *):not(.dxbl-grid *) {
        min-width: 140px;
    }

    .sedna-app .dxbl-combobox .dxbl-input-group,
    .sedna-app .dxbl-spin-edit .dxbl-input-group,
    .sedna-app .dxbl-date-edit .dxbl-input-group,
    .sedna-app .dxbl-time-edit .dxbl-input-group {
        height: var(--sedna-input-height, var(--sedna-control-height-md)) !important;
        min-height: unset !important;
    }

    /* Numerici allineati a DESTRA: importi, percentuali e quantita' si leggono incolonnati,
       con le cifre della stessa larghezza. Gli input nativi lo fanno gia' da se'
       (.sedna-native-input--num in sedna.components.css): qui si allinea il ramo DevExpress
       (DxSpinEdit, anche dentro DxFormLayout) perche' i due si comportino allo stesso modo. */
    .sedna-app .dxbl-spin-edit input,
    .sedna-app .dxbl-fl-spin-edit input {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* Radice comune degli editor testuali (textbox/combobox/date/spin sono
       tutti .dxbl-text-edit, spesso SENZA la classe specifica): senza questa
       regola la taglia dxbl-sm di DevExpress (30px) vince e l'input resta
       alto col solo font ridotto. */
    .sedna-app .dxbl-text-edit,
    .sedna-app .dxbl-edit {
        height: var(--sedna-input-height, var(--sedna-control-height-md)) !important;
        min-height: var(--sedna-input-height, var(--sedna-control-height-md)) !important;
        align-items: center !important;
    }

    /* Bottoni interni (clear, chevron combo, calendario): vincolati alla
       nuova altezza e centrati. */
    .sedna-app .dxbl-text-edit .dxbl-btn-group,
    .sedna-app .dxbl-text-edit .dxbl-btn-group .dxbl-btn {
        height: calc(var(--sedna-input-height, var(--sedna-control-height-md)) - 2px) !important;
        min-height: calc(var(--sedna-input-height, var(--sedna-control-height-md)) - 2px) !important;
        align-self: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sedna-app .dxbl-text-edit-input {
        height: var(--sedna-input-height, var(--sedna-control-height-md)) !important;
        font-size: var(--sedna-input-font-size, var(--sedna-text-sm)) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    /* ═══ STESSO ASPETTO DELLE NOSTRE LENTI (Antonio, 21/08) ═══
       Misurato sulla stessa maschera: la lente aveva angoli da 6px e il testo a 9px dal
       bordo, la casella DevExpress angoli da 4px e il testo a 5px. Due controlli affiancati
       che disegnano lo stesso oggetto in due modi diversi: chi guarda non pensa «due
       componenti», pensa «maschera fatta male».

       ⚠️ SOLO IL BORDO E IL RIENTRO, non l'altezza ne' il comportamento: SednaTextBox resta
       l'involucro DevExpress che e' sempre stato. Il giro Invio=Tab di Prima Nota e del
       documento dipende da quel comportamento, e non si tocca per una questione di stile. */
    .sedna-app .dxbl-text-edit,
    .sedna-app .dxbl-edit {
        border-radius: var(--sedna-radius-input, 0.375rem) !important;
        /* ⚠️ ANCHE IL COLORE DEL BORDO: DevExpress disegna il suo grigio (#d3d3d2), la
           nostra lente il nostro (--sedna-border, #e0e0e0). Un pixel di differenza sul
           bordo non si sa nominare guardandolo, ma si vede: due caselle affiancate
           sembrano appartenere a due maschere diverse. */
        border-color: var(--sedna-border) !important;
        background-color: var(--sedna-surface) !important;
    }

    /* ⚠️ E IL FONDO SEPARATAMENTE (Antonio, 21/08: «il bordo inferiore sembra nero»).
       Non sembrava: era rgb(63,63,62) contro il rgb(211,211,210) degli altri tre lati —
       la SOTTOLINEATURA in stile Material che DevExpress disegna sotto gli editor di testo
       e di data. Una casella con tre lati chiari e uno quasi nero non si legge come una
       cornice: si legge come una riga da compilare, che e' un'altra cosa e appartiene a
       un'altra epoca di questo programma.

       ⚠️ Scritta come proprieta' a se' e non lasciata alla scorciatoia `border-color`
       qui sopra: DevExpress dichiara il fondo con una regola sua piu' avanti nel foglio,
       e a parita' di peso vince chi arriva dopo. */
    .sedna-app .dxbl-text-edit,
    .sedna-app .dxbl-edit,
    .sedna-app .dxbl-text-edit:not(:focus-within),
    .sedna-app .dxbl-edit:not(:focus-within) {
        border-bottom-color: var(--sedna-border) !important;
    }

    /* Il rientro a SINISTRA soltanto: a destra ci vivono i pulsantini (svuota, freccetta,
       calendario) e allargare li' li spingerebbe fuori dal bordo. */
    .sedna-app .dxbl-text-edit-input {
        padding-left: 9px !important;
    }

    /* Memo (multi-line) */
    .sedna-app .dxbl-memo {
        height: auto;
        min-height: calc(var(--sedna-control-height-md) * 2);
        resize: vertical;
    }

        /* Focus state: oltre a bordo+ring, sfondo in tinta primaria tenue
           (--sedna-input-focus-bg) per evidenziare il campo attivo. */
        .sedna-app .dxbl-edit:focus,
        .sedna-app .dxbl-textbox:focus,
        .sedna-app .dxbl-memo:focus,
        .sedna-app .dx-texteditor-input:focus,
        .sedna-app .dx-texteditor:focus,
        .sedna-app .form-control:focus {
            outline: none;
            border-color: var(--sedna-focus-color);
            box-shadow: var(--sedna-input-focus-bar), var(--sedna-focus-ring);
            background-color: var(--sedna-input-focus-bg);
        }

        /* Il box DX (wrapper con bordo/sfondo) e l'input interno: la tinta va su
           entrambi, altrimenti l'input bianco interno copre il wrapper tinto.
           Sul WRAPPER va anche la barretta del campo attivo: e' lui ad avere il
           bordo visibile, l'input interno e' annegato dentro. */
        .sedna-app .dxbl-text-edit:focus-within,
        .sedna-app .dxbl-text-edit:focus-within > .dxbl-text-edit-input,
        .sedna-app .dxbl-text-edit:focus-within input {
            background-color: var(--sedna-input-focus-bg);
        }

        .sedna-app .dxbl-text-edit:focus-within {
            border-color: var(--sedna-focus-color);
            box-shadow: var(--sedna-input-focus-bar), var(--sedna-focus-ring);
        }

    /* Hover state */
    .sedna-app .dxbl-edit:hover:not(:focus):not(:disabled),
    .sedna-app .dxbl-textbox:hover:not(:focus):not(:disabled),
    .sedna-app .dx-texteditor-input:hover:not(:focus):not(:disabled) {
        border-color: var(--sedna-border-strong);
    }

    /* Disabled state */
    .sedna-app .dxbl-edit:disabled,
    .sedna-app .dx-texteditor-input:disabled,
    .sedna-app .dxbl-memo:disabled,
    .sedna-app .form-control:disabled {
        color: var(--sedna-text-disabled);
        background-color: var(--sedna-surface-variant);
        border-color: var(--sedna-border);
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* ReadOnly state */
    .sedna-app .dxbl-edit[readonly],
    .sedna-app .dx-texteditor-input[readonly],
    .sedna-app .dxbl-textbox[readonly],
    .sedna-app .dxbl-memo[readonly] {
        color: var(--sedna-text-secondary);
        background-color: var(--sedna-surface-variant);
        border-color: var(--sedna-border);
        cursor: default;
    }

    .sedna-app .dx-state-readonly .dx-texteditor-input,
    .sedna-app .dx-editor-readonly .dx-texteditor-input {
        color: var(--sedna-text-secondary);
        background-color: var(--sedna-surface-variant);
    }

    /* Placeholder */
    .sedna-app .dxbl-edit::placeholder,
    .sedna-app .dx-texteditor-input::placeholder,
    .sedna-app .dxbl-memo::placeholder {
        color: var(--sedna-text-tertiary);
        opacity: 1;
    }

    /* NullText (empty value display) */
    .sedna-app .dxbl-edit-null-text,
    .sedna-app .dx-texteditor-empty .dx-texteditor-input {
        color: var(--sedna-text-tertiary);
    }

    /* Input icons/buttons */
    .sedna-app .dx-texteditor-buttons-container,
    .sedna-app .dxbl-edit-btn-container {
        display: flex;
        align-items: center;
        gap: var(--sedna-space-1);
    }

        .sedna-app .dx-texteditor-buttons-container button,
        .sedna-app .dxbl-edit-btn {
            color: var(--sedna-text-secondary);
            transition: color var(--sedna-transition-fast);
        }

            .sedna-app .dx-texteditor-buttons-container button:hover,
            .sedna-app .dxbl-edit-btn:hover {
                color: var(--sedna-primary);
            }

    /* =============================================================================
   COMBOBOX / DROPDOWN - DxComboBox, DxTagBox, DxDropDown
   ============================================================================= */
    .sedna-app .dxbl-combobox,
    .sedna-app .dxbl-tagbox,
    .sedna-app .dx-dropdowneditor {
        border-radius: var(--sedna-radius-input);
    }

    .sedna-app .dxbl-combobox-dropdown,
    .sedna-app .dxbl-tagbox-dropdown,
    .sedna-app .dx-dropdowneditor-overlay {
        margin-top: 2px;
        border-radius: var(--sedna-radius-md);
        border: 1px solid var(--sedna-border);
        background-color: var(--sedna-surface);
        box-shadow: var(--sedna-shadow-lg);
    }

    /* Tendine più ALTE: più elementi in vista prima di scrollare (collaudo 22/07).
       Copre la lista interna del dropdown DX in tutte le varianti note. */
    .sedna-app .dxbl-combobox-dropdown .dxbl-listbox,
    .sedna-app .dxbl-combobox-dropdown .dxbl-scroll-viewer,
    .sedna-app .dxbl-tagbox-dropdown .dxbl-listbox,
    .sedna-app .dx-dropdowneditor-overlay .dx-list {
        max-height: 460px;
    }

    .sedna-app .dxbl-combobox-item,
    .sedna-app .dxbl-tagbox-item,
    .sedna-app .dx-dropdowneditor-item {
        padding: var(--sedna-space-1) var(--sedna-space-2);
        font-size: var(--sedna-text-sm);
        color: var(--sedna-text);
        transition: background-color var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-combobox-item:hover,
        .sedna-app .dxbl-tagbox-item:hover,
        .sedna-app .dx-dropdowneditor-item:hover {
            background-color: var(--sedna-surface-hover);
        }

    .sedna-app .dxbl-combobox-item-selected,
    .sedna-app .dxbl-tagbox-item-selected,
    .sedna-app .dx-dropdowneditor-item-selected {
        background-color: var(--sedna-primary-subtle);
        color: var(--sedna-primary);
        font-weight: var(--sedna-font-medium);
    }

    /* TagBox chips */
    .sedna-app .dxbl-tagbox-chip,
    .sedna-app .dx-tagbox-tag {
        background-color: var(--sedna-primary-subtle);
        color: var(--sedna-primary);
        border-radius: var(--sedna-radius-full);
        padding: var(--sedna-space-1) var(--sedna-space-2);
        font-size: var(--sedna-text-xs);
        font-weight: var(--sedna-font-medium);
        display: inline-flex;
        align-items: center;
        gap: var(--sedna-space-1);
    }

    /* =============================================================================
   CHECKBOX & SWITCH - DxCheckBox, DxSwitch
   ============================================================================= */
    .sedna-app .dxbl-checkbox,
    .sedna-app .dx-checkbox,
    .sedna-app .dxbl-switch,
    .sedna-app .dx-switch {
        color: var(--sedna-text);
        display: inline-flex;
        align-items: center;
        gap: var(--sedna-space-2);
        cursor: pointer;
    }

    .sedna-app .dxbl-checkbox-text,
    .sedna-app .dx-checkbox-text,
    .sedna-app .dxbl-switch-text,
    .sedna-app .dx-switch-text {
        color: var(--sedna-text);
        font-size: var(--sedna-text-sm);
        line-height: var(--sedna-leading-normal);
    }

    .sedna-app .dxbl-checkbox-box,
    .sedna-app .dx-checkbox-icon {
        width: 16px;
        height: 16px;
        border: 1.5px solid var(--sedna-border-strong);
        border-radius: var(--sedna-radius-xs);
        background-color: var(--sedna-surface);
        transition: all var(--sedna-transition-fast);
    }

    .sedna-app .dxbl-checkbox:hover .dxbl-checkbox-box,
    .sedna-app .dx-checkbox:hover .dx-checkbox-icon {
        border-color: var(--sedna-primary);
    }

    .sedna-app .dxbl-checkbox-checked .dxbl-checkbox-box,
    .sedna-app .dx-checkbox-checked .dx-checkbox-icon {
        background-color: var(--sedna-primary);
        border-color: var(--sedna-primary);
    }

    /* Switch */
    .sedna-app .dxbl-switch-track {
        width: 36px;
        height: 20px;
        border-radius: var(--sedna-radius-full);
        background-color: var(--sedna-border-strong);
        transition: background-color var(--sedna-transition-fast);
    }

    .sedna-app .dxbl-switch-thumb {
        width: 16px;
        height: 16px;
        border-radius: var(--sedna-radius-full);
        background-color: white;
        transition: transform var(--sedna-transition-fast);
    }

    .sedna-app .dxbl-switch-checked .dxbl-switch-track {
        background-color: var(--sedna-primary);
    }

    /* Disabled checkboxes/switches */
    .sedna-app .dxbl-checkbox:disabled,
    .sedna-app .dx-checkbox:disabled,
    .sedna-app .dxbl-switch:disabled,
    .sedna-app .dx-switch:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* =============================================================================
   GRID - DxGrid
   ============================================================================= */
    .sedna-app .dxbl-grid {
        border-radius: var(--sedna-radius-lg);
        overflow: hidden;
        border: 1px solid var(--sedna-border);
        box-shadow: var(--sedna-shadow-sm);
        background-color: var(--sedna-surface);
        font-family: var(--sedna-font-sans);
    }

    /* Catena interna del DxGrid (scroll-viewer → table → righe): DevExpress la
       lascia BIANCA dal suo tema, e in dark trapela sotto i td trasparenti /
       template (es. badge categoria) facendoli slavare. La forzo al token
       superficie con !important per battere la specificità DevExpress. In chiaro
       --sedna-surface = bianco (nessun cambiamento); in dark = scuro. Le righe
       hover/selected hanno specificità maggiore e vincono comunque. */
    .sedna-app .dxbl-grid .dxbl-scroll-viewer,
    .sedna-app .dxbl-grid .dxbl-scroll-viewer-content,
    .sedna-app .dxbl-grid-table,
    .sedna-app .dxbl-grid-table > tbody > tr {
        background-color: var(--sedna-surface) !important;
    }

    /* Grid Header */
    .sedna-app .dxbl-grid-header,
    .sedna-app .dxbl-grid-header-row {
        background-color: var(--sedna-surface);
        border-bottom: 1px solid var(--sedna-border-light);
    }

    .sedna-app .dxbl-grid-header-cell {
        padding: var(--sedna-space-2) var(--sedna-space-3);
        font-size: var(--sedna-text-xs);
        font-weight: var(--sedna-font-semibold);
        color: var(--sedna-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-right: none;
        transition: background-color var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-grid-header-cell:hover {
            background-color: var(--sedna-surface-hover);
        }

        /* Grid Sort Icon */
        .sedna-app .dxbl-grid-header-sort-icon,
        .sedna-app .dxbl-grid-header-cell .dxbl-grid-icon {
            color: var(--sedna-primary);
            margin-left: var(--sedna-space-1);
        }

    /* Header cella reale in DevExpress 25.2 = .dxbl-grid-header (NON .dxbl-grid-header-cell).
       Allineato allo stile della tabella Partite Aperte: sfondo bianco, testo terziario,
       xs (12px, non 14), semibold, maiuscolo + letter-spacing. */
    .sedna-app .dxbl-grid-header {
        background-color: var(--sedna-surface);
    }

    .sedna-app .dxbl-grid-header-content {
        font-size: var(--sedna-text-xs);
        font-weight: var(--sedna-font-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sedna-text-tertiary);
    }

    /* Grid Data Rows */
    .sedna-app .dxbl-grid-data-row,
    .sedna-app .dxbl-grid-data-row > td {
        border-bottom: 1px solid var(--sedna-divider);
        background-color: var(--sedna-surface);
        transition: background-color var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-grid-data-row:hover,
        .sedna-app .dxbl-grid-data-row:hover > td {
            background-color: var(--sedna-surface-hover);
        }

    .sedna-app .dxbl-grid-data-row-selected,
    .sedna-app .dxbl-grid-data-row-selected > td {
        background-color: var(--sedna-primary-subtle) !important;
    }

        .sedna-app .dxbl-grid-data-row-selected:hover,
        .sedna-app .dxbl-grid-data-row-selected:hover > td {
            background-color: var(--sedna-primary-subtle-hover) !important;
        }

    /* Grid Data Cells */
    .sedna-app .dxbl-grid-data-cell {
        padding: var(--sedna-space-2) var(--sedna-space-3);
        font-size: var(--sedna-text-sm);
        /* color/background con !important: DevExpress tematizza il DxGrid come
           chiaro (testo scuro), quindi senza !important il testo resta scuro su
           sfondo scuro. Token theme-aware: chiaro→scuro, scuro→chiaro. */
        color: var(--sedna-text) !important;
        background-color: var(--sedna-surface);
        vertical-align: middle;
        border-right: none;
    }

    /* Grid Footer/Pager */
    .sedna-app .dxbl-grid-footer,
    .sedna-app .dxbl-grid-pager {
        background-color: var(--sedna-surface);
        border-top: 1px solid var(--sedna-divider);
        padding: var(--sedna-space-3) var(--sedna-space-4);
    }

    .sedna-app .dxbl-pager {
        display: flex;
        align-items: center;
        gap: var(--sedna-space-1);
    }

        .sedna-app .dxbl-pager-item,
        .sedna-app .dxbl-pager .dxbl-btn {
            height: var(--sedna-control-height-sm);
            min-width: var(--sedna-control-height-sm);
            padding: 0 var(--sedna-space-2);
            border-radius: var(--sedna-radius-md);
            border: 1px solid transparent;
            background-color: transparent;
            color: var(--sedna-text-secondary);
            transition: all var(--sedna-transition-fast);
        }

            .sedna-app .dxbl-pager-item:hover,
            .sedna-app .dxbl-pager .dxbl-btn:hover {
                background-color: var(--sedna-surface-hover);
            }

        .sedna-app .dxbl-pager-item-active,
        .sedna-app .dxbl-pager .dxbl-btn-active {
            background-color: var(--sedna-primary) !important;
            color: var(--sedna-on-primary) !important;
            font-weight: var(--sedna-font-semibold);
        }

    /* Grid Filter Row */
    .sedna-app .dxbl-grid-filter-row {
        background-color: var(--sedna-surface);
        border-bottom: 1px solid var(--sedna-divider);
    }

        .sedna-app .dxbl-grid-filter-row input,
        .sedna-app .dxbl-grid-filter-row select {
            height: var(--sedna-control-height-sm);
            font-size: var(--sedna-text-sm);
        }

    /* Grid Empty State */
    .sedna-app .dxbl-grid-empty-data-row {
        padding: var(--sedna-space-12) var(--sedna-space-4);
        text-align: center;
        color: var(--sedna-text-secondary);
    }

    /* Grid Loading */
    .sedna-app .dxbl-grid-loading-panel {
        background-color: var(--sedna-surface);
        opacity: 0.95;
        backdrop-filter: blur(4px);
    }

    .sedna-app .dxbl-grid-loading-indicator {
        color: var(--sedna-primary);
    }

    /* =============================================================================
   CARDS - DxCard
   ============================================================================= */
    .sedna-app .dxbl-card {
        border-radius: var(--sedna-radius-lg);
        border: 1px solid var(--sedna-border);
        background-color: var(--sedna-surface);
        box-shadow: var(--sedna-shadow-sm);
        padding: var(--sedna-space-4);
        transition: box-shadow var(--sedna-transition-base);
    }

        .sedna-app .dxbl-card:hover {
            box-shadow: var(--sedna-shadow-md);
        }

    .sedna-app .dxbl-card-header {
        font-size: var(--sedna-text-lg);
        font-weight: var(--sedna-font-semibold);
        color: var(--sedna-text);
        margin-bottom: var(--sedna-space-3);
    }

    .sedna-app .dxbl-card-body {
        color: var(--sedna-text-secondary);
    }

    /* =============================================================================
   MODAL / POPUP - DxPopup, DxWindow
   ============================================================================= */
    .sedna-app .dxbl-popup,
    .sedna-app .dxbl-window,
    .sedna-app .dx-popup-content {
        border-radius: var(--sedna-radius-lg);
        border: 1px solid var(--sedna-border);
        background-color: var(--sedna-surface);
        box-shadow: var(--sedna-shadow-xl);
    }

    .sedna-app .dxbl-popup-header,
    .sedna-app .dxbl-window-header {
        padding: var(--sedna-space-4);
        border-bottom: 1px solid var(--sedna-divider);
        font-size: var(--sedna-text-lg);
        font-weight: var(--sedna-font-semibold);
        color: var(--sedna-text);
    }

    .sedna-app .dxbl-popup-body,
    .sedna-app .dxbl-window-body {
        padding: var(--sedna-space-4);
    }

    .sedna-app .dxbl-popup-footer,
    .sedna-app .dxbl-window-footer {
        padding: var(--sedna-space-4);
        border-top: 1px solid var(--sedna-divider);
        display: flex;
        justify-content: flex-end;
        gap: var(--sedna-space-2);
    }

    /* Modal backdrop */
    .sedna-app .dxbl-popup-backdrop,
    .sedna-app .dx-overlay-content {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
    }

    /* =============================================================================
   TABS - DxTabs
   ============================================================================= */
    .sedna-app .dxbl-tabs {
        border-bottom: 1px solid var(--sedna-divider);
        display: flex;
        gap: var(--sedna-space-1);
    }

    /* ⚠️ IL VERSO VA DICHIARATO, ALTRIMENTI DIPENDE DALLO SPAZIO DISPONIBILE.
       `.dxbl-tabs` non è la striscia delle schede: è la RADICE del componente, e ha due
       figli — `.dxbl-tabs-tablist` (le schede) e `.dxbl-tabs-content-panel` (il corpo).
       Con `display:flex` qui sopra e la direzione di serie (row) i due stanno in FILA; nelle
       pagine il difetto non si vedeva per un caso fortunato: DevExpress mette
       `flex-wrap: wrap` sulla radice e dà al corpo `flex: 0 0 100%`, quindi il corpo va a
       capo e finisce sotto le schede.
       Dentro un POPUP quel caso fortunato si rompe: il popup si dimensiona sul contenuto,
       quindi la larghezza disponibile non è un vincolo, il «va a capo» non scatta mai e le
       schede finiscono affiancate al loro corpo — con la barra di scorrimento orizzontale a
       completare l'opera (visto il 2026-08-17 su castelletti e trasporto; misurato: radice
       flex-wrap wrap, corpo flex 0 0 100%, tablist e corpo alla stessa y).
       Si dichiara solo per le schede in alto e in basso: `left`/`right` sono le posizioni in
       cui la fila È il layout giusto, e vanno lasciate stare. */
    .sedna-app .dxbl-tabs.dxbl-tabs-top {
        flex-direction: column;
    }

    .sedna-app .dxbl-tabs.dxbl-tabs-bottom {
        flex-direction: column-reverse;
    }

    /* ⚠️ E IL «VA A CAPO» VA SPENTO, con `!important` perché DevExpress lo dichiara così.
       Dichiarare la direzione non bastava, e il difetto tornava dove meno te lo aspetti
       (inserimento articolo, 2026-08-18): in una colonna che PUÒ andare a capo, un figlio
       che non ci sta in altezza non trabocca — apre una SECONDA COLONNA. Il pannello del
       contenuto chiede `flex: 0 0 100%`, cioè tutta l'altezza: se la pagina ha un'altezza
       propria e il contenuto è più alto, quel 100% non entra e il pannello finisce
       affiancato alle schede. Ecco perché nei popup non si vedeva — lì l'altezza non era
       vincolata — e nelle pagine sì.
       Misurato a video: con `flex-wrap: nowrap` inline il computed restava `wrap` (segno
       dell'!important di DevExpress); mettendolo importante, il contenuto è sceso sotto le
       schede al primo ridisegno. È l'unico punto di questo foglio dove serve.
       Left/right restano fuori: là la fila È il layout giusto. */
    .sedna-app .dxbl-tabs.dxbl-tabs-top,
    .sedna-app .dxbl-tabs.dxbl-tabs-bottom {
        flex-wrap: nowrap !important;
    }

    .sedna-app .dxbl-tab {
        padding: var(--sedna-space-2) var(--sedna-space-3);
        font-size: var(--sedna-text-sm);
        font-weight: var(--sedna-font-medium);
        color: var(--sedna-text-secondary);
        border: none;
        border-bottom: 2px solid transparent;
        background-color: transparent;
        cursor: pointer;
        transition: all var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-tab:hover {
            color: var(--sedna-text);
            background-color: var(--sedna-surface-hover);
        }

    .sedna-app .dxbl-tab-active {
        color: var(--sedna-primary);
        border-bottom-color: var(--sedna-primary);
    }

    /* =============================================================================
   MENU - DxMenu, DxContextMenu
   ============================================================================= */
    .sedna-app .dxbl-menu,
    .sedna-app .dxbl-context-menu {
        background-color: var(--sedna-surface);
        border: 1px solid var(--sedna-border);
        border-radius: var(--sedna-radius-md);
        box-shadow: var(--sedna-shadow-lg);
    }

    .sedna-app .dxbl-menu-item,
    .sedna-app .dxbl-context-menu-item {
        padding: var(--sedna-space-2) var(--sedna-space-4);
        font-size: var(--sedna-text-sm);
        color: var(--sedna-text);
        transition: background-color var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-menu-item:hover,
        .sedna-app .dxbl-context-menu-item:hover {
            background-color: var(--sedna-surface-hover);
            color: var(--sedna-primary);
        }

    .sedna-app .dxbl-menu-item-active {
        background-color: var(--sedna-primary-subtle);
        color: var(--sedna-primary);
    }

    /* =============================================================================
   TOOLBAR - DxToolbar
   ============================================================================= */
    .sedna-app .dxbl-toolbar {
        padding: var(--sedna-space-2) var(--sedna-space-3);
        background-color: var(--sedna-surface);
        display: flex;
        align-items: center;
        gap: var(--sedna-space-2);
        height: var(--sedna-control-height-lg) !important;
    }

    /* =============================================================================
   ACCORDION - DxAccordion
   ============================================================================= */
    .sedna-app .dxbl-accordion-item {
        border: 1px solid var(--sedna-border);
        border-radius: var(--sedna-radius-md);
        margin-bottom: var(--sedna-space-2);
        overflow: hidden;
    }

    .sedna-app .dxbl-accordion-header {
        padding: var(--sedna-space-3) var(--sedna-space-4);
        background-color: var(--sedna-surface);
        font-weight: var(--sedna-font-medium);
        cursor: pointer;
        transition: background-color var(--sedna-transition-fast);
    }

        .sedna-app .dxbl-accordion-header:hover {
            background-color: var(--sedna-surface-hover);
        }

    .sedna-app .dxbl-accordion-body {
        padding: var(--sedna-space-4);
        border-top: 1px solid var(--sedna-divider);
    }

    /* =============================================================================
   TOAST - DxToast
   ============================================================================= */
    .sedna-app .dxbl-toast {
        border-radius: var(--sedna-radius-md);
        box-shadow: var(--sedna-shadow-xl);
        padding: var(--sedna-space-3) var(--sedna-space-4);
        min-width: 300px;
    }

    .sedna-app .dxbl-toast-success {
        background-color: var(--sedna-success);
        color: white;
    }

    .sedna-app .dxbl-toast-error {
        background-color: var(--sedna-error);
        color: white;
    }

    .sedna-app .dxbl-toast-warning {
        background-color: var(--sedna-warning);
        color: white;
    }

    .sedna-app .dxbl-toast-info {
        background-color: var(--sedna-info);
        color: white;
    }

    /* =============================================================================
   SCROLLBAR CUSTOMIZATION
   ============================================================================= */
    .sedna-app .dxbl-grid-data-container::-webkit-scrollbar,
    .sedna-app .dxbl-scrollable::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .sedna-app .dxbl-grid-data-container::-webkit-scrollbar-track,
    .sedna-app .dxbl-scrollable::-webkit-scrollbar-track {
        background-color: var(--sedna-bg);
    }

    .sedna-app .dxbl-grid-data-container::-webkit-scrollbar-thumb,
    .sedna-app .dxbl-scrollable::-webkit-scrollbar-thumb {
        background-color: var(--sedna-border-strong);
        border-radius: var(--sedna-radius-sm);
    }

        .sedna-app .dxbl-grid-data-container::-webkit-scrollbar-thumb:hover,
        .sedna-app .dxbl-scrollable::-webkit-scrollbar-thumb:hover {
            background-color: var(--sedna-text-tertiary);
        }

/* =============================================================================
   DARK MODE OVERRIDES
   Note: DevExpress Fluent dark.min.css handles most dark mode styling natively.
   These overrides are only for Sedna-specific customizations (ReadOnly state,
   custom component styling) that the DX dark theme does not cover.
   ============================================================================= */

/* Dark Mode: ReadOnly inputs (Sedna custom state) */
.sedna-theme-dark .dxbl-edit[readonly],
.sedna-theme-dark .dx-texteditor-input[readonly],
.sedna-theme-dark .dxbl-textbox[readonly],
.sedna-theme-dark .dxbl-memo[readonly] {
    color: var(--sedna-text-secondary) !important;
    background-color: var(--sedna-surface-variant) !important;
    border-color: var(--sedna-border) !important;
    opacity: 1 !important;
}

.sedna-theme-dark .dx-state-readonly .dx-texteditor-input,
.sedna-theme-dark .dx-editor-readonly .dx-texteditor-input {
    color: var(--sedna-text-secondary) !important;
    background-color: var(--sedna-surface-variant) !important;
}

.sedna-theme-dark .dx-state-readonly,
.sedna-theme-dark .dx-editor-readonly {
    color: var(--sedna-text-secondary) !important;
}

/* =============================================================================
   RESPONSIVE OVERRIDES
   ============================================================================= */
@media (max-width: 768px) {
    .sedna-app .dxbl-btn,
    .sedna-app .dx-button {
        height: var(--sedna-control-height-sm);
        padding: 0 var(--sedna-space-3);
        font-size: var(--sedna-text-xs);
    }

    .sedna-app .dxbl-grid-header-cell,
    .sedna-app .dxbl-grid-data-cell {
        padding: var(--sedna-space-2) var(--sedna-space-3);
    }

    .sedna-app .dxbl-popup,
    .sedna-app .dxbl-window {
        border-radius: var(--sedna-radius-md);
    }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================= */

/* Focus visible for all interactive elements */
.sedna-app .dxbl-btn:focus-visible,
.sedna-app .dx-button:focus-visible,
.sedna-app .dxbl-edit:focus-visible,
.sedna-app .dx-texteditor-input:focus-visible,
.sedna-app .dxbl-checkbox:focus-visible,
.sedna-app .dxbl-switch:focus-visible {
    outline: 2px solid var(--sedna-focus-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sedna-app .dxbl-btn,
    .sedna-app .dx-button,
    .sedna-app .dxbl-edit,
    .sedna-app .dx-texteditor-input {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sedna-app .dxbl-btn,
    .sedna-app .dx-button,
    .sedna-app .dxbl-edit,
    .sedna-app .dx-texteditor-input,
    .sedna-app .dxbl-grid-data-row {
        transition: none !important;
    }
}

/* =============================================================================
   FLUENT THEME: OUTLINED INPUTS (rimuove underline, bordo uniforme 4 lati)
   ============================================================================= */

/*
 * Il tema Fluent di DevExpress usa uno stile "underline" sugli input
 * con border-bottom piu spesso/scuro. Override per bordo uniforme "outlined".
 */

/* Input wrapper principale */
.sedna-app .dxbl-input-group {
    border: 1px solid var(--sedna-border) !important;
    border-radius: var(--sedna-radius-input) !important;
    overflow: hidden;
}

/* Override del border-bottom scuro del Fluent theme */
.sedna-app .dxbl-input-group::after,
.sedna-app .dxbl-input-group::before {
    display: none !important;
}

/* Hover */
.sedna-app .dxbl-input-group:hover:not(:focus-within) {
    border-color: var(--sedna-border-strong) !important;
}

/* Focus */
.sedna-app .dxbl-input-group:focus-within {
    border-color: var(--sedna-focus-color) !important;
    box-shadow: var(--sedna-input-focus-bar), var(--sedna-focus-ring) !important;
    background-color: var(--sedna-input-focus-bg) !important;
}

    .sedna-app .dxbl-input-group:focus-within > input,
    .sedna-app .dxbl-input-group:focus-within .dxbl-edit-input {
        background-color: transparent !important;
    }

/* Rimuovi bordi interni dall'input dentro il wrapper */
.sedna-app .dxbl-input-group > input,
.sedna-app .dxbl-input-group > .dxbl-edit-input,
.sedna-app .dxbl-input-group > .form-control,
.sedna-app .dxbl-input-group input.dxbl-edit-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Combo/Dropdown edit containers */
.sedna-app .dxbl-fl-combobox .dxbl-input-group,
.sedna-app .dxbl-fl-date-edit .dxbl-input-group,
.sedna-app .dxbl-fl-spin-edit .dxbl-input-group,
.sedna-app .dxbl-fl-text-box .dxbl-input-group {
    border: 1px solid var(--sedna-border) !important;
    border-radius: var(--sedna-radius-input) !important;
}

/* Override variabili Fluent per il bottom-border */
.sedna-app {
    --dxbl-fl-edit-border-bottom-width: 1px;
    --dxbl-fl-edit-border-bottom-color: var(--sedna-border);
    --dxbl-fl-edit-focus-border-bottom-width: 1px;
    --dxbl-fl-edit-focus-border-bottom-color: var(--sedna-focus-color);
}

/* =============================================================================
   UTILITY CLASSES FOR DEVEXPRESS COMPONENTS
   ============================================================================= */

/* Remove default DevExpress margins */
.sedna-app .dxbl-grid,
.sedna-app .dxbl-card,
.sedna-app .dxbl-form-layout {
    margin: 0;
}

/* Full width components */
.sedna-app .dxbl-full-width {
    width: 100%;
}

/* Component spacing utilities */
.sedna-app .dxbl-mb-2 {
    margin-bottom: var(--sedna-space-2);
}

.sedna-app .dxbl-mb-3 {
    margin-bottom: var(--sedna-space-3);
}

.sedna-app .dxbl-mb-4 {
    margin-bottom: var(--sedna-space-4);
}

.sedna-app .dxbl-mt-2 {
    margin-top: var(--sedna-space-2);
}

.sedna-app .dxbl-mt-3 {
    margin-top: var(--sedna-space-3);
}

.sedna-app .dxbl-mt-4 {
    margin-top: var(--sedna-space-4);
}

/* =============================================================================
   END OF SEDNA DEVEXPRESS OVERRIDES
   ============================================================================= */

/* ── Etichetta a fianco: campo ed etichetta sulla STESSA linea ────────────────
   Misurato sul vivo (movimento di magazzino, 26/08): la riga di DxFormLayout è
   alta 32px, l'etichetta ci si centra, ma il nostro campo è alto 20 e resta
   INCOLLATO IN CIMA — sei pixel di sfasamento su ogni riga della maschera.

   ⚠️ Non è un difetto di quella pagina: nasce dal giorno in cui gli input sono
   scesi a 20px (input xs di serie) mentre la riga DevExpress è rimasta quella
   di prima. Vale su OGNI form con l'etichetta a fianco, e finora si vedeva poco
   solo perché le righe erano distanti fra loro. Stretta la spaziatura, salta
   agli occhi. Per questo la correzione sta qui e non nella pagina. */
.dxbl-fl-item-horizontal {
    align-items: center;
}

/* ── «Apri la scheda» quando l'etichetta è A FIANCO ───────────────────────────
   Il segnetto nasce ancorato in alto a destra, che è giusto quando l'etichetta
   sta SOPRA il campo. Con l'etichetta a fianco lassù non c'è nessuna etichetta:
   c'è il campo della riga di sopra. Qui va a SEGUIRE dell'etichetta, cioè
   subito a sinistra del campo e centrato con esso (Antonio, 26/08). */
.dxbl-fl-item-horizontal .sedna-lookup__scheda {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 0.3rem);
}