/**
 * Quill Syntax Highlighting Styles
 * Reusable CSS for syntax highlighting in Quill editors
 */

/* Hide language choosers in read-only syntax highlighting mode */
.ql-syntax-readonly .ql-language-chooser,
.ql-syntax-readonly .ql-code-block-container select,
.ql-syntax-readonly .ql-code-block-container .ql-ui {
    display: none !important;
}

/* Ensure highlight.js styles work properly in Quill editors */
/* Higher specificity to override Quill and preview styles */
.ql-syntax-highlighting .ql-editor pre code.hljs,
.ql-syntax-highlighting .ql-container pre code.hljs,
.card-preview-modal .ql-editor pre code.hljs,
.card-preview-modal .ql-container pre code.hljs {
    /* Let highlight.js handle all styling - override any conflicting CSS */
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px;
    line-height: 1;
}

/* Override preview-value styles for highlighted code */
.card-preview-modal .preview-value pre code.hljs {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Ensure code blocks have proper background in dark theme */
.ql-syntax-highlighting .ql-code-wrapper,
.card-preview-modal .ql-code-wrapper {
    background: #0b0b0b !important;
}

/* Additional styling for syntax highlighted code blocks */
.ql-syntax-highlighting .ql-code-block-container {
    margin: 0 0 1rem 0;
}

.ql-syntax-highlighting .ql-code-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: auto;
}

.ql-syntax-highlighting .ql-code-wrapper pre {
    margin: 0;
    padding: 12px;
}