/* Editor HTML base (wwwroot/js/html-editor.js).
   Usa le CSS vars di style.css, quindi segue automaticamente il tema chiaro/scuro/auto. */

.html-editor {
    border: 1px solid var(--app-border);
    border-radius: .375rem;
    background-color: var(--app-surface);
    overflow: hidden;
}

.html-editor-toolbar {
    display: flex;
    align-items: center;
    gap: .125rem;
    flex-wrap: wrap;
    padding: .25rem .375rem;
    background-color: var(--app-bar-bg);
    border-bottom: 1px solid var(--app-border);
}

/* NB: style.css (reset globale su textarea/button/input/label) impone width:100% a TUTTI i button.
   Senza width:auto + flex:0 0 auto ogni pulsante occuperebbe una riga intera e la toolbar
   diventerebbe una colonna. La specificità della classe basta a vincere sul selettore d'elemento. */
.html-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .35rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: var(--app-text);
    line-height: 1;
}

.html-editor-btn:hover {
    background-color: var(--app-hover);
    border-color: var(--app-border);
}

.html-editor-btn:active {
    background-color: var(--app-content-bg);
}

.html-editor-btn:focus-visible {
    outline: 2px solid var(--app-link);
    outline-offset: 1px;
}

.html-editor-sep {
    width: 1px;
    height: 1.2rem;
    margin: 0 .25rem;
    background-color: var(--app-border);
}

.html-editor-area {
    min-height: 180px;
    max-height: 420px;
    overflow-y: auto;
    padding: .5rem .75rem;
    color: var(--app-text);
    background-color: var(--app-surface);
}

.html-editor-area:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--app-link);
}

/* Placeholder: mostrato solo quando l'area è davvero vuota. */
.html-editor-area:empty::before,
.html-editor-area:has(> p:only-child:empty)::before {
    content: attr(data-placeholder);
    color: var(--app-text-muted);
    pointer-events: none;
}

.html-editor-area p:last-child,
.html-editor-area ul:last-child,
.html-editor-area ol:last-child {
    margin-bottom: 0;
}

.html-editor-area ul,
.html-editor-area ol {
    padding-left: 1.5rem;
}

.html-editor-area a {
    color: var(--app-link);
}

.html-editor-piede {
    display: flex;
    justify-content: flex-end;
    padding: .125rem .5rem .25rem;
    background-color: var(--app-bar-bg);
    border-top: 1px solid var(--app-border);
}

/* La textarea originale resta nel form (è lei che viene POSTata) ma non si vede. */
.html-editor-source {
    display: none !important;
}

/* Descrizione renderizzata nel modal SweetAlert2: testo allineato a sinistra e link visibili. */
.dash-descrizione-modal {
    text-align: left;
    color: var(--app-text);
}

.dash-descrizione-modal ul,
.dash-descrizione-modal ol {
    padding-left: 1.5rem;
}

.dash-descrizione-modal a {
    color: var(--app-link);
    text-decoration: underline;
}