/* Custom EasyMDE Styles for MudBlazor Integration */

/* Main Container */
.easymde-container {
    width: 100%;
}

.easymde-container .EasyMDEContainer {
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

/* CodeMirror Editor */
.easymde-container .CodeMirror {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out;
    cursor: text !important;
    height: 300px;
    min-height: 200px;
}

.easymde-container .CodeMirror:hover {
    border-color: var(--mud-palette-text-primary);
}

.easymde-container .CodeMirror-focused {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
    padding: calc(10px - 1px); /* Compensate for border width change */
    outline: none;
}

/* Ensure cursor is text in the entire editor area */
.easymde-container .CodeMirror-scroll {
    cursor: text !important;
}

.easymde-container .CodeMirror-lines {
    cursor: text !important;
}

.easymde-container .CodeMirror pre {
    cursor: text !important;
}

.easymde-container .CodeMirror-sizer {
    cursor: text !important;
}

.easymde-container .CodeMirror-code {
    cursor: text !important;
}

.easymde-container .CodeMirror-line {
    cursor: text !important;
}

.easymde-container .CodeMirror-gutter {
    cursor: default !important;
}

/* Cursor and Selection */
.easymde-container .CodeMirror-cursor {
    border-color: var(--mud-palette-text-primary);
}

.easymde-container .CodeMirror-selected {
    background-color: var(--mud-palette-action-default-hover);
}

/* Line Numbers */
.easymde-container .CodeMirror-linenumber {
    color: var(--mud-palette-text-disabled);
}

/* Toolbar */
.easymde-container .editor-toolbar {
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-inputs);
    border-left: 1px solid var(--mud-palette-lines-inputs);
    border-right: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    transition: border-color 0.15s ease-in-out;
}



/* Same for the editor border */
.easymde-container:focus-within .CodeMirror {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
    padding: calc(10px - 1px);
}


.easymde-container .editor-toolbar a {
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    margin: 2px;
    display: inline-block !important;
    width: auto !important;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 3px !important;
    flex: 0 0 auto !important;
}

/* Fix for table button and other icons that might expand */
.easymde-container .editor-toolbar a.fa-table,
.easymde-container .editor-toolbar button,
.easymde-container .editor-toolbar [class*="fa-"] {
    width: auto !important;
    max-width: 30px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
}

/* Ensure no button can be full width */
.easymde-container .editor-toolbar > * {
    flex: 0 0 auto !important;
    max-width: 30px !important;
}

/* Exception for the separator which should have no width */
.easymde-container .editor-toolbar .separator,
.easymde-container .editor-toolbar i.separator {
    max-width: none !important;
    width: 0 !important;
    border: none !important;
    padding: 0 !important;
}

.easymde-container .editor-toolbar a:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.easymde-container .editor-toolbar a.active,
.easymde-container .editor-toolbar a:active {
    background-color: var(--mud-palette-primary);
    color: white !important;
}

.easymde-container .editor-toolbar.disabled-for-preview a:not(.no-disable) {
    opacity: 0.5;
}

.easymde-container .editor-toolbar i.separator {
    border-left: 1px solid var(--mud-palette-divider) !important;
    margin: 0 6px;
    display: inline-block !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 20px;
    flex: 0 0 auto !important;
}

/* Status Bar */
.easymde-container .editor-statusbar {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
    padding: 8px 10px;
    font-size: 12px;
    transition: border-color 0.15s ease-in-out;
}


/* Preview */
.easymde-container .editor-preview {
    
    color: var(--mud-palette-text-primary);
    padding: 10px;
}

/* Add a visual indicator that preview mode is active */
.easymde-container .editor-preview::before {
    content: "Preview Mode - Read Only";
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
    padding: 2px 8px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-divider);
    opacity: 0.8;
    z-index: 10;
}

.easymde-container .editor-preview-side {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-left: 1px solid var(--mud-palette-divider);
    padding: 10px;
}

/* Preview Typography */
.easymde-container .editor-preview h1,
.easymde-container .editor-preview-side h1 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--mud-palette-text-primary);
}

.easymde-container .editor-preview h2,
.easymde-container .editor-preview-side h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.easymde-container .editor-preview h3,
.easymde-container .editor-preview-side h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-primary);
}

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

.easymde-container .editor-preview a,
.easymde-container .editor-preview-side a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.easymde-container .editor-preview a:hover,
.easymde-container .editor-preview-side a:hover {
    text-decoration: underline;
}

.easymde-container .editor-preview code,
.easymde-container .editor-preview-side code {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.easymde-container .editor-preview pre,
.easymde-container .editor-preview-side pre {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    padding: 1rem;
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

.easymde-container .editor-preview blockquote,
.easymde-container .editor-preview-side blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--mud-palette-text-secondary);
}

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

.easymde-container .editor-preview th,
.easymde-container .editor-preview-side th {
    background-color: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-divider);
    padding: 0.5rem;
    text-align: left;
    font-weight: 500;
}

.easymde-container .editor-preview td,
.easymde-container .editor-preview-side td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.5rem;
}

/* Syntax Highlighting */
.cm-s-easymde .cm-header-1 { font-size: 200%; }
.cm-s-easymde .cm-header-2 { font-size: 160%; }
.cm-s-easymde .cm-header-3 { font-size: 130%; }
.cm-s-easymde .cm-header-4 { font-size: 110%; }
.cm-s-easymde .cm-header-5 { font-size: 100%; }
.cm-s-easymde .cm-header-6 { font-size: 90%; }

.cm-s-easymde .cm-comment {
    color: var(--mud-palette-text-secondary);
}

.cm-s-easymde .cm-quote {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.cm-s-easymde .cm-link {
    color: var(--mud-palette-primary);
}

.cm-s-easymde .cm-url {
    color: var(--mud-palette-primary);
}

.cm-s-easymde .cm-strikethrough {
    text-decoration: line-through;
}

/* Full Screen Mode */
.easymde-container .CodeMirror-fullscreen {
    background-color: var(--mud-palette-surface);
}

.easymde-container .editor-toolbar.fullscreen {
    background-color: var(--mud-palette-surface);
}

.easymde-container .editor-statusbar.fullscreen {
    background-color: var(--mud-palette-surface);
}

/* Side by Side Mode - DISABLED */
/* Side-by-side has been removed due to layout conflicts */

/* Forum Specific Styles */
.forum-markdown-editor-container .easymde-container {
    margin-bottom: 0;
}

.forum-markdown-editor-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .easymde-container .editor-toolbar a {
        padding: 4px;
        margin: 1px;
    }

    .easymde-container .editor-toolbar i.separator {
        margin: 0 3px;
    }
}