/* ==========================================================================
   EDITOR — Styles spécifiques à CodeMirror 6
   --------------------------------------------------------------------------
   Les classes ont changé entre CM5 (.CodeMirror*) et CM6 (.cm-editor,
   .cm-scroller, .cm-content, .cm-gutters, .cm-lineNumbers, …).
   La coloration syntaxique est désormais gérée par HighlightStyle
   (defaultHighlightStyle pour le light, oneDark pour le dark) — plus de
   règles .cm-keyword / .cm-string côté CSS.
   ========================================================================== */

.panel-editor .panel-body { padding: 0; }

/* Le conteneur racine doit remplir le panneau (flex column). */
.panel-editor .panel-body .cm-editor {
    flex: 1;
    min-height: 0;
    width: 100%;
    font-family: var(--font-mono) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* On retire l'outline bleu du focus natif (CM6 l'ajoute par défaut). */
.cm-editor.cm-focused {
    outline: none !important;
}

/* Zone scrollable + zone de contenu */
.cm-scroller {
    font-family: var(--font-mono) !important;
    overflow: auto;
}

.cm-content {
    padding: var(--sp-3) 0 !important;
    caret-color: var(--accent);
}

.cm-line {
    padding: 0 var(--sp-3) !important;
}

/* Gouttière (numéros de ligne, fold) */
.cm-gutters {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-subtle) !important;
    color: var(--text-tertiary) !important;
}

.cm-lineNumbers .cm-gutterElement {
    padding: 0 var(--sp-3) 0 var(--sp-4) !important;
    font-size: 12px !important;
    color: var(--text-tertiary) !important;
}

/* Ligne active — discrète pour ne pas concurrencer la surbrillance de nœud */
.cm-activeLine {
    background-color: transparent !important;
}
.cm-activeLineGutter {
    background-color: transparent !important;
    color: var(--accent) !important;
}

/* Curseur */
.cm-cursor,
.cm-dropCursor {
    border-left: 2px solid var(--accent) !important;
}

/* Sélection — CM6 superpose un span .cm-selectionBackground sous le texte */
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.cm-editor ::selection {
    background: var(--accent-soft) !important;
}

/* Popup d'autocomplétion — harmonisée au thème de l'app */
.cm-tooltip.cm-tooltip-autocomplete {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cm-tooltip.cm-tooltip-autocomplete > ul > li {
    padding: 4px 10px;
}

.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
    background: var(--accent-soft) !important;
    color: var(--text-primary) !important;
}

.cm-completionLabel {
    font-weight: 500;
}

/* Surbrillance temporaire d'une ligne ciblée via Editor.highlightNode() */
.cm-highlight-line {
    background: var(--accent-subtle, rgba(99, 102, 241, 0.15)) !important;
    transition: background 0.5s ease;
}