/* Styles personnalisés pour Trix dans le design system Kohabit */

/* Le bouton "Joindre des fichiers" est masqué uniquement dans les éditeurs de
   sections d'Assemblée Générale (procès-verbal : pas de pièces jointes inline).
   Les autres éditeurs Trix de l'app (annonces, etc.) gardent la fonctionnalité. */
.section-form trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

/* LE THÈME SOMBRE N'EXISTAIT PAS POUR L'ÉDITEUR. La zone de saisie était
   écrite en dur (fond blanc, texte et titres en gris Tailwind) et les icônes
   de la barre sont des SVG noirs d'actiontext.css : en sombre, des icônes
   noires sur vert foncé et un rectangle clair au milieu de la page. Le fond
   de saisie passe par une variable : blanc en clair (inchangé), le creux
   des champs (--surface) en sombre ; le reste suit les jetons. */
.trix-editor-wrapper { --trix-field: #FFFFFF; }
[data-theme="dark"] .trix-editor-wrapper { --trix-field: var(--surface); }

.trix-editor-wrapper {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--panel);
  overflow: hidden;
}

/* L'OUTIL NE DOIT PAS PESER PLUS QUE LE TEXTE.
   La barre était un aplat de vert saturé sur toute la largeur, avec des icônes
   blanches : l'élément le plus lourd de l'éditeur, au dessus d'un texte que
   personne n'avait encore écrit. Elle passe sur le creux du design system, avec
   des icônes discrètes qui ne prennent leur couleur qu'au survol et quand elles
   sont actives. */
.trix-editor-wrapper trix-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 0.5rem;
}

.trix-editor-wrapper trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trix-editor-wrapper trix-toolbar .trix-button-group {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--panel);
  margin-bottom: 0;
  margin-right: 0;
  overflow: hidden;
}

.trix-editor-wrapper trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
}

.trix-editor-wrapper trix-toolbar .trix-button {
  color: var(--muted) !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.15s !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  float: none !important;
}

.trix-editor-wrapper trix-toolbar .trix-button:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

.trix-editor-wrapper trix-toolbar .trix-button:last-child {
  border-right: none;
  border-radius: 0 0.5rem 0.5rem 0;
}

.trix-editor-wrapper trix-toolbar .trix-button:hover:not(:disabled) {
  background: var(--panel-hover) !important;
  color: var(--text) !important;
}

.trix-editor-wrapper trix-toolbar .trix-button.trix-active {
  background: var(--primary-bg) !important;
  color: var(--primary) !important;
}

.trix-editor-wrapper trix-toolbar .trix-button:disabled {
  color: var(--muted) !important;
  opacity: 0.4;
  cursor: not-allowed;
}

.trix-editor-wrapper trix-toolbar .trix-button--icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
}

.trix-editor-wrapper trix-toolbar .trix-button--icon::before {
  opacity: 0.55;
  filter: none;
  transition: opacity 0.15s;
}

.trix-editor-wrapper trix-toolbar .trix-button--icon:hover:not(:disabled)::before {
  opacity: 1;
  filter: none;
}

.trix-editor-wrapper trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
  filter: none;
}

.trix-editor-wrapper trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.3;
  filter: none;
}

/* Les icônes sont des SVG noirs (images de fond) : inversées en sombre. */
[data-theme="dark"] .trix-editor-wrapper trix-toolbar .trix-button--icon::before,
[data-theme="dark"] .trix-editor-wrapper trix-toolbar .trix-button--icon:hover:not(:disabled)::before,
[data-theme="dark"] .trix-editor-wrapper trix-toolbar .trix-button--icon.trix-active::before,
[data-theme="dark"] .trix-editor-wrapper trix-toolbar .trix-button--icon:disabled::before {
  filter: invert(1);
}

.trix-editor-wrapper trix-editor {
  border: none;
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--trix-field);
  color: var(--text);
  padding: 1rem;
  min-height: 250px;
  font-size: 0.9375rem;
  line-height: 1.6;
  outline: none;
  transition: box-shadow 0.15s;
  width: 100%;
  resize: vertical;
}

.trix-editor-wrapper trix-editor:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
  background: var(--trix-field);
}

.trix-editor-wrapper trix-editor[placeholder]:empty::before {
  color: var(--muted);
  font-style: italic;
}

