/* 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;
}

.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;
}

.trix-editor-wrapper trix-editor {
  border: none;
  border-radius: 0 0 0.75rem 0.75rem;
  background: #FFFFFF;
  color: #111827;
  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: #FFFFFF;
}

.trix-editor-wrapper trix-editor[placeholder]:empty::before {
  color: #9CA3AF;
  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: #111827;
  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: #6B7280;
  font-style: italic;
}

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

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

.trix-editor-wrapper trix-editor code {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  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: #111827;
}

.trix-editor-wrapper trix-editor pre {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  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: #111827;
}

.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);
}

.trix-editor-wrapper trix-toolbar .trix-input--dialog {
  background: var(--panel);
  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(--primary);
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.15s;
}

.trix-editor-wrapper trix-toolbar .trix-button--dialog:hover {
  background: var(--primary-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;
}