/* EMU Editor - Dark Skin (Colors & Visual Styling) */

:root {
    /* Background colors */
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-tertiary: #2d2d30;
    --bg-darker: #1e1e1e;
    
    /* Text colors */
    --text-primary: #d4d4d4;
    --text-secondary: #a0a0a0;
    --text-heading: #e0e0e0;
    --text-muted: #6c6c6c;
    
    /* Border colors */
    --border-color: #3e3e42;
    
    /* Button colors */
    --button-bg: #3e3e42;
    --button-hover: #505050;
    --button-active: #0e639c;
    --button-active-text: white;
    
    /* Accent colors */
    --accent-color: #0e639c;
    --accent-success: #007acc;
    --accent-link: #4ec9b0;
    --logo-color: rgb(188, 215, 254);
    
    /* Code colors */
    --code-bg: #2d2d30;
    --code-text: #ce9178;
    --code-block-bg: #2d2d30;
    
    /* Markdown syntax colors (for dimmed display) */
    --md-syntax-dim: #90ee90;
    --md-syntax-hidden: #4a7c4a;
    
    /* Custom code block colors */
    --emu-block-bg: rgba(78, 201, 176, 0.1);
    --emu-block-border: #4ec9b0;
    --emu-block-text: #4ec9b0;
    
    --ccma-block-bg: rgba(206, 145, 120, 0.1);
    --ccma-block-border: #ce9178;
    --ccma-block-text: #ce9178;
    
    --php-block-bg: rgba(86, 156, 214, 0.1);
    --php-block-border: #569cd6;
    --php-block-text: #569cd6;
    
    /* Chat voice colors */
    --chat-user-bg: rgba(86, 156, 214, 0.1);
    --chat-user-border: #569cd6;
    --chat-claude-bg: rgba(78, 201, 176, 0.05);
    --chat-claude-border: #4ec9b0;
    --chat-thinking-bg: rgba(206, 145, 120, 0.1);
    --chat-thinking-border: #ce9178;
}

/* Apply color scheme */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

#app-toolbar {
    background: var(--bg-tertiary);
}

.app-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

#editor-toolbar {
    background: var(--bg-secondary);
}

.toolbar-divider {
    background: var(--border-color);
}

button {
    background: var(--button-bg);
    color: var(--text-primary);
}

#editor-container {
    background: var(--bg-primary);
}

/* Make editor look like a document */
.emu {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.emu h1,
.emu h2,
.emu h3 {
    color: var(--text-heading);
}

.emu p {
    color: var(--text-primary);
}

.emu strong {
    color: var(--text-heading);
}

.emu code {
    background: var(--code-bg);
    color: var(--code-text);
}

.emu pre {
    background: var(--code-block-bg);
    color: var(--text-primary);
}

.emu blockquote {
    color: var(--text-secondary);
}

.emu a {
    color: var(--accent-link);
}

.emu p.is-editor-empty:first-child::before {
    color: var(--text-muted);
    opacity: 0.5;
}

#status-bar {
    background: var(--accent-success);
    color: white;
}

/* Find/Replace Bar */
#find-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#find-bar input[type="text"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

#find-bar input[type="text"]:focus {
    border-color: var(--accent-color);
}

.find-match-count {
    color: var(--text-muted);
}

.find-case-btn.is-active {
    background: var(--accent-color);
    color: white;
}

/* Find highlight decorations (ProseMirror) */
.find-highlight {
    background: rgba(255, 200, 0, 0.3);
    border-radius: 2px;
}

.find-highlight-current {
    background: rgba(255, 150, 0, 0.6);
    outline: 1px solid rgba(255, 150, 0, 0.8);
}

/* Drop Overlay */
#drop-overlay {
    background: rgba(14, 99, 156, 0.15);
    border: 3px dashed var(--accent-color);
}

.drop-overlay-message {
    background: var(--bg-secondary);
    color: var(--text-heading);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.drop-overlay-message i {
    color: var(--accent-color);
}

/* Markdown Cheat Sheet Sidebar */
.md-cheatsheet {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}

.md-cheatsheet-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-heading);
}

.md-cheatsheet-body summary {
    color: var(--text-secondary);
}

.md-cheatsheet-body summary:hover {
    color: var(--text-primary);
}

.md-cs-row code {
    background: var(--code-bg, #1a1a2e);
    color: var(--accent-link);
}

.md-cs-row span {
    color: var(--text-muted);
}

/* Markdown Syntax Markers */
.md-syntax {
    color: var(--md-syntax-dim);
    opacity: 0.5;
    font-weight: normal;
    user-select: none;
    pointer-events: none;
}

.md-heading-syntax {
    color: var(--md-syntax-dim);
    opacity: 0.5;
    margin-right: 0.5em;
    user-select: none;
    pointer-events: none;
}

/* Code view colors */
.code-view-wrapper {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#code-line-numbers {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-right: 1px solid var(--border-color);
}

#code-editor-container {
    background: var(--bg-secondary);
}

#code-editor {
    background: transparent;
}

#code-highlight {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Filename Display */
.filename-display {
    color: var(--logo-color);
}