/* ===== Stili del CONTENUTO (editor + anteprima) =====
   L'applicazione ospite applica un reset globale che azzera bordi e margini di TUTTI gli elementi.
   Jodit non usa un iframe: la sua area di scrittura è un contenteditable nella stessa pagina,
   quindi quel reset colpisce sia il testo che si compone sia l'anteprima affiancata. Il risultato
   era un contenuto che a schermo appariva schiacciato e senza separazioni, mentre in Word usciva
   impaginato: la riga orizzontale spariva del tutto, gli elenchi restavano senza pallini e i
   paragrafi senza spaziatura.
   Qui si ridanno al contenuto i valori tipografici di base, così quello che si vede mentre si
   compone somiglia a quello che verrà stampato. Vale per entrambi i contesti: la stessa regola
   deve valere nell'editor e nell'anteprima, altrimenti tornano a divergere. */
.base-templater .jodit-wysiwyg hr,
.base-templater .render-panel hr {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .35;
    height: 0;
    margin: 1em 0;
}

.base-templater .jodit-wysiwyg p,
.base-templater .render-panel p,
.base-templater .jodit-wysiwyg blockquote,
.base-templater .render-panel blockquote,
.base-templater .jodit-wysiwyg table,
.base-templater .render-panel table {
    margin: 0 0 .75em;
}

.base-templater .jodit-wysiwyg h1,
.base-templater .render-panel h1,
.base-templater .jodit-wysiwyg h2,
.base-templater .render-panel h2,
.base-templater .jodit-wysiwyg h3,
.base-templater .render-panel h3,
.base-templater .jodit-wysiwyg h4,
.base-templater .render-panel h4,
.base-templater .jodit-wysiwyg h5,
.base-templater .render-panel h5,
.base-templater .jodit-wysiwyg h6,
.base-templater .render-panel h6 {
    margin: 1em 0 .5em;
    line-height: 1.25;
}

/* Elenchi: il reset toglie anche il rientro, e senza rientro i pallini finiscono fuori
   dall'area visibile — sembrano non esserci. */
.base-templater .jodit-wysiwyg ul,
.base-templater .render-panel ul,
.base-templater .jodit-wysiwyg ol,
.base-templater .render-panel ol {
    margin: 0 0 .75em;
    padding-left: 2em;
}

.base-templater .jodit-wysiwyg ul,
.base-templater .render-panel ul {
    list-style: disc outside;
}

.base-templater .jodit-wysiwyg ol,
.base-templater .render-panel ol {
    list-style: decimal outside;
}

.base-templater .jodit-wysiwyg blockquote,
.base-templater .render-panel blockquote {
    padding-left: 1em;
    border-left: 3px solid currentColor;
    opacity: .85;
}

/* Un'immagine incollata a piena risoluzione sfonderebbe il pannello: in Word viene comunque
   riscalata alla larghezza della pagina, quindi limitarla qui avvicina le due rese. */
.base-templater .jodit-wysiwyg img,
.base-templater .render-panel img {
    max-width: 100%;
    height: auto;
}

/* ===== Segnaposto come riquadri (solo dentro l'editor) =====
   Lo span lo mette l'interop mentre si compone e lo toglie prima di consegnare il testo a .NET:
   quello che si salva resta il token puro. Qui c'è solo la parte visiva.
   NON è scoped a .base-templater di proposito: in modalità a tutto schermo Jodit sposta l'editor
   fuori da quel contenitore, e i riquadri sparirebbero proprio quando si lavora più comodi. */
.jodit-wysiwyg .vr-placeholder {
    display: inline-block;
    padding: 0 .35em;
    border-radius: 4px;
    /* Tinta costruita dal colore primario del tema: si adatta al tema chiaro e scuro senza
       colori cablati. NON si usa --mud-palette-primary-hover, che è pensato per il passaggio
       del mouse ed è al 4% — a schermo non si distingue dallo sfondo. */
    background: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), .14);
    border: 1px solid rgba(var(--mud-palette-primary-rgb, 25, 118, 210), .35);
    color: var(--mud-palette-primary, #1976d2);
    font-weight: 600;
    white-space: nowrap;
    /* Il token è un blocco unico: il cursore non ci entra dentro e il testo non si seleziona
       a metà, coerente con contenteditable=false. */
    cursor: default;
    user-select: all;
}

/* Le graffe restano nel DOM ma non a schermo: si legge il nome del segnaposto, non la sua
   sintassi. Non si possono togliere davvero — sono ciò che rende il token riconoscibile a chi
   lo sostituisce — quindi si nascondono. */
.jodit-wysiwyg .vr-placeholder-brace {
    display: none;
}

/* ===== EmailTemplater (ex BaseTemplater) ===== */
.base-templater .render-panel {
    overflow-y: auto;
}

    .base-templater .render-panel.vertical {
        height: inherit !important;
    }

.base-templater .jodit-status-bar-link {
    display: none !important;
}

/* ===== TextTemplater ===== */
/* Riga titolo: editor | render affiancati (stessa logica del corpo, senza altezza fissa). */
.text-templater .templater-title-row {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

/* Corpo ad altezza fissa: textarea ed eventuale render vi si adattano e scrollano internamente. */
.text-templater .templater-body {
    display: flex;
    gap: 8px;
    width: 100%;
}

.text-templater .templater-pane {
    flex: 1 1 0;
    min-width: 0;
}

/* Solo le pane del corpo hanno altezza piena (il contenitore corpo ha altezza fissa). */
.text-templater .templater-body .templater-pane {
    height: 100%;
}

.text-templater .templater-render {
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background-color: var(--mud-palette-background);
}

/* Render del titolo: stessa altezza del field (stretch nella riga) e testo centrato verticalmente. */
.text-templater .templater-title-row .templater-render {
    display: flex;
    align-items: center;
}

/* La MudTextField riempie il proprio contenitore e la textarea scrolla al suo interno. */
.text-templater .templater-fill,
.text-templater .templater-fill .mud-input-control-input-container,
.text-templater .templater-fill .mud-input {
    height: 100%;
}

.text-templater .templater-fill .mud-input-slot {
    height: 100% !important;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
}