/* ─────────────────────────────────────────────────────────────────────────────── */
/* NOVASIO — Context menu                                                          */
/* ─────────────────────────────────────────────────────────────────────────────── */

.novasio-context-menu {
    position        : fixed;
    z-index         : 9999;
    background      : #ffffff;
    border          : 1px solid #d1d5db;
    border-radius   : 8px;
    box-shadow      : 0 4px 16px rgba(0,0,0,0.15);
    padding         : 6px 0;
    min-width       : 160px;
    font-family     : 'Segoe UI', sans-serif;
    font-size       : 14px;
}

.novasio-context-menu button {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    width           : 100%;
    padding         : 8px 16px;
    border          : none;
    background      : transparent;
    text-align      : left;
    cursor          : pointer;
    color           : #374151;
    transition      : background 0.15s;
}

.novasio-context-menu button:hover {
    background      : #fee2e2;
    color           : #991b1b;
}

.novasio-context-menu button svg {
    width           : 16px;
    height          : 16px;
    flex-shrink     : 0;
}

/* ── YouTube iframe overlay ─────────────────────────────────────── */
.novasio-iframe-overlay {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    z-index         : 10;
    cursor          : default;

    /* Fully transparent but present in the event flow */
    background      : transparent;
}

.novasio-iframe-overlay:hover {
    /* Subtle hint that the element is interactive */
    outline         : 2px dashed rgba(180, 0, 0, 0.35);
    outline-offset  : -2px;
}

/* ── Code block ─────────────────────────────────────────────────── */
.novasio-code {
    display          : inline-block;
    font-family      : 'Courier New', Courier, monospace;
    font-size        : 0.9em;
    background       : #f4f4f4;
    border           : 1px solid #ddd;
    border-radius    : 4px;
    padding          : 2px 6px;
    color            : #c0392b;
    white-space      : pre-wrap;
    word-break       : break-all;
}

/* ── Links inside the editable zone ───────────────────────────── */

[contenteditable] a
{
    color           : #7f1d1d;          /* red-900 : visible but not aggressive  */
    text-decoration : underline;
    cursor          : pointer;
    transition      : color 0.2s ease;
}

[contenteditable] a:hover
{
    color           : #b91c1c;          /* red-700 : slightly brighter on hover  */
    text-decoration : underline wavy;   /* wavy underline on hover for feedback  */
}

[contenteditable] a:visited
{
    color           : #6b21a8;          /* purple-800 : classic visited colour   */
}

/* Styles pour les listes dans l'éditeur NOVASIO */
/* CES STYLES DOIVENYT ÊTRE IMPORTÉS DANS LE PROJET
   NOVASIO */
/* Liste non ordonnée - puces */
table.events-browse ul,
[contenteditable] ul {
    list-style-type: disc !important;
    margin: 1em 0 !important;
    padding-left: 2.5em !important;
}

table.events-browse ul ul,
[contenteditable] ul ul {
    list-style-type: circle !important;
    margin: 0.5em 0 !important;
}

table.events-browse ul ul ul,
[contenteditable] ul ul ul {
    list-style-type: square !important;
}

/* Liste ordonnée - numérotation */
 table.events-browse ol,
[contenteditable] ol {
    list-style-type: decimal !important;
    margin: 1em 0 !important;
    padding-left: 2.5em !important;
}

table.events-browse ol ol,
[contenteditable] ol ol {
    list-style-type: lower-alpha !important;
    margin: 0.5em 0 !important;
}

table.events-browse ol ol ol,
[contenteditable] ol ol ol {
    list-style-type: lower-roman !important;
}

/* Éléments de liste */
table.events-browse li,
[contenteditable] li {
    margin: 0.25em 0 !important;
    line-height: 1.5 !important;
    display: list-item !important;
}

/* Marges spécifiques pour les listes imbriquées */
table.events-browse ul ul,
[contenteditable]   ul ul,
table.events-browse ol ul,
[contenteditable]   ol ul,
table.events-browse ul ol,
[contenteditable]   ul ol,
table.events-browse ol ol,
[contenteditable]   ol ol
{
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
}

/* Pour éviter que les styles Tailwind ne perturbent l'affichage */
table.events-browse ul,
[contenteditable]   ul,
table.events-browse ol,
[contenteditable]   ol {
    list-style-position: outside !important;
}

table.events-browse h2,
[contenteditable] h2 {
    font-size: 1.6em;
    color: royalblue;
    margin: 1em 0 !important;
}

table.events-browse tbody tr:hover h2 {
    color: #fff;
}