/* ══════════════════════════════════════════════════════════════════
   Rich Text Editor (Blazored.TextEditor + Quill) — GLOBAL STYLESHEET
   Shared by:
     • The product page (Pages/Posts/PostForm.razor)
     • The tenant page  (Pages/TenantProfile/TenantProfileForm.razor)
   Origin: the ".content-editor-box ..." rule block used to be an inline <style>
   in PostForm.razor (lines 901-979) → extracted global so both pages share it
   and to avoid the issue where a new scoped CSS file is not applied (encountered in
   TenantProfileEdit.razor.css earlier).
   PostForm's --post-* variables have been replaced with concrete values:
     --post-text #374151 · --post-muted #9ca3af · --post-radius 8px
   ══════════════════════════════════════════════════════════════════ */

/* ── Editor frame (shared by both pages, keeping the product page's look) ── */
.content-editor-box {
    position: relative;
    overflow: visible;
    color: #374151;
    font-style: normal;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
}

.content-editor-box .ql-toolbar.ql-snow {
    background: #f8f9fa;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px 8px 0 0;
}

.content-editor-box .ql-container.ql-snow {
    overflow: visible;
    border: 0;
    border-radius: 0 0 8px 8px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
}

.content-editor-box .ql-editor {
    min-height: 220px;
    color: #374151;
    font-style: normal;
}

/* Read-only (detail view): the stored HTML is rendered as static content — no toolbar, same typography. */
.content-editor-box.content-editor-readonly .content-editor-static {
    min-height: 120px;
    padding: 12px 15px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    word-break: break-word;
}

.content-editor-box.content-editor-readonly .content-editor-static img {
    max-width: 100%;
    height: auto;
}

.content-editor-box.ql-editor.ql-blank::before,
.content-editor-box .ql-editor.ql-blank::before {
    color: #9ca3af !important;
    font-style: normal !important;
}

/* Heading dropdown */
.content-editor-box .ql-snow .ql-picker.ql-header {
    width: 120px;
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label {
    padding-right: 24px;
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-options {
    min-width: 150px;
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before,
.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before {
    content: "Đoạn văn";
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "Tiêu đề 1";
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "Tiêu đề 2";
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "Tiêu đề 3";
}

.content-editor-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.content-editor-box .ql-snow .ql-picker.ql-picker-item[data-value="4"]::before {
    content: "Tiêu đề 4";
}

/* Quill's tooltip (insert link...) is not clipped */
.content-editor-box .ql-snow .ql-tooltip {
    z-index: 1000;
    max-width: calc(100% - 16px);
}

/* ══════════════════════════════════════════════════════════════════
   Variant for the "Business info" (tenant) page Design System
   border 1px solid #DFE3E8 · radius 6px · focus #2486f7
   ══════════════════════════════════════════════════════════════════ */
.tp-rich-editor .content-editor-box {
    background: #FFFFFF;
    border: 1px solid #DFE3E8;
    border-radius: 6px;
}

.tp-rich-editor .content-editor-box:focus-within {
    border-color: #2486f7;
}

.tp-rich-editor .content-editor-box .ql-toolbar.ql-snow {
    border-bottom: 1px solid #DFE3E8;
    border-radius: 6px 6px 0 0;
}

.tp-rich-editor .content-editor-box .ql-container.ql-snow {
    border-radius: 0 0 6px 6px;
}

.tp-rich-editor .content-editor-box .ql-editor {
    min-height: 200px;
    color: #212B36;
    font-size: 14px;
}