/* assets/styles/tiptap.css */

/* Styles de base pour l'éditeur */
.ProseMirror {
    min-height: 300px;
    padding: 1rem;
    outline: none;
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

/* Style des boutons de la barre d'outils */
.tiptap-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.tiptap-menu button {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.tiptap-menu button:hover {
    background: #f3f4f6;
}

.tiptap-menu button.is-active {
    background: #e5e7eb;
}

/* Style du contenu éditable */
.ProseMirror:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

/* Styles des éléments de base */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.ProseMirror h1 { font-size: 2em; }
.ProseMirror h2 { font-size: 1.5em; }
.ProseMirror h3 { font-size: 1.25em; }
.ProseMirror h4 { font-size: 1em; }
.ProseMirror h5 { font-size: 0.875em; }
.ProseMirror h6 { font-size: 0.75em; }

.ProseMirror p {
    margin-bottom: 1em;
}

.ProseMirror ul,
.ProseMirror ol {
    padding-left: 1.5em;
    margin: 1em 0;
}

.ProseMirror ul {
    list-style-type: disc;
}

.ProseMirror ol {
    list-style-type: decimal;
}

.ProseMirror blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1em;
    margin: 1em 0;
    color: #6b7280;
    font-style: italic;
}

.ProseMirror a {
    color: #3b82f6;
    text-decoration: underline;
}

.ProseMirror a:hover {
    text-decoration: none;
}

.ProseMirror code {
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    font-size: 0.9em;
    font-family: monospace;
}

.ProseMirror pre {
    background: #1e293b;
    color: #f8fafc;
    padding: 1em;
    border-radius: 0.5em;
    margin: 1em 0;
    overflow-x: auto;
}

.ProseMirror pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.9em;
    color: inherit;
}

.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5em;
    margin: 1em 0;
}

.ProseMirror table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.ProseMirror th,
.ProseMirror td {
    border: 1px solid #e5e7eb;
    padding: 0.5em 0.75em;
}

.ProseMirror th {
    background: #f9fafb;
    font-weight: 600;
    text-align: left;
}

/* Style pour le mode sombre */
.dark .ProseMirror {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

.dark .tiptap-menu {
    background: #1f2937;
    border-color: #374151;
}

.dark .tiptap-menu button {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark .tiptap-menu button:hover {
    background: #4b5563;
}

.dark .ProseMirror pre {
    background: #111827;
}

.dark .ProseMirror code {
    background: #374151;
    color: #f3f4f6;
}

.dark .ProseMirror th {
    background: #111827;
    border-color: #4b5563;
}

.dark .ProseMirror td {
    border-color: #4b5563;
}

/* Style pour le menu contextuel (Bubble Menu) */
.bubble-menu {
    position: absolute;
    z-index: 50;
    transform: translateX(-50%);
    transition: opacity 0.2s, visibility 0.2s;
}

/* Style pour les boutons actifs dans l'éditeur */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #9ca3af;
    pointer-events: none;
    height: 0;
}

/* Style pour les images dans l'éditeur */
.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 1rem 0;
}

/* Style pour les liens dans l'éditeur */
.ProseMirror a {
    color: #3b82f6;
    text-decoration: underline;
}

.ProseMirror a:hover {
    color: #2563eb;
}

/* Style pour le mode sombre */
.dark .ProseMirror {
    background-color: #1f2937;
    color: #f3f4f6;
}

.dark .bubble-menu {
    background-color: #1f2937;
    border-color: #374151;
}

/* Style pour les boutons dans le mode sombre */
.dark .bubble-menu button {
    color: #f3f4f6;
}

.dark .bubble-menu button:hover {
    background-color: #374151;
}