/*
 * Shared overrides for Quill (snow theme) wherever it's used in the portal.
 * Pull this in alongside Quill's own CDN stylesheet:
 *   <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
 *   <link rel="stylesheet" href="../css/quill-editor.css">
 */

.rich-editor {
    background: white;
    border-radius: 0 0 6px 6px;
    min-height: 80px;
}
.rich-editor.tall { min-height: 320px; }

.ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; }
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: #d0d0d0; }
.ql-container.ql-snow {
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
}

/* Compact toolbar — smaller than Quill's defaults to match our form chrome. */
.ql-toolbar.ql-snow {
    padding: 4px 6px;
}
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
}
.ql-toolbar.ql-snow button {
    width: 24px;
    height: 22px;
    padding: 2px 3px;
}
.ql-toolbar.ql-snow button svg {
    width: 14px;
    height: 14px;
}
.ql-toolbar.ql-snow .ql-picker {
    font-size: 12px;
    height: 22px;
}
.ql-toolbar.ql-snow .ql-picker-label {
    padding: 0 18px 0 6px;
}

/* Dark mode — Quill defaults to a white surface; brighten it to match the
   rest of the dark portal. */
[data-theme="dark"] .rich-editor,
[data-theme="dark"] .ql-container.ql-snow {
    background: #1a1a2e;
    color: #e8e8e8;
}
[data-theme="dark"] .ql-toolbar.ql-snow {
    background: #242438;
    border-color: #3d3d5c;
}
[data-theme="dark"] .ql-container.ql-snow { border-color: #3d3d5c; }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: #c9c9c9; }
[data-theme="dark"] .ql-snow .ql-fill { fill: #c9c9c9; }
[data-theme="dark"] .ql-snow .ql-picker { color: #c9c9c9; }
[data-theme="dark"] .ql-editor.ql-blank::before { color: #7f7f9c; }

/* Read-mode rendering of HTML stored from a Quill editor. Use on the
   container that displays the rendered content (e.g. ticket message body,
   job description on the careers page). Inherits the surrounding page
   color so both light and dark modes stay readable. */
.rich-content {
    line-height: 1.55;
    word-wrap: break-word;
    color: inherit;
}
/* Force descendants to inherit too — Quill can emit inline styles
   (e.g. <span style="color:#666"> from a text-color toolbar action)
   which look fine in light mode but disappear on a dark background.
   This wipes inline color while keeping italics, bold, etc. */
[data-theme="dark"] .rich-content,
[data-theme="dark"] .rich-content * {
    color: inherit;
}
.rich-content p { margin: 0 0 10px 0; }
.rich-content ul,
.rich-content ol { margin: 0 0 10px 24px; }
.rich-content li { margin-bottom: 4px; }
.rich-content blockquote {
    margin: 0 0 10px 0;
    padding: 4px 14px;
    border-left: 3px solid #d0d0d0;
    color: #555;
}
.rich-content pre,
.rich-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    padding: 1px 4px;
}
.rich-content pre {
    padding: 8px 10px;
    overflow-x: auto;
}
.rich-content a {
    color: #8e44ad;
    text-decoration: underline;
}
[data-theme="dark"] .rich-content blockquote {
    border-left-color: #3d3d5c;
    color: #b0b0b8;
}
[data-theme="dark"] .rich-content pre,
[data-theme="dark"] .rich-content code {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .rich-content a { color: #c9a0dc; }