/**
 * tuieditor-flatboard.css — v10 (3 bugfixes)
 *
 * CORRECTIFS v10 :
 * ─────────────────────────────────────────────────────────
 * BUG 1 — Toolbar : mauvais alignement des boutons custom
 *   TUI Editor v3 enveloppe les éléments `el` dans un
 *   <div class="toastui-editor-toolbar-item-wrapper">.
 *   Ce wrapper doit être inline-flex centré verticalement.
 *   → Nouveau sélecteur .toastui-editor-toolbar-item-wrapper
 *
 * BUG 2 — Placeholder gris + cursor:wait (rectangle gris)
 *   Bootstrap 5 définit .placeholder { cursor:wait;
 *   background-color:currentcolor; opacity:.5 }.
 *   ProseMirror injecte <span class="placeholder ProseMirror-widget">
 *   → conflit de nom de classe → rectangle gris + curseur spinner.
 *   Fix : reset complet de Bootstrap .placeholder dans le wrapper TUI.
 *
 * BUG 3 — Autosave Flatboard (brouillons serveur)
 *   Pas de changement CSS nécessaire. Le système fonctionne via
 *   le hook markdown.editor.getValue qui appelle getMarkdown().
 *   Voir tuieditor-init.js pour le localStorage autosave interne.
 *
 * Structure DOM TUI v3 (vérifiée) :
 *   .tuieditor-wrapper
 *     .toastui-editor-defaultUI
 *       .toastui-editor-toolbar
 *         .toastui-editor-defaultUI-toolbar   ← flex container
 *           .toastui-editor-toolbar-group     ← groupes
 *             .toastui-editor-toolbar-icons   ← boutons natifs
 *             .toastui-editor-toolbar-item-wrapper  ← wrapper bouton custom
 *               [notre el button]
 *       .toastui-editor-main
 *       .toastui-editor-mode-switch
 */

