/* Lexxy theme overrides — map Lexxy's tokens onto the app's
   Tailwind/Flowbite palette so the editor reads as part of the form
   rather than a foreign widget.

   Lexxy exposes its design tokens as CSS custom properties on
   <lexxy-editor>. Overriding them here applies to every editor in the
   app — no shadow-DOM piercing needed. */

lexxy-editor {
  /* Neutral palette — mirrors gray-50 → gray-700 from Tailwind. */
  --lexxy-color-ink: #111827;            /* gray-900 — body text */
  --lexxy-color-ink-medium: #4b5563;     /* gray-600 — toolbar icons */
  --lexxy-color-ink-light: #9ca3af;      /* gray-400 — placeholder */
  --lexxy-color-ink-lighter: #e5e7eb;    /* gray-200 — toolbar divider */
  --lexxy-color-ink-lightest: #f3f4f6;   /* gray-100 — hover background */
  --lexxy-color-ink-inverted: #ffffff;
  --lexxy-color-canvas: #ffffff;
  --lexxy-color-text: var(--lexxy-color-ink);

  /* Emerald accent matches the app's primary brand colour. */
  --lexxy-color-accent-dark: #047857;    /* emerald-700 */
  --lexxy-color-accent-medium: #10b981;  /* emerald-500 */
  --lexxy-color-accent-light: #d1fae5;   /* emerald-100 */
  --lexxy-color-accent-lightest: #ecfdf5;/* emerald-50 */
  --lexxy-color-selected: #d1fae5;
  --lexxy-color-selected-dark: #6ee7b7;
  --lexxy-color-selected-hover: #a7f3d0;

  --lexxy-focus-ring-color: #10b981;
  --lexxy-focus-ring-size: 2px;
  --lexxy-focus-ring-offset: -2px;

  /* Match Tailwind's `rounded-lg` (8px) so corners line up with the
     surrounding form controls. */
  --lexxy-radius: 8px;
  --lexxy-shadow: none;

  /* Slightly roomier toolbar — closer to Flowbite button spacing. */
  --lexxy-toolbar-button-size: 28px;
  --lexxy-toolbar-icon-size: 16px;
  --lexxy-toolbar-gap: 4px;
  --lexxy-toolbar-spacing: 8px;

  --lexxy-editor-padding: 16px;
  --lexxy-editor-rows: 14lh;
  --lexxy-font-base: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --lexxy-text-small: 13px;
  --lexxy-content-margin: 0.75rem;

  /* Kill the editor's own border — the surrounding form wrapper supplies
     the border + focus ring, so the doubled chrome looks busy. */
  border: none !important;
}

/* Hide the image + file-upload toolbar buttons. FileNote bodies don't
   carry attachments — those are tracked via the dealflow document
   library, not embedded in the note. Lexxy doesn't expose a config
   attribute to drop these buttons, but the toolbar lives in light DOM
   so a CSS rule is enough. Belt-and-braces selectors — match both by
   tag-name descendant + by toolbar class so we win the cascade. */
lexxy-editor button[name="image"],
lexxy-editor button[name="file"],
.lexxy-editor__toolbar-button[name="image"],
.lexxy-editor__toolbar-button[name="file"] {
  display: none !important;
}

/* Bullet + numbered list markers were rendering outside the editor's
   padding (overflowing the rounded border). Lexxy's default `ol/ul`
   uses `margin-inline-start` only — for list-style-position: outside
   markers, we need padding too so they sit inside the content box. */
lexxy-editor ol,
lexxy-editor ul:not(.lexxy-prompt-menu) {
  padding-inline-start: 1.75rem !important;
}

/* Dark-mode palette — engaged when an ancestor carries `.dark` (the
   app's Tailwind dark variant). */
.dark lexxy-editor,
:where(.dark *) lexxy-editor {
  --lexxy-color-ink: #f9fafb;            /* gray-50 */
  --lexxy-color-ink-medium: #d1d5db;     /* gray-300 */
  --lexxy-color-ink-light: #9ca3af;      /* gray-400 */
  --lexxy-color-ink-lighter: #4b5563;    /* gray-600 — divider */
  --lexxy-color-ink-lightest: #374151;   /* gray-700 — hover bg */
  --lexxy-color-ink-inverted: #111827;
  --lexxy-color-canvas: #374151;         /* gray-700 — matches form input bg */
  --lexxy-color-text: var(--lexxy-color-ink);

  --lexxy-color-accent-dark: #34d399;    /* emerald-400 — pops on dark */
  --lexxy-color-accent-medium: #10b981;  /* emerald-500 */
  --lexxy-color-accent-light: rgba(16, 185, 129, 0.15);
  --lexxy-color-accent-lightest: rgba(16, 185, 129, 0.08);
  --lexxy-color-selected: rgba(16, 185, 129, 0.18);
  --lexxy-color-selected-dark: #34d399;
  --lexxy-color-selected-hover: rgba(16, 185, 129, 0.28);
}