/* Habillage COMPLET de l'éditeur Editor.js : son chrome (menus, champs, code,
 * tableau), ses outils maison de mise en page, le sélecteur de médiathèque et
 * l'outil « Image ».
 *
 * Cet éditeur est monté par DEUX gabarits —
 * `templates/components/_editorjs_onboarding.html.twig` (cards « Par où
 * commencer ») et `templates/db/trainer/builder/chapter_form.html.twig`
 * (chapitres de formation) — sur le même point de montage `#editorjs`.
 *
 * ⚠️ SOURCE UNIQUE, volontairement. Chaque gabarit portait auparavant sa propre
 * balise `<style>` : le chapitre remappait le chrome d'Editor.js sur la charte,
 * la card « Par où commencer » ne le faisait pas et peignait en plus ses outils
 * de mise en page en couleurs FIGÉES (`#f8f9fa`, `#fff`). En thème sombre, ses
 * encadrés, ses étapes et son bloc de code ressortaient donc en gros aplats
 * BLANCS, texte blanc sur blanc — illisibles, sans la moindre erreur. Un
 * habillage posé sur UN chemin ne couvre pas l'autre : les deux gabarits
 * partagent désormais ce fichier, et `tests/Config/EditorToolsStylesTest` refuse
 * qu'un `<style>` réapparaisse dans l'un d'eux.
 *
 * Entièrement en variables `--sbd-*`, sans garde `[data-theme="dark"]` : les
 * règles valent dans les DEUX thèmes (`<html data-theme>` échange les valeurs).
 * Une règle réservée au sombre laisse le clair aux défauts d'Editor.js, qui ne
 * connaît pas la charte.
 *
 * Chargée par `templates/components/base/_head.html.twig`, donc disponible pour
 * les deux gabarits (l'un étend `base-admin`, l'autre `base-user`, et aucun ne
 * peut surcharger le block `stylesheets` — `_head` est inclus, pas hérité).
 *
 * Poids des sélecteurs : Editor.js injecte sa feuille dans le `<head>` à
 * l'exécution, donc APRÈS ce fichier — à spécificité égale, c'est lui qui
 * gagne. D'où le préfixe `#editorjs` (1,0,0) sur tout ce qui vit dans
 * l'éditeur, et `html` sur le chrome flottant que le plugin sort du point de
 * montage. `!important` n'est employé que face aux quelques déclarations que
 * la feuille d'Editor.js marque elle-même `!important`.
 */

/* ── Chrome d'Editor.js ──────────────────────────────────────────────────── */

#editorjs .codex-editor,
#editorjs .ce-block {
    color: var(--sbd-text);
}

/* Bloc sélectionné : la surbrillance par défaut est un bleu très clair, elle
   disparaît sur une surface sombre. */
#editorjs {
    --selectionColor: var(--sbd-accent-soft);
}

#editorjs .ce-block--selected .ce-block__content,
#editorjs .cdx-settings-button--focused {
    background-color: var(--sbd-accent-soft) !important; /* marqué !important par Editor.js */
}

/* Menus flottants. Le plugin les pilote par ses propres variables : les
   remapper habille d'un coup le conteneur, les items, leurs survols et leurs
   icônes — plutôt que de courir après chaque règle. */
html .ce-popover,
html .ce-popover__container,
html .ce-inline-toolbar,
html .ce-conversion-toolbar,
html .ce-settings {
    --color-border: var(--sbd-border);
    --color-shadow: var(--sbd-accent-glow);
    --color-background: var(--sbd-bg-elevated);
    --color-text-primary: var(--sbd-text);
    --color-text-secondary: var(--sbd-text-muted);
    --color-border-icon: var(--sbd-border);
    --color-border-icon-disabled: var(--sbd-border);
    --color-background-item-hover: var(--sbd-accent-soft);
    --color-background-item-focus: var(--sbd-accent-soft);
    --color-shadow-item-focus: var(--sbd-accent-glow);
    --color-background-icon-active: var(--sbd-accent-soft);
    --color-text-icon-active: var(--sbd-accent);
    --color-active-icon: var(--sbd-accent);
}

