/**
 * Thème personnalisé pour l'éditeur Quill
 * Adapté à la charte graphique de DC Earth
 */

/* Variables pour le thème de l'éditeur */
:root {
  --editor-bg-dark: rgba(10, 10, 10, 0.95);
  --editor-bg-panel: rgba(12, 45, 72, 0.8);
  --editor-border-color: rgba(255, 255, 255, 0.15);
  --editor-text-color: rgba(255, 255, 255, 0.9);
  --editor-disabled: rgba(255, 255, 255, 0.4);
  
  /* Accents RP */
  --editor-rp-accent: #4A9CF7;
  --editor-rp-bg: rgba(92, 45, 145, 0.15);
  --editor-rp-border: rgba(156, 85, 211, 0.3);
  --editor-rp-glow: rgba(74, 156, 247, 0.4);
  
  /* Accents HRP */
  --editor-hrp-accent: #4c956c;
  --editor-hrp-bg: rgba(44, 110, 73, 0.15);
  --editor-hrp-border: rgba(76, 149, 108, 0.3);
  --editor-hrp-glow: rgba(76, 149, 108, 0.4);
}

/* Conteneur principal de l'éditeur */
.dc-editor-container {
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: rgba(20, 30, 48, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Inter', sans-serif;
}

/* Versions RP et HRP */
.roleplay .dc-editor-container {
  border: 1px solid var(--editor-rp-border);
  box-shadow: 0 0 15px var(--editor-rp-glow);
}

.hrp .dc-editor-container {
  border: 1px solid var(--editor-hrp-border);
  box-shadow: 0 0 15px var(--editor-hrp-glow);
}

/* Barre d'outils */
.ql-toolbar.ql-snow {
  background-color: rgba(10, 20, 35, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
}

.roleplay .ql-toolbar.ql-snow {
  border-bottom-color: var(--editor-rp-border) !important;
}

.hrp .ql-toolbar.ql-snow {
  border-bottom-color: var(--editor-hrp-border) !important;
}

/* Zone d'édition */
.ql-container.ql-snow {
  border: none !important;
  background-color: rgba(12, 24, 36, 0.4);
  color: var(--text-white);
  font-family: var(--font-main);
  font-size: var(--font-size-normal);
  line-height: 1.6;
  height: 300px;
}

/* Conteneur du texte éditable */
.ql-editor {
  padding: var(--spacing-md);
  min-height: 300px;
  color: var(--editor-text-color);
  background-color: var(--editor-bg-dark);
  line-height: 1.6;
}

.ql-editor.ql-blank::before {
  color: var(--light-gray);
  font-style: italic;
  left: var(--spacing-md);
  right: var(--spacing-md);
}

/* Éditeurs spécifiques */
.wysiwyg-editor-full + .ql-container .ql-editor {
  min-height: 400px;
}

.wysiwyg-editor-quick + .ql-container .ql-editor {
  min-height: 100px;
}

/* Boutons de la barre d'outils */
.ql-snow .ql-stroke {
  stroke: var(--light-gray) !important;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--editor-text-color) !important;
}

.ql-snow .ql-picker {
  color: var(--editor-text-color) !important;
}

.ql-snow .ql-picker-options {
  background-color: var(--editor-bg-panel) !important;
  border-color: var(--editor-border-color) !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--primary-light) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--primary-light) !important;
}

/* Remplacements du thème spécifique */
.roleplay .ql-snow.ql-toolbar button:hover,
.roleplay .ql-snow.ql-toolbar button:focus,
.roleplay .ql-snow.ql-toolbar button.ql-active {
  color: var(--roleplay-accent);
}

.hrp .ql-snow.ql-toolbar button:hover,
.hrp .ql-snow.ql-toolbar button:focus,
.hrp .ql-snow.ql-toolbar button.ql-active {
  color: var(--hrp-accent);
}

/* Remplacements du thème spécifique pour les icônes */
.roleplay .ql-snow.ql-toolbar button:hover .ql-stroke,
.roleplay .ql-snow.ql-toolbar button:focus .ql-stroke,
.roleplay .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--roleplay-accent);
}

.hrp .ql-snow.ql-toolbar button:hover .ql-stroke,
.hrp .ql-snow.ql-toolbar button:focus .ql-stroke,
.hrp .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--hrp-accent);
}

/* Styles pour le texte roleplay */
.roleplay-text {
  color: var(--roleplay-accent);
  font-style: italic;
}

/* Styles pour le texte hors-roleplay */
.hrp-text {
  color: var(--hrp-accent);
  background-color: rgba(44, 110, 73, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Boutons personnalisés */
.ql-rp, .ql-hrp {
  width: auto !important;
  padding: 0 8px !important;
  font-weight: bold;
  margin-left: 5px;
  position: relative;
  font-size: 12px;
}

.ql-rp:after {
  content: "RP";
  font-family: var(--font-special);
  color: var(--roleplay-accent);
  font-weight: bold;
}

.ql-hrp:after {
  content: "HRP";
  font-family: var(--font-special);
  color: var(--hrp-accent);
  font-weight: bold;
}

/* Citations */
.ql-editor blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid rgba(20, 93, 160, 0.6);
  background-color: rgba(20, 93, 160, 0.1);
  color: var(--editor-text-color);
}

.ql-editor blockquote.roleplay {
  border-left: 4px solid var(--editor-rp-border);
  background-color: var(--editor-rp-bg);
}

.ql-editor blockquote.hrp {
  border-left: 4px solid var(--editor-hrp-border);
  background-color: var(--editor-hrp-bg);
}

/* Compteur de caractères */
.dc-editor-char-counter {
  text-align: right;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.85rem;
  color: var(--light-gray);
  background-color: rgba(10, 20, 35, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-editor-char-counter.warning {
  color: var(--warning);
}

.dc-editor-char-counter.danger {
  color: var(--danger);
}

/* Style pour sélection de texte */
.ql-editor ::selection {
  background-color: rgba(20, 93, 160, 0.6);
}

.roleplay .ql-editor ::selection {
  background-color: var(--editor-rp-glow);
}

.hrp .ql-editor ::selection {
  background-color: var(--editor-hrp-glow);
}

/* Styles pour les éléments de dialogue avec police spécifique */
[style*="Trebuchet MS"] {
    font-family: 'Trebuchet MS', sans-serif !important;
}

.ql-font-Arial\,\ sans-serif {
    font-family: Arial, sans-serif !important;
}

.ql-font-\'Times\ New\ Roman\'\,\ serif {
    font-family: 'Times New Roman', serif !important;
}

.ql-font-\'Courier\ New\'\,\ monospace {
    font-family: 'Courier New', monospace !important;
}

.ql-font-Georgia\,\ serif {
    font-family: Georgia, serif !important;
}

.ql-font-\'Trebuchet\ MS\'\,\ sans-serif {
    font-family: 'Trebuchet MS', sans-serif !important;
}

.ql-font-Verdana\,\ sans-serif {
    font-family: Verdana, sans-serif !important;
}

/* Pour le cas particulier des dialogues */
em[style*="color"] {
    font-style: italic;
}

/* S'assurer que les attributs inline prennent priorité */
[style*="font-family"] {
    font-family: attr(style font-family) !important;
}