/*
 * smx-quill-palette.css — the fixed rich-text color palette.
 *
 * MUST match SMXQuill.PALETTE in smx-quill.js (the single source of truth),
 * the toolbar swatch values in source/web/app/js/config.js
 * (QUILL_NOTE_CONFIG), and the smxRichTextColors filter in
 * source/web/app/js/filters.js. Colors are class attributors — not inline
 * styles — because ngSanitize keeps `class` but strips `style` in read-only
 * previews. 'black' is the default: no class, no rule.
 */

/* Text colors */
.ql-color-red { color: #e60000; }
.ql-color-orange { color: #ff9900; }
.ql-color-yellow { color: #ffff00; }
.ql-color-green { color: #008a00; }
.ql-color-blue { color: #0066cc; }
.ql-color-purple { color: #9933ff; }
.ql-color-gray { color: #cccccc; }

/* Background colors */
.ql-bg-red { background-color: #e60000; }
.ql-bg-orange { background-color: #ff9900; }
.ql-bg-yellow { background-color: #ffff00; }
.ql-bg-green { background-color: #008a00; }
.ql-bg-blue { background-color: #0066cc; }
.ql-bg-purple { background-color: #9933ff; }
.ql-bg-gray { background-color: #cccccc; }

/*
 * Toolbar picker swatches. Quill inlines each swatch's background from its
 * data-value ('red' becomes the CSS keyword red), which drifts from the
 * palette hexes — !important pins the swatch to the exact palette color.
 */
.ql-color .ql-picker-item[data-value="red"],
.ql-background .ql-picker-item[data-value="red"] { background-color: #e60000 !important; }
.ql-color .ql-picker-item[data-value="orange"],
.ql-background .ql-picker-item[data-value="orange"] { background-color: #ff9900 !important; }
.ql-color .ql-picker-item[data-value="yellow"],
.ql-background .ql-picker-item[data-value="yellow"] { background-color: #ffff00 !important; }
.ql-color .ql-picker-item[data-value="green"],
.ql-background .ql-picker-item[data-value="green"] { background-color: #008a00 !important; }
.ql-color .ql-picker-item[data-value="blue"],
.ql-background .ql-picker-item[data-value="blue"] { background-color: #0066cc !important; }
.ql-color .ql-picker-item[data-value="purple"],
.ql-background .ql-picker-item[data-value="purple"] { background-color: #9933ff !important; }
.ql-color .ql-picker-item[data-value="gray"],
.ql-background .ql-picker-item[data-value="gray"] { background-color: #cccccc !important; }