/*
 * Plain (unlayered) CSS served by Propshaft, loaded AFTER tailwind.css.
 *
 * Trix toolbar overrides live here on purpose: actiontext.css (Trix defaults)
 * is also unlayered and loaded before this file, so its rules beat anything in
 * the Tailwind `@layer components` block. Unlayered rules declared here load
 * last and reclaim control over the editorial toolbar look. These selectors
 * only match the admin rich-text editor (no <trix-toolbar> on public pages).
 */

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow-x: visible;
}

trix-toolbar .trix-button-group {
  margin-bottom: 0;
  border: none;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
}

trix-toolbar .trix-button {
  float: none;
  font-size: 0.875rem;
  color: #475569;
  border-bottom: none;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: none;
}
trix-toolbar .trix-button.trix-active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-accent);
}

/* Dark mode — Trix ships black SVG icons, so invert them for visibility */
.dark trix-toolbar .trix-button {
  color: #e2e8f0;
}
.dark trix-toolbar .trix-button.trix-active {
  background: rgba(96, 165, 250, 0.16);
  color: var(--color-accent-light);
}
.dark trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

/*
 * Editor surface. actiontext.css sets `trix-editor { border / padding /
 * min-height / border-radius }` (unlayered) AND no `display`, so the custom
 * element falls back to `display: inline` and collapses to a tiny box when
 * empty (e.g. a brand-new analysis). These unlayered rules reclaim the block
 * layout and editorial surface that the @layer styles can't enforce.
 */
trix-editor.admin-richtext {
  display: block;
  /* Hauteur figée dans le formulaire : l'éditeur ne grandit plus avec le
     contenu, il défile en interne. Le mode plein écran prend le relais pour
     les contenus longs. */
  height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}
trix-editor.admin-richtext:focus {
  border-color: var(--color-accent);
}
.dark trix-editor.admin-richtext {
  border-color: #334155;
  border-top: none;
}
.dark trix-editor.admin-richtext:focus {
  border-color: var(--color-accent-light);
}

/* En plein écran, l'éditeur reprend une hauteur flexible pour remplir l'overlay
   (l'override doit être unlayered pour battre la hauteur figée ci-dessus). */
.admin-richtext-wrapper.is-fullscreen trix-editor.admin-richtext {
  height: auto;
  flex: 1;
  min-height: 50vh;
}

/*
 * Aperçu admin : la modale de prévisualisation rend le contenu avec
 * `class="trix-content prose-premium"` (rich_text_controller.js). Sur les pages
 * admin, actiontext.css (unlayered) impose `.trix-content h1 { line-height: 1.2 }`
 * et `h3 { 1.3 }`, qui battent les règles `.prose-premium` (layered) quelle que
 * soit la spécificité. On reprend la main en unlayered (chargé en dernier) pour
 * que l'interligne des titres de l'aperçu soit fidèle au rendu public (1.3).
 */
.prose-premium h1,
.prose-premium h2,
.prose-premium h3,
.prose-premium h4 {
  line-height: 1.3;
}