/* Base background */
html, body, #editor-container {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #282c34;
}

.cm-editor {
    height: 100%;
}

.cm-scroller {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
}


/* Forced highlight classes */
.cm-editor .cm-header {
    color: #e06c75;
    font-weight: bold;
    font-size: 1.2em;
}


/* Bold */
.cm-editor .cm-strong {
    color: #abb2bf;
    font-weight: bold;
}


/* Italic */
.cm-editor .cm-em {
    color: #abb2bf;
    font-style: italic;
}


/* Underline */
.cm-editor .cm-underline {
    color: #abb2bf;
    text-decoration: underline;
}


/* Strikethrough */
.cm-editor .cm-strikethrough {
    color: #abb2bf;
    text-decoration: line-through;
}


/* Superscript */
.cm-editor .cm-sup {
    color: #abb2bf;
    font-size: 0.8em;
    vertical-align: super;
}


/* Subscript */
.cm-editor .cm-sub {
    color: #abb2bf;
    font-size: 0.8em;
    vertical-align: sub;
}


/* original_Text */
.cm-editor .cm-original-text {
    color: #abb2bf;
    font-weight: normal !important;
}


/* div */
.cm-editor .cm-div {
    color: #E8BF6A;
}


/* collapsible */
.cm-editor .cm-collapsible {
    color: #5757ff;
    font-style: italic;
}


/* code */
.cm-editor .cm-code {
    color: #61AFEF;
}


/* footnoteblock */
.cm-editor .cm-footnote-block {
    color: #E8BF6A;
}

/* monospace */
.cm-editor .cm-monospace {
    color: #759DCB;
}


/* link */
.cm-editor .cm-link {
    color: #61AFEF;
    font-style: italic;
    text-decoration: underline;
    font-weight: lighter;
}


/* footnote */
.cm-editor .cm-footnote {
    color: #E8BF6A;
    font-weight: lighter;
}


/* @@@@ */
.cm-editor .cm-newline {
    color: #C678DD;
    font-weight: bold;
}


/* include */
.cm-editor .cm-include {
    color: #61AFEF;
}
.cm-editor .cm-include-1 {
    color: #C678DD;
}
.cm-editor .cm-include-2 {
    color: #E8BF6A;
}
.cm-editor .cm-include-3 {
    color: #98C379;
}


/* hr */
.cm-editor .cm-hr {
    color: #E8BF6A;
}

/* -------------------- table styling -------------------- */
.cm-editor .cm-table-header {
    color: #FFC66D;
    font-weight: bold;
}
.cm-editor .cm-table {
    color: #FFC66D;
    font-weight: normal;
}
/* -------------------- table styling -------------------- */


/* image */
.cm-editor .cm-image {
    color: #E8BF6A;
    font-style: italic;
}


/* quote */
.cm-editor .cm-quote {
    color: #98C379;
    font-style: italic;
    font-weight: bold;
}


/* tabview */
.cm-editor .cm-tabview {
    color: #ff0000;
    font-style: italic;
    font-weight: normal;
}
.cm-editor .cm-tab {
    color: #E06C75;
    font-style: normal;
}


/* module */
.cm-editor .cm-module {
    color: #61AFEF;
    font-style: italic;
    font-weight: bold;
}


/* html */
.cm-editor .cm-html {
    color: #FFC66D;
    font-style: italic;
    font-weight: bold;
}


/* components */
.cm-editor .cm-components {
    color: #61AFEF;
}


/* = */
.cm-editor .cm-equal {
    color: orange;
}


/* | */
.cm-editor .cm-line-up {
    color: #C678DD;
}


/* numbers */
.cm-editor .cm-num {
    color: #E06C75;
}


/* user */
.cm-editor .cm-user {
    color: #41f4d9;
    font-style: italic;
    font-weight: bold;
}


/* keyword */
.cm-editor .cm-keyword {
    color: #98C379;
    font-style: italic;
    font-weight: bold;
}


/* note */
.cm-editor .cm-note {
    color: #FFC66D;
    font-style: italic;
}


/* size */
.cm-editor .cm-size {
    color: #FFC66D;
    font-style: italic;
    font-weight: bold;
}


/* center */
.cm-editor .cm-center {
    color: #759DCB;
    font-style: italic;
}


/* left */
.cm-editor .cm-left {
    color: #759DCB;
    font-style: italic;
}


/* right */
.cm-editor .cm-right {
    color: #759DCB;
    font-style: italic;
}


/* list1 */
.cm-editor .cm-list1 {
    color: #98C379;
    font-weight: bold;
}


/* list2 */
.cm-editor .cm-list2 {
    color: #98C379;
    font-weight: bold;
}


/* original text */
.cm-editor .cm-original-text {
    color: #FFFFFF;
}


/* rate */
.cm-editor .cm-rate {
    color: #E06C75;
    font-weight: bold;
    font-style: italic;
}

/* highlight */
.cm-editor .cm-Highlight {
    color: #98C379;
    font-style: italic;
}































/* ====== color-related styles ====== */
/* color code highlighting */
.cm-editor.cm-color {
    color: var(--color-value) !important;
    font-weight: normal;
}

/* color preview widget */
.cm-editor.cm-color-preview {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: var(--color-value, #ccc);
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s;
}

.cm-editor.cm-color-preview:hover {
    transform: scale(1.2);
    border-color: #666;
}

/* 1. Generic hex color code highlighting */
.cm-editor.cm-color {
    color: #e06c75; /* default text color for color codes */
}

/* 2. Color preview widget styles */
.cm-editor.cm-color-preview {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: 1px solid #ccc;
    border-radius: 2px;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.cm-editor.cm-color-preview:hover {
    transform: scale(1.2);
    border-color: #666;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* 3. Text style inside Wikidot color tags */
.cm-editor.cm-wikidot-colored-text {
    /* No static color needed; color is set dynamically via inline style */
    font-weight: normal;
}

/* 4. Visual enhancements for color codes */
.cm-editor .cm-color {
    position: relative;
    padding: 1px 3px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.03);
}

/* 5. Theme support for different color modes */
.cm-editor.cm-theme-light .cm-color-preview {
    border-color: #999;
}

.cm-editor.cm-theme-dark .cm-color-preview {
    border-color: #555;
}

.cm-editor.cm-theme-dark .cm-color {
    color: #ff6b6b; /* color code text color in dark theme */
}

/* ====== color-related styles ====== */