/* ── 1. Wrapper principal ──────────────────────────────────────────────────── */
.tuieditor-wrapper {
    width: 100%;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tuieditor-wrapper .toastui-editor-defaultUI {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    flex: 1;
}

/* ── 2. Mode-switch (onglets Markdown/WYSIWYG) ─────────────────────────────── */
.tuieditor-wrapper .toastui-editor-mode-switch {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5;
    flex-shrink: 0;
}

.tuieditor-wrapper .toastui-editor-mode-switch .tab-item {
    display: inline-block !important;
    visibility: visible !important;
}

/* ── 3. Override Flatboard : débloquer overflow sur les cards ─────────────── */
.card:has(.tuieditor-wrapper) {
    overflow: visible !important;
}
.card > .card-body:has(.tuieditor-wrapper),
.card-body > .tuieditor-wrapper {
    overflow: visible !important;
}

/* ── 4. Toolbar ─────────────────────────────────────────────────────────────── */
.tuieditor-wrapper .toastui-editor-toolbar {
    overflow: visible !important;
}

.tuieditor-wrapper .toastui-editor-defaultUI-toolbar {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.tuieditor-wrapper .toastui-editor-defaultUI-toolbar::-webkit-scrollbar {
    display: none;
}

/* Les groupes */
.tuieditor-wrapper .toastui-editor-toolbar-group {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.tuieditor-wrapper .toastui-editor-toolbar-icons {
    flex-shrink: 0 !important;
}

/* ── 5. FIX BUG 1 : wrapper TUI autour des boutons custom (el) ────────────── */
/*
 * TUI Editor v3 enveloppe chaque élément custom { el } dans un div
 * .toastui-editor-toolbar-item-wrapper. Sans ce fix, ce div est un
 * block-level qui désaligne le bouton par rapport aux boutons natifs.
 */
.tuieditor-wrapper .toastui-editor-toolbar-item-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 100%;
    flex-shrink: 0;
}

/* ── 6. Boutons custom (youtube, tiktok, emoji, colorSyntax) ────────────────── */
.tuieditor-wrapper .tuieditor-custom-group {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 28px;
    border-left: 1px solid #ebedf2;
    padding-left: 4px;
    margin-left: 4px;
    flex-shrink: 0;
    gap: 2px;
}

.tuieditor-custom-btn,
.tuieditor-color-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    color: #222;
    font-size: 13px;
    transition: background-color .1s, border-color .1s;
    vertical-align: middle;
    line-height: 1;
    background-image: none !important;
}
.tuieditor-custom-btn:hover,
.tuieditor-color-btn:hover {
    background-color: #e8e8e8 !important;
    border-color: #e8e8e8;
}
.tuieditor-custom-btn i {
    font-size: 13px;
    pointer-events: none;
    color: inherit;
}

/* ── 7. Color picker popup ──────────────────────────────────────────────────── */
.tuieditor-color-picker {
    z-index: 100000 !important;
}

.tuieditor-wrapper .toastui-editor-popup {
    z-index: 1000 !important;
}

/* ── 8. FIX BUG 2 : Placeholder ProseMirror vs Bootstrap .placeholder ─────── */
/*
 * Bootstrap 5 définit :
 *   .placeholder { cursor:wait; background-color:currentcolor; opacity:.5 }
 *
 * ProseMirror (mode WYSIWYG de TUI) injecte :
 *   <span class="placeholder ProseMirror-widget" contenteditable="false">
 *
 * Résultat : rectangle gris + curseur spinner.
 * Fix : reset complet des propriétés Bootstrap uniquement dans le wrapper TUI.
 */
.tuieditor-wrapper .ProseMirror .placeholder,
.tuieditor-wrapper .ProseMirror-widget.placeholder,
.tuieditor-wrapper span.placeholder {
    /* Reset Bootstrap .placeholder */
    display: block !important;
    min-height: auto !important;
    cursor: text !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    vertical-align: baseline !important;
    /* Apparence placeholder correcte */
    color: var(--bs-secondary-color, #6c757d) !important;
    pointer-events: none;
    position: absolute;
    top: 10px;
    left: 14px;
    right: 0;
}

/* Zone ProseMirror : doit être relative pour le placeholder absolu */
.tuieditor-wrapper .ProseMirror {
    position: relative;
}

/* ── iOS/macOS Safari : focus et sélection dans les zones d'édition ──────────
 * Sur iOS Safari, user-select:none hérité de la toolbar et l'absence de
 * touch-action bloquent le focus au tap. On force les bonnes valeurs sur
 * les conteneurs d'édition (CodeMirror en mode Markdown, ProseMirror en WYSIWYG).
 */
.tuieditor-wrapper .toastui-editor-md-container .CodeMirror,
.tuieditor-wrapper .toastui-editor-md-container .CodeMirror-scroll,
.tuieditor-wrapper .toastui-editor-ww-container .ProseMirror {
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}

/* Placeholder CodeMirror (mode Markdown) */
.tuieditor-wrapper .CodeMirror-placeholder {
    color: var(--bs-secondary-color, #6c757d) !important;
    opacity: 1 !important;
    /* Reset Bootstrap */
    background-color: transparent !important;
    cursor: text !important;
    /* Alignement avec le texte CodeMirror */
    padding: 0 !important;
    position: static !important;
}

/* ── 9. Mode sombre ──────────────────────────────────────────────────────────── */
.toastui-editor-dark .tuieditor-custom-group {
    border-left-color: #303238;
}
.toastui-editor-dark .tuieditor-custom-btn,
.toastui-editor-dark .tuieditor-color-btn {
    color: #eee;
}
.toastui-editor-dark .tuieditor-custom-btn:hover,
.toastui-editor-dark .tuieditor-color-btn:hover {
    background-color: #36383f !important;
    border-color: #36383f;
}
.toastui-editor-dark .tuieditor-wrapper .ProseMirror .placeholder,
.toastui-editor-dark .tuieditor-wrapper .ProseMirror-widget.placeholder,
.toastui-editor-dark .tuieditor-wrapper span.placeholder {
    color: var(--bs-secondary-color, #adb5bd) !important;
}

/* ── 10. Fullscreen mode ──────────────────────────────────────────────────────── */
/* Body lock : empêche le scroll derrière l'éditeur fullscreen */
body.tuieditor-fullscreen-active {
    overflow: hidden !important;
}
.tuieditor-wrapper.tuieditor-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    border-radius: 0;
    border: none;
    background: var(--bs-body-bg, #fff);
}
.tuieditor-wrapper.tuieditor-fullscreen .toastui-editor-defaultUI {
    height: 100% !important;
}
.tuieditor-wrapper.tuieditor-fullscreen .toastui-editor-md-container,
.tuieditor-wrapper.tuieditor-fullscreen .toastui-editor-ww-container {
    height: calc(100vh - 80px) !important;
}
/* Dark mode fullscreen background */
.toastui-editor-dark .tuieditor-wrapper.tuieditor-fullscreen,
.tuieditor-wrapper.tuieditor-fullscreen:has(.toastui-editor-dark) {
    background: #1e1e1e;
}

/* ── 11. Emoji picker ─────────────────────────────────────────────────────────── */
#tuieditor-emoji-picker {
    z-index: 100000 !important;
}

/* ── 12. Code blocks (rendu post / viewer) ────────────────────────────────────── */

/* Wrapper principal */
.tui-code-block {
    position: relative;
    margin: 1rem 0;
    border-radius: 8px;
    overflow: hidden;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,.08);
    font-size: 0.875rem;
}

/* Header barre */
.tui-code-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #13131f;
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-height: 36px;
}

/* Badge langue — style Claude */
.tui-code-lang {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a9b1d6;
    background: rgba(122, 162, 247, .12);
    border: 1px solid rgba(122, 162, 247, .25);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.5;
    user-select: none;
}

/* Bouton copier */
.tui-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
    color: #7f8bb5;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    padding: 3px 9px;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.tui-code-copy:hover {
    background: rgba(255,255,255,.07);
    color: #c0caf5;
    border-color: rgba(255,255,255,.25);
}
.tui-code-copy--ok {
    color: #9ece6a !important;
    border-color: rgba(158,206,106,.35) !important;
}

/* Bouton voir plus / voir moins */
.tui-code-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #7f8bb5;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    padding: 3px 6px;
    border-radius: 4px;
    transition: color .15s, background .15s;
    white-space: nowrap;
}
.tui-code-toggle:hover {
    background: rgba(255,255,255,.06);
    color: #c0caf5;
}
.tui-code-toggle svg {
    transition: transform .2s ease;
    flex-shrink: 0;
}

/* Zone de code — max-height et collapse gérés en JS (voir tuieditor-init.js) */
.tui-code-pre {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
}

/* Couleur du code dans nos blocs */
.tui-code-block code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: .875em !important;
    color: #cdd6f4 !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    white-space: pre !important;
}

/* Suppression de l'ancien label/bouton Flatboard s'il persiste via CSS */
.post-content .code-block-wrapper > .d-flex > .fw-bold,
.post-content .code-block-wrapper > .d-flex > .btn-copy-code,
.post-content .accordion-item > .accordion-header,
.post-content .accordion-button {
    display: none !important;
}

/* Thème clair : adapter les couleurs */
[data-theme="light"] .tui-code-block,
[data-bs-theme="light"] .tui-code-block,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .tui-code-block {
    background: #1a1b26;
    border-color: rgba(0,0,0,.15);
}