/* The CRM's own rich-text editor (src/js/lib/rich-text.js): a toolbar over an editing area, with a Source view and a
   small popover for the link / image / table dialogs. Light by default; the dark-mode and afternoon-mode classes of
   dark.css / afternoon.css switch the colours. */
.rte { position: relative; box-sizing: border-box; width: 100%; border: 1px solid #b9b9b9; border-radius: 4px; background: #fff; color: #222; font: 13px Arial, Verdana, sans-serif; }
.rte [hidden] { display: none !important; }

.rte-toolbar { border-bottom: 1px solid #d6d6d6; border-radius: 4px 4px 0 0; padding: 3px 4px; background: #f4f4f4; user-select: none; -webkit-user-select: none; }
.rte-row { display: flex; flex-wrap: wrap; align-items: center; }
.rte-band { display: flex; flex-wrap: wrap; align-items: center; margin: 1px 6px 1px 0; }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin: 0 1px; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #333; cursor: pointer; line-height: 1; }
.rte-btn:hover { border-color: #9ec1e6; background: #e6f0fa; }
.rte-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: -1px; }
.rte-btn[aria-pressed="true"] { border-color: #7fa8d6; background: #d3e4f6; color: #0b3d75; }
.rte-btn:disabled { color: #a6a6a6; cursor: default; background: transparent; border-color: transparent; }
.rte-btn svg { display: block; }
.rte-glyph { font: bold 14px/1 Georgia, "Times New Roman", serif; }
.rte-glyph-i { font-style: italic; }
.rte-glyph-u { text-decoration: underline; }
.rte-glyph-s { text-decoration: line-through; }
.rte-glyph sub, .rte-glyph sup { font-size: 9px; }
.rte-sep { width: 1px; height: 18px; margin: 0 4px; background: #cfcfcf; }
.rte-format { height: 26px; margin: 0 1px; padding: 0 2px; border: 1px solid #c4c4c4; border-radius: 3px; background: #fff; color: #333; font: 12px Arial, Verdana, sans-serif; }

.rte-body { position: relative; overflow: hidden; min-height: 60px; resize: vertical; border-radius: 0 0 4px 4px; }
.rte-area { box-sizing: border-box; height: 100%; overflow: auto; padding: 8px 10px; outline: none; font: 13px Arial, Verdana, sans-serif; line-height: 1.4; color: #222; background: #fff; word-wrap: break-word; }
.rte-area:focus { box-shadow: inset 0 0 0 1px #9ec1e6; }
.rte-area p { margin: 0 0 0.6em; }
.rte-area img { max-width: 100%; }
.rte-area table:not([border]) td, .rte-area table[border="0"] td, .rte-area table:not([border]) th, .rte-area table[border="0"] th { outline: 1px dotted #c0c0c0; }
.rte-mode-label { position: absolute; top: 4px; right: 20px; padding: 1px 6px; border-radius: 3px; background: #e9eef5; color: #4a5a70; font: 11px Arial, Verdana, sans-serif; pointer-events: none; }
.rte-markdown-mode .rte-source { background: #fffdf5; }
.rte-source { box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0; padding: 8px 10px; border: 0; resize: none; outline: none; font: 12px/1.4 "Courier New", monospace; color: #222; background: #fafafa; }

.rte-dialog { position: absolute; z-index: 20; top: 100%; left: 8px; margin-top: -1px; min-width: 300px; max-width: 95%; border: 1px solid #9ec1e6; border-radius: 4px; background: #fff; color: #222; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.rte-dialog-form { padding: 10px 12px; }
.rte-dialog-title { margin-bottom: 8px; font-weight: bold; }
.rte-dialog-field { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.rte-dialog-field span { flex: 0 0 110px; }
.rte-dialog-field input { flex: 1 1 auto; box-sizing: border-box; min-width: 0; padding: 4px 6px; border: 1px solid #c4c4c4; border-radius: 3px; font: 13px Arial, Verdana, sans-serif; }
.rte-dialog-buttons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.rte-dialog-buttons button { padding: 4px 12px; border: 1px solid #7fa8d6; border-radius: 3px; background: #e6f0fa; color: #0b3d75; font: 13px Arial, Verdana, sans-serif; cursor: pointer; }
.rte-dialog-buttons .rte-dialog-cancel { border-color: #c4c4c4; background: #f4f4f4; color: #333; }

html.dark-mode .rte { border-color: #555; background: #1f1f1f; color: #e6e6e6; }
html.dark-mode .rte-toolbar { border-bottom-color: #444; background: #2a2a2a; }
html.dark-mode .rte-btn { color: #ddd; }
html.dark-mode .rte-btn:hover { border-color: #5b86b5; background: #34455a; }
html.dark-mode .rte-btn[aria-pressed="true"] { border-color: #6f9ad0; background: #3c5a80; color: #fff; }
html.dark-mode .rte-btn:disabled { color: #777; }
html.dark-mode .rte-sep { background: #555; }
html.dark-mode .rte-format { border-color: #555; background: #1f1f1f; color: #ddd; }
html.dark-mode .rte-area { color: #e6e6e6; background: #1f1f1f; }
html.dark-mode .rte-source { color: #e6e6e6; background: #181818; }
html.dark-mode .rte-markdown-mode .rte-source { background: #1c1b16; }
html.dark-mode .rte-mode-label { background: #34455a; color: #cfd8e3; }
html.dark-mode .rte-dialog { border-color: #5b86b5; background: #2a2a2a; color: #e6e6e6; }
html.dark-mode .rte-dialog-field input { border-color: #555; background: #1f1f1f; color: #e6e6e6; }
html.dark-mode .rte-dialog-buttons button { border-color: #6f9ad0; background: #3c5a80; color: #fff; }
html.dark-mode .rte-dialog-buttons .rte-dialog-cancel { border-color: #555; background: #2a2a2a; color: #ddd; }