html .ce-popover__container,
html .ce-inline-toolbar,
html .ce-conversion-toolbar,
html .ce-settings {
    border: 1px solid var(--sbd-border);
    background: var(--sbd-bg-elevated);
    color: var(--sbd-text);
    box-shadow: var(--sbd-shadow-md);
}

html .ce-popover-item__title,
html .ce-popover-item__secondary-title,
html .ce-inline-tool,
html .ce-conversion-tool__icon,
#editorjs .ce-toolbar__plus,
#editorjs .ce-toolbar__settings-btn {
    color: var(--sbd-text);
}

html .ce-popover-item:hover,
html .ce-popover-item--focused,
html .ce-inline-tool:hover,
html .ce-conversion-tool:hover,
#editorjs .ce-toolbar__plus:hover,
#editorjs .ce-toolbar__settings-btn:hover {
    background: var(--sbd-accent-soft);
}

html .ce-popover-item__icon,
html .ce-conversion-tool__icon {
    border: 1px solid var(--sbd-border);
    background: var(--sbd-bg-surface);
    color: var(--sbd-text);
}

/* Champ de recherche du menu d'ajout de bloc. */
html .ce-popover .cdx-search-field {
    border-color: var(--sbd-border);
    background: var(--sbd-bg-glass);
}

html .ce-popover .cdx-search-field__input {
    color: var(--sbd-text);
}

html .ce-popover .cdx-search-field__input::placeholder {
    color: var(--sbd-text-muted);
}

/* Champs internes des outils (légendes, citation). */
#editorjs .cdx-input,
#editorjs .image-tool__caption,
#editorjs .cdx-quote__text,
#editorjs .cdx-quote__caption {
    border-color: var(--sbd-border);
    background: var(--sbd-bg-glass);
    color: var(--sbd-text);
    box-shadow: none;
}

#editorjs .cdx-input::placeholder,
#editorjs [contenteditable].cdx-input[data-placeholder]::before {
    color: var(--sbd-text-muted);
}

/* Boutons d'outil (« Choisir une image », « + Ajouter une étape »). */
#editorjs .cdx-button {
    border-color: var(--sbd-border);
    background: var(--sbd-bg-glass);
    color: var(--sbd-text);
}

#editorjs .cdx-button:hover {
    background: var(--sbd-bg-elevated);
}

/* Bloc de code : le plugin le peint en clair en dur, c'était l'un des aplats
   blancs du thème sombre. */
#editorjs .ce-code__textarea {
    border-color: var(--sbd-border);
    background: var(--sbd-bg-surface);
    color: var(--sbd-text);
}

/* Champ de saisie du lien (outil inline « Lien »). */
html .ce-inline-tool-input {
    background: var(--sbd-bg-glass);
    color: var(--sbd-text);
}

html .ce-inline-tool-input::placeholder {
    color: var(--sbd-text-muted);
}

/* ── Tableau ──────────────────────────────────────────────────────────────
   Le plugin pilote lui aussi ses couleurs par variables locales. */

#editorjs .tc-wrap {
    --color-background: var(--sbd-bg-glass);
    --color-text-secondary: var(--sbd-text-muted);
    --color-border: var(--sbd-border);
}

#editorjs .tc-table,
#editorjs .tc-row,
#editorjs .tc-cell {
    border-color: var(--sbd-border);
}

#editorjs .tc-cell {
    color: var(--sbd-text);
}

#editorjs .tc-row--selected,
#editorjs .tc-cell--selected {
    background-color: var(--sbd-accent-soft);
}

#editorjs .tc-toolbox__toggler {
    color: var(--sbd-text-muted);
}

#editorjs .tc-add-column,
#editorjs .tc-add-row {
    background: var(--sbd-bg-glass);
    color: var(--sbd-text-muted);
}

