/* *********************************************** */
/* ********** CodeMirror DaisyUI Theme *********** */
/* *********************************************** */

/* Theme selector - uses DaisyUI variables for automatic theme switching */
.cm-s-daisy.CodeMirror {
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace);
    font-size: 14px;
    line-height: 1.5;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
}

/* Cursor */
.cm-s-daisy .CodeMirror-cursor {
    border-left-color: var(--color-primary);
    border-left-width: 2px;
}

/* Selection */
.cm-s-daisy .CodeMirror-selected {
    background-color: var(--color-selection) !important;
}

.cm-s-daisy.CodeMirror-focused .CodeMirror-selected {
    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
}

/* Line numbers and gutters */
.cm-s-daisy .CodeMirror-gutters {
    background-color: var(--color-base-200);
    border-right: 1px solid var(--color-border);
}

.cm-s-daisy .CodeMirror-linenumber {
    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    padding: 0 8px;
}

/* Active line */
.cm-s-daisy .CodeMirror-activeline-background {
    background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
}

.cm-s-daisy .CodeMirror-activeline-gutter {
    background-color: var(--color-base-300);
}

/* Matching brackets */
.cm-s-daisy .CodeMirror-matchingbracket {
    color: var(--color-success) !important;
    font-weight: bold;
}

.cm-s-daisy .CodeMirror-nonmatchingbracket {
    color: var(--color-error) !important;
}

/* *********************************************** */
/* ******** CodeMirror Syntax Highlighting ******* */
/* *********************************************** */

/* Keywords (column, row, cell, if, not, and, or, in, between, case) */
.cm-s-daisy .cm-keyword {
    color: var(--color-primary);
    font-weight: bold;
}

/* Built-in functions (style, format) */
.cm-s-daisy .cm-builtin {
    color: var(--color-secondary);
    font-weight: 600;
}

/* Operators (==, <, >, contains, startswith, etc.) */
.cm-s-daisy .cm-operator {
    color: var(--color-warning);
}

/* Strings ("error", "EUR", etc.) */
.cm-s-daisy .cm-string {
    color: var(--color-success);
}

/* Numbers (0, 100, 3.14) */
.cm-s-daisy .cm-number {
    color: var(--color-accent);
}

/* Booleans (True, False, true, false) */
.cm-s-daisy .cm-atom {
    color: var(--color-info);
}

/* Special variables (value, col, row, cell) */
.cm-s-daisy .cm-variable-2 {
    color: var(--color-accent);
    font-style: italic;
}

/* Cell IDs (tcell_*) */
.cm-s-daisy .cm-variable-3 {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

/* Comments (#...) */
.cm-s-daisy .cm-comment {
    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    font-style: italic;
}

/* Property names (bold=, color=, etc.) */
.cm-s-daisy .cm-property {
    color: var(--color-base-content);
    opacity: 0.8;
}

/* Errors/invalid syntax */
.cm-s-daisy .cm-error {
    color: var(--color-error);
    text-decoration: underline wavy;
}

/* *********************************************** */
/* ********** CodeMirror Autocomplete ************ */
/* *********************************************** */

/* Autocomplete dropdown container */
.CodeMirror-hints {
    background-color: var(--color-base-100);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    max-height: 20em;
    overflow-y: auto;
}

/* Individual hint items */
.CodeMirror-hint {
    color: var(--color-base-content);
    padding: 4px 8px;
    cursor: pointer;
}

/* Hovered/selected hint */
.CodeMirror-hint-active {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

/* *********************************************** */
/* ********** CodeMirror Lint Markers ************ */
/* *********************************************** */

/* Lint gutter marker */
.CodeMirror-lint-marker {
    cursor: pointer;
}

.CodeMirror-lint-marker-error {
    color: var(--color-error);
}

.CodeMirror-lint-marker-warning {
    color: var(--color-warning);
}

/* Lint tooltip */
.CodeMirror-lint-tooltip {
    background-color: var(--color-base-100);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: var(--color-base-content);
    font-family: var(--font-sans, ui-sans-serif, system-ui);
    font-size: 13px;
    padding: 8px 12px;
    max-width: 400px;
}

.CodeMirror-lint-message-error {
    color: var(--color-error);
}

.CodeMirror-lint-message-warning {
    color: var(--color-warning);
}

/* *********************************************** */
/* ********** DslEditor Wrapper Styles *********** */
/* *********************************************** */

/* Wrapper container for DslEditor */
.mf-dsl-editor-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Editor container */
.mf-dsl-editor {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* *********************************************** */
/* ********** Preset Styles *********** */
/* *********************************************** */

.mf-formatting-primary {
    background-color: color-mix(in oklab, var(--color-primary) 65%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-content);
    border-radius: 0.375rem;
}

.mf-formatting-accent {
    background-color: var(--color-accent);
    color: var(--color-accent-content);
    border-radius: 0.375rem;
}

.mf-formatting-neutral {
    background-color: var(--color-neutral);
    color: var(--color-neutral-content);
    border-radius: 0.375rem;
}

.mf-formatting-info {
    background-color: var(--color-info);
    color: var(--color-info-content);
    border-radius: 0.375rem;
}

.mf-formatting-success {
    background-color: var(--color-success);
    color: var(--color-success-content);
    border-radius: 0.375rem;
}

.mf-formatting-warning {
    background-color: var(--color-warning);
    color: var(--color-warning-content);
    border-radius: 0.375rem;
}

.mf-formatting-error {
    background-color: var(--color-error);
    color: var(--color-error-content);
    border-radius: 0.375rem;
}


.mf-formatting-red {
    background-color: color-mix(in oklab, red 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}


.mf-formatting-red {
    background-color: color-mix(in oklab, red 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-blue {
    background-color: color-mix(in oklab, blue 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-green {
    background-color: color-mix(in oklab, green 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-yellow {
    background-color: color-mix(in oklab, yellow 50%, #0000);
    color: var(--color-base-content);
    border-radius: 0.375rem;
}

.mf-formatting-orange {
    background-color: color-mix(in oklab, orange 50%, #0000);
    color: var(--color-base-content);
    border-radius: 0.375rem;
}

.mf-formatting-purple {
    background-color: color-mix(in oklab, purple 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-pink {
    background-color: color-mix(in oklab, pink 50%, #0000);
    color: var(--color-base-content);
    border-radius: 0.375rem;
}

.mf-formatting-gray {
    background-color: color-mix(in oklab, gray 50%, #0000);
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-black {
    background-color: black;
    color: var(--color-primary-content);
    border-radius: 0.375rem;
}

.mf-formatting-white {
    background-color: white;
    color: var(--color-base-content);
    border-radius: 0.375rem;
}