/* ══════════════════════════════════════════════════════════════════
   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;
    color: #374151;
}

.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;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE STYLES (.app-theme-dark & .mud-theme-dark)
   ══════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.app-theme-dark .content-editor-box,
.mud-theme-dark .content-editor-box,
[data-theme="dark"] .content-editor-box {
    background: #0B1320;
    border: 1px solid #24344E;
    color: #FFFFFF;
}

.app-theme-dark .content-editor-box:focus-within,
.mud-theme-dark .content-editor-box:focus-within,
[data-theme="dark"] .content-editor-box:focus-within {
    border-color: #38BDF8;
}

/* ── Toolbar ── */
.app-theme-dark .content-editor-box .ql-toolbar.ql-snow,
.mud-theme-dark .content-editor-box .ql-toolbar.ql-snow,
[data-theme="dark"] .content-editor-box .ql-toolbar.ql-snow {
    background: #10192A;
    border: 0;
    border-bottom: 1px solid #1E2D4A;
    border-radius: 8px 8px 0 0;
}

/* ── SVG Icons ── */
.app-theme-dark .content-editor-box .ql-snow .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow .ql-stroke {
    stroke: #94A3B8;
}

.app-theme-dark .content-editor-box .ql-snow .ql-stroke-mitter,
.mud-theme-dark .content-editor-box .ql-snow .ql-stroke-mitter,
[data-theme="dark"] .content-editor-box .ql-snow .ql-stroke-mitter {
    stroke: #94A3B8;
}

.app-theme-dark .content-editor-box .ql-snow .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow .ql-fill {
    fill: #94A3B8;
}

.app-theme-dark .content-editor-box .ql-snow .ql-empty,
.mud-theme-dark .content-editor-box .ql-snow .ql-empty,
[data-theme="dark"] .content-editor-box .ql-snow .ql-empty {
    fill: none;
}

/* ── Buttons Hover & Active ── */
.app-theme-dark .content-editor-box .ql-snow button:hover,
.app-theme-dark .content-editor-box .ql-snow button:focus,
.app-theme-dark .content-editor-box .ql-snow button.ql-active,
.mud-theme-dark .content-editor-box .ql-snow button:hover,
.mud-theme-dark .content-editor-box .ql-snow button:focus,
.mud-theme-dark .content-editor-box .ql-snow button.ql-active,
[data-theme="dark"] .content-editor-box .ql-snow button:hover,
[data-theme="dark"] .content-editor-box .ql-snow button:focus,
[data-theme="dark"] .content-editor-box .ql-snow button.ql-active {
    color: #38BDF8;
}

.app-theme-dark .content-editor-box .ql-snow button:hover .ql-stroke,
.app-theme-dark .content-editor-box .ql-snow button:focus .ql-stroke,
.app-theme-dark .content-editor-box .ql-snow button.ql-active .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow button:hover .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow button:focus .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow button.ql-active .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow button:hover .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow button:focus .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow button.ql-active .ql-stroke {
    stroke: #38BDF8;
}

.app-theme-dark .content-editor-box .ql-snow button:hover .ql-fill,
.app-theme-dark .content-editor-box .ql-snow button:focus .ql-fill,
.app-theme-dark .content-editor-box .ql-snow button.ql-active .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow button:hover .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow button:focus .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow button.ql-active .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow button:hover .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow button:focus .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow button.ql-active .ql-fill {
    fill: #38BDF8;
}

/* ── Dropdown Pickers (Header, Color, Background) ── */
.app-theme-dark .content-editor-box .ql-snow .ql-picker,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker {
    color: #CBD5E1;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-label,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-label,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-label {
    color: #FFFFFF !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover,
.app-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-label:hover,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #38BDF8 !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover .ql-stroke,
.app-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover .ql-stroke,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-label:hover .ql-stroke,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: #38BDF8;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover .ql-fill,
.app-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-label:hover .ql-fill,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-label:hover .ql-fill,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: #38BDF8;
}

