/* Quill editor chrome aligned to Phoenix / Bootstrap form-control styling */

.zp-html-editor {
    width: 100%;
}

.zp-html-editor .ql-toolbar.ql-snow {
    font-family: inherit;
    border: 1px solid var(--phoenix-input-border-color, #cbd0dd);
    border-radius: 0.375rem 0.375rem 0 0;
    background-color: var(--phoenix-gray-50, #f5f7fa);
    padding: 0.4rem 0.5rem;
}

.zp-html-editor .ql-container.ql-snow {
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--phoenix-body-color, #31374a);
    border: 1px solid var(--phoenix-input-border-color, #cbd0dd);
    border-top: 0;
    border-radius: 0 0 0.375rem 0.375rem;
    background-color: var(--phoenix-body-bg, #fff);
}

.zp-html-editor .ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--phoenix-gray-700, #525b75);
}

.zp-html-editor .ql-toolbar.ql-snow .ql-fill {
    fill: var(--phoenix-gray-700, #525b75);
}

.zp-html-editor .ql-toolbar.ql-snow .ql-picker {
    color: var(--phoenix-gray-700, #525b75);
}

.zp-html-editor .ql-toolbar.ql-snow button:hover .ql-stroke,
.zp-html-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: var(--phoenix-primary, #3874ff);
}

.zp-html-editor .ql-toolbar.ql-snow button:hover .ql-fill,
.zp-html-editor .ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: var(--phoenix-primary, #3874ff);
}

.zp-html-editor .ql-toolbar.ql-snow button:hover,
.zp-html-editor .ql-toolbar.ql-snow button.ql-active,
.zp-html-editor .ql-toolbar.ql-snow .ql-picker-label:hover,
.zp-html-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: var(--phoenix-primary, #3874ff);
}

.zp-html-editor .ql-container.ql-snow .ql-editor {
    min-height: 12rem;
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

.zp-html-editor .ql-container.ql-snow .ql-editor.ql-blank::before {
    color: var(--phoenix-gray-500, #9fa6bc);
    font-style: normal;
}

/* Validation states (from EditContext FieldCssClass) */
.zp-html-editor.invalid .ql-toolbar.ql-snow,
.zp-html-editor.invalid .ql-container.ql-snow {
    border-color: var(--phoenix-form-invalid-border-color, #e63757);
}

.zp-html-editor.valid .ql-toolbar.ql-snow,
.zp-html-editor.valid .ql-container.ql-snow {
    border-color: var(--phoenix-form-valid-border-color, #00d27a);
}

/* Dark theme */
[data-bs-theme="dark"] .zp-html-editor .ql-toolbar.ql-snow {
    background-color: var(--phoenix-gray-100, #222834);
    border-color: var(--phoenix-input-border-color, #3a4256);
}

[data-bs-theme="dark"] .zp-html-editor .ql-container.ql-snow {
    background-color: var(--phoenix-body-bg, #0b1727);
    border-color: var(--phoenix-input-border-color, #3a4256);
    color: var(--phoenix-body-color, #9fa6bc);
}

[data-bs-theme="dark"] .zp-html-editor .ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--phoenix-gray-700, #9fa6bc);
}

[data-bs-theme="dark"] .zp-html-editor .ql-toolbar.ql-snow .ql-fill {
    fill: var(--phoenix-gray-700, #9fa6bc);
}

[data-bs-theme="dark"] .zp-html-editor .ql-toolbar.ql-snow .ql-picker {
    color: var(--phoenix-gray-700, #9fa6bc);
}

[data-bs-theme="dark"] .zp-html-editor .ql-snow .ql-picker-options {
    background-color: var(--phoenix-gray-100, #222834);
    border-color: var(--phoenix-input-border-color, #3a4256);
}

.zp-html-editor .ql-editor img {
    max-width: 100%;
    height: auto;
}