/* =============================================================================
   SEDNA DESIGN SYSTEM - COMPONENTS
   Componenti riutilizzabili
   ============================================================================= */

/* =============================================================================
   BUTTONS
   ============================================================================= */
.sedna-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sedna-space-1);
    font-family: var(--sedna-font-sans);
    font-size: var(--sedna-text-sm);
    font-weight: var(--sedna-font-medium);
    line-height: 1;
    padding: 0 calc(var(--sedna-space-3) * var(--sedna-density));
    /* D28: rimosso `* var(--sedna-density)` — il responsive è già nel
       clamp() di --sedna-control-height-md (vedi sedna.tokens.css).
       Moltiplicare per density faceva perdere responsività in
       scale-compact e raddoppiava il sizing in spacious. */
    height: var(--sedna-control-height-md);
    border: 1px solid transparent;
    border-radius: var(--sedna-radius-input);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all var(--sedna-transition-fast);
}

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

    .sedna-btn:disabled,
    .sedna-btn.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Button Sizes */
.sedna-btn--sm {
    height: calc(var(--sedna-control-height-sm) * var(--sedna-density));
    padding: 0 calc(var(--sedna-space-3) * var(--sedna-density));
    font-size: var(--sedna-text-xs);
}

.sedna-btn--md {
    /* D28: rimosso `* var(--sedna-density)` — il responsive è già nel
       clamp() di --sedna-control-height-md (vedi sedna.tokens.css).
       Moltiplicare per density faceva perdere responsività in
       scale-compact e raddoppiava il sizing in spacious. */
    height: var(--sedna-control-height-md);
    padding: 0 calc(var(--sedna-space-4) * var(--sedna-density));
    font-size: var(--sedna-text-sm);
}

.sedna-btn--lg {
    height: calc(var(--sedna-control-height-lg) * var(--sedna-density));
    padding: 0 calc(var(--sedna-space-6) * var(--sedna-density));
    font-size: var(--sedna-text-base);
}

/* Button Variants */
.sedna-btn--primary {
    background-color: var(--sedna-primary);
    color: var(--sedna-on-primary);
    border-color: var(--sedna-primary);
}

    .sedna-btn--primary:hover:not(:disabled) {
        background-color: var(--sedna-primary-hover);
        border-color: var(--sedna-primary-hover);
    }

    .sedna-btn--primary:active:not(:disabled) {
        background-color: var(--sedna-primary-active);
    }

.sedna-btn--secondary {
    background-color: var(--sedna-surface);
    color: var(--sedna-text);
    border-color: var(--sedna-border-strong);
}

    .sedna-btn--secondary:hover:not(:disabled) {
        background-color: var(--sedna-surface-hover);
        border-color: var(--sedna-primary);
    }

.sedna-btn--ghost {
    background-color: transparent;
    color: var(--sedna-text);
    border-color: transparent;
}

    .sedna-btn--ghost:hover:not(:disabled) {
        background-color: var(--sedna-surface-variant);
    }

.sedna-btn--danger {
    background-color: var(--sedna-error-600);
    color: white;
    border-color: var(--sedna-error-600);
}

    .sedna-btn--danger:hover:not(:disabled) {
        background-color: var(--sedna-error-700);
    }

/* Icon Button */
.sedna-btn--icon {
    /* D28: stesso fix delle height — il responsive è già nel clamp() */
    width: var(--sedna-control-height-md);
    padding: 0;
}

    .sedna-btn--icon.sedna-btn--sm {
        width: calc(var(--sedna-control-height-sm) * var(--sedna-density));
    }

    .sedna-btn--icon.sedna-btn--lg {
        width: calc(var(--sedna-control-height-lg) * var(--sedna-density));
    }

/* =============================================================================
   FORM FIELDS
   ============================================================================= */
.sedna-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--sedna-space-1) * var(--sedna-density));
    width: 100%;
}

.sedna-field__label {
    font-size: var(--sedna-text-xs);
    font-weight: var(--sedna-font-medium);
    color: var(--sedna-text-secondary);
    line-height: var(--sedna-leading-tight);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sedna-field__label--required::after {
    content: ' *';
    color: var(--sedna-error-600);
}

.sedna-field__help {
    font-size: var(--sedna-text-xs);
    color: var(--sedna-text-tertiary);
    line-height: var(--sedna-leading-snug);
}

.sedna-field__error {
    font-size: var(--sedna-text-xs);
    color: var(--sedna-error-600);
    line-height: var(--sedna-leading-snug);
    display: flex;
    align-items: center;
    gap: var(--sedna-space-1);
}

/* Input Base */
.sedna-input {
    width: 100%;
    /* D28: rimosso `* var(--sedna-density)` — il responsive è già nel
       clamp() di --sedna-control-height-md (vedi sedna.tokens.css).
       Moltiplicare per density faceva perdere responsività in
       scale-compact e raddoppiava il sizing in spacious. */
    height: var(--sedna-control-height-md);
    padding: var(--sedna-input-padding-y) calc(var(--sedna-input-padding-x) * var(--sedna-density));
    font-family: var(--sedna-font-sans);
    font-size: var(--sedna-text-sm);
    color: var(--sedna-text);
    background-color: var(--sedna-surface);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-input);
    transition: all var(--sedna-transition-fast);
}

    .sedna-input::placeholder {
        color: var(--sedna-text-disabled);
    }

    .sedna-input:hover:not(:disabled):not(:focus) {
        border-color: var(--sedna-border-strong);
    }

    .sedna-input:focus {
        outline: none;
        border-color: var(--sedna-primary);
        box-shadow: var(--sedna-focus-ring);
    }

    .sedna-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: var(--sedna-surface-variant);
    }

.sedna-input--error {
    border-color: var(--sedna-error-600);
}

    .sedna-input--error:focus {
        border-color: var(--sedna-error-600);
        box-shadow: 0 0 0 2px var(--sedna-error-50);
    }

/* Textarea */
.sedna-textarea {
    min-height: calc(var(--sedna-control-height-md) * 2.5);
    padding: calc(var(--sedna-space-3) * var(--sedna-density));
    resize: vertical;
}

/* =============================================================================
   CARDS
   ============================================================================= */
.sedna-card {
    background-color: var(--sedna-surface);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg);
    overflow: hidden;
    transition: all var(--sedna-transition-base);
}

.sedna-card--interactive {
    cursor: pointer;
}

    .sedna-card--interactive:hover {
        border-color: var(--sedna-primary);
        box-shadow: var(--sedna-shadow-md);
    }

.sedna-card__header {
    padding: var(--sedna-space-4);
    border-bottom: 1px solid var(--sedna-divider);
}

