/* Brand overrides for Quill's "snow" theme.
   Must load AFTER quill.snow.css in base.html so these rules win.

   Blends the editor with the staff app: forest accents on cream, Inter
   body text, calmer toolbar.
*/

/* Container ------------------------------------------------------------- */

.ql-toolbar.ql-snow {
    border: 0.5px solid var(--border);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: var(--cream-darker, #f3f0e6);
    padding: 6px 8px;
}

.ql-container.ql-snow {
    border: 0.5px solid var(--border);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: var(--text, #2c2c2a);
}

/* Editor area */
.ql-editor {
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.5;
}
.ql-editor.ql-blank::before {
    color: var(--text-muted, #948f80);
    font-style: normal;
    font-size: 13px;
    left: 12px;
    right: 12px;
}

/* Toolbar buttons ------------------------------------------------------- */

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 10px;
}

.ql-toolbar.ql-snow button {
    width: 26px;
    height: 26px;
    padding: 3px;
    border-radius: 4px;
}
.ql-toolbar.ql-snow button:hover {
    background: rgba(23, 52, 4, 0.08);
}

/* Active state — forest fill */
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow button:focus {
    background: var(--forest, #173404);
}
.ql-toolbar.ql-snow button.ql-active .ql-stroke,
.ql-toolbar.ql-snow button:focus .ql-stroke {
    stroke: var(--cream, #faf7f0);
}
.ql-toolbar.ql-snow button.ql-active .ql-fill,
.ql-toolbar.ql-snow button:focus .ql-fill {
    fill: var(--cream, #faf7f0);
}

/* Default icon color */
.ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--text-secondary, #5f5b51);
}
.ql-toolbar.ql-snow .ql-fill {
    fill: var(--text-secondary, #5f5b51);
}

/* Picker (e.g. heading dropdown) */
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--text-secondary, #5f5b51);
    border-radius: 4px;
}
.ql-toolbar.ql-snow .ql-picker-label:hover {
    color: var(--forest, #173404);
}
.ql-toolbar.ql-snow .ql-picker-options {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Link tooltip */
.ql-snow .ql-tooltip {
    border: 0.5px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--text, #2c2c2a);
    padding: 6px 10px;
}
.ql-snow .ql-tooltip a.ql-action::after,
.ql-snow .ql-tooltip a.ql-remove::before {
    color: var(--forest, #173404);
    font-weight: 500;
}

/* Links inside the editor */
.ql-editor a {
    color: var(--forest, #173404);
    text-decoration: underline;
}

/* Lists */
.ql-editor ul,
.ql-editor ol {
    padding-left: 1.4em;
    margin: 0.4em 0;
}
.ql-editor li + li {
    margin-top: 0.15em;
}

/* For the lab-interpretation profile */
.ql-editor h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--forest, #173404);
    margin: 0.6em 0 0.3em 0;
}
.ql-editor h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #5f5b51);
    margin: 0.5em 0 0.2em 0;
}
.ql-editor blockquote {
    border-left: 2px solid var(--forest, #173404);
    margin: 0.6em 0;
    padding: 0.2em 0 0.2em 12px;
    color: var(--text-secondary, #5f5b51);
    font-style: italic;
}

/* Rendered (read-only) rich text outside the editor. Apply the .rich-text
   class to a container wrapping rendered output so display matches the editor:
       <div class="rich-text">{{ value|render_rich_text|safe }}</div>
*/
.rich-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
}
.rich-text p { margin: 0 0 0.5em 0; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text a {
    color: var(--forest, #173404);
    text-decoration: underline;
}
.rich-text ul,
.rich-text ol {
    padding-left: 1.4em;
    margin: 0.4em 0;
}
.rich-text li + li { margin-top: 0.15em; }
.rich-text h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--forest, #173404);
    margin: 0.6em 0 0.3em 0;
}
.rich-text h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #5f5b51);
    margin: 0.5em 0 0.2em 0;
}
.rich-text blockquote {
    border-left: 2px solid var(--forest, #173404);
    margin: 0.6em 0;
    padding: 0.2em 0 0.2em 12px;
    color: var(--text-secondary, #5f5b51);
    font-style: italic;
}