/**
 * Markdown Editor Bundle — styles agnostiques
 * CSS custom properties uniquement, aucune dépendance framework.
 * Seul fichier CSS à importer pour l'éditeur.
 */

/* ── EC holder (WYSIWYG inline widget) ─────────────────── */
.ec-holder {
    /*background: rgba(255, 165, 0, 0.15);*/
    /*border-bottom: 2px solid rgba(255, 165, 0, 0.5);*/
    border-radius: 2px;
    padding: 0 3px;
    cursor: help;
    transition: background 0.15s;
}

.ec-holder:hover {
    background: rgba(255, 165, 0, 0.35);
}

/* ── EC legacy classes (content_editor compat) ─────────── */
.ec-identifier-hidden {
    display: none;
}

.ec-text-highlighted {
    background: rgba(255, 165, 0, 0.2);
    border-radius: 2px;
    padding: 0 2px;
}

/* ── Special Area type variables ────────────────────────── */
.sa-type-info    { --sa-bg: rgba(13,202,240,.12); --sa-border: #0dcaf0; --sa-text: #087990; }
.sa-type-tip     { --sa-bg: rgba(25,135,84,.12);  --sa-border: #198754; --sa-text: #146c43; }
.sa-type-warning { --sa-bg: rgba(255,193,7,.12);  --sa-border: #ffc107; --sa-text: #997404; }
.sa-type-prerequisites { --sa-bg: rgba(220,53,69,.12); --sa-border: #dc3545; --sa-text: #b02a37; }
.sa-type-question      { --sa-bg: rgba(13,110,253,.12); --sa-border: #0d6efd; --sa-text: #0a58ca; }
.sa-type-primary   { --sa-bg: rgba(13,110,253,.10);  --sa-border: #0d6efd; --sa-text: #0a58ca; }
.sa-type-secondary { --sa-bg: rgba(108,117,125,.10); --sa-border: #6c757d; --sa-text: #565e64; }
.sa-type-success   { --sa-bg: rgba(25,135,84,.10);   --sa-border: #198754; --sa-text: #146c43; }
.sa-type-danger    { --sa-bg: rgba(220,53,69,.10);   --sa-border: #dc3545; --sa-text: #b02a37; }

.sa-multiline-open {
    cursor: pointer;
}

.sa-multiline-open i,
.sa-multiline-close i {
    margin-right: 4px;
}

.sa-multiline-close {
    cursor: default;
}

.sa-inline-widget {
    display: inline;
    background: var(--sa-bg, rgba(13,202,240,.12));
    border: 1px solid var(--sa-border, #0dcaf0);
    border-radius: 4px;
    padding: 1px 5px;
    cursor: default;
    user-select: none;
}

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .sa-type-info         { --sa-bg: rgba(13,202,240,.08); --sa-border: #0dcaf0; --sa-text: #3dd5f3; }
    .sa-type-tip          { --sa-bg: rgba(25,135,84,.08);  --sa-border: #198754; --sa-text: #75b798; }
    .sa-type-warning      { --sa-bg: rgba(255,193,7,.08);  --sa-border: #ffc107; --sa-text: #ffda6a; }
    .sa-type-prerequisites { --sa-bg: rgba(220,53,69,.08); --sa-border: #dc3545; --sa-text: #ea868f; }
    .sa-type-question     { --sa-bg: rgba(13,110,253,.08); --sa-border: #0d6efd; --sa-text: #6ea8fe; }
    .sa-type-primary      { --sa-bg: rgba(13,110,253,.08); --sa-border: #0d6efd; --sa-text: #6ea8fe; }
    .sa-type-secondary    { --sa-bg: rgba(108,117,125,.08); --sa-border: #6c757d; --sa-text: #a7acb1; }
    .sa-type-success      { --sa-bg: rgba(25,135,84,.08);  --sa-border: #198754; --sa-text: #75b798; }
    .sa-type-danger       { --sa-bg: rgba(220,53,69,.08);  --sa-border: #dc3545; --sa-text: #ea868f; }
}

/* ── Editor panel base ──────────────────────────────────── */
.editor-panel-editor {
    position: relative;
    --lfm-editor-bg: #fff;
}

.editor-panel-editor.toastui-editor-dark {
    --lfm-editor-bg: #1e1e1e;
}

/* Invalid state (set by the form theme when the field has errors) */
.lfm-editor--invalid .toastui-editor-defaultUI {
    border-color: #dc3545;
}

/* Fullscreen mode (class toggled by the controller; inline styles stay intact).
   !important beats the form theme's inline min-height while fullscreen. */
.lfm-editor--fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    z-index: 1000;
    background: var(--lfm-editor-bg, #fff);
}

/* Custom toolbar buttons (theme toggle, EC+, ECs, fullscreen).
   The doubled selectors out-rank TUI's `.toastui-editor-defaultUI button`.
   display:flex (block-level) fills the TUI item wrapper: an inline-level button
   baseline-aligns inside the wrapper's line box and sits a few px too low. */
.lfm-toolbar-btn,
.toastui-editor-defaultUI .lfm-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    /* TUI puts `margin: 7px 5px` on both the item wrapper AND toolbar buttons;
       inside a wrapper the button must not repeat it (double offset → sits low). */
    margin: 0;
}

/* Accent : orange foncé lisible sur toolbar claire (contraste ≥ 4.5:1 —
   l'orange #FFA500 d'origine plafonnait à ≈ 2.1:1), variante claire en sombre. */
.lfm-toolbar-btn--accent,
.toastui-editor-defaultUI .lfm-toolbar-btn--accent {
    color: var(--lfm-toolbar-accent, #c2410c);
}

.toastui-editor-dark .lfm-toolbar-btn--accent {
    color: var(--lfm-toolbar-accent-dark, #fb923c);
}

.lfm-toolbar-btn--strong,
.toastui-editor-defaultUI .lfm-toolbar-btn--strong {
    font-weight: 700;
}

/* Visually-hidden but screen-reader-available label */
.lfm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Mode switch tabs ─────────────────────────────────────
   Les onglets sont relabellés « Texte source / Édition visuelle »
   (markdown-editor_controller.js) : la largeur fixe de 96px de TUI
   tronquerait les nouveaux libellés. */
/* Sélecteur doublé : l'ordre de chargement des CSS (AssetMapper) ne garantit
   pas que cette feuille passe après celle de TUI — la spécificité doit gagner. */
.toastui-editor-mode-switch .tab-item,
.toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item {
    width: auto;
    padding: 0 14px;
    white-space: nowrap;
}

/* Les onglets reçoivent tabindex="0" (markdown-editor_controller.js) :
   le focus clavier doit rester visible. */
.toastui-editor-mode-switch .tab-item:focus-visible {
    outline: 2px solid #4b96e6;
    outline-offset: -2px;
}

/* ── Toolbar custom buttons (vertical centering) ────────── */
.toastui-editor-toolbar-item-wrapper > span {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* ── Toolbar mobile/tablet: scrollable instead of overflow ─ */
@media (max-width: 768px) {
    .toastui-editor-toolbar {
        height: auto !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .toastui-editor-toolbar::-webkit-scrollbar {
        display: none;
    }
    .toastui-editor-defaultUI-toolbar {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}
.sa-preview-block {
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem 1rem;   /* py-3 px-4 */
    margin: 0.5rem 0;
}

.sa-preview-inline {
    border-radius: 0.25rem;  /* rounded */
    padding: 0.1em 0.4em;
    font-size: 0.875em;      /* text-sm */
}

/* ── EC creator/editor modal ─────────────────────────────────
 * Appearance is fully driven by these custom properties so a host
 * app can restyle the modal from its own CSS. The controller adds
 * `.ec-modal--dark` on the overlay in dark theme (the modal is
 * appended to <body>, outside the `.toastui-editor-dark` element,
 * so an ancestor selector cannot reach it). Only colors live here —
 * layout stays inline in ec-creator-modal.js.
 */
.ec-modal-overlay {
    --ec-modal-bg: #fff;
    --ec-modal-fg: #333;
    --ec-modal-border: #ccc;
    --ec-modal-input-bg: #fff;
    --ec-modal-overlay-bg: rgba(0, 0, 0, .4);
    --ec-modal-accent: #e67e22;
    --ec-modal-accent-fg: #fff;
    background: var(--ec-modal-overlay-bg);
}

.ec-modal-overlay.ec-modal--dark {
    --ec-modal-bg: #1e1e1e;
    --ec-modal-fg: #e0e0e0;
    --ec-modal-border: #444;
    --ec-modal-input-bg: #2b2b2b;
    --ec-modal-overlay-bg: rgba(0, 0, 0, .6);
}

.ec-modal-panel {
    background: var(--ec-modal-bg);
    color: var(--ec-modal-fg);
    border: 1px solid var(--ec-modal-border);
}

.ec-modal__input {
    border: 1px solid var(--ec-modal-border);
    background: var(--ec-modal-input-bg);
    color: var(--ec-modal-fg);
}

.ec-modal__btn-cancel {
    border: 1px solid var(--ec-modal-border);
    background: transparent;
    color: var(--ec-modal-fg);
}

.ec-modal__btn-submit {
    border: none;
    background: var(--ec-modal-accent);
    color: var(--ec-modal-accent-fg);
}

/* ── Confirm dialog (confirm-dialog.js) ──────────────────────
 * Same approach as the EC modal: appended to <body>, dark theme via a
 * single `--dark` class, all colors host-overridable through variables.
 */
.lfm-confirm-overlay {
    --lfm-confirm-bg: #fff;
    --lfm-confirm-fg: #333;
    --lfm-confirm-border: #ccc;
    --lfm-confirm-overlay-bg: rgba(0, 0, 0, .4);
    --lfm-confirm-accent: #e67e22;
    --lfm-confirm-danger: #c0392b;
    --lfm-confirm-accent-fg: #fff;
    background: var(--lfm-confirm-overlay-bg);
}

.lfm-confirm-overlay.lfm-confirm--dark {
    --lfm-confirm-bg: #1e1e1e;
    --lfm-confirm-fg: #e0e0e0;
    --lfm-confirm-border: #444;
    --lfm-confirm-overlay-bg: rgba(0, 0, 0, .6);
}

.lfm-confirm-panel {
    background: var(--lfm-confirm-bg);
    color: var(--lfm-confirm-fg);
    border: 1px solid var(--lfm-confirm-border);
}

.lfm-confirm__btn-cancel {
    border: 1px solid var(--lfm-confirm-border);
    background: transparent;
    color: var(--lfm-confirm-fg);
}

.lfm-confirm__btn-confirm {
    border: none;
    background: var(--lfm-confirm-accent);
    color: var(--lfm-confirm-accent-fg);
}

.lfm-confirm__btn-danger {
    border: none;
    background: var(--lfm-confirm-danger);
    color: var(--lfm-confirm-accent-fg);
}

/* ── Editor context menu ─────────────────────────────────────
 * Same approach as the modal: appended to <body>, dark theme via a
 * single `--dark` class, all colors host-overridable through variables.
 */
.markdown-editor-context-menu {
    --cm-bg: #fff;
    --cm-fg: #333;
    --cm-border: #ccc;
    --cm-shadow: rgba(0, 0, 0, .15);
    --cm-divider: #e0e0e0;
    background: var(--cm-bg);
    color: var(--cm-fg);
    border: 1px solid var(--cm-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--cm-shadow);
}

.markdown-editor-context-menu--dark {
    --cm-bg: #2b2b2b;
    --cm-fg: #e0e0e0;
    --cm-border: #444;
    --cm-shadow: rgba(0, 0, 0, .5);
    --cm-divider: #555;
}

.markdown-editor-context-menu .context-menu-item:hover {
    background: rgba(127, 127, 127, .15);
}

.markdown-editor-context-menu .context-menu-divider {
    background: var(--cm-divider);
}

/* ── Special Area edit panel ─────────────────────────────────
 * Colors host-overridable via variables; dark theme via `--dark` class.
 * Per-type picker button colors stay inline (they encode SA type, not theme).
 */
.sa-edit-panel {
    --sa-panel-bg: #fff;
    --sa-panel-fg: #222;
    --sa-panel-border: #ccc;
    --sa-panel-input-bg: #fff;
    --sa-panel-accent: #0d6efd;
    --sa-panel-accent-fg: #fff;
    --sa-panel-cancel-bg: #f8f9fa;
    background: var(--sa-panel-bg);
    color: var(--sa-panel-fg);
    border: 1px solid var(--sa-panel-border);
}

.sa-edit-panel--dark {
    --sa-panel-bg: #1e1e1e;
    --sa-panel-fg: #e0e0e0;
    --sa-panel-border: #444;
    --sa-panel-input-bg: #1e1e1e;
    --sa-panel-cancel-bg: #333;
}

.sa-edit-panel__select,
.sa-edit-panel__input {
    border: 1px solid var(--sa-panel-border);
    background: var(--sa-panel-input-bg);
    color: var(--sa-panel-fg);
}

.sa-edit-panel__save {
    border: none;
    background: var(--sa-panel-accent);
    color: var(--sa-panel-accent-fg);
}

.sa-edit-panel__cancel {
    border: 1px solid var(--sa-panel-border);
    background: var(--sa-panel-cancel-bg);
    color: var(--sa-panel-fg);
}

/* ── EC preview tooltip (editor) ─────────────────────────────
 * Appended to <body>; dark theme via `--dark` class. Accent/badge
 * colors are shared with the modal accent where relevant.
 */
.ec-tooltip {
    --ec-tt-bg: #fff;
    --ec-tt-fg: #333;
    --ec-tt-border: #ccc;
    --ec-tt-muted: #888;
    --ec-tt-badge-bg: #eee;
    --ec-tt-accent: orange;
    --ec-tt-danger: #e74c3c;
    --ec-tt-premium-bg: #e67e22;
    --ec-tt-premium-fg: #fff;
    background: var(--ec-tt-bg);
    color: var(--ec-tt-fg);
    border: 1px solid var(--ec-tt-border);
}

.ec-tooltip--dark {
    --ec-tt-bg: #2b2b2b;
    --ec-tt-fg: #e0e0e0;
    --ec-tt-border: #555;
    --ec-tt-muted: #aaa;
    --ec-tt-badge-bg: #444;
}

/* ── Toasts (lfm-toast) ─────────────────────────────────────────── */

.lfm-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.lfm-toast {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 360px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: var(--lfm-toast-bg, #333);
    color: var(--lfm-toast-fg, #fff);
    border-left: 4px solid var(--lfm-toast-accent, #888);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.lfm-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.lfm-toast--warning { --lfm-toast-accent: #e6a23c; }
.lfm-toast--error { --lfm-toast-accent: #e74c3c; }

/* ── Preview markdown : blocs EC masqués ────────────────────────── */

.toastui-editor-md-preview .lfm-ec-preview-hidden {
    display: none;
}

/* ── Preview markdown : zones SA multiline continues ──────────────
 * Les marqueurs ▼/▲ rendent chacun leur propre bloc ; sa-preview-zones.js
 * classe les blocs de contenu intermédiaires pour former une boîte continue
 * (fond + bordures latérales, marges collées). Couleurs par type via les
 * custom properties posées par le JS. */

/* La boîte est entièrement dessinée par les blocs de zone : fond + bordures
   latérales partout, chapeau haut sur start, chapeau bas sur end. */
.toastui-editor-md-preview .lfm-sa-zone-start,
.toastui-editor-md-preview .lfm-sa-zone-middle,
.toastui-editor-md-preview .lfm-sa-zone-end {
    background: var(--lfm-sa-zone-bg);
    border-left: 3px solid var(--lfm-sa-zone-border);
    border-right: 1px solid var(--lfm-sa-zone-border);
    padding: 4px 12px;
}

.toastui-editor-md-preview .lfm-sa-zone-start {
    margin-bottom: 0;
    border-top: 1px solid var(--lfm-sa-zone-border);
    border-radius: 4px 4px 0 0;
}

.toastui-editor-md-preview .lfm-sa-zone-middle {
    margin: 0;
}

.toastui-editor-md-preview .lfm-sa-zone-end {
    margin-top: 0;
    border-bottom: 1px solid var(--lfm-sa-zone-border);
    border-radius: 0 0 4px 4px;
}

/* Dans un bloc de zone, la barre ▼/▲ ne dessine plus sa propre boîte (bordure
   dans la bordure) : elle ne garde que son libellé — les styles inline posés
   par sa-html-renderer sont neutralisés (d'où les !important). */
.toastui-editor-md-preview .lfm-sa-zone-start .sa-preview-multiline-open,
.toastui-editor-md-preview .lfm-sa-zone-middle .sa-preview-multiline-open,
.toastui-editor-md-preview .lfm-sa-zone-middle .sa-preview-multiline-close,
.toastui-editor-md-preview .lfm-sa-zone-end .sa-preview-multiline-close {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* Zone ouverte et refermée dans un même paragraphe : le segment entre les
   marqueurs est enveloppé par sa-preview-zones.js. */
.toastui-editor-md-preview .lfm-sa-inline-zone {
    display: block;
    padding: 4px 12px;
    background: var(--lfm-sa-zone-bg);
    border-left: 3px solid var(--lfm-sa-zone-border);
    border-right: 1px solid var(--lfm-sa-zone-border);
}

/* Les <br> collés aux marqueurs multiline créent des lignes vides entre les
   barres ▼/▲ et le contenu — masqués (les barres cassent déjà la ligne). */
.toastui-editor-md-preview .sa-preview-multiline-open + br,
.toastui-editor-md-preview .sa-preview-multiline-close + br,
.toastui-editor-md-preview br:has(+ .sa-preview-multiline-open),
.toastui-editor-md-preview br:has(+ .sa-preview-multiline-close),
.toastui-editor-md-preview br:has(+ .lfm-sa-inline-zone),
.toastui-editor-md-preview .lfm-sa-inline-zone + br {
    display: none;
}