/* rich-text.css — shared styles for the rich-text editor (rich-text.js) and for
   rendered rich-text read views. Linked by every page that has multi-line
   fields (process-workbench, dashboard). */

/* Rendered read-view content (.rich-text-content) and the editor surface
   (.rt-editor) share the same inner formatting. */
.rich-text-content {
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Boxed read-view variant (rendered content shown outside a table). */
.rich-text-content.rich-text-boxed {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border, #dddbd8);
  border-radius: 6px;
  background: var(--surface-2, #f0efed);
}

.rich-text-content:empty { display: none; }

.rich-text-content > :first-child,
.rt-editor > :first-child { margin-top: 0; }
.rich-text-content > :last-child,
.rt-editor > :last-child { margin-bottom: 0; }
.rich-text-content h1, .rich-text-content h2, .rich-text-content h3,
.rt-editor h1, .rt-editor h2, .rt-editor h3 { margin: 8px 0 4px; font-weight: 700; }
.rich-text-content h1, .rt-editor h1 { font-size: 20px; }
.rich-text-content h2, .rt-editor h2 { font-size: 16px; }
.rich-text-content h3, .rt-editor h3 { font-size: 13px; }
.rich-text-content p, .rt-editor p { margin: 6px 0; }
.rich-text-content ul, .rich-text-content ol,
.rt-editor ul, .rt-editor ol { margin: 6px 0; padding-left: 20px; }
.rich-text-content code, .rt-editor code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-3, #e8e7e4);
  padding: 1px 4px;
  border-radius: 4px;
}
.rich-text-content pre, .rt-editor pre {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--surface-3, #e8e7e4);
  border-radius: 6px;
  overflow-x: auto;
}
.rich-text-content pre code, .rt-editor pre code { background: none; padding: 0; }
.rich-text-content blockquote, .rt-editor blockquote {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 3px solid var(--border-strong, #c8c5c0);
  color: var(--muted, #64748b);
}
.rich-text-content a, .rt-editor a { color: #1e40af; text-decoration: underline; }

/* --- Rich-text editor chrome --- */
.rich-text { display: flex; flex-direction: column; }

/* The native <textarea> stays as the form value authority but is hidden. */
.rt-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.rt-toolbar {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--border, #dddbd8);
  border-bottom: none;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
  background: var(--surface-2, #f0efed);
}

.rt-btn {
  min-width: 28px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text, #0f172a);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.rt-btn:hover { background: var(--surface-3, #e8e7e4); }
.rt-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* Active formatting at the caret: tied to the yellow focus accent so it reads
   as "on" and stays distinct from the plain hover background. */
.rt-btn.is-active,
.rt-btn.is-active:hover {
  background: rgba(221, 217, 42, 0.18);
  border-color: rgba(221, 217, 42, 0.7);
  color: var(--text, #0f172a);
}
.rt-btn-bold { font-weight: 700; }
.rt-btn-italic { font-style: italic; }
.rt-btn-underline { text-decoration: underline; }

.rt-editor {
  min-height: var(--field-textarea-min, 84px);
  border: 1px solid var(--border, #dddbd8);
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  background: #fafaf9; color: var(--text, #0f172a);
  padding: var(--field-padding-y, 8px) var(--field-padding-x, 10px);
  overflow-wrap: anywhere; overflow-y: auto;
  /* Draggable bottom-right handle to expand the field, like a native textarea. */
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.rt-editor:focus { outline: none; }
.rich-text:focus-within .rt-editor {
  border-color: rgba(221, 217, 42, 0.7);
  box-shadow: 0 0 0 3px rgba(221, 217, 42, 0.2);
  background: #fff;
}
.rt-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-2, #94a3b8);
  pointer-events: none;
}
.rich-text.is-readonly .rt-toolbar { display: none; }
.rich-text.is-readonly .rt-editor { background: var(--surface-3, #e8e7e4); color: var(--muted, #64748b); cursor: default; }

/* Rendered rich text inside a data-table cell: clamp to the fixed row height. */
.rt-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-clamp > :first-child { margin-top: 0; }
.rt-clamp > :last-child { margin-bottom: 0; }
.rt-clamp p, .rt-clamp ul, .rt-clamp ol { margin: 0; }