/* CSS Variables for SunEditor overrides */

:root {
    --hr-color: var(--mud-palette-text-primary, #333);
}

html body .sun-editor .se-toolbar,
html body .sun-editor .se-btn-tray {
    background-color: var(--mud-palette-surface, #1e1e28) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider, #2b2b36) !important;
}

html body .sun-editor .se-btn,
html body .sun-editor .se-btn-select,
html body .sun-editor .se-menu-list li button {
    color: var(--mud-palette-text-primary) !important;
    background: transparent !important;
}

    html body .sun-editor .se-btn:enabled:hover,
    html body .sun-editor .se-btn:enabled:focus {
        background: rgba(255,255,255,.08) !important;
    }

html body .sun-editor .se-wrapper .se-wrapper-inner,
html body .sun-editor-editable {
    background-color: var(--mud-palette-surface, #1e1e28) !important;
    color: var(--mud-palette-text-primary) !important;
}

html body .sun-editor .se-list-layer,
html body .sun-editor .se-select-list,
html body .sun-editor .se-dialog .se-dialog-inner .se-dialog-content {
    background-color: var(--mud-palette-surface, #1e1e28) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider, #2b2b36) !important;
}

html body .sun-editor .se-toolbar,
html body .sun-editor .se-resizing-bar {
    outline-color: var(--mud-palette-divider, #2b2b36) !important;
}
html body .sun-editor .se-resizing-bar {
    background-color: var(--mud-palette-surface, #1e1e28) !important;
    border-top: 1px solid var(--mud-palette-divider, #2b2b36) !important;
}

    html body .sun-editor .se-resizing-bar .se-char-counter-wrapper,
    html body .sun-editor .se-resizing-bar .se-navigation {
        color: var(--mud-palette-text-secondary, #b4b7c1) !important;
    }

    html body .sun-editor .se-resizing-bar .se-navigation {
        display: none !important; 
    }

.math-panel-bg {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
}

    .math-panel-bg input,
    .math-panel-bg select,
    .math-panel-bg textarea {
        background-color: var(--mud-palette-background-grey);
        color: var(--mud-palette-text-primary);
        border: 1px solid var(--mud-palette-divider);
    }

        .math-panel-bg input::placeholder,
        .math-panel-bg textarea::placeholder {
            color: var(--mud-palette-text-secondary);
        }

    .math-panel-bg .btn,
    .math-panel-bg button {
        background-color: var(--mud-palette-background-grey);
        color: var(--mud-palette-text-primary);
        border: 1px solid var(--mud-palette-divider);
    }

        .math-panel-bg .btn:hover,
        .math-panel-bg button:hover {
            background-color: var(--mud-palette-surface);
        }

    .math-panel-bg .math-render {
        background: transparent;
        color: var(--mud-palette-text-primary);
        padding: .5rem .75rem;
        border: 1px dashed var(--mud-palette-divider);
        min-height: 48px;
    }

    .math-panel-bg .MathJax_SVG svg g {
        fill: var(--mud-palette-text-primary) !important;
        stroke: none !important;
    }

    .math-panel-bg math-field {
        background: var(--mud-palette-background-grey) !important;
        color: var(--mud-palette-text-primary) !important;
        border: 1px solid var(--mud-palette-divider) !important;
        border-radius: 4px;
        padding: .4rem .6rem;
    }

.math-panel-bg math-field::part(container) {
    background: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-text-primary) !important;
    border: none !important;
}

.sun-editor .se-wrapper .se-wrapper-inner .equation-caption,
.sun-editor-editable figure.equation-block figcaption.equation-caption {
    background-color: transparent !important;
    color: inherit !important; 
    font-size: 0.9rem !important;
    font-style: italic;
    text-align: center !important;
    display: block;
    margin-top: 0.5rem;
}

.math-chem-fields,
.rendering-areas,
math-field::part(container) {
    direction: ltr !important;
    text-align: left !important;
    color: var(--mud-palette-text-primary) !important;
}

.sun-editor .se-controller .se-btn-group button {
    background-color: var(--mud-palette-surface, #1e1e28) !important;
    color: var(--mud-palette-text-primary, #e0e0e0) !important;
    border: 1px solid var(--mud-palette-divider, #2b2b36) !important;
}

    .sun-editor .se-controller .se-btn-group button:hover:enabled,
    .sun-editor .se-controller .se-btn-group button:focus:enabled {
        background-color: var(--mud-palette-surface, #1e1e28) !important;
        color: var(--mud-palette-text-primary, #e0e0e0) !important;
        border-color: var(--mud-palette-divider, #2b2b36) !important;
    }

    .sun-editor .se-controller .se-btn-group button:active:enabled {
        background-color: var(--mud-palette-primary, #3f9dff) !important;
        color: #fff !important;
        border-color: var(--mud-palette-primary-dark, #2a6fb0) !important;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.3) !important;
    }

.rendering-areas .MathJax,
.rendering-areas math-field,
.math-chem-fields math-field,
.MathJax {
    color: #000000 !important; 
    background: transparent !important;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}
   .MathJax .mo,
   mjx-mtext,
   mjx-mi,
   mjx-mo {
       font-family: "Courier New", monospace !important;
       font-weight: bold !important;
       color: #000 !important;
   }

/* Scrollable drop-downs for SunEditor */

.sun-editor {
    overflow: visible !important;
    z-index: 1050 !important;
}

    .sun-editor .se-list-layer {
        max-height: 100px !important; 
        overflow-y: auto !important; 
        overflow-x: hidden !important;
        z-index: 3000 !important; 
        background-color: var(--mud-palette-surface, #fff);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

        .sun-editor .se-list-layer::-webkit-scrollbar {
            width: 6px;
        }

        .sun-editor .se-list-layer::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

            .sun-editor .se-list-layer::-webkit-scrollbar-thumb:hover {
                background: #999;
            }

    .sun-editor .se-tooltip,
    .sun-editor .se-dialog {
        z-index: 3000 !important;
    }

/* Numbered List */

.sun-editor .se-wrapper-inner ol,
.sun-editor-editable ol {
    list-style-type: decimal !important;
    padding-inline-start: var(--list-indent, 2.5em) !important;
    margin: 0 !important;
}

.sun-editor .se-wrapper-inner ul,
.sun-editor-editable ul {
    list-style-type: disc !important;
    padding-inline-start: var(--list-indent, 2.5em) !important;
    margin: 0 !important;
}

.sun-editor .se-wrapper-inner ol li,
.sun-editor-editable ol li {
    display: list-item !important;
    list-style-type: decimal !important;
}

.sun-editor .se-wrapper-inner ul li,
.sun-editor-editable ul li {
    display: list-item !important;
    list-style-type: disc !important;
}

/* Horizontal Rule Dropdown */

.sun-editor .se-list-layer.se-list-line li > button {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 140px !important;
    padding: 10px 16px !important;
    gap: 8px !important;
}

.sun-editor .se-list-layer.se-list-line li > button::after {
    content: '';
    display: block;
    width: 100%;
}

/* Solid line style (1st item) */

.sun-editor .se-list-layer.se-list-line li:nth-child(1) > button::after {
    height: 3px;
    background: var(--hr-color);
}

/* Dotted line style (2nd item) */

.sun-editor .se-list-layer.se-list-line li:nth-child(2) > button::after {
    border-bottom: 3px dotted var(--hr-color);
}

/* Dashed line style (3rd item) */

.sun-editor .se-list-layer.se-list-line li:nth-child(3) > button::after {
    border-bottom: 3px dashed var(--hr-color);
}