/*
 * quill-render.css
 * Rendering READ-ONLY del contenuto rich-text prodotto da MudHtmlEditor (Quill 2.0.2).
 *
 * Perché serve: in editing il contenuto vive dentro `.ql-editor` e Quill inietta a runtime
 * uno <span class="ql-ui"> per ogni <li> su cui aggancia il marcatore (pallino/numero).
 * Nell'HTML SALVATO quello span NON esiste: Quill 2.0 serializza le liste come
 *   <ol><li data-list="bullet">…</li><li data-list="ordered" class="ql-indent-1">…</li></ol>
 * quindi in sola visualizzazione i marcatori, i rientri (ql-indent-N) e gli allineamenti
 * (ql-align-*) andrebbero persi. Qui replichiamo le regole v2 di Quill ancorando i marcatori
 * direttamente a `li::before` (invece che a `.ql-ui:before`).
 *
 * Ambito: `.dynamic-html`, il wrapper usato da WorkflowField.razor e CustomLabelField.razor.
 */

.dynamic-html {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.42;
}

.dynamic-html a {
    color: #007bff;
    text-decoration: underline;
    position: relative;
}

/* Tooltip in hover che mostra l'URL di navigazione del link (puro CSS, legge l'attributo href). */
.dynamic-html a[href]:hover::after {
    content: attr(href);
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 4px;
    z-index: 10;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    background: #323232;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Un blocco non-lista azzera i contatori: la numerazione riparte dopo un paragrafo/heading. */
.dynamic-html p,
.dynamic-html h1,
.dynamic-html h2,
.dynamic-html h3,
.dynamic-html h4,
.dynamic-html h5,
.dynamic-html h6 {
    margin: 0;
    padding: 0;
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

/* ---- Liste (bullet + ordered nello stesso <ol>, distinte da data-list) ---- */

.dynamic-html ol,
.dynamic-html ul {
    padding-left: 1.5em;
    margin: 0;
    list-style: none;
}

.dynamic-html li {
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
}

.dynamic-html li::before {
    display: inline-block;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
}

/* Fallback: <ul>/<li> senza attributo data-list (HTML legacy salvato da versioni precedenti). */
.dynamic-html ul > li:not([data-list])::before {
    content: '\2022';
}

.dynamic-html li[data-list="bullet"]::before {
    content: '\2022';
}

/* Ad ogni item resetto i contatori dei livelli più profondi. */
.dynamic-html li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"] {
    counter-increment: list-0;
}

.dynamic-html li[data-list="ordered"]::before {
    content: counter(list-0, decimal) '. ';
}

.dynamic-html li[data-list="ordered"].ql-indent-1 {
    counter-increment: list-1;
}

.dynamic-html li[data-list="ordered"].ql-indent-1::before {
    content: counter(list-1, lower-alpha) '. ';
}

.dynamic-html li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-2 {
    counter-increment: list-2;
}

.dynamic-html li[data-list="ordered"].ql-indent-2::before {
    content: counter(list-2, lower-roman) '. ';
}

.dynamic-html li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-3 {
    counter-increment: list-3;
}

.dynamic-html li[data-list="ordered"].ql-indent-3::before {
    content: counter(list-3, decimal) '. ';
}

.dynamic-html li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-4 {
    counter-increment: list-4;
}

.dynamic-html li[data-list="ordered"].ql-indent-4::before {
    content: counter(list-4, lower-alpha) '. ';
}

.dynamic-html li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-5 {
    counter-increment: list-5;
}

.dynamic-html li[data-list="ordered"].ql-indent-5::before {
    content: counter(list-5, lower-roman) '. ';
}

.dynamic-html li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-6 {
    counter-increment: list-6;
}

.dynamic-html li[data-list="ordered"].ql-indent-6::before {
    content: counter(list-6, decimal) '. ';
}

.dynamic-html li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-7 {
    counter-increment: list-7;
}

.dynamic-html li[data-list="ordered"].ql-indent-7::before {
    content: counter(list-7, lower-alpha) '. ';
}

.dynamic-html li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-8 {
    counter-increment: list-8;
}

.dynamic-html li[data-list="ordered"].ql-indent-8::before {
    content: counter(list-8, lower-roman) '. ';
}

.dynamic-html li[data-list].ql-indent-8 {
    counter-reset: list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-9 {
    counter-increment: list-9;
}

.dynamic-html li[data-list="ordered"].ql-indent-9::before {
    content: counter(list-9, decimal) '. ';
}

/* ---- Rientri (ql-indent-N): blocchi e liste ---- */

.dynamic-html .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.dynamic-html li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.dynamic-html .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.dynamic-html li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.dynamic-html .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.dynamic-html li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.dynamic-html .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.dynamic-html li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.dynamic-html .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.dynamic-html li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }
.dynamic-html .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; }
.dynamic-html li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; }
.dynamic-html .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; }
.dynamic-html li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; }
.dynamic-html .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; }
.dynamic-html li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; }
.dynamic-html .ql-indent-9:not(.ql-direction-rtl) { padding-left: 27em; }
.dynamic-html li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 28.5em; }

/* ---- Allineamento ---- */

.dynamic-html .ql-align-center { text-align: center; }
.dynamic-html .ql-align-justify { text-align: justify; }
.dynamic-html .ql-align-right { text-align: right; }

/* ---- Dimensioni font ---- */

.dynamic-html .ql-size-small { font-size: 0.75em; }
.dynamic-html .ql-size-large { font-size: 1.5em; }
.dynamic-html .ql-size-huge { font-size: 2.5em; }

.dynamic-html .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.dynamic-html .ql-font-monospace { font-family: Monaco, "Courier New", monospace; }

/* ---- Heading ---- */

.dynamic-html h1 { font-size: 2em; }
.dynamic-html h2 { font-size: 1.5em; }
.dynamic-html h3 { font-size: 1.17em; }
.dynamic-html h4 { font-size: 1em; }
.dynamic-html h5 { font-size: 0.83em; }
.dynamic-html h6 { font-size: 0.67em; }

/* ---- Citazione (blockquote) ---- */

.dynamic-html blockquote {
    border-left: 4px solid #ccc;
    margin: 5px 0;
    padding-left: 16px;
}

/* ---- Codice inline e blocco codice (Quill 2.0: .ql-code-block-container) ---- */

.dynamic-html code,
.dynamic-html .ql-code-block-container {
    background-color: #23241f;
    color: #f8f8f2;
    border-radius: 3px;
}

.dynamic-html code {
    background-color: #f0f0f0;
    color: inherit;
    font-size: 85%;
    padding: 2px 4px;
}

.dynamic-html .ql-code-block-container {
    font-family: monospace;
    margin: 5px 0;
    padding: 5px 10px;
    overflow: visible;
}

/* ---- Divisore orizzontale (pulsante "hr") ---- */

.dynamic-html hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 8px 0;
}