/* Minimal Trix Editor Styles */
.trix-container {
  width: 100%;
  overflow: hidden;
}

.trix-editor-content {
  width: 100%;
  min-height: 150px;
}

trix-toolbar {
  width: 100% !important;
  overflow-x: auto;
}

trix-editor {
  width: 100% !important;
  min-height: 150px;
  padding: 0.5rem;
}

.trix-content {
  max-width: 100%;
  word-wrap: break-word;
}

.trix-content img,
.trix-content video,
.trix-content iframe {
  max-width: 100%;
  height: auto;
}

/* ─── Client-note rich-text editor (admin Notes tab) ───────────────────
   Wraps the trix-toolbar + trix-editor pair in a single DaisyUI-style
   card so they read as one input rather than two floating widgets.
   Also restores list-style inside the live editor — Tailwind's reset
   zeroes ul/ol bullets globally, which would otherwise render lists
   as bullet-less indented text while the practitioner types. */
.client-note-trix-wrap {
  border: 1px solid oklch(var(--bc) / 0.20);
  border-radius: 0.5rem;
  background: oklch(var(--b1));
  overflow: hidden;
}
.client-note-trix-wrap trix-toolbar {
  background: oklch(var(--b2));
  border-bottom: 1px solid oklch(var(--bc) / 0.10);
  padding: 6px 8px;
  margin: 0;
}
.client-note-trix-wrap trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  gap: 4px;
}
.client-note-trix-wrap trix-toolbar .trix-button-group {
  border: 1px solid oklch(var(--bc) / 0.12);
  background: oklch(var(--b1));
  border-radius: 4px;
}
.client-note-trix-wrap trix-toolbar .trix-button {
  border-color: oklch(var(--bc) / 0.12);
  color: oklch(var(--bc) / 0.75);
}
.client-note-trix-wrap trix-toolbar .trix-button:hover {
  background: oklch(var(--bc) / 0.06);
  color: oklch(var(--bc));
}
.client-note-trix-wrap trix-toolbar .trix-button.trix-active {
  background: oklch(var(--bc) / 0.10);
  color: oklch(var(--bc));
}
.client-note-trix-wrap trix-editor {
  min-height: 9rem;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: oklch(var(--bc));
  background: transparent;
  border: 0;
  border-radius: 0;
}
.client-note-trix-wrap trix-editor:focus,
.client-note-trix-wrap trix-editor:focus-visible {
  outline: none; box-shadow: none; border: 0;
}
/* Tailwind's reset wipes list-style globally; bring back the disc /
   decimal markers inside the live editor so bullets are visible
   while the practitioner types. */
.client-note-trix-wrap trix-editor ul {
  list-style: disc; padding-left: 1.4em; margin: 0.4em 0;
}
.client-note-trix-wrap trix-editor ol {
  list-style: decimal; padding-left: 1.4em; margin: 0.4em 0;
}
.client-note-trix-wrap trix-editor li { margin: 0.15em 0; }
.client-note-trix-wrap trix-editor h1 {
  font-size: 1.05rem; font-weight: 600; margin: 0.5em 0 0.2em;
}
.client-note-trix-wrap trix-editor blockquote {
  border-left: 3px solid oklch(var(--bc) / 0.20);
  padding-left: 0.75em; margin: 0.4em 0;
  color: oklch(var(--bc) / 0.7); font-style: italic;
}
.client-note-trix-wrap trix-editor pre {
  background: oklch(var(--b2));
  padding: 8px 10px; border-radius: 4px;
  font-size: 0.85em; overflow-x: auto;
}

/* Dark-theme overrides — Trix's toolbar icons are baked-in black SVGs
   (data: URLs with stroke="#000"), so on dark backgrounds they vanish.
   Invert them to white and bump opacity for legibility; the wrapper +
   toolbar already pick up theme-aware oklch tokens. */
[data-theme="dark"] .client-note-trix-wrap {
  background: oklch(var(--b2));
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar {
  background: oklch(var(--b3));
  border-bottom-color: oklch(var(--bc) / 0.18);
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button-group {
  background: oklch(var(--b1));
  border-color: oklch(var(--bc) / 0.20);
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button {
  border-color: oklch(var(--bc) / 0.18);
  color: oklch(var(--bc));
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button:hover {
  background: oklch(var(--bc) / 0.10);
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button.trix-active {
  background: oklch(var(--bc) / 0.18);
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button--icon::before {
  filter: invert(1);
  opacity: 0.85;
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
[data-theme="dark"] .client-note-trix-wrap trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.20;
}