/* ABN UI — rifiniture condivise dei pannelli Filament (modali, slide-over, sezioni): caricato in tutte le app. */

/* ---- sfondo dietro alle finestre: sfocato e scuro, non piatto ---- */
.fi-modal-close-overlay { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---- finestra ---- */
.fi-modal-window { border: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .45), 0 0 0 1px rgba(255, 255, 255, .04) inset; }
.fi-modal:not(.fi-modal-slide-over) .fi-modal-window { border-radius: 22px; overflow: hidden; }

/* slide-over: bordo arrotondato verso la pagina, ombra lunga, entrata morbida del contenuto */
.fi-modal-slide-over-from-end .fi-modal-window { border-radius: 24px 0 0 24px; box-shadow: -28px 0 70px -20px rgba(15, 23, 42, .5); }
.fi-modal-slide-over-from-start .fi-modal-window { border-radius: 0 24px 24px 0; box-shadow: 28px 0 70px -20px rgba(15, 23, 42, .5); }
@media (min-width: 1024px) { .fi-modal-slide-over .fi-modal-window { max-width: min(48rem, 92vw); } }

/* ---- intestazione: fascia colorata e titolo con sottolineatura del colore primario ---- */
.fi-modal-header { position: relative; padding: 1.35rem 1.6rem 1.1rem !important; border-bottom: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary-500) 9%, transparent), transparent); }
.fi-modal-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--primary-500), var(--primary-400), color-mix(in oklab, var(--primary-500) 40%, #ec4899)); }
.fi-modal-heading { font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -.01em; }
.fi-modal-description { color: rgb(100 116 139); margin-top: .25rem; }
.fi-modal-icon-ctn { border-radius: 14px; background: linear-gradient(135deg, color-mix(in oklab, var(--primary-500) 18%, transparent), color-mix(in oklab, var(--primary-500) 6%, transparent)); box-shadow: 0 8px 18px -10px var(--primary-500); }
.fi-modal-close-btn { transition: transform .2s, background-color .2s; border-radius: 999px; }
.fi-modal-close-btn:hover { transform: rotate(90deg); background: rgba(148, 163, 184, .15); }

/* ---- contenuto: i blocchi del modulo entrano uno dopo l'altro ---- */
@keyframes abn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fi-modal-open .fi-modal-content > * > * { animation: abn-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.fi-modal-open .fi-modal-content > * > *:nth-child(2) { animation-delay: 60ms; }
.fi-modal-open .fi-modal-content > * > *:nth-child(3) { animation-delay: 120ms; }
.fi-modal-open .fi-modal-content > * > *:nth-child(4) { animation-delay: 180ms; }
.fi-modal-open .fi-modal-content > * > *:nth-child(5) { animation-delay: 240ms; }
.fi-modal-open .fi-modal-content > * > *:nth-child(n+6) { animation-delay: 300ms; }
.fi-modal-content { padding: 1.4rem 1.6rem !important; }

/* sezioni dei moduli dentro le finestre: card morbide */
.fi-modal-content .fi-section { border-radius: 16px; border: 1px solid rgba(148, 163, 184, .22); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .25s, border-color .25s; }
.fi-modal-content .fi-section:hover { box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .25); border-color: color-mix(in oklab, var(--primary-500) 30%, rgba(148, 163, 184, .22)); }
.fi-modal-content .fi-section-header { background: linear-gradient(180deg, rgba(148, 163, 184, .08), transparent); }

/* campi: focus più evidente e morbido */
.fi-modal-content .fi-input-wrp { transition: box-shadow .2s, border-color .2s; }
.fi-modal-content .fi-input-wrp:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary-500) 18%, transparent); }

/* ---- piè di pagina: vetro, azioni in evidenza ---- */
.fi-modal-footer { padding: 1rem 1.6rem !important; border-top: 1px solid rgba(148, 163, 184, .22); background: rgba(248, 250, 252, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fi-modal-footer .fi-btn { transition: transform .18s, box-shadow .18s, filter .18s; }
.fi-modal-footer .fi-btn:hover { transform: translateY(-1px); }
.fi-modal-footer .fi-btn.fi-color-primary { box-shadow: 0 10px 20px -12px var(--primary-600); }
.fi-modal-footer .fi-btn.fi-color-primary:hover { filter: brightness(1.05); box-shadow: 0 14px 26px -12px var(--primary-600); }

/* ---- tema scuro ---- */
.dark .fi-modal-window { border-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7); }
.dark .fi-modal-footer { background: rgba(17, 24, 39, .85); border-top-color: rgba(255, 255, 255, .08); }
.dark .fi-modal-header { border-bottom-color: rgba(255, 255, 255, .08); }
.dark .fi-modal-content .fi-section { border-color: rgba(255, 255, 255, .08); }

/* ---- notifiche in alto a destra: leggermente più morbide ---- */
.fi-no-notification { border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45); }

@media (prefers-reduced-motion: reduce) {
    .fi-modal-open .fi-modal-content > * > * { animation: none; }
    .fi-modal-close-btn, .fi-modal-footer .fi-btn { transition: none; }
}