/* ============================================
   Dark Mode - Markdown Preview & Toolbar
   ============================================ */

/* ============================================
   Markdown Preview
   ============================================ */

html[data-theme='dark'] .markdown-preview,
body.dark-mode .markdown-preview {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] .markdown-preview h1,
html[data-theme='dark'] .markdown-preview h2,
html[data-theme='dark'] .markdown-preview h3,
html[data-theme='dark'] .markdown-preview h4,
html[data-theme='dark'] .markdown-preview h5,
html[data-theme='dark'] .markdown-preview h6,
body.dark-mode .markdown-preview h1,
body.dark-mode .markdown-preview h2,
body.dark-mode .markdown-preview h3,
body.dark-mode .markdown-preview h4,
body.dark-mode .markdown-preview h5,
body.dark-mode .markdown-preview h6 {
    color: var(--dm-text);
}

/* Heading anchor links */
html[data-theme='dark'] .heading-anchor,
body.dark-mode .heading-anchor {
    color: var(--dm-text) !important;
}

html[data-theme='dark'] .markdown-preview h1,
html[data-theme='dark'] .markdown-preview h2,
body.dark-mode .markdown-preview h1,
body.dark-mode .markdown-preview h2 {
    border-bottom-color: var(--dm-border);
}

/* Inline code only */
html[data-theme='dark'] .markdown-preview code:not([class*="hljs"]):not([class*="language-"]),
body.dark-mode .markdown-preview code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html[data-theme='dark'] .markdown-preview pre code:not([class*="hljs"]):not([class*="language-"]),
body.dark-mode .markdown-preview pre code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html[data-theme='dark'] .markdown-preview pre,
body.dark-mode .markdown-preview pre {
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .markdown-preview blockquote,
body.dark-mode .markdown-preview blockquote {
    border-left-color: var(--dm-border);
    color: #b0b0b0;
}

/* Tables */
html[data-theme='dark'] .noteentry table,
html[data-theme='dark'] .markdown-preview table,
body.dark-mode .noteentry table,
body.dark-mode .markdown-preview table {
    border-color: var(--dm-border);
}

html[data-theme='dark'] .noteentry table th,
html[data-theme='dark'] .noteentry table td,
html[data-theme='dark'] .markdown-preview table th,
html[data-theme='dark'] .markdown-preview table td,
body.dark-mode .noteentry table th,
body.dark-mode .noteentry table td,
body.dark-mode .markdown-preview table th,
body.dark-mode .markdown-preview table td {
    border-color: var(--dm-border);
    color: var(--dm-text);
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .noteentry table th,
html[data-theme='dark'] .markdown-preview table th,
body.dark-mode .noteentry table th,
body.dark-mode .markdown-preview table th {
    background-color: var(--dm-surface);
    font-weight: bold;
}

html[data-theme='dark'] .noteentry table tr:nth-child(even),
html[data-theme='dark'] .noteentry table tr:nth-child(even) td,
html[data-theme='dark'] .markdown-preview table tr:nth-child(even),
html[data-theme='dark'] .markdown-preview table tr:nth-child(even) td,
body.dark-mode .noteentry table tr:nth-child(even),
body.dark-mode .noteentry table tr:nth-child(even) td,
body.dark-mode .markdown-preview table tr:nth-child(even),
body.dark-mode .markdown-preview table tr:nth-child(even) td {
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .markdown-preview a,
body.dark-mode .markdown-preview a {
    color: var(--dm-accent);
}

html[data-theme='dark'] .markdown-preview hr,
body.dark-mode .markdown-preview hr {
    border-top-color: var(--dm-border);
}

html[data-theme='dark'] .markdown-preview del,
body.dark-mode .markdown-preview del {
    color: #808080;
}

/* Placeholder for empty preview */
html[data-theme='dark'] .markdown-preview-placeholder,
body.dark-mode .markdown-preview-placeholder {
    color: #666;
}

/* Interactive markdown checkbox */
html[data-theme='dark'] .markdown-preview .markdown-task-checkbox,
body.dark-mode .markdown-preview .markdown-task-checkbox {
    accent-color: var(--dm-accent);
}

/* Click-to-navigate hover in split mode */
html[data-theme='dark'] .noteentry.markdown-split-mode .markdown-preview [data-line]:not(.markdown-task-checkbox):not(summary):not(details):hover,
body.dark-mode .noteentry.markdown-split-mode .markdown-preview [data-line]:not(.markdown-task-checkbox):not(summary):not(details):hover {
    background-color: rgba(74, 158, 255, 0.1);
}

html[data-theme='dark'] .noteentry.markdown-split-mode .markdown-editor,
body.dark-mode .noteentry.markdown-split-mode .markdown-editor {
    background-color: transparent !important;
    color: var(--dm-text);
}

html[data-theme='dark'] .markdown-codemirror-host,
body.dark-mode .markdown-codemirror-host {
    --poznote-cm-keyword: #ff7b72;
    --poznote-cm-atom: #79c0ff;
    --poznote-cm-string: #a5d6ff;
    --poznote-cm-number: #79c0ff;
    --poznote-cm-comment: #8b949e;
    --poznote-cm-function: #d2a8ff;
    --poznote-cm-variable: #c9d1d9;
    --poznote-cm-type: #7ee787;
    --poznote-cm-punctuation: #c9d1d9;
    --poznote-cm-meta: #79c0ff;
    --poznote-cm-heading: #79c0ff;
    --poznote-cm-link: #58a6ff;
    --poznote-cm-monospace: #d2a8ff;
    --poznote-cm-invalid: #ffdcd7;
    --poznote-cm-invalid-bg: #67060c;
}

html[data-theme='dark'] .markdown-codemirror-host .cm-editor,
body.dark-mode .markdown-codemirror-host .cm-editor {
    background-color: transparent;
    color: var(--dm-text);
}

html[data-theme='dark'] .markdown-codemirror-host .cm-activeLine,
body.dark-mode .markdown-codemirror-host .cm-activeLine {
    background: rgba(74, 158, 255, 0.12);
}

html[data-theme='dark'] .markdown-codemirror-host .cm-selectionBackground,
html[data-theme='dark'] .markdown-codemirror-host .cm-focused .cm-selectionBackground,
body.dark-mode .markdown-codemirror-host .cm-selectionBackground,
body.dark-mode .markdown-codemirror-host .cm-focused .cm-selectionBackground {
    background: rgba(74, 158, 255, 0.28);
}

html[data-theme='dark'] .markdown-codemirror-host .cm-placeholder,
body.dark-mode .markdown-codemirror-host .cm-placeholder {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .cm-tooltip,
body.dark-mode .cm-tooltip {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme='dark'] .cm-tooltip-autocomplete ul li[aria-selected],
body.dark-mode .cm-tooltip-autocomplete ul li[aria-selected] {
    background: var(--dm-accent);
    color: #fff;
}

/* Checked task item text */
html[data-theme='dark'] .markdown-preview li.task-list-item input[type="checkbox"]:checked+span,
body.dark-mode .markdown-preview li.task-list-item input[type="checkbox"]:checked+span {
    color: #666;
}

/* ============================================
   Colored markdown (display setting)
   ============================================ */

/* The styling rules live in css/markdown.css and read the --mdc-* variables.
   The user's colors are inlined on <body> and win over these, staying
   identical in both themes; the values below are only dark fallbacks. */
html[data-theme='dark'] body.markdown-colored,
body.dark-mode.markdown-colored {
    --mdc-h1: #58a6ff;
    --mdc-h2: #3fb950;
    --mdc-h3: #d2a8ff;
    --mdc-h4: #f778ba;
    --mdc-h5: #39c5cf;
    --mdc-h6: #8b949e;
    --mdc-code: #ffa657;
    --mdc-codeblock: #ffa657;
    --mdc-quote: #58a6ff;
    --mdc-table: #58a6ff;
    --mdc-hr: #58a6ff;
}

/* Re-assert the editor token mapping over the dark CM palette above */
html[data-theme='dark'] body.markdown-colored .markdown-codemirror-host,
body.dark-mode.markdown-colored .markdown-codemirror-host {
    --poznote-cm-heading: var(--mdc-h1);
    --poznote-cm-heading1: var(--mdc-h1);
    --poznote-cm-heading2: var(--mdc-h2);
    --poznote-cm-heading3: var(--mdc-h3);
    --poznote-cm-heading4: var(--mdc-h4);
    --poznote-cm-heading5: var(--mdc-h5);
    --poznote-cm-heading6: var(--mdc-h6);
    --poznote-cm-monospace: var(--mdc-code);
}

/* Code block background tint over the dark surface; !important mirrors the
   light-mode rule in css/markdown.css (see the pre.code-block override) */
html[data-theme='dark'] body.markdown-colored .markdown-preview :is(#poznote-md-colored-boost, pre:not(.indented-pre):not(.mermaid)),
body.dark-mode.markdown-colored .markdown-preview :is(#poznote-md-colored-boost, pre:not(.indented-pre):not(.mermaid)) {
    background: color-mix(in srgb, var(--mdc-codeblock) 10%, var(--dm-surface)) !important;
}

/* ============================================
   Markdown Toolbar Icons
   ============================================ */

/* Keep active toolbar icons with their original colors */
html[data-theme='dark'] .toolbar-btn.save-modified .lucide-save,
body.dark-mode .toolbar-btn.save-modified .lucide-save {
    filter: none !important;
}

html[data-theme='dark'] .toolbar-btn.is-favorite i,
html[data-theme='dark'] .toolbar-btn.is-shared i,
html[data-theme='dark'] .toolbar-btn.has-attachments i,
body.dark-mode .toolbar-btn.is-favorite i,
body.dark-mode .toolbar-btn.is-shared i,
body.dark-mode .toolbar-btn.has-attachments i {
    color: #007DB8 !important;
    filter: none !important;
}

/* Markdown view mode toggle button */
html[data-theme='dark'] .toolbar-btn.markdown-view-mode-btn i,
html[data-theme='dark'] .toolbar-btn.markdown-view-mode-btn [class*="lucide-"],
body.dark-mode .toolbar-btn.markdown-view-mode-btn i,
body.dark-mode .toolbar-btn.markdown-view-mode-btn [class*="lucide-"] {
    color: #007DB8 !important;
    filter: none !important;
}

html[data-theme='dark'] .toolbar-btn.markdown-view-mode-btn:hover i,
html[data-theme='dark'] .toolbar-btn.markdown-view-mode-btn:hover [class*="lucide-"],
body.dark-mode .toolbar-btn.markdown-view-mode-btn:hover i,
body.dark-mode .toolbar-btn.markdown-view-mode-btn:hover [class*="lucide-"] {
    color: #007DB8 !important;
    filter: none !important;
    transform: scale(1.18);
}

/* Markdown toggle icons (legacy support) */
html[data-theme='dark'] .markdown-edit-btn [class*="lucide-"],
html[data-theme='dark'] .markdown-preview-btn [class*="lucide-"],
html[data-theme='dark'] .markdown-view-mode-btn i,
body.dark-mode .markdown-edit-btn [class*="lucide-"],
body.dark-mode .markdown-preview-btn [class*="lucide-"],
body.dark-mode .markdown-view-mode-btn i {
    color: #007DB8 !important;
    filter: none !important;
}

html[data-theme='dark'] .markdown-edit-btn:hover [class*="lucide-"],
html[data-theme='dark'] .markdown-preview-btn:hover [class*="lucide-"],
html[data-theme='dark'] .markdown-view-mode-btn:hover i,
body.dark-mode .markdown-edit-btn:hover [class*="lucide-"],
body.dark-mode .markdown-preview-btn:hover [class*="lucide-"],
body.dark-mode .markdown-view-mode-btn:hover i {
    color: #007DB8 !important;
    filter: none !important;
    transform: scale(1.18);
}

/* Split view button - normal color */
html[data-theme='dark'] .markdown-split-btn:hover i,
body.dark-mode .markdown-split-btn:hover i {
    transform: scale(1.18);
}

/* Markdown help button */
html[data-theme='dark'] .toolbar-btn.markdown-help-btn i,
html[data-theme='dark'] .toolbar-btn.markdown-help-btn [class*="lucide-"],
body.dark-mode .toolbar-btn.markdown-help-btn i,
body.dark-mode .toolbar-btn.markdown-help-btn [class*="lucide-"] {
    color: #007DB8 !important;
    filter: none !important;
}

html[data-theme='dark'] .toolbar-btn.markdown-help-btn:hover i,
html[data-theme='dark'] .toolbar-btn.markdown-help-btn:hover [class*="lucide-"],
body.dark-mode .toolbar-btn.markdown-help-btn:hover i,
body.dark-mode .toolbar-btn.markdown-help-btn:hover [class*="lucide-"] {
    color: #007DB8 !important;
    filter: none !important;
    transform: scale(1.18);
}

/* Markdown split view button - normal color */
html[data-theme='dark'] .toolbar-btn.markdown-split-btn:hover i,
html[data-theme='dark'] .toolbar-btn.markdown-split-btn:hover [class*="lucide-"],
body.dark-mode .toolbar-btn.markdown-split-btn:hover i,
body.dark-mode .toolbar-btn.markdown-split-btn:hover [class*="lucide-"] {
    transform: scale(1.18);
}

/* Slash through icon when active (in split mode) */
html[data-theme='dark'] .toolbar-btn.markdown-split-btn.active::after,
body.dark-mode .toolbar-btn.markdown-split-btn.active::after {
    background-color: #999;
}