/* ──────────────────────────────────────────────────────────────
   Rich text editor (Spillgebees / Quill "Snow") — restyle editoriale.
   File GLOBALE (non scoped): gli override si applicano a ogni
   <RichTextEditor> avvolto in un contenitore `.itn-rte`.
   Palette e font dai token --its-* del design system.
   ────────────────────────────────────────────────────────────── */

.itn-rte-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.itn-rte-field__label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--its-text);
}

/* Toolbar */
.itn-rte .ql-toolbar.ql-snow {
    border: 1px solid var(--its-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--its-surface2);
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
}

/* Area di editing */
.itn-rte .ql-container.ql-snow {
    border: 1px solid var(--its-border);
    border-radius: 0 0 8px 8px;
    background: var(--its-surface);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.itn-rte .ql-editor {
    min-height: 200px;
    max-height: 340px;
    color: var(--its-text);
    line-height: 1.6;
}

.itn-rte .ql-editor.ql-blank::before {
    color: rgba(26, 34, 56, .45);
    font-style: normal;
}

/* Icone: navy di default, oro su hover/attivo */
.itn-rte .ql-snow .ql-stroke { stroke: var(--its-text); }
.itn-rte .ql-snow .ql-fill { fill: var(--its-text); }
.itn-rte .ql-snow .ql-picker { color: var(--its-text); }

.itn-rte .ql-toolbar button:hover,
.itn-rte .ql-toolbar button:focus,
.itn-rte .ql-toolbar button.ql-active,
.itn-rte .ql-toolbar .ql-picker-label:hover,
.itn-rte .ql-toolbar .ql-picker-label.ql-active {
    color: var(--its-gold-deep);
}

.itn-rte .ql-toolbar button:hover .ql-stroke,
.itn-rte .ql-toolbar button:focus .ql-stroke,
.itn-rte .ql-toolbar button.ql-active .ql-stroke,
.itn-rte .ql-toolbar .ql-picker-label:hover .ql-stroke,
.itn-rte .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--its-gold-deep);
}

.itn-rte .ql-toolbar button:hover .ql-fill,
.itn-rte .ql-toolbar button:focus .ql-fill,
.itn-rte .ql-toolbar button.ql-active .ql-fill {
    fill: var(--its-gold-deep);
}

/* Focus ring coerente */
.itn-rte .ql-container.ql-snow:focus-within {
    border-color: var(--its-gold);
    box-shadow: 0 0 0 2px var(--its-gold-soft);
}

/* Popover dei dropdown */
.itn-rte .ql-snow .ql-picker-options {
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(26, 34, 56, .12);
}

/* Tooltip inserimento link */
.itn-rte .ql-snow .ql-tooltip {
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    color: var(--its-text);
    box-shadow: 0 6px 24px rgba(26, 34, 56, .12);
    border-radius: 6px;
}

.itn-rte .ql-snow .ql-tooltip input[type=text] {
    border: 1px solid var(--its-border);
    background: var(--its-bg);
    color: var(--its-text);
    border-radius: 4px;
}

.itn-rte .ql-snow .ql-tooltip a.ql-action,
.itn-rte .ql-snow .ql-tooltip a.ql-preview {
    color: var(--its-gold-deep);
}