/* === Rich-text notes (features/rich-editor.js, rich-note.js) ===
   One look for the free note editor, the report body, the record view and prints:
   paragraphs without gaps, the section heading as the note's uppercase label,
   real lists, a checklist with boxes and *** blanks as amber pills. Each block
   takes its own direction (Arabic and English lines mix in one note). */

.rich-ed { position: relative; outline: none; white-space: normal; overflow-wrap: anywhere; cursor: text; }
.rich-ed.rich-empty::before {
  content: attr(data-placeholder); position: absolute; pointer-events: none;
  color: var(--text-tertiary); white-space: nowrap; overflow: hidden; max-width: 100%;
}
#view-patient-detail .ch-note .visit-free-notes.rich-ed:focus { outline: none; box-shadow: none; }

:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) :is(p, h3, li) { unicode-bidi: plaintext; }
/* A block with a known direction (detected while typing, or set with ⇄) uses it,
   so Safari aligns it too — it only aligns plaintext blocks by the editor's side. */
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) :is(p, h3, li, ul, ol)[dir] { unicode-bidi: isolate; text-align: start; }
/* An item written the other way from its list (English in an Arabic list) keeps its
   bullet: the list's indent is on the far side, so the item brings its own. */
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) :is(ul, ol)[dir="rtl"] > li[dir="ltr"],
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) :is(ul, ol)[dir="ltr"] > li[dir="rtl"] { margin-inline-start: 24px; }
:is(.rich-ed, .rich-view) p { margin: 0; }
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) h3 {
  margin: 14px 0 4px; font-family: inherit; font-size: 12px; line-height: 1.5; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) h3:first-child { margin-top: 0; }
:is(.rich-ed, .rich-view) :is(ul, ol) { margin: 2px 0; padding-inline-start: 24px; }
:is(.rich-ed, .rich-view) ul { list-style: disc; }
:is(.rich-ed, .rich-view) ol { list-style: decimal; }
:is(.rich-ed, .rich-view) li { margin: 0; }
:is(.rich-ed, .rich-view) li :is(ul, ol) { margin: 0; }

/* Checklist: a box at the start of each item; clicking it (editor only) ticks it. */
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) ul.checklist { list-style: none; padding-inline-start: 2px; }
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) ul.checklist > li { position: relative; padding-inline-start: 24px; }
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) ul.checklist > li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .32em; width: 15px; height: 15px; box-sizing: border-box;
  border: 1.5px solid var(--text-secondary); border-radius: 3px; background: var(--surface, #fff);
  font: 700 11px/12px var(--font, sans-serif); text-align: center; color: #fff;
}
.rich-ed ul.checklist > li::before { cursor: pointer; }
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) ul.checklist > li.checked::before { content: '✓'; background: var(--primary); border-color: var(--primary); }
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) ul.checklist > li.checked { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--text-tertiary); }

/* Pill and marker colours follow the theme — the dark ones also when the theme is
   "System" and the device is dark (light text on a pale pill was unreadable). */
:root, [data-theme="light"] { --note-blank-bg: #fbefc8; --note-blank-fg: inherit; --note-hl-bg: #fdf2b3; --note-hl-fg: inherit; }
[data-theme="dark"] { --note-blank-bg: #4a3d1c; --note-blank-fg: #f6e3b4; --note-hl-bg: rgba(245,181,103,.30); --note-hl-fg: #fff3d6; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] { --note-blank-bg: #4a3d1c; --note-blank-fg: #f6e3b4; --note-hl-bg: rgba(245,181,103,.30); --note-hl-fg: #fff3d6; }
}

/* *** blanks: an amber pill; click selects it, typing replaces it. */
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) span.blank {
  background: var(--ch-blank-bg, var(--note-blank-bg)); color: var(--note-blank-fg); border-radius: 3px; padding: 0 3px;
  box-shadow: 0 0 0 1px var(--ch-blank-bg, var(--note-blank-bg));
}
.rich-ed span.blank { cursor: pointer; }

/* ==highlight==: a soft marker pen, clearly unlike the amber *** pill. */
:is(.rich-ed, .rich-view, .ch-rpt-body, .rx-body) mark {
  background: var(--note-hl-bg); color: var(--note-hl-fg); border-radius: 2px; padding: 0 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media print {
  :is(.rx-body, .rich-view, .ch-rpt-body) mark { background: #fdf2b3 !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.rx-print-page .rx-body mark { background: #fdf2b3; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Toolbar states: the format at the caret reads as pressed. */
.ch-tb.ch-tb-on { background: var(--pressed, rgba(0,0,0,.08)); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
#chart-toolbar.ch-tb-plain .ch-tb-rich { display: none; }

/* The record view: the note reads like it was written. */
.timeline-section-content.rich-view { white-space: normal; line-height: 1.65; }

/* Old modal editor (outside the chart): keep the box look of the textarea it replaced. */
.visit-free-notes.rich-ed { min-height: 240px; }
.modal .visit-free-notes.rich-ed:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* Prints: blanks as a line to write on; boxes stay outlined. */
@media print {
  :is(.rx-body, .rich-view) span.blank { background: none; box-shadow: none; color: transparent; border-bottom: 1px solid #000; }
}

/* Phones: 16px text in the editors (no zoom on focus). */
@media (max-width: 767px) {
  .rich-ed { font-size: 16px; }
}

/* Letterhead prints (features/letter-print.js): title, visit line, paper colours in any theme. */
.rx-letter-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.rx-letter-title + .rx-letter-sub { margin-top: -8px; }
.rx-letter-sub { font-size: 13px; color: #555; margin-bottom: 14px; }
.rx-print-page .rx-body h3 { color: #555; font-size: 12.5px; margin: 16px 0 4px; }
.rx-print-page .rx-body h3:first-child { margin-top: 0; }
.rx-print-page .rx-body.rx-note p { margin: 0; }
.rx-print-page .rx-body :is(ul, ol) { margin: 2px 0 6px; padding-inline-start: 24px; }
.rx-print-page .rx-body ul.checklist { padding-inline-start: 2px; }
.rx-print-page .rx-body ul.checklist > li::before { border-color: #555; background: #fff; color: #fff; }
.rx-print-page .rx-body ul.checklist > li.checked::before { background: #333; border-color: #333; }
.rx-print-page .rx-body ul.checklist > li.checked { color: #555; }
.rx-print-page .rx-body span.blank { background: none; box-shadow: none; color: transparent; border-bottom: 1px solid #333; }

/* Structured mode keeps a free note with content visible as "Notes" (features/note-merge.js). */
#visit-notes-free:not(.vnf-notes) .vnf-notes-label { display: none !important; }
#visit-notes-free.vnf-notes { margin-top: 14px; }
#visit-notes-free.vnf-notes .vnf-notes-label { display: flex; }
#visit-notes-free.vnf-notes .visit-free-notes.rich-ed { min-height: 80px; }