.sedna-card__title {
    font-size: var(--sedna-text-lg);
    font-weight: var(--sedna-font-semibold);
    color: var(--sedna-text);
    margin: 0;
}

.sedna-card__subtitle {
    font-size: var(--sedna-text-sm);
    color: var(--sedna-text-secondary);
    margin-top: var(--sedna-space-1);
}

.sedna-card__body {
    padding: var(--sedna-space-4);
}

.sedna-card__footer {
    padding: var(--sedna-space-4);
    border-top: 1px solid var(--sedna-divider);
    background-color: var(--sedna-surface-variant);
}

/* =============================================================================
   BADGES
   ============================================================================= */
.sedna-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--sedna-space-1) * var(--sedna-density)) calc(var(--sedna-space-2) * var(--sedna-density));
    font-size: var(--sedna-text-xs);
    font-weight: var(--sedna-font-medium);
    line-height: 1;
    border-radius: var(--sedna-radius-full);
    white-space: nowrap;
}

.sedna-badge--primary {
    background-color: var(--sedna-primary-subtle);
    color: var(--sedna-primary);
}

.sedna-badge--success {
    background-color: var(--sedna-success-50);
    color: var(--sedna-success-700);
}

.sedna-badge--warning {
    background-color: var(--sedna-warning-50);
    color: var(--sedna-warning-700);
}

.sedna-badge--error {
    background-color: var(--sedna-error-50);
    color: var(--sedna-error-700);
}

.sedna-badge--neutral {
    background-color: var(--sedna-surface-variant);
    color: var(--sedna-text-secondary);
}

/* =============================================================================
   ALERTS
   ============================================================================= */
/* D28: Alert anti-pattern fix — niente più border-left 4px ("side-tab" AI
   tell, già rimosso da impeccable detect in Prima Nota e Toast). Adesso:
   background tinted soft + border 1px completo + icona colorata semantica.
   La variante semantic resta veicolata via bg/border-color/text-color. */
.sedna-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sedna-space-3);
    padding: var(--sedna-space-4);
    border-radius: var(--sedna-radius-md);
    border: 1px solid transparent;
}

.sedna-alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.sedna-alert__content {
    flex: 1;
}

.sedna-alert__title {
    font-size: var(--sedna-text-sm);
    font-weight: var(--sedna-font-semibold);
    margin-bottom: var(--sedna-space-1);
}

.sedna-alert__message {
    font-size: var(--sedna-text-sm);
    line-height: var(--sedna-leading-relaxed);
}

.sedna-alert--info {
    background-color: var(--sedna-info-50);
    border-color: color-mix(in srgb, var(--sedna-info-500) 30%, transparent);
    color: var(--sedna-info-700);
}

.sedna-alert--success {
    background-color: var(--sedna-success-50);
    border-color: color-mix(in srgb, var(--sedna-success-500) 30%, transparent);
    color: var(--sedna-success-700);
}

.sedna-alert--warning {
    background-color: var(--sedna-warning-50);
    border-color: color-mix(in srgb, var(--sedna-warning-500) 30%, transparent);
    color: var(--sedna-warning-700);
}

.sedna-alert--error {
    background-color: var(--sedna-error-50);
    border-color: color-mix(in srgb, var(--sedna-error-500) 30%, transparent);
    color: var(--sedna-error-700);
}

/* =============================================================================
   LOADING
   ============================================================================= */
.sedna-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--sedna-border);
    border-top-color: var(--sedna-primary);
    border-radius: 50%;
    animation: sedna-spin 0.6s linear infinite;
}

@keyframes sedna-spin {
    to {
        transform: rotate(360deg);
    }
}

.sedna-skeleton {
    background: linear-gradient( 90deg, var(--sedna-surface-variant) 0%, var(--sedna-surface-hover) 50%, var(--sedna-surface-variant) 100% );
    background-size: 200% 100%;
    animation: sedna-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--sedna-radius-md);
}

@keyframes sedna-skeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* =============================================================================
   PAGE SHELL
   ============================================================================= */
.sedna-page-shell {
    display: flex;
    flex-direction: column;
    gap: calc(var(--sedna-space-6) * var(--sedna-density));
    padding: calc(var(--sedna-space-6) * var(--sedna-density));
}

.sedna-page-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sedna-space-4);
    flex-wrap: wrap;
}

.sedna-page-shell__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--sedna-space-1);
}

.sedna-page-shell__title {
    font-size: var(--sedna-text-3xl);
    font-weight: var(--sedna-font-semibold);
    color: var(--sedna-text);
    margin: 0;
}

.sedna-page-shell__subtitle {
    font-size: var(--sedna-text-base);
    color: var(--sedna-text-secondary);
}

.sedna-page-shell__actions {
    display: flex;
    align-items: center;
    gap: var(--sedna-space-2);
}

.sedna-page-shell__content {
    flex: 1;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .sedna-page-shell {
        padding: calc(var(--sedna-space-4) * var(--sedna-density));
    }

    .sedna-page-shell__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sedna-page-shell__actions {
        width: 100%;
        justify-content: stretch;
    }

        .sedna-page-shell__actions > * {
            flex: 1;
        }
}

/* ===== SednaConfirmDialog: pulsante di conferma ===== */
/* Foreground BIANCO su fondo colorato (Danger/Warning/Info/Success): icona e testo
   restano leggibili anche sull'arancione "warning" (dove Bootstrap userebbe testo
   scuro). Globale perché il footer del DxPopup è teleportato fuori dal componente
   (la CSS scoped non lo raggiungerebbe). */
.sedna-confirm-dialog__confirm,
.sedna-confirm-dialog__confirm * {
    color: var(--sedna-neutral-0) !important;
}

/* ── SednaForm / SednaField ─────────────────────────────────────
   Il wrapper del campo non genera box: i figli partecipano al layout
   del genitore (DxFormLayoutItem) come se il div non esistesse. */
[data-sef-field] { display: contents; }

/* ── SednaForm: ingranaggio "Ordine campi" + pannello ──────────── */
.sedna-form { position: relative; }
/* Chip appoggiato sul bordo superiore del form, vicino all'angolo destro
   (meta' fuori): NON si sovrappone mai ai campi, anche quando partono subito.
   Posizione personalizzabile dall'host via CSS vars (es. Prima Nota lo ancora
   al box documento). Richiede overflow visibile sul contenitore. */
