/* ============================================================
   Riquadro informativo dei modali "Ritocchi con AI" (.jo-ain)
   ------------------------------------------------------------
   Dice in anticipo quali campi l'azione tocca e quali no: senza,
   l'utente si aspetta che l'email intera venga riscritta, e
   invece il contenuto del design resta dov'e'.

   Foglio dedicato e non Tailwind per la ragione consueta: su
   queste viste il pannello non compila le utility. Tema scuro
   agganciato a `.dark`, mai colori cablati nella vista.
   ============================================================ */

.jo-ain {
    --jo-ain-line: var(--jo-surface-200, #e4e4e7);
    --jo-ain-bg: var(--jo-surface-50, #fafafa);
    --jo-ain-text: var(--jo-surface-700, #3f3f46);
    --jo-ain-muted: var(--jo-surface-500, #71717a);
    --jo-ain-si: #15803d;
    --jo-ain-no: var(--jo-surface-500, #71717a);

    padding: .75rem .875rem;
    border: 1px solid var(--jo-ain-line);
    border-radius: .625rem;
    background: var(--jo-ain-bg);
    color: var(--jo-ain-text);
}

.dark .jo-ain {
    --jo-ain-line: rgba(255, 255, 255, .1);
    --jo-ain-bg: rgba(255, 255, 255, .03);
    --jo-ain-text: var(--jo-surface-200, #e4e4e7);
    --jo-ain-muted: var(--jo-surface-400, #a1a1aa);
    --jo-ain-si: #86efac;
    --jo-ain-no: var(--jo-surface-400, #a1a1aa);
}

.jo-ain-intro {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
}

.jo-ain-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

@media (max-width: 34rem) {
    .jo-ain-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.jo-ain-h {
    margin: 0 0 .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.jo-ain-h-si { color: var(--jo-ain-si); }
.jo-ain-h-no { color: var(--jo-ain-no); }

.jo-ain-list {
    margin: 0;
    padding-left: 1.05rem;
    font-size: .8125rem;
    line-height: 1.5;
}

.jo-ain-list li {
    list-style: disc;
}

.jo-ain-nota,
.jo-ain-salva {
    margin: .75rem 0 0;
    padding-top: .625rem;
    border-top: 1px solid var(--jo-ain-line);
    font-size: .75rem;
    line-height: 1.45;
    color: var(--jo-ain-muted);
}

/* La nota specifica e la riga sul salvataggio si susseguono: la seconda
   non ripete il filetto, o sembrano due riquadri diversi. */
.jo-ain-nota + .jo-ain-salva {
    margin-top: .375rem;
    padding-top: 0;
    border-top: 0;
}

.jo-ain-salva strong {
    color: var(--jo-ain-text);
    font-weight: 600;
}

/* ------------------------------------------------------------
   Avviso nella descrizione della sezione "Ritocchi con AI"
   ------------------------------------------------------------
   Compare quando manca la materia prima (niente oggetto e niente
   contenuto): la sezione resta visibile coi bottoni spenti, e
   questa riga dice cosa fare per accenderli. Arancione perche'
   e' una condizione da risolvere, non un errore.

   Arriva come HtmlString dal ->description() della Section: la
   vista di Filament fa {{ $description }} e e() lascia passare
   tal quale cio' che implementa Htmlable.
   ------------------------------------------------------------ */

.jo-ai-manca {
    color: #b45309;
    font-weight: 500;
}

.dark .jo-ai-manca {
    color: #fbbf24;
}