#editorjs .tc-add-column:hover,
#editorjs .tc-add-row:hover {
    background: var(--sbd-accent-soft);
}

/* Popover du tableau (ajouter/supprimer colonne ou ligne) — injecté HORS du
   point de montage, donc ciblé globalement. */
html .tc-popover {
    --color-border: var(--sbd-border);
    --color-background: var(--sbd-bg-elevated);
    --color-background-hover: var(--sbd-accent-soft);
    --color-text-primary: var(--sbd-text);

    border: 1px solid var(--sbd-border);
    background: var(--sbd-bg-elevated);
    color: var(--sbd-text);
    box-shadow: var(--sbd-shadow-md);
}

html .tc-popover__item:hover,
html .tc-popover__item--confirm {
    background-color: var(--sbd-accent-soft);
}

html .tc-popover__item-label {
    color: var(--sbd-text);
}

html .tc-popover__item-icon {
    border: 1px solid var(--sbd-border);
    background: var(--sbd-bg-surface);
    color: var(--sbd-text);
}

/* ── Outils de MISE EN PAGE maison (sur-titre, encadré, étapes, note) ─────
   Posés par `_editorjs_onboarding.html.twig`. Leur rendu APPRENANT vit dans
   `assets/student/spa/rich-content.css` : ici on ne cherche qu'à rendre les
   champs distinguables pendant la saisie.

   Ces champs portent aussi la classe `cdx-input` (ils reprennent l'apparence
   des champs d'Editor.js) : cette section vient donc APRÈS celle du chrome, à
   spécificité égale, pour que ses fonds propres l'emportent. */

#editorjs .sbd-rc-field {
    min-height: 1.6em;
    outline: none;
}

#editorjs .sbd-rc-field:empty::before {
    content: attr(data-placeholder);
    color: var(--sbd-text-muted);
    pointer-events: none;
}

#editorjs .sbd-rc-eyebrow {
    color: var(--sbd-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* La note est « discrète » À L'AFFICHAGE (`--sbd-text-muted` dans
   rich-content.css) ; pendant la SAISIE elle doit rester confortablement
   lisible — un texte qu'on est en train d'écrire n'est pas un texte de
   service. Mesuré : `--sbd-text-muted` tombe à 2,7:1 sur la surface claire. */
#editorjs .sbd-rc-note {
    color: var(--sbd-text-secondary);
    font-size: 0.85rem;
}

/* Encadré et étape : une surface propre, détachée du fil de saisie. */
#editorjs .sbd-rc-panel,
#editorjs .sbd-rc-steps__item {
    padding: 0.85rem 1rem;
    border: 1px solid var(--sbd-border);
    border-radius: 0.6rem;
    background: var(--sbd-bg-elevated);
    color: var(--sbd-text);
}

#editorjs .sbd-rc-steps__item + .sbd-rc-steps__item {
    margin-top: 0.6rem;
}

#editorjs .sbd-rc-panel__title,
#editorjs .sbd-rc-steps__title {
    font-weight: 600;
}

#editorjs .sbd-rc-panel__text,
#editorjs .sbd-rc-steps__what {
    margin-top: 0.35rem;
}

#editorjs .sbd-rc-steps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#editorjs .sbd-rc-steps__icon {
    max-width: 12rem;
    border-color: var(--sbd-border);
    background-color: var(--sbd-bg-surface);
    color: var(--sbd-text);
}

#editorjs .sbd-rc-steps__actions {
    display: flex;
    gap: 0.25rem;
}

#editorjs .sbd-rc-steps__btn {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--sbd-border);
    border-radius: 0.4rem;
    background: var(--sbd-bg-surface);
    color: var(--sbd-text);
    line-height: 1;
}

#editorjs .sbd-rc-steps__btn:hover:not(:disabled) {
    border-color: var(--sbd-accent);
    color: var(--sbd-accent);
}

