/* ============================================================
   Form modelli email (crea/modifica): griglia 4+8 sensibile
   allo SPAZIO REALE, non allo schermo (.fi-resource-email-templates)
   ------------------------------------------------------------
   Campi a sinistra (4/12) e Unlayer a destra (8/12) stanno bene
   solo se la colonna dell'editor ha respiro: sotto ~1280px di
   larghezza DISPONIBILE l'editor scrolla in orizzontale. I
   breakpoint di viewport (xl: di Filament) non vedono la sidebar:
   aperta ruba ~280px e a parita' di schermo cambia tutto. La
   CONTAINER QUERY misura il form stesso, quindi reagisce da sola
   a sidebar aperta/chiusa, resize e zoom: sotto soglia la griglia
   collassa a colonna singola (campi sopra, editor sotto, a tutta
   larghezza).

   Stessa scelta degli altri fogli: CSS puro da public/, vedi
   template-picker.css per il perche'.
   ============================================================ */

.fi-resource-email-templates .fi-form {
    container-type: inline-size;
}

/* Tip "chiudi il menu' laterale" sulla riga dell'etichetta dell'editor:
   esiste solo quando serve — sidebar APERTA (classe che Filament lega allo
   store Alpine) e schermo >=1024px, dove la sidebar occupa larghezza vera
   (sotto e' un overlay e chiuderla non regala spazio). */
.jo-editor-space-tip { display: none; }

@media (min-width: 1024px) {
    .fi-main-ctn-sidebar-open .jo-editor-space-tip {
        display: inline;
        font-size: .75rem;
        font-weight: 400;
        color: var(--jo-surface-500, #71717a);
    }

    .dark .fi-main-ctn-sidebar-open .jo-editor-space-tip { color: #a1a1aa; }
}

@container (max-width: 1280px) {
    .fi-resource-email-templates .fi-form > .fi-fo-component-ctn {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Ogni sezione occupa la riga intera: scavalca i col-span xl:
       (4 e 8 dodicesimi) che Filament mette sui wrapper. */
    .fi-resource-email-templates .fi-form > .fi-fo-component-ctn > div {
        grid-column: 1 / -1 !important;
    }
}