/* Custom styles for EasyMDE to better match the application theme */

/* Dark mode styles */
.dark .editor-toolbar {
    background-color: #27272a; /* Zinc-800 */
    border-color: #3f3f46; /* Zinc-700 */
}

.dark .editor-toolbar button {
    color: #e4e4e7 !important; /* Zinc-200 */
}

.dark .editor-toolbar button:hover, 
.dark .editor-toolbar button.active {
    background-color: #3f3f46; /* Zinc-700 */
    border-color: #52525b; /* Zinc-600 */
}

.dark .editor-toolbar i.separator {
    border-left: 1px solid #52525b; /* Zinc-600 */
    border-right: 1px solid #52525b; /* Zinc-600 */
}

.dark .CodeMirror {
    color: #e4e4e7; /* Zinc-200 */
    background-color: #18181b; /* Zinc-900 */
    border-color: #3f3f46; /* Zinc-700 */
}

.dark .CodeMirror-cursor {
    border-left: 1px solid #f4f4f5; /* Zinc-100 */
}

.dark .CodeMirror-selected {
    background-color: rgba(79, 70, 229, 0.2); /* Indigo-600 with transparency */
}

.dark .editor-preview, 
.dark .editor-preview-side {
    background-color: #18181b; /* Zinc-900 */
    color: #e4e4e7; /* Zinc-200 */
    border-color: #3f3f46; /* Zinc-700 */
}

/* Preview content styles for both light and dark mode */
.editor-preview h1, 
.editor-preview-side h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.editor-preview h2, 
.editor-preview-side h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.editor-preview h3, 
.editor-preview-side h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.editor-preview p, 
.editor-preview-side p {
    margin-bottom: 1rem;
}

.editor-preview ul, 
.editor-preview ol, 
.editor-preview-side ul, 
.editor-preview-side ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.editor-preview ul, 
.editor-preview-side ul {
    list-style-type: disc;
}

.editor-preview ol, 
.editor-preview-side ol {
    list-style-type: decimal;
}

.editor-preview li, 
.editor-preview-side li {
    margin-bottom: 0.25rem;
}

.editor-preview code, 
.editor-preview-side code {
    font-family: ui-monospace, monospace;
    background-color: #f4f4f5; /* Zinc-100 */
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.dark .editor-preview code, 
.dark .editor-preview-side code {
    background-color: #3f3f46; /* Zinc-700 */
}

.editor-preview pre, 
.editor-preview-side pre {
    font-family: ui-monospace, monospace;
    background-color: #f4f4f5; /* Zinc-100 */
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.dark .editor-preview pre, 
.dark .editor-preview-side pre {
    background-color: #3f3f46; /* Zinc-700 */
}

.editor-preview a, 
.editor-preview-side a {
    color: #059669; /* Emerald-600 */
    text-decoration: underline;
}

.dark .editor-preview a, 
.dark .editor-preview-side a {
    color: #10b981; /* Emerald-500 */
}

.editor-preview blockquote, 
.editor-preview-side blockquote {
    border-left: 3px solid #d4d4d8; /* Zinc-300 */
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #71717a; /* Zinc-500 */
}

.dark .editor-preview blockquote, 
.dark .editor-preview-side blockquote {
    border-left-color: #52525b; /* Zinc-600 */
    color: #a1a1aa; /* Zinc-400 */
}

.editor-preview table, 
.editor-preview-side table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.editor-preview table th, 
.editor-preview-side table th {
    font-weight: 600;
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid #d4d4d8; /* Zinc-300 */
}

.dark .editor-preview table th, 
.dark .editor-preview-side table th {
    border-bottom-color: #52525b; /* Zinc-600 */
}

.editor-preview table td, 
.editor-preview-side table td {
    padding: 0.5rem;
    border-bottom: 1px solid #e4e4e7; /* Zinc-200 */
}

.dark .editor-preview table td, 
.dark .editor-preview-side table td {
    border-bottom-color: #3f3f46; /* Zinc-700 */
}

/* EasyMDE specific size fixes */
.EasyMDEContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.EasyMDEContainer .CodeMirror {
    flex: 1;
    height: auto;
}

.editor-toolbar.fullscreen, 
.CodeMirror-fullscreen, 
.editor-preview-side {
    z-index: 100;
}