#editorjs .sbd-rc-steps__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Encart « Pourquoi » : rappelle son filet à l'affichage, pour que l'auteur
   reconnaisse le bloc qu'il est en train de remplir. */
#editorjs .sbd-rc-steps__why {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-left: 2px solid var(--sbd-accent);
    border-radius: 0 0.4rem 0.4rem 0;
    background: var(--sbd-accent-softer);
    font-size: 0.9rem;
}

#editorjs .sbd-rc-steps__add {
    margin-top: 0.6rem;
}

/* ── Modale de choix d'image ─────────────────────────────────────────────── */

.sbd-media-picker {
    position: fixed;
    inset: 0;
    z-index: 1080; /* au-dessus de la barre d'outils flottante d'Editor.js */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* La modale n'est montée qu'une fois puis rouverte : c'est `is-open` qui
   l'affiche, elle n'est jamais retirée du DOM. */
.sbd-media-picker.is-open {
    display: flex;
}

.sbd-media-picker__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.sbd-media-picker__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(80vh, 720px);
    overflow: hidden;
    border: 1px solid var(--sbd-border);
    border-radius: 1rem;
    background: var(--sbd-bg-surface);
    box-shadow: var(--sbd-shadow-lg);
}

.sbd-media-picker__header,
.sbd-media-picker__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
}

.sbd-media-picker__header {
    border-bottom: 1px solid var(--sbd-border);
}

.sbd-media-picker__footer {
    border-top: 1px solid var(--sbd-border);
}

.sbd-media-picker__title {
    margin: 0;
    color: var(--sbd-text);
    font-size: 1.0625rem;
    font-weight: 600;
}

.sbd-media-picker__close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--sbd-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sbd-media-picker__close:hover {
    background: var(--sbd-bg-elevated);
    color: var(--sbd-text);
}

/* Le bouton de téléversement partage le pied avec le libellé « Vos médias » :
   il ne doit ni se comprimer ni passer à la ligne quand le libellé s'allonge. */
.sbd-media-picker__upload {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* C'est ce conteneur que l'IntersectionObserver observe (`root: body`) : il doit
   rester le seul à défiler, sinon le chargement infini ne se déclenche pas. */
.sbd-media-picker__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem;
}

.sbd-media-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.85rem;
}

/* Vignette : ratio fixe, sinon la grille tressaute au fil du chargement des
   images (chacune arrivant avec ses propres proportions). */
.sbd-media-picker__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sbd-border);
    border-radius: 0.6rem;
    background: var(--sbd-bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.sbd-media-picker__item:hover,
.sbd-media-picker__item:focus-visible {
    border-color: var(--sbd-accent);
    transform: translateY(-2px);
    outline: none;
}

.sbd-media-picker__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbd-media-picker__sentinel {
    height: 1px;
}

.sbd-media-picker__status {
    padding: 1rem 0 0.25rem;
    color: var(--sbd-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Grille vide : le statut porte seul le message (« Aucune image… »), il ne doit
   pas se retrouver collé en haut du corps de la modale. */
.sbd-media-picker__grid:empty + .sbd-media-picker__sentinel + .sbd-media-picker__status {
    padding-top: 2.5rem;
}

@media (max-width: 575.98px) {
    .sbd-media-picker {
        padding: 0;
    }

    .sbd-media-picker__dialog {
        max-height: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .sbd-media-picker__grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    }
}

/* ── Outil « Image » dans l'éditeur ──────────────────────────────────────── */

.sbd-image-tool__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.6rem;
}

.sbd-image-tool__placeholder {
    display: block;
    width: 100%;
    padding: 1.5rem;
    border: 1px dashed var(--sbd-border-hover);
    border-radius: 0.6rem;
    background: var(--sbd-bg-elevated);
    color: var(--sbd-text-secondary);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sbd-image-tool__placeholder:hover {
    border-color: var(--sbd-accent);
    color: var(--sbd-text);
}