.sedna-form__gear {
    position: absolute;
    top: var(--sef-gear-top, -11px);
    right: var(--sef-gear-right, 8px);
    z-index: 5;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    border-radius: 999px;
    color: var(--sedna-text-tertiary);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: .7;
    box-shadow: var(--sedna-shadow-sm);
    transition: opacity .12s ease, color .12s ease;
}
.sedna-form:hover .sedna-form__gear { opacity: 1; }
.sedna-form__gear:hover { color: var(--sedna-primary); border-color: var(--sedna-primary); }
.sedna-form__gear:focus-visible { opacity: 1; outline: 2px solid var(--sedna-primary); outline-offset: 1px; }

.sedna-form-order__hint { margin: 0 0 10px; font-size: .75rem; color: var(--sedna-text-tertiary); line-height: 1.5; }
.sedna-form-order__list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.sedna-form-order__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-base, .375rem);
    background: var(--sedna-surface);
    font-size: .8125rem;
}
.sedna-form-order__row.skip { opacity: .6; }
.sedna-form-order__row .pos {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center;
    border-radius: 6px;
    background: var(--sedna-surface-variant);
    color: var(--sedna-text-secondary);
    font-size: .6875rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sedna-form-order__row .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--sedna-text); }
.sedna-form-order__row .badge-skip {
    flex: none; font-size: .625rem; font-weight: 700; letter-spacing: .03em;
    background: var(--sedna-warning-50); color: var(--sedna-warning-700);
    border-radius: 4px; padding: 1px 6px;
}
.sedna-form-order__row .arrows { display: flex; gap: 2px; flex: none; }
.sedna-form-order__row .arrows button {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    border-radius: 5px;
    color: var(--sedna-text-secondary);
    font-size: .7rem;
    cursor: pointer;
}
.sedna-form-order__row .arrows button:hover:not(:disabled) { border-color: var(--sedna-primary); color: var(--sedna-primary); }
.sedna-form-order__row .arrows button:disabled { opacity: .35; cursor: default; }

.sedna-form-order__reset {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: auto;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--sedna-border-strong);
    background: var(--sedna-surface);
    border-radius: var(--sedna-radius-base, .375rem);
    color: var(--sedna-text-secondary);
    font-size: .75rem; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.sedna-form-order__reset:hover { border-color: var(--sedna-primary); color: var(--sedna-primary); }

/* ── SednaForm: campi nascosti dall'utente ──────────────────────
   data-sef-hidden e' applicato dal JS (applyVisibility) in base alla
   config persistita. :has() collassa l'INTERO DxFormLayoutItem (campo +
   caption); il fallback nasconde almeno il contenuto del campo. */
[data-sef-field][data-sef-hidden] { display: none; }
.dxbl-fl-item:has([data-sef-field][data-sef-hidden]) { display: none !important; }

/* pannello: marcatore Fine form + occhio visibilita' */
.sedna-form-order__row--end {
    background: var(--sedna-primary-subtle);
    border-color: var(--sedna-primary);
    border-style: dashed;
}
.sedna-form-order__row--end .pos { background: transparent; color: var(--sedna-primary); }
.sedna-form-order__row--end .lbl { color: var(--sedna-primary); font-weight: 700; }
.sedna-form-order__row--end .end-sub { font-weight: 400; font-size: .6875rem; color: var(--sedna-text-tertiary); }

.sedna-form-order__row.hidden-field .lbl { text-decoration: line-through; color: var(--sedna-text-tertiary); }
.sedna-form-order__row .eye {
    width: 24px; height: 24px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    border-radius: 5px;
    color: var(--sedna-text-secondary);
    font-size: .7rem;
    cursor: pointer;
}
.sedna-form-order__row .eye:hover:not(:disabled) { border-color: var(--sedna-primary); color: var(--sedna-primary); }
.sedna-form-order__row .eye.off { color: var(--sedna-warning-700); background: var(--sedna-warning-50); }
.sedna-form-order__row .eye:disabled { opacity: .35; cursor: default; }

/* pannello: toggle SALTO Invio/Tab (acceso = campo saltato, resta editabile col mouse) */
.sedna-form-order__row .skip-toggle {
    width: 24px; height: 24px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    border-radius: 5px;
    color: var(--sedna-text-secondary);
    font-size: .7rem;
    cursor: pointer;
}
.sedna-form-order__row .skip-toggle:hover { border-color: var(--sedna-primary); color: var(--sedna-primary); }
.sedna-form-order__row .skip-toggle.on { color: var(--sedna-warning-700); background: var(--sedna-warning-50); border-color: var(--sedna-warning-700); }

