/*
 * Quill editors across the app: dark mode for the snow theme, @-mentions and
 * editable tables (quill-table-better). Loaded by include.header.php so it
 * covers editors that load Quill later. Selectors carry the theme attribute,
 * so they win over the plugins' own stylesheets whatever order they load in.
 */

/* Tables inside an editor: visible cell borders, cells sized to their text. */
.ql-editor table { border-collapse: collapse; margin: .5em 0; }
.ql-editor td,
.ql-editor th { border-color: #bfbfbf; }

[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-snow .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill { fill: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-snow .ql-picker { color: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--bs-link-hover-color, #6ea8fe); }
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--bs-link-hover-color, #6ea8fe); }
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-item:hover,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--bs-link-hover-color, #6ea8fe); }
/* Editors inherit their text colour, and several sit in muted containers
   (the task modal's is grey-on-grey in dark mode). */
[data-bs-theme="dark"] .ql-container .ql-editor { color: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-editor.ql-blank::before { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .ql-snow .ql-tooltip {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-snow .ql-editor pre.ql-syntax,
[data-bs-theme="dark"] .ql-snow .ql-editor .ql-code-block-container { background-color: #11131a; color: #e6e6e6; }
[data-bs-theme="dark"] .ql-snow .ql-editor code { background-color: var(--bs-tertiary-bg); }
/* A table in a dark editor stays on white, as it will look in the email:
   tables pasted from Excel carry black text that would vanish otherwise. */
[data-bs-theme="dark"] .ql-editor table { background-color: #fff; color: #212529; }
[data-bs-theme="dark"] .ql-editor th { background-color: #f2f2f2; }

/* @-mentions */
[data-bs-theme="dark"] .ql-mention-list-container {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .ql-mention-list-item { color: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-mention-list-item.selected { background-color: var(--bs-primary-bg-subtle); }
[data-bs-theme="dark"] .ql-editor .mention { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }

/* Editable tables: menus, size picker, properties form */
[data-bs-theme="dark"] .ql-table-border-shadow,
[data-bs-theme="dark"] .ql-table-select-container,
[data-bs-theme="dark"] .ql-table-dropdown-list,
[data-bs-theme="dark"] .ql-table-dropdown-properties-list,
[data-bs-theme="dark"] .ql-table-menus-container,
[data-bs-theme="dark"] .ql-table-properties-form,
[data-bs-theme="dark"] .ql-table-color-container .color-picker .color-picker-select,
[data-bs-theme="dark"] .ql-table-color-container .color-picker .color-picker-palette,
[data-bs-theme="dark"] .ql-table-properties-form .properties-form-action-row > button,
[data-bs-theme="dark"] .label-field-view-input-wrapper > label {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .ql-table-properties-form .properties-form-header { color: var(--bs-body-color); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .ql-table-properties-form input,
[data-bs-theme="dark"] .ql-table-properties-form select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-table-dropdown:hover,
[data-bs-theme="dark"] .ql-table-dropdown-properties:hover,
[data-bs-theme="dark"] .ql-table-dropdown-list li:hover,
[data-bs-theme="dark"] .ql-table-dropdown-properties-list li:hover,
[data-bs-theme="dark"] .ql-table-properties-form .properties-form-action-row > button:hover,
[data-bs-theme="dark"] .ql-table-color-container .color-picker .color-picker-select .erase-container:hover,
[data-bs-theme="dark"] .ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-tooltip-hover:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-btns-checked { background: var(--bs-primary-bg-subtle); }
[data-bs-theme="dark"] .ql-table-select-container span { border-color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .ql-table-menus-container .ql-stroke,
[data-bs-theme="dark"] .ql-table-dropdown-list .ql-stroke,
[data-bs-theme="dark"] .ql-table-properties-form .ql-stroke { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-table-menus-container .ql-fill,
[data-bs-theme="dark"] .ql-table-dropdown-list .ql-fill,
[data-bs-theme="dark"] .ql-table-properties-form .ql-fill { fill: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-table-triangle-up:not(.ql-table-triangle-none)::after { border-top-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .ql-table-triangle-down:not(.ql-table-triangle-none)::after { border-bottom-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .ql-table-disabled,
[data-bs-theme="dark"] .ql-table-button-disabled { background: var(--bs-secondary-bg) !important; }
/* table-better draws its menu icons with stroke="#333" and black fills */
[data-bs-theme="dark"] .ql-table-menus-container svg [stroke]:not([stroke="none"]),
[data-bs-theme="dark"] .ql-table-dropdown-list svg [stroke]:not([stroke="none"]),
[data-bs-theme="dark"] .ql-table-dropdown-properties-list svg [stroke]:not([stroke="none"]),
[data-bs-theme="dark"] .ql-table-properties-form svg [stroke]:not([stroke="none"]) { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-table-menus-container svg.icon path,
[data-bs-theme="dark"] .ql-table-dropdown-list svg.icon path,
[data-bs-theme="dark"] .ql-table-properties-form svg.icon path { fill: var(--bs-body-color); }