/* ── Dropdown Options Menu ── */
.app-theme-dark .content-editor-box .ql-snow .ql-picker-options,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-options,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-options {
    background-color: #10192A !important;
    border: 1px solid #1E2D4A !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    border-radius: 6px;
    z-index: 100;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-options .ql-picker-item {
    color: #CBD5E1 !important;
    padding: 6px 10px;
    border-radius: 4px;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item:hover,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item:hover,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-options .ql-picker-item:hover {
    color: #FFFFFF !important;
    background-color: #162238 !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item.ql-selected,
.mud-theme-dark .content-editor-box .ql-snow .ql-picker-options .ql-picker-item.ql-selected,
[data-theme="dark"] .content-editor-box .ql-snow .ql-picker-options .ql-picker-item.ql-selected {
    color: #38BDF8 !important;
    background-color: #1E2D4A !important;
    font-weight: 600;
}

/* ── Color Picker Palette ── */
.app-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-options,
.mud-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-options,
[data-theme="dark"] .content-editor-box .ql-snow .ql-color-picker .ql-picker-options {
    padding: 6px;
}

.app-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item,
.mud-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item,
[data-theme="dark"] .content-editor-box .ql-snow .ql-color-picker .ql-picker-item {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.app-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item:hover,
.app-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.mud-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item:hover,
.mud-theme-dark .content-editor-box .ql-snow .ql-color-picker .ql-picker-item.ql-selected,
[data-theme="dark"] .content-editor-box .ql-snow .ql-color-picker .ql-picker-item:hover,
[data-theme="dark"] .content-editor-box .ql-snow .ql-color-picker .ql-picker-item.ql-selected {
    border-color: #FFFFFF;
}

/* ── Editor Content Area ── */
.app-theme-dark .content-editor-box .ql-container.ql-snow,
.mud-theme-dark .content-editor-box .ql-container.ql-snow,
[data-theme="dark"] .content-editor-box .ql-container.ql-snow {
    background: #0B1320;
    color: #FFFFFF;
}

.app-theme-dark .content-editor-box .ql-editor,
.mud-theme-dark .content-editor-box .ql-editor,
[data-theme="dark"] .content-editor-box .ql-editor {
    color: #FFFFFF !important;
}

.app-theme-dark .content-editor-box .ql-editor p,
.app-theme-dark .content-editor-box .ql-editor h1,
.app-theme-dark .content-editor-box .ql-editor h2,
.app-theme-dark .content-editor-box .ql-editor h3,
.app-theme-dark .content-editor-box .ql-editor h4,
.app-theme-dark .content-editor-box .ql-editor h5,
.app-theme-dark .content-editor-box .ql-editor h6,
.app-theme-dark .content-editor-box .ql-editor li,
.app-theme-dark .content-editor-box .ql-editor span:not([style*="color"]),
.mud-theme-dark .content-editor-box .ql-editor p,
.mud-theme-dark .content-editor-box .ql-editor h1,
.mud-theme-dark .content-editor-box .ql-editor h2,
.mud-theme-dark .content-editor-box .ql-editor h3,
.mud-theme-dark .content-editor-box .ql-editor h4,
.mud-theme-dark .content-editor-box .ql-editor h5,
.mud-theme-dark .content-editor-box .ql-editor h6,
.mud-theme-dark .content-editor-box .ql-editor li,
.mud-theme-dark .content-editor-box .ql-editor span:not([style*="color"]),
[data-theme="dark"] .content-editor-box .ql-editor p,
[data-theme="dark"] .content-editor-box .ql-editor h1,
[data-theme="dark"] .content-editor-box .ql-editor h2,
[data-theme="dark"] .content-editor-box .ql-editor h3,
[data-theme="dark"] .content-editor-box .ql-editor h4,
[data-theme="dark"] .content-editor-box .ql-editor h5,
[data-theme="dark"] .content-editor-box .ql-editor h6,
[data-theme="dark"] .content-editor-box .ql-editor li,
[data-theme="dark"] .content-editor-box .ql-editor span:not([style*="color"]) {
    color: #FFFFFF;
}

.app-theme-dark .content-editor-box .ql-editor a,
.mud-theme-dark .content-editor-box .ql-editor a,
[data-theme="dark"] .content-editor-box .ql-editor a {
    color: #38BDF8 !important;
}

.app-theme-dark .content-editor-box.ql-editor.ql-blank::before,
.app-theme-dark .content-editor-box .ql-editor.ql-blank::before,
.mud-theme-dark .content-editor-box.ql-editor.ql-blank::before,
.mud-theme-dark .content-editor-box .ql-editor.ql-blank::before,
[data-theme="dark"] .content-editor-box.ql-editor.ql-blank::before,
[data-theme="dark"] .content-editor-box .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.45) !important;
}

.app-theme-dark .content-editor-box .ql-editor blockquote,
.mud-theme-dark .content-editor-box .ql-editor blockquote,
[data-theme="dark"] .content-editor-box .ql-editor blockquote {
    border-left: 4px solid #38BDF8;
    color: rgba(255, 255, 255, 0.85);
}

.app-theme-dark .content-editor-box .ql-editor pre.ql-syntax,
.mud-theme-dark .content-editor-box .ql-editor pre.ql-syntax,
[data-theme="dark"] .content-editor-box .ql-editor pre.ql-syntax {
    background-color: #141E33;
    color: #F8FAFC;
    border: 1px solid #1E2D4A;
}

/* ── Tooltip (Insert link...) ── */
.app-theme-dark .content-editor-box .ql-snow .ql-tooltip,
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip,
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip {
    background-color: #10192A !important;
    border: 1px solid #1E2D4A !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    border-radius: 6px;
}

.app-theme-dark .content-editor-box .ql-snow .ql-tooltip input[type="text"],
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip input[type="text"],
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip input[type="text"] {
    background-color: #141E33 !important;
    border: 1px solid #24344E !important;
    color: #FFFFFF !important;
    border-radius: 4px;
    padding: 4px 8px;
}

.app-theme-dark .content-editor-box .ql-snow .ql-tooltip input[type="text"]:focus,
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip input[type="text"]:focus,
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip input[type="text"]:focus {
    border-color: #38BDF8 !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-action::after,
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-action::after,
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip a.ql-action::after {
    color: #38BDF8 !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-preview,
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-preview,
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip a.ql-preview {
    color: #38BDF8 !important;
}

.app-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-remove::before,
.mud-theme-dark .content-editor-box .ql-snow .ql-tooltip a.ql-remove::before,
[data-theme="dark"] .content-editor-box .ql-snow .ql-tooltip a.ql-remove::before {
    color: #F87171 !important;
}

/* ── Read-only Static Content in Dark Mode ── */
.app-theme-dark .content-editor-box.content-editor-readonly .content-editor-static,
.mud-theme-dark .content-editor-box.content-editor-readonly .content-editor-static,
[data-theme="dark"] .content-editor-box.content-editor-readonly .content-editor-static {
    color: #FFFFFF !important;
    background: #0B1320;
}

.app-theme-dark .content-editor-box.content-editor-readonly .content-editor-static p,
.app-theme-dark .content-editor-box.content-editor-readonly .content-editor-static span,
.app-theme-dark .content-editor-box.content-editor-readonly .content-editor-static div,
.mud-theme-dark .content-editor-box.content-editor-readonly .content-editor-static p,
.mud-theme-dark .content-editor-box.content-editor-readonly .content-editor-static span,
.mud-theme-dark .content-editor-box.content-editor-readonly .content-editor-static div,
[data-theme="dark"] .content-editor-box.content-editor-readonly .content-editor-static p,
[data-theme="dark"] .content-editor-box.content-editor-readonly .content-editor-static span,
[data-theme="dark"] .content-editor-box.content-editor-readonly .content-editor-static div {
    color: #FFFFFF !important;
}

/* ── Tenant Profile Variant in Dark Mode ── */
.app-theme-dark .tp-rich-editor .content-editor-box,
.mud-theme-dark .tp-rich-editor .content-editor-box,
[data-theme="dark"] .tp-rich-editor .content-editor-box {
    background: #0B1320;
    border: 1px solid #24344E;
}

.app-theme-dark .tp-rich-editor .content-editor-box:focus-within,
.mud-theme-dark .tp-rich-editor .content-editor-box:focus-within,
[data-theme="dark"] .tp-rich-editor .content-editor-box:focus-within {
    border-color: #38BDF8;
}

.app-theme-dark .tp-rich-editor .content-editor-box .ql-toolbar.ql-snow,
.mud-theme-dark .tp-rich-editor .content-editor-box .ql-toolbar.ql-snow,
[data-theme="dark"] .tp-rich-editor .content-editor-box .ql-toolbar.ql-snow {
    border-bottom: 1px solid #1E2D4A;
}

.app-theme-dark .tp-rich-editor .content-editor-box .ql-editor,
.mud-theme-dark .tp-rich-editor .content-editor-box .ql-editor,
[data-theme="dark"] .tp-rich-editor .content-editor-box .ql-editor {
    color: #FFFFFF !important;
}