.trix-editor-wrapper trix-editor a {
  color: var(--primary);
  text-decoration: underline;
  transition: color 0.15s;
}

.trix-editor-wrapper trix-editor a:hover {
  color: var(--primary-hover);
}

.trix-editor-wrapper trix-editor h1,
.trix-editor-wrapper trix-editor h2,
.trix-editor-wrapper trix-editor h3 {
  color: var(--text);
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.trix-editor-wrapper trix-editor h1 {
  font-size: 1.5rem;
}

.trix-editor-wrapper trix-editor h2 {
  font-size: 1.25rem;
}

.trix-editor-wrapper trix-editor h3 {
  font-size: 1.125rem;
}

.trix-editor-wrapper trix-editor blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1rem;
  margin-left: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-style: italic;
}

.trix-editor-wrapper trix-editor ul,
.trix-editor-wrapper trix-editor ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

/* LES PUCES. La remise à zéro de Tailwind retire le style des listes (`list-style:
   none`) : dans l'éditeur comme dans le texte publié (.trix-content), une liste
   ne se distinguait plus que par son retrait. */
.trix-editor-wrapper trix-editor ul,
.trix-content ul { list-style: disc outside; }
.trix-editor-wrapper trix-editor ol,
.trix-content ol { list-style: decimal outside; }
/* Le texte publié remet marges et retraits à zéro (actiontext.css) : la place
   de la puce vient d'un retrait de la liste. */
.trix-content ul,
.trix-content ol { padding-left: 1.25em; }
.trix-content li::marker,
.trix-editor-wrapper trix-editor li::marker { color: var(--muted); }

.trix-editor-wrapper trix-editor li {
  margin-bottom: 0.25rem;
}

.trix-editor-wrapper trix-editor code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875em;
  color: var(--text);
}

.trix-editor-wrapper trix-editor pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.trix-editor-wrapper trix-editor pre code {
  background: transparent;
  border: none;
  padding: 0;
}

.trix-editor-wrapper trix-editor strong {
  font-weight: 600;
  color: var(--text);
}

.trix-editor-wrapper trix-editor em {
  font-style: italic;
}

.trix-editor-wrapper trix-editor u {
  text-decoration: underline;
}

.trix-editor-wrapper trix-editor s {
  text-decoration: line-through;
}

/* Styles pour les dialogues Trix (liens, etc.) */
.trix-editor-wrapper trix-toolbar .trix-dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px var(--shadow-md);
  color: var(--text);
}

.trix-editor-wrapper trix-toolbar .trix-input--dialog {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  padding: 0.5rem 0.75rem;
}

.trix-editor-wrapper trix-toolbar .trix-input--dialog:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
  border-color: var(--primary);
}

.trix-editor-wrapper trix-toolbar .trix-button--dialog {
  background: var(--cta);
  color: var(--on-cta);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.15s;
}

.trix-editor-wrapper trix-toolbar .trix-button--dialog:hover {
  background: var(--cta-hover);
}

/* Placeholders ("[À compléter ...]", "[Nom et signature]", "[lieu]") mis en
   surbrillance via la CSS Custom Highlight API
   (voir placeholder_highlighter_controller.js).
   Aide les utilisateurs à repérer les champs à remplir dans le procès-verbal. */
/* UN SOULIGNEMENT, PAS UN APLAT. Le fond jaune vif s'appliquait à chaque
   « [À compléter ...] » d'une section de plusieurs paragraphes : sur un
   procès-verbal, cela faisait une page constellée de taches qui criaient plus
   fort que le texte. Le trait pointillé dit la même chose sans occuper le
   premier plan. La Highlight API ne rend pas les bordures, on y garde donc un
   fond, mais très pâle. */
::highlight(ag-placeholder) {
  background-color: color-mix(in srgb, var(--warning-border) 18%, transparent);
  color: var(--text);
}

/* Même mise en évidence côté affichage en lecture seule (page show) :
   le helper general_assemblies_helper#render_section_content_with_placeholders
   enrobe chaque placeholder dans un <mark class="ag-placeholder"> pour signaler
   au syndic les sections qui ne sont pas encore finalisées. */
.ag-placeholder {
  background-color: transparent;
  color: var(--warning-text);
  text-decoration: underline dotted var(--warning-border);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 600;
}