/*
 * Radzen component theme overrides
 * Maps Radzen CSS variables to Floq brand tokens defined in app.css.
 * Both light and dark themes are handled here via [data-theme] selectors.
 * This file is populated incrementally as Radzen components are introduced.
 */

/* ============================================================
   EasyMDE — Floq brand overrides
   ============================================================ */

.EasyMDEContainer { border-radius: var(--radius-sm); overflow: hidden; }
.EasyMDEContainer .CodeMirror {
    background: var(--color-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-top: none;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    min-height: 80px;
    padding: var(--space-sm);
}
.EasyMDEContainer .CodeMirror:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-muted); }
.EasyMDEContainer .editor-toolbar {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    opacity: 1;
    padding: 4px var(--space-sm);
}
.EasyMDEContainer .editor-toolbar button {
    color: var(--color-text-secondary);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-size: 0.875rem;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: var(--color-border);
    color: var(--color-text-primary);
}
.EasyMDEContainer .editor-toolbar i.separator { border-color: var(--color-border); }
.EasyMDEContainer .editor-preview {
    background: var(--color-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: var(--space-md);
}
.EasyMDEContainer .editor-preview pre { background: var(--color-surface-elevated); border-radius: var(--radius-sm); padding: var(--space-sm); }
.EasyMDEContainer .editor-preview code { font-family: var(--font-mono); font-size: 0.8125rem; }
/* Dark theme — CodeMirror cursor and selection */
[data-theme="dark"] .EasyMDEContainer .CodeMirror { background: var(--color-bg); color: var(--color-text-primary); }
[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--color-text-primary); }
[data-theme="dark"] .EasyMDEContainer .CodeMirror-selected { background: var(--color-surface-elevated); }
[data-theme="dark"] .EasyMDEContainer .editor-toolbar { background: var(--color-surface-elevated); border-color: var(--color-border); }
[data-theme="dark"] .EasyMDEContainer .editor-preview { background: var(--color-bg); color: var(--color-text-primary); }