/* Rich comment editor — thin wrapper around RadzenHtmlEditor used by TicketDetailDialog and TaskDetailDialog. We deliberately do not override toolbar button backgrounds / icon colors so the editor inherits whatever theme is active (light / dark / corporate). */ .rich-comment-editor { position: relative; background: var(--rz-base-background-color); border-radius: 8px; } .rich-comment-editor--sending { opacity: 0.7; pointer-events: none; } /* Scope every rule to a DIRECT child of the wrapper so Radzen popups that are portaled to are never matched, and no other editor on the page is accidentally restyled. */ .rich-comment-editor > .rz-html-editor { border-radius: 8px; box-shadow: none; border: 1px solid var(--rz-base-300); } .rich-comment-editor > .rz-html-editor > .rz-html-editor-toolbar { border-bottom: 1px solid var(--rz-base-200); border-radius: 8px 8px 0 0; padding: 4px 6px; gap: 1px; flex-wrap: wrap; background: color-mix(in srgb, var(--rz-base-200) 35%, transparent); } /* Tighter buttons + clearer hover so the bar reads as a single grouped strip instead of a scattered row of icons. */ .rich-comment-editor > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-button { width: 28px; height: 28px; border-radius: 4px; transition: background 0.12s ease, color 0.12s ease; } .rich-comment-editor > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-button:hover { background: color-mix(in srgb, var(--rz-primary) 12%, transparent); color: var(--rz-primary); } .rich-comment-editor > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-separator { width: 1px; height: 18px; margin: 0 4px; background: var(--rz-base-300); opacity: 0.6; } .rich-comment-editor > .rz-html-editor > .rz-html-editor-content table { border-collapse: collapse; max-width: 100%; } .rich-comment-editor > .rz-html-editor > .rz-html-editor-content table td, .rich-comment-editor > .rz-html-editor > .rz-html-editor-content table th { border: 1px solid var(--rz-base-300); padding: 4px 8px; } .rich-comment-editor > .rz-html-editor > .rz-html-editor-content img { max-width: 100%; height: auto; border-radius: 4px; } .rich-comment-editor__counter { position: absolute; right: 8px; bottom: 6px; font-size: 0.7rem; color: var(--rz-text-tertiary-color); background: var(--rz-base-background-color); padding: 1px 6px; border-radius: 4px; pointer-events: none; -webkit-user-select: none; user-select: none; } .rich-comment-editor__counter--near { color: var(--rz-warning, #b36b00); } .rich-comment-editor__counter--over { color: var(--rz-danger, #c0392b); font-weight: 600; }