/* Griglia editabile, finestra attiva: righe congelate (display-only) */
.sedna-editable-grid tr.seg-row-frozen { cursor: pointer; }
.sedna-editable-grid tr.seg-row-frozen:hover td { background: var(--sedna-surface-variant, #f7f8fa); }

/* Input NATIVI (sostituti leggeri dei wrapper DX dentro le griglie) */
.sedna-native-input {
    width: 100%;
    height: var(--sedna-input-height, 1.375rem);
    border: 1px solid var(--sedna-border);
    /* Stesso raggio di tutto il resto: era 4px fisso mentre lenti e caselle DevExpress
       stanno su --sedna-radius-input. Tre valori per lo stesso angolo si vedono. */
    border-radius: var(--sedna-radius-input, 0.375rem);
    background: var(--sedna-surface);
    color: var(--sedna-text);
    /* stesso font degli editor DevExpress: coerenza totale nel foglio */
    font-family: var(--sedna-font-sans, inherit);
    font-size: var(--sedna-input-font-size, 0.75rem);
    padding: 0 4px;
    text-align: inherit;
    outline: none;
    box-sizing: border-box;
}

    /* Focus nella griglia: oltre a bordo, alone e tinta, la barretta verticale in
       tinta sul lato sinistro — in una riga di 15 celle e' l'unico segno che si
       trova a colpo d'occhio senza ingrossare nulla. */
    .sedna-native-input:focus {
        border-color: var(--sedna-primary);
        box-shadow: var(--sedna-input-focus-bar), 0 0 0 2px var(--sedna-primary-subtle, #e3f2fd);
        background-color: var(--sedna-input-focus-bg, #fff);
    }

    .sedna-native-input[readonly] { color: var(--sedna-text-secondary); }

/* ─── DATE: il SEGMENTO attivo (giorno / mese / anno) ───────────────────────
   In un <input type="date"> il browser evidenzia il pezzo su cui stai scrivendo:
   e' l'unico modo di sapere dove sei e cosa cambieranno le frecce su/giu'. Lo
   dipinge con l'Highlight di sistema, che e' AZZURRO e conta sul contrasto con
   uno sfondo bianco.
   Il nostro focus mette sull'input una tinta primaria tenue (--sedna-input-focus-bg:
   10% del primario in chiaro, 20% in scuro): azzurro su azzurro, e il segmento
   attivo diventa invisibile. Antonio: "non si vede quale pezzo e' evidenziato".

   Non tolgo la tinta del campo — e' il segno che dice "stai scrivendo QUI" in una
   riga di 15 celle, ed e' una decisione presa apposta. Do' invece al segmento un
   contrasto SUO, che non dipende da cosa c'e' sotto: pieno primario + il colore
   pensato per starci sopra. --sedna-on-primary vale in entrambi i temi per
   costruzione (bianco su brand-600 in chiaro, quasi-nero su brand-400 in scuro),
   quindi la regola non va tarata due volte.

   Vale per QUALUNQUE input date, non solo per quelli in griglia: le date della
   fascia filtri sono lo stesso elemento, e un'evidenza che c'e' in griglia ma non
   nei filtri sarebbe la solita differenza inspiegabile fra due punti dell'app.
   Niente ::deep: questo foglio e' globale, non scoped. ─────────────────────── */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
    background-color: var(--sedna-primary, #1e88e5);
    color: var(--sedna-on-primary, #fff);
    border-radius: 2px;
    outline: none;
}

input.sedna-native-input.sedna-native-input--num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* ══ I NUMERI STANNO A DESTRA. SEMPRE, IN TUTTO IL PROGRAMMA ══
   (Antonio, 2026-08-17: «tutti i campi numerici del documento — ma vale in generale per
   tutto il programma — devono avere allineamento a destra»).

   ⚠️ QUESTA REGOLA STA QUI, GLOBALE, E NON FRA GLI OVERRIDE `.sedna-app`, dove pure
   esisteva già. Il motivo è che i POPUP di DevExpress rendono il contenuto in un portale
   in fondo al <body>, FUORI dalla radice `.sedna-app`: là gli override non arrivano, e i
   campi numerici delle finestre restavano allineati a sinistra mentre gli stessi campi in
   pagina erano a destra. Aggiungere `sedna-app` a ogni popup è il rimedio giusto per
   l'aspetto generale (font, altezze), ma per una regola così — che non ha eccezioni in
   nessun contesto — l'ancora giusta è il componente, non la shell: così vale anche nel
   popup che qualcuno aggiungerà domani senza sapere niente di tutto questo.

   Incolonnare le cifre non è estetica: un importo si controlla leggendo le unità sempre
   nella stessa posizione, ed è la ragione per cui `tabular-nums` viaggia con
   l'allineamento — le cifre proporzionali fanno ballare le colonne. */
/* Il marcatore che SednaSpinEdit mette su ogni suo input: è l'unica ancora affidabile.
   I selettori DevExpress qui sotto restano per gli spin che qualcuno rende a mano, ma non
   bastano: nella 25.2 lo spin edit rende `input.dxbl-text-edit-input` — identica alla
   textbox — quindi `.dxbl-spin-edit input` non prendeva il numero documento né il
   protocollo (misurato a video, 2026-08-17). */
input.sedna-num,
.dxbl-spin-edit input,
.dxbl-fl-spin-edit input,
.dxbl-spin-edit-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* feedback IMMEDIATO al click su riga congelata (l'attivazione Blazor arriva dopo) */
.sedna-editable-grid tr.seg-row-frozen:active td { background: var(--sedna-primary-subtle, #e3f2fd); }

/* Coerenza font nel foglio: anche gli editor DevExpress della griglia usano
   il font di app (i loro default cadono su Segoe UI). */
.sedna-editable-grid .dxbl-text-edit-input,
.sedna-editable-grid .dxbl-spin-edit-input,
.sedna-editable-grid .dxbl-date-edit-input {
    font-family: var(--sedna-font-sans, inherit) !important;
}

/* ═══ SednaLookup nativo (griglie editabili: SednaNativeInputs) ═══
   Input HTML + tendina custom al posto del DxComboBox: stesso aspetto degli
   input nativi (annegati nella griglia), chevron leggero identico a quello
   finto delle righe congelate. */
.sedna-lookup-native {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.sedna-lookup-native__input {
    flex: 1 1 auto;
    min-width: 0;
}

    /* Server-mode: valore valorizzato ma non presente in anagrafica (risoluzione a
       vuoto o errore rete). Non si azzera MAI il Value: bordo warning + tooltip. */
    .sedna-lookup-native__input.is-unresolved {
        border-color: var(--sedna-warning-600, #ffb300);
        box-shadow: inset 0 0 0 1px var(--sedna-warning-600, #ffb300);
    }

/* ── Coerenza in un FORM (fuori dalla griglia editabile) ──
   Il lookup nativo deve essere INDISTINGUIBILE dagli editor DevExpress e dalle vecchie
   lookup: il RIQUADRO (bordo, raggio, sfondo, focus, altezza) sta sul CONTENITORE e al
   suo interno vivono l'input (senza bordo proprio) e il chevron — esattamente come una
   combobox DevExpress (testo + freccia nello stesso riquadro), non "riquadro input +
   freccia fuori". La variante compatta "annegata nella cella" resta valida SOLO nelle
   griglie editabili (override sotto .sedna-editable-grid). */
.sedna-lookup-native {
    height: var(--sedna-input-height, 1.375rem);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-input, 0.375rem);
    background: var(--sedna-surface);
    box-sizing: border-box;
    transition: border-color var(--sedna-transition-fast), box-shadow var(--sedna-transition-fast);
}
    .sedna-lookup-native:focus-within {
        border-color: var(--sedna-focus-color, var(--sedna-primary));
        box-shadow: var(--sedna-input-focus-bar), var(--sedna-focus-ring);
        background-color: var(--sedna-input-focus-bg, #fff);
    }
    /* Input interno annegato nel riquadro del contenitore (niente bordo/sfondo/alone
       propri: si vedrebbe un doppio riquadro). */
    .sedna-lookup-native > .sedna-lookup-native__input {
        height: 100%;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0 var(--sedna-input-padding-x, 0.5rem);
    }
        .sedna-lookup-native > .sedna-lookup-native__input:focus {
            border: none;
            box-shadow: none;
            background: transparent;
        }
    /* Stato "non risolto" (server-mode): il segnale va sul RIQUADRO (il contenitore),
       non sull'input che qui e' senza bordo. */
    .sedna-lookup-native:has(> .sedna-lookup-native__input.is-unresolved) {
        border-color: var(--sedna-warning-600, #ffb300);
        box-shadow: inset 0 0 0 1px var(--sedna-warning-600, #ffb300);
    }
    .sedna-lookup-native > .sedna-lookup-native__btn { color: var(--sedna-text-tertiary); }

/* ── Dentro la griglia editabile: look compatto originale (il riquadro sta sull'INPUT,
   annegato nella cella, non sul contenitore). ── */
.sedna-editable-grid .sedna-lookup-native {
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.sedna-editable-grid .sedna-lookup-native > .sedna-lookup-native__input {
    height: var(--sedna-input-height, 1.375rem);
    border: 1px solid var(--sedna-border);
    border-radius: 4px;
    background: var(--sedna-surface);
    padding: 0 4px;
}
    .sedna-editable-grid .sedna-lookup-native > .sedna-lookup-native__input:focus {
        border-color: var(--sedna-primary);
        box-shadow: var(--sedna-input-focus-bar), 0 0 0 2px var(--sedna-primary-subtle, #e3f2fd);
        background-color: var(--sedna-input-focus-bg, #fff);
    }

/* La «X» che cancella, prima del chevron (come la X delle combo DevExpress).
   ⚠️ STA QUI, non nel CSS scoped di SednaComboBox: la usano DUE componenti, e un CSS scoped
   vale solo per quello che lo dichiara. Nel SednaMultiComboBox il pulsante usciva col riquadro
   grigio del browser — un bottone di sistema in mezzo a campi disegnati. */
.sedna-combobox-native__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--sedna-text-tertiary);
    font-size: 0.7rem;
}
.sedna-combobox-native__clear:hover { color: var(--sedna-text-secondary); }

/* ── LA CROCETTA PER SVUOTARE ─────────────────────────────────────
   Antonio, 27/08: «se scelgo un magazzino poi non posso piu' toglierlo dal
   filtro». Il campo si svuotava solo cancellando il testo a mano — vero, ma lo
   sa solo chi ha scritto il componente, e accanto le tendine la crocetta ce
   l'hanno: due campi vicini, uno si svuota e l'altro sembra di no.

   Sta in SOVRIMPRESSIONE sul bordo destro, prima della freccetta, e compare solo
   col mouse sopra o col fuoco dentro: fermo, il campo e' identico a prima e il
   testo dell'elemento scelto non perde un pixel. E' la stessa regola con cui e'
   stato messo il segnetto «apri la scheda». */
.sedna-lookup-native__clear {
    position: absolute;
    right: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sedna-surface);
    color: var(--sedna-text-tertiary);
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
}

.sedna-lookup-native:hover > .sedna-lookup-native__clear,
.sedna-lookup-native:focus-within > .sedna-lookup-native__clear {
    display: inline-flex;
}

.sedna-lookup-native__clear:hover {
    color: var(--sedna-text);
    background: var(--sedna-surface-variant);
}

.sedna-lookup-native__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: var(--sedna-input-height, 1.375rem);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--sedna-text-tertiary);
    font-size: 0.55rem;
    line-height: 1;
}

    .sedna-lookup-native__btn:hover { color: var(--sedna-text-secondary); }

/* Click fuori = chiudi. CONDIVISO fra SednaComboBox e SednaMultiComboBox: era nel CSS
   scoped del primo, e nel multi il backdrop restava a dimensione zero — cliccare fuori
   non chiudeva la tendina (Antonio, 25/08; stessa trappola della «X» del 22/08). */
.sedna-combobox-native__backdrop {
    position: fixed;
    inset: 0;
    z-index: 19999;
    background: transparent;
}

.sedna-lookup-native__panel {
    z-index: 20000;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sedna-surface, #fff);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-md, 0.5rem);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
    padding: 2px;
}

.sedna-lookup-native__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--sedna-text);
    white-space: nowrap;
}

    .sedna-lookup-native__row:hover,
    .sedna-lookup-native__row.is-active {
        background: var(--sedna-primary-subtle, #e3f2fd);
    }

.sedna-lookup-native__code {
    font-family: var(--sedna-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.72rem;
    min-width: 56px;
}

.sedna-lookup-native__desc {
    color: var(--sedna-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonna EXTRA informativa (ExtraFieldName, es. Codice IVA imballi):
   a destra, mono come il codice ma in tono attenuato. */
.sedna-lookup-native__extra {
    margin-left: auto;
    flex: none;
    font-family: var(--sedna-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.72rem;
    color: var(--sedna-text-tertiary, #8b929b);
}

.sedna-lookup-native__empty {
    padding: 4px 8px;
    font-size: 0.72rem;
    color: var(--sedna-text-tertiary);
    font-style: italic;
}

/* ═══ «Ricerca avanzata…»: INCHIODATA in fondo al pannello ═══
   Era l'ultima riga della lista scorrevole, cioe' l'unica voce che scompare proprio
   quando serve: con l'elenco lungo bisognava scorrere fino in fondo per trovarla, e
   sulle anagrafiche da migliaia di voci non la trovava nessuno. Misurato sull'IVA:
   pannello 458px di contenuto visibile contro 633px di lista, la riga cadeva a y=947
   con il pannello che finiva a 797 — fuori da quello che si vede.
   E' l'uscita di sicurezza quando l'elenco e' lungo: deve restare visibile dalla
   prima voce all'ultima.

   Tre dettagli che la fanno funzionare davvero:
   - fondo PIENO (non trasparente), o le voci le si vedono passare sotto;
   - e' l'ULTIMO figlio, quindi si disegna sopra le righe senza bisogno di z-index;
   - i margini negativi la portano a filo dei bordi del pannello (che ha 2px di
     padding), cosi' il bordino di sopra la stacca dall'elenco per tutta la larghezza
     e sotto non resta una fessura da cui sbuca il testo che scorre. */
.sedna-lookup-native__row--adv {
    position: sticky;
    bottom: 0;
    z-index: 1;
    color: var(--sedna-primary);
    background: var(--sedna-surface, #fff);
    border-top: 1px solid var(--sedna-border-light);
    margin: 2px -2px -2px;
    padding: 5px 10px;
    border-radius: 0;
}

    /* Il fondo pieno vale anche in hover: senza, il primo colore che si vede sotto e'
       quello delle righe che scorrono. */
    .sedna-lookup-native__row--adv:hover,
    .sedna-lookup-native__row--adv.is-active {
        background: var(--sedna-primary-subtle, #e3f2fd);
    }

/* ═══ Popup ricerca avanzata del lookup: SCROLLA SOLO IL CORPO GRIGLIA ═══
   Il pager della griglia e il footer della popup restano sempre visibili:
   la popup non scrolla, la DxGrid (bounded) scrolla le sue righe. */
.sedna-lookup-popup .dxbl-popup-body {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* La modal chiede 1200px ma non deve mai sfondare la finestra: su schermi
   piccoli si adatta (era 900px fisso e il pager finiva fuori vista). */
.sedna-lookup-popup .dxbl-popup-root,
.sedna-lookup-popup.dxbl-popup-root,
.sedna-lookup-popup .dxbl-popup {
    max-width: 96vw;
}

.sedna-lookup-popup .sedna-lookup-popup-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    outline: none;
}

.sedna-lookup-popup .sedna-lookup-grid-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .sedna-lookup-popup .sedna-lookup-grid-wrapper .sedna-lookup-grid {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIP (bolla) — globale di proposito.
   La rendono SednaTooltip e SednaLookup (e chiunque altro serva): uno stile
   scoped al singolo componente non raggiungerebbe gli altri, e ne nascerebbero
   due copie destinate a divergere.

   position: fixed non e' un vezzo: dentro una cella di griglia un tooltip in
   absolute verrebbe TAGLIATO dal contenitore che scrolla in orizzontale.
   ═══════════════════════════════════════════════════════════════════════════ */
.sedna-tip__bubble {
    position: fixed;
    z-index: var(--sedna-z-tooltip, 1070);
    pointer-events: none;

    max-width: 320px;
    padding: 4px 8px;

    background: var(--sedna-tooltip-bg, rgba(17, 24, 39, 0.95));
    color: var(--sedna-tooltip-text, #fff);

    font-family: var(--sedna-font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.35;

    border-radius: var(--sedna-radius-sm, 0.25rem);
    box-shadow: var(--sedna-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18));

    white-space: normal;
    overflow-wrap: anywhere;
}

/* Codice: tenue, fa da etichetta al dato che conta. */
.sedna-tip__code {
    opacity: 0.7;
    font-weight: 400;
}

/* Descrizione: e' il motivo per cui il tooltip si apre. */
.sedna-tip__strong {
    font-weight: 700;
}

/* =============================================================================
   EDITOR DENTRO UNA MODAL — la catena delle altezze, UNA volta per tutte
   =============================================================================
   ⚠️ PRIMA DI MONTARE UNA PAGINA IN UNA FINESTRA leggi
   docs/PAGINA-DENTRO-UNA-FINESTRA.md: ci sono i cinque modi in cui una pagina
   si rompe perche' crede di possedere lo schermo, tutti trovati sul campo e
   nessuno dei quali da' errore. Il primo vale la pena saperlo anche solo
   passando di qui:

     UN TOAST RESO DENTRO LA PAGINA E' UN DIFETTO DI PROGETTO.
     E' position:fixed, e un elemento fixed dentro un antenato con transform
     (come si posiziona un popup) smette di essere ancorato al viewport e viene
     ritagliato. Risultato reale: il salvataggio rifiutava con un motivo preciso
     e quel motivo spariva — l'utente vedeva un pulsante che non fa niente.
     In finestra i messaggi si mandano all'HOST, che li mostra nel corpo come
     elemento normale (.mc-esito qui sotto).
   =============================================================================
   Serve alle finestre che montano una PAGINA dentro un DxPopup: fattura dal
   registro merce produttori, fattura dalla scheda contabile, movimento contabile
   dalla scheda contabile. Il requisito e' sempre lo stesso: la griglia si adatta
   all'altezza della finestra, scorrono SOLO le righe (l'intestazione delle
   colonne resta ferma) e il piede coi pulsanti non se ne va mai sotto il bordo.

   ⚠️ PERCHE' NON UN calc(...vh - N). Il primo tentativo fu
   max-height: calc(92vh - 340px), con 340 = somma STIMATA di header, piede,
   testata e piede della pagina. Su 27 pollici torna; su 768px di altezza basta
   che la somma vera superi la stima perche' la griglia spinga il piede fuori
   dalla finestra. Un numero magico e' una promessa fatta a uno schermo solo.

   ⚠️ E PERCHE' STA QUI E NON IN OGNI MODAL. Tre catene uguali scritte a mano
   divergono, e la volta dopo se ne correggono due su tre. Qui c'e' la parte
   generica; a ogni modal resta UNA riga, quella che nomina la card delle righe
   della sua pagina (.doc-righe-card, .pn-righe-card), perche' il markup delle
   pagine e' diverso davvero e la libreria non deve conoscerlo.

   ⚠️ LA CATENA SI SPEZZA IN SILENZIO. Basta un anello con altezza automatica o
   senza min-height:0 e smette tutto di funzionare senza un segno: la griglia
   torna a crescere e a scorrere e' la finestra. Gli anelli sono, nell'ordine:
   corpo del popup -> radice dell'editor -> guscio della pagina -> card delle
   righe -> griglia -> wrapper che scorre. Se ne aggiungi uno, dagli min-height:0.
   ============================================================================= */

/* 1. Il corpo del popup: colonna che riempie. Senza questo la radice dell'editor
      chiede "100% di quanto?" a un genitore ad altezza automatica e resta auto. */
/* 1. IL POPUP: intestazione e piede fermi, in mezzo il corpo che scorre.
   Struttura VERA, letta dal DOM su un MacBook 1512x741 (non dedotta):

     .dxbl-popup.sedna-modal-editor-popup
      └ .dxbl-modal-content            <- si contiene, overflow:hidden
         ├ .dxbl-modal-header          <- fermo  (porta anche .dxbl-popup-header)
         ├ .dxbl-modal-body            <- SCORRE
         └ .dxbl-modal-footer          <- fermo, ed e' qui che vivono i pulsanti

   ⚠️ LA LEZIONE, ed e' la terza volta oggi che ci cado nello stesso modo.
   Ho ancorato questa catena prima a `.dxbl-popup-body`, poi a
   `.dxbl-popup-buttons-area`: due nomi letti nel CSS del PACCHETTO DevExpress, e
   nessuno dei due esiste nel DOM che il componente produce a runtime. Vincolare un
   elemento inesistente non da' errore — il CSS non compila e non protesta, sempli-
   cemente non fa niente — quindi la correzione «sembrava fatta» due volte di fila.
   IL MARKUP A RUNTIME NON E' QUELLO CHE SI DEDUCE DAL FOGLIO DI STILE DEL
   COMPONENTE. Senza un DOM davanti, l'unica mossa onesta e' dirlo, non indovinare
   meglio. I nomi qui sotto sono stati letti sul DOM, non dedotti.

   ⚠️ E l'overflow sta su DUE livelli diversi, per due ragioni diverse:
   - `hidden` su .dxbl-modal-content, che regge ANCHE intestazione e piede: se
     scorresse lui, il titolo se ne andrebbe su — l'altro requisito;
   - `auto` sul solo .dxbl-modal-body: quando i minimi del contenuto non ci stanno
     (testata 134 + piede documento 177 su uno schermo basso) a cedere e' il corpo,
     e i pulsanti restano RAGGIUNGIBILI invece di essere spinti fuori o tagliati.

   Misurato dopo la correzione, stesso Mac: header 30->98 fermo, body 98->644 che
   scorre, footer 644->711 fermo, «Salva» a 656->687 dentro i 741 dello schermo,
   7 righe di corpo visibili. Prima i pulsanti stavano a 843->874: 102px sotto il
   bordo, irraggiungibili. */
/* ⚠️ DUE CLASSI, e `sedna-modal-fit` non e' un doppione: la catena serve a QUALUNQUE
   finestra il cui contenuto possa superare l'altezza dello schermo, non solo a quelle
   che ospitano un editor. L'anteprima della fattura (sola lettura) ne era la prova: su
   un MacBook a 741px i pulsanti «Modifica» e «Apri il documento» finivano fuori, e non
   c'era nessuna regola a trattenerla perche' portava solo `mc-popup`, senza CSS.
   Chi aggiunge una modal alta: mettici `sedna-modal-fit` e i pulsanti restano dentro. */
.sedna-modal-editor-popup .dxbl-modal-content,
.sedna-modal-fit .dxbl-modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sedna-modal-editor-popup .dxbl-modal-header,
.sedna-modal-fit .dxbl-modal-header,
.sedna-modal-fit .dxbl-modal-footer,
.sedna-modal-editor-popup .dxbl-modal-footer {
    flex: 0 0 auto;
}

.sedna-modal-editor-popup .dxbl-modal-body,
.sedna-modal-fit .dxbl-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 2. La radice dell'editor e il guscio della pagina montata dentro. */
.sedna-modal-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sedna-modal-editor > .entity-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
}

/* 3. Nessun contenitore dentro l'editor deve imporre il proprio minimo di
      contenuto: e' la regola che tiene su tutta la catena. */
.sedna-modal-editor .sedna-editable-grid,
.sedna-modal-editor .sedna-editable-grid__wrapper {
    min-height: 0;
}

/* 4. La griglia riempie quello che resta; a scorrere e' il wrapper delle righe,
      NON la pagina — cosi' l'intestazione delle colonne resta ferma.
      min-height 120px (~4 righe) e' un pavimento, non un'altezza: sotto quella
      soglia la griglia non e' piu' utilizzabile e tanto vale che scorra tutto. */
.sedna-modal-editor .sedna-editable-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.sedna-modal-editor .sedna-editable-grid__wrapper {
    flex: 1 1 auto;
    /* 80 e non 120: misurato su 741px di viewport, testata 134 + piede 177 + un pavimento
       da 120 sommavano piu' dello spazio disponibile e il contenuto sfondava. 80px sono
       ~3 righe: sotto quella soglia interviene l'overflow del contenuto, che e' il
       ripiego giusto perche' lascia i pulsanti raggiungibili. */
    min-height: 80px;
    overflow-y: auto;
}

/* Esito del salvataggio DENTRO la finestra dell'editor.
   ⚠️ Elemento NORMALE del corpo, non un toast: il toast e' position:fixed e dentro un
   popup (che si posiziona con transform) smette di essere ancorato al viewport e viene
   ritagliato — cosi' il motivo di un rifiuto spariva e il pulsante Salva sembrava non
   fare niente. Qui non c'e' niente da ritagliare. */
.mc-esito {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: var(--sedna-radius-md, 0.5rem);
    font-size: 0.8125rem;
    border: 1px solid;
}

.mc-esito--error   { background: var(--sedna-error-50, #fef2f2);   color: var(--sedna-error-700, #b91c1c);   border-color: var(--sedna-error-500, #f5b5b5); }
.mc-esito--warning { background: var(--sedna-warning-50, #fff8e1); color: var(--sedna-warning-700, #b07400); border-color: var(--sedna-warning-500, #ffd28a); }
.mc-esito--success { background: var(--sedna-success-50, #f0fdf4); color: var(--sedna-success-700, #047857); border-color: var(--sedna-success-500, #a7f3d0); }
.mc-esito--info    { background: var(--sedna-primary-subtle, #e3f2fd); color: var(--sedna-primary); border-color: var(--sedna-primary); }

/* Corpo del messaggio quando porta un ELENCO (le violazioni dei controlli fiscali):
   prende lo spazio, e l'elenco resta leggibile senza diventare un muro. */
.mc-esito__corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mc-esito__elenco {
    margin: 0;
    padding-left: 18px;
    max-height: 6.5em;   /* ~4 voci: oltre, scorre invece di allungare la finestra */
    overflow-y: auto;
}

.mc-esito__x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SELETTORE COLONNE → GRIGLIA: la finestra si fa da parte durante il trascinamento
   ═══════════════════════════════════════════════════════════════════════════════
   Una colonna si porta a video trascinandola dall'elenco «Colonne» direttamente
   sull'intestazione dove la si vuole (v. DropColumnSuHeader). Ma quell'elenco vive in una
   MODALE: il velo davanti alla pagina intercetterebbe il rilascio, e la colonna non
   arriverebbe mai in griglia. Mentre il trascinamento è in corso la finestra diventa
   trasparente e trasparente ai clic — si vede cosa c'è sotto e il rilascio passa.

   Le tre righe sono la stessa regola su tre forme possibili del markup DevExpress (il velo
   può essere dentro la finestra o suo fratello): meglio coprirle tutte che scoprire a
   video, un giorno, che l'aggiornamento della libreria ha spostato un div.
   Qui e non nel CSS scoped: il corpo di un DxPopup non porta l'attributo di scoping. */
.sedna-editable-grid__columns-popup--fantasma,
.sedna-editable-grid__columns-popup--fantasma .dxbl-popup-backdrop,
.dxbl-popup-backdrop:has(~ .sedna-editable-grid__columns-popup--fantasma) {
    pointer-events: none;
}

.sedna-editable-grid__columns-popup--fantasma {
    opacity: 0.16;
    transition: opacity 0.12s ease-out;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDE DI STATO (.sedna-statetabs) — le «card» dei cicli fattura elettronica

   ⚠️ STANNO QUI E NON NELLE PAGINE perche' ciclo attivo e passivo se le erano
   scritte due volte, con due nomi e due aspetti diversi: la stessa cosa che
   sembrava due cose (Antonio, 20/08: «hanno stili diversi, lo trovo incoerente»).
   Chi aggiunge una terza lista di stati non deve reinventarle una terza volta.

   Sono CARD separate, tutte della stessa larghezza, e la selezione si vede in
   modo DELICATO: fondo tenue e un filo colorato sopra, non un blocco pieno —
   una scheda scelta deve distinguersi, non gridare.
   ═══════════════════════════════════════════════════════════════════════════ */
.sedna-statetabs {
    flex: none;
    display: flex;
    gap: 6px;
    align-items: stretch;
    /* ⚠️ NIENTE A CAPO: le card si stringono. Una riga di schede che diventa due
       sposta la griglia in basso proprio mentre si sta guardando un elenco. */
    flex-wrap: nowrap;
    /* ⚠️ TUTTE UGUALI MA NON SMISURATE. Con `grid-auto-columns: 1fr` le tre schede del
       ciclo passivo diventavano larghe 394px l'una — tre lenzuola per dire «Tutte / Da
       visionare / Lette» (Antonio, 20/08: «terribile, tutto disordinato»). Con otto
       schede il conto tornava, con tre no: la stessa regola dava due risultati opposti.
       Ora crescono in parti uguali FINO a un tetto: da otto riempiono la riga, da tre
       restano schede. */
    flex-wrap: wrap;
}

/* ⚠️ UNA REGOLA SOLA. C'erano due blocchi `.sedna-statetab` uno dopo l'altro, e il
   secondo rimetteva `min-width: 0` cancellando il `min-width: 150px` del primo: a video le
   schede restavano di larghezze diverse pur avendo la regola giusta scritta sopra. Stessa
   specificita' = vince l'ultimo. Se serve cambiare la misura, si cambia QUI.

   MISURA FISSA, non «riempi lo spazio»: con `flex: 1 1 0` la larghezza dipendeva da QUANTE
   schede ci sono — otto nel ciclo attivo facevano schede da ~145px, tre nel passivo da
   220px. Ora la scheda e' larga 150px in ogni pagina, e cresce solo se una parola non ci sta. */
.sedna-statetab {
    position: relative;
    /* ⚠️ SI STRINGONO TUTTE INSIEME invece di andare a capo (Antonio, 21/08: sul suo
       Mac l'ottava card finiva sotto). Con `flex: 0 0 auto` e 150px fissi, otto card piu' i
       distacchi chiedevano piu' spazio di quello che c'e' su uno schermo da portatile, e
       quella di troppo andava a capo — una riga in piu' tolta alla griglia, e una card
       spaiata sotto le altre.
       Ora crescono e calano in parti uguali fino a un tetto: restano tutte della stessa
       misura, e su uno schermo largo non diventano lenzuola. Le parole che non ci stanno le
       taglia l'ellissi, che c'e' gia'. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-md, 0.5rem);
    background: var(--sedna-surface);
    color: var(--sedna-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sedna-statetab > span:not(.n) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sedna-statetab:hover { background: var(--sedna-surface-hover); color: var(--sedna-text); }

/* Selezionata: fondo tenue, testo del colore primario e un filo sopra. */
.sedna-statetab.active {
    background: var(--sedna-primary-subtle, #eff6ff);
    border-color: var(--sedna-primary-200, #bfdbfe);
    color: var(--sedna-primary-700, #1d4ed8);
}

.sedna-statetab.active::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -1px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--sedna-primary);
}

/* Il contatore: pallino discreto, non un secondo titolo. */
.sedna-statetab .n {
    flex: none;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sedna-surface-variant, #f1f5f9);
    color: var(--sedna-text-secondary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

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

/* Stato che chiede attenzione (scarti): il colore lo porta il TESTO, non il fondo. */
.sedna-statetab.warn { color: var(--sedna-error-600, #dc2626); }
.sedna-statetab.warn .n { background: var(--sedna-error-50, #fef2f2); color: var(--sedna-error-600, #dc2626); }
.sedna-statetab.warn.active {
    background: var(--sedna-error-50, #fef2f2);
    border-color: var(--sedna-error-200, #fecaca);
}
.sedna-statetab.warn.active::before { background: var(--sedna-error-600, #dc2626); }

/* Sotto una certa larghezza le schede vanno a capo da sole (flex-wrap): due righe
   leggibili battono una riga di sigle. Non serve nessuna regola dedicata. */

/* ═══ RIGA FILTRI (.sedna-filterrow) — UNA riga, sempre ═══
   ⚠️ `flex-wrap: wrap` faceva andare a capo i campi appena la finestra si
   stringeva, e la barra sembrava «messa a caso» (Antonio, 20/08). Qui non si va
   mai a capo: se lo spazio non basta, la riga SCORRE in orizzontale — che e'
   prevedibile, mentre un a-capo cambia la posizione di tutti i campi. */
.sedna-filterrow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 1px;   /* la barra di scorrimento non taglia il bordo dei campi */
}

.sedna-filterrow > * { flex: none; }

.sedna-filterrow__lbl {
    font-size: 0.72rem;
    color: var(--sedna-text-tertiary);
    white-space: nowrap;
}

.sedna-filterrow__sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--sedna-border-light, #eee);
}

/* ── «Apri la scheda» del lookup ──────────────────────────────────────────────
   Sta SOPRA il bordo del campo, sulla riga dell'etichetta, all'estremità destra.

   ⚠️ Il vincolo era «senza sottrarre spazio al testo scelto» (Antonio, 26/08), e i due
   posti ovvi lo violano entrambi: dentro l'input un'icona mangia la coda della
   descrizione proprio mentre la si legge; fuori a destra ruba larghezza a tutta la
   riga — e in un piede documento con quattro lookup affiancati si paga quattro volte.
   La riga dell'etichetta è già lì e quasi sempre mezza vuota: è spazio già pagato.

   ⚠️ `position: relative` sui due contenitori serve SOLO ad ancorare questo pezzo. Le
   tendine non ne risentono: escono in portale con posizione fissa, non dal flusso. */
.sedna-lookup-container,
.sedna-lookup-native {
    position: relative;
}

.sedna-lookup__scheda {
    position: absolute;
    right: 0;
    /* sopra il bordo, dentro la riga dell'etichetta */
    bottom: calc(100% + 1px);
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-radius: var(--sedna-radius-sm, 0.25rem);
    background: transparent;
    cursor: pointer;
    line-height: 1;
    font-size: 0.6875rem;

    /* Discreto a riposo: è una scorciatoia, non un'azione della schermata. Si nota
       chi la cerca, non compete col dato. */
    color: var(--sedna-text-tertiary);
    opacity: 0.75;
    transition: color var(--sedna-transition-fast), opacity var(--sedna-transition-fast);
}
.sedna-lookup__scheda:hover,
.sedna-lookup__scheda:focus-visible {
    color: var(--sedna-primary);
    opacity: 1;
}

/* ⚠️ NELLA GRIGLIA EDITABILE NO: lì la riga sopra la cella è un'altra riga di dati,
   non un'etichetta, e il segnetto ci finirebbe sopra. Nelle celle resta il tasto
   destro, che in griglia è un gesto che la gente prova. */
.sedna-editable-grid .sedna-lookup__scheda {
    display: none;
}