/* ============================================
   Dark Mode - Note Editor & Content
   ============================================ */

/* Note card and inner note */
html[data-theme='dark'] .notecard {
    background-color: var(--pz-bg);
}

html[data-theme='dark'] .innernote {
    background-color: var(--pz-bg);
    color: var(--pz-text);
}

/* Note header and toolbar - apply dark background immediately */
html[data-theme='dark'] .note-header {
    background-color: var(--pz-bg) !important;
}

html[data-theme='dark'] .note-edit-toolbar {
    background-color: var(--pz-bg);
}

html[data-theme='dark'] .note-header-spacer {
    background-color: var(--pz-bg);
}

/* Note title */
html[data-theme='dark'] .css-title {
    background-color: var(--pz-bg);
    color: var(--pz-text);
}

/* Note entry content */
html[data-theme='dark'] .noteentry {
    background-color: var(--pz-bg);
    color: var(--pz-text) !important;
}

html[data-theme='dark'] .note-scroll-edge-btn,
html[data-theme='dark'] .pz-edge-btn {
    background: color-mix(in srgb, var(--pz-surface) 96%, transparent);
    border-color: var(--pz-border);
    color: var(--pz-accent-text);
    box-shadow: 0 5px 14px rgba(var(--pz-shadow-rgb), 0.26);
}

/* The floating stack buttons only take the accent on hover */
html[data-theme='dark'] .pz-edge-btn {
    color: var(--pz-text-muted);
}

html[data-theme='dark'] .pz-edge-btn:hover,
html[data-theme='dark'] .pz-edge-btn:focus {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .note-scroll-edge-btn:hover,
html[data-theme='dark'] .note-scroll-edge-btn:focus,
html[data-theme='dark'] .pz-edge-btn:hover,
html[data-theme='dark'] .pz-edge-btn:focus {
    background: var(--pz-surface-hover);
}

/* Readable text colors: preserve inline color styles, links, syntax highlighting
   and Mermaid labels (js/mermaid-theme.js picks those against their fill).
   Inline formatting inside a coloured run is left alone too: bolding part of a
   coloured span nests a style-less <b> in it, which has to inherit that colour
   instead of being painted back to the default text colour (#1401). */
html[data-theme='dark'] .noteentry *:not([style*="color"]):not(:is(b, strong, i, em, u, s, strike, del, ins, sub, sup, small, span, font):is([style*="color"] *)):not(a):not([class*="hljs"]):not(code[class*="language-"]):not(.code-line):not(.search-highlight):not(.search-highlight-active):not([class^="md-"]):not([class*=" md-"]):not(.markdown-codemirror-host *):not(.mermaid *) {
    color: var(--pz-text) !important;
}

/* Note placeholder */
html[data-theme='dark'] div[contentEditable=true]:empty:before {
    color: var(--pz-border-strong);
}

/* ============================================
   Code Blocks
   ============================================ */

/* Pre blocks and code-block class */
html[data-theme='dark'] .noteentry pre,
html[data-theme='dark'] .code-block,
html[data-theme='dark'] pre.code-block {
    background-color: var(--pz-code-bg) !important;
    border-color: var(--pz-border) !important;
    color: var(--pz-text-muted) !important;
}

/* Line-number gutter (code_block_line_numbers setting) */
html[data-theme='dark'] .noteentry pre code.code-line-numbers .code-line::before {
    color: var(--pz-text-muted);
    opacity: 0.55;
}

/* Highlighted text inside a code block is left to the colour the picker wrote,
   like anywhere else in the note. The palette's soft tokens are mixed against
   the page background, so they are already dark here; the legacy pastel
   highlights below get their text colour fixed by the rules further down.
   The fixed yellow gradient this rule used to paint turned every colour yellow
   and stayed visible after a highlight was removed (#1425). */

/* Inline code only (not inside pre blocks with syntax highlighting) */
html[data-theme='dark'] .noteentry code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: var(--pz-surface) !important;
    color: var(--pz-text);
    border-color: var(--pz-border) !important;
}

html[data-theme='dark'] .noteentry pre code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: transparent !important;
    color: var(--pz-text-muted) !important;
    border-color: transparent !important;
}

/* Code blocks with language class - readable text before highlight.js processes */
html[data-theme='dark'] .noteentry pre code[class*="language-"],
html[data-theme='dark'] .noteentry code[class*="language-"] {
    color: var(--pz-text-muted) !important;
}

/* Code block and Excalidraw placeholders */
html[data-theme='dark'] p.code-block-placeholder-before[data-ph]:empty:before,
html[data-theme='dark'] p.code-block-placeholder-after[data-ph]:empty:before,
html[data-theme='dark'] .excalidraw-placeholder[data-ph]:empty:before {
    opacity: 0.6;
}

/* Code block copy button */
html[data-theme='dark'] .code-block-copy-btn,
html[data-theme='dark'] pre.code-block .code-block-copy-btn,
html[data-theme='dark'] .noteentry pre .code-block-copy-btn,
html[data-theme='dark'] .public-note .content pre .code-block-copy-btn,
html[data-theme='dark'] .code-block-actions-host > .code-block-copy-btn,
html[data-theme='dark'] .code-block-actions-host > .code-block-delete-btn,
html[data-theme='dark'] .code-block-line-numbers-btn,
html[data-theme='dark'] .noteentry pre .code-block-line-numbers-btn,
html[data-theme='dark'] .code-block-actions-host > .code-block-line-numbers-btn {
    background: transparent !important;
    border: none !important;
    opacity: 0.55 !important;
}

html[data-theme='dark'] .code-block-copy-btn svg,
html[data-theme='dark'] .code-block-delete-btn svg,
html[data-theme='dark'] .code-block-line-numbers-btn svg {
    stroke: currentColor !important;
}

html[data-theme='dark'] .code-block-delete-btn,
html[data-theme='dark'] pre.code-block .code-block-delete-btn,
html[data-theme='dark'] .noteentry pre .code-block-delete-btn,
html[data-theme='dark'] .public-note .content pre .code-block-delete-btn,
html[data-theme='dark'] .code-block-actions-host > .code-block-delete-btn {
    color: var(--pz-danger-text) !important;
}

html[data-theme='dark'] .code-block-copy-btn:hover,
html[data-theme='dark'] pre.code-block .code-block-copy-btn:hover,
html[data-theme='dark'] .noteentry pre .code-block-copy-btn:hover,
html[data-theme='dark'] .public-note .content pre .code-block-copy-btn:hover,
html[data-theme='dark'] .code-block-actions-host > .code-block-copy-btn:hover,
html[data-theme='dark'] .code-block-actions-host > .code-block-delete-btn:hover,
html[data-theme='dark'] .code-block-line-numbers-btn:hover,
html[data-theme='dark'] .code-block-actions-host > .code-block-line-numbers-btn:hover {
    background: transparent !important;
    color: var(--pz-text-strong) !important;
    opacity: 1 !important;
}

html[data-theme='dark'] .code-block-delete-btn:hover,
html[data-theme='dark'] pre.code-block .code-block-delete-btn:hover,
html[data-theme='dark'] .noteentry pre .code-block-delete-btn:hover,
html[data-theme='dark'] .public-note .content pre .code-block-delete-btn:hover,
html[data-theme='dark'] .code-block-actions-host > .code-block-delete-btn:hover {
    color: var(--pz-danger-text) !important;
}

html[data-theme='dark'] .code-block-copy-btn.copied,
html[data-theme='dark'] pre.code-block .code-block-copy-btn.copied,
html[data-theme='dark'] .noteentry pre .code-block-copy-btn.copied {
    background: transparent !important;
    color: var(--pz-success-text-hover) !important;
    border: none !important;
    opacity: 1 !important;
}

/* ============================================
   Links in Notes
   ============================================ */

html[data-theme='dark'] .noteentry a {
    color: var(--pz-accent-text-hover) !important;
}

/* Audio player */
html[data-theme='dark'] .noteentry .note-audio-embed,
html[data-theme='dark'] .noteentry audio {
    background: var(--pz-surface);
}

html[data-theme='dark'] .note-attachment-preview {
    border-color: var(--pz-border);
    background: var(--pz-surface);
}

html[data-theme='dark'] .note-attachment-preview-file-card:hover,
html[data-theme='dark'] .note-attachment-preview-file-card:focus {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .note-attachment-preview-caption {
    border-top-color: var(--pz-border);
}

html[data-theme='dark'] .note-attachment-preview-caption a:hover,
html[data-theme='dark'] .note-attachment-preview-caption a:focus {
    color: var(--pz-accent-text) !important;
}

/* ============================================
   Highlighting
   ============================================
   Selected text is themed once for both modes, through --pz-selection and the
   global rule in css/components/selection.css. */

/* Search highlights */
:where(html[data-theme='dark']) mark,
html[data-theme='dark'] .highlight {
    background-color: var(--pz-warning-soft);
    color: var(--pz-warning-text);
}

/* Highlighting inside code blocks (search/highlight marks, not syntax) */
:where(html[data-theme='dark']) pre mark[style*="background"],
:where(html[data-theme='dark']) code mark[style*="background"],
html[data-theme='dark'] .code-block mark[style*="background"] {
    background-color: var(--pz-warning-soft) !important;
    background-image: none !important;
    color: var(--pz-warning-text) !important;
}

/* Yellow highlighter tool */
:where(html[data-theme='dark']) [style*="background-color: rgb(255, 224, 102)"],
html[data-theme='dark'] [style*="background-color:#ffe066"],
html[data-theme='dark'] [style*="background-color: #ffe066"] {
    background-color: var(--pz-warning-soft) !important;
    color: var(--pz-warning-text) !important;
}

/* Highlighter tool — other colors.
   The picker applies light pastel backgrounds; in dark mode the note text is
   light, so force dark text on those spans to keep the highlighted text
   readable while preserving the chosen highlight color. */
html[data-theme='dark'] .noteentry [style*="background-color: rgb(255, 168, 168)"],
html[data-theme='dark'] .noteentry [style*="background-color:#ffa8a8"],
html[data-theme='dark'] .noteentry [style*="background-color: #ffa8a8"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(178, 242, 187)"],
html[data-theme='dark'] .noteentry [style*="background-color:#b2f2bb"],
html[data-theme='dark'] .noteentry [style*="background-color: #b2f2bb"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(165, 216, 255)"],
html[data-theme='dark'] .noteentry [style*="background-color:#a5d8ff"],
html[data-theme='dark'] .noteentry [style*="background-color: #a5d8ff"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(255, 201, 222)"],
html[data-theme='dark'] .noteentry [style*="background-color:#ffc9de"],
html[data-theme='dark'] .noteentry [style*="background-color: #ffc9de"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(255, 216, 168)"],
html[data-theme='dark'] .noteentry [style*="background-color:#ffd8a8"],
html[data-theme='dark'] .noteentry [style*="background-color: #ffd8a8"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(208, 191, 255)"],
html[data-theme='dark'] .noteentry [style*="background-color:#d0bfff"],
html[data-theme='dark'] .noteentry [style*="background-color: #d0bfff"],
html[data-theme='dark'] .noteentry [style*="background-color: rgb(222, 226, 230)"],
html[data-theme='dark'] .noteentry [style*="background-color:#dee2e6"],
html[data-theme='dark'] .noteentry [style*="background-color: #dee2e6"] {
    color: var(--pz-bg) !important;
}

/* Horizontal rules */
:where(html[data-theme='dark']) hr {
    border-color: var(--pz-border);
}

/* ============================================
   Toolbar Buttons
   ============================================ */

html[data-theme='dark'] .toolbar-btn {
    background-color: var(--pz-surface);
    color: var(--pz-text);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .toolbar-btn:hover {
    background-color: var(--pz-surface-hover);
}

/* ============================================
   Toolbar Popups & Menus
   ============================================ */

/* Color palette popup */
html[data-theme='dark'] .color-palette-popup {
    background-color: var(--pz-surface);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .color-palette-popup .color-grid {
    background: var(--pz-surface);
}

/* Outline swatches so dark ones (e.g. the black text color) stay visible
   against the dark popup background. */
html[data-theme='dark'] .color-palette-popup .color-swatch {
    border: 1px solid rgba(var(--pz-highlight-rgb), 0.35);
}

/* Font size popup */
html[data-theme='dark'] .font-size-popup {
    background-color: var(--pz-bg);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .font-size-popup .font-size-item:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.1);
}

html[data-theme='dark'] .font-size-popup .size-preview {
    border-color: var(--pz-border);
    background-color: var(--pz-bg);
}

/* Image resize handle */
html[data-theme='dark'] .image-resize-handle {
    background: var(--pz-accent);
    border-color: var(--pz-surface);
}

html[data-theme='dark'] .image-resize-handle:hover {
    background: var(--pz-accent-text);
}

/* Blockquotes */
html[data-theme='dark'] .noteentry blockquote {
    border-left-color: var(--pz-border);
    color: var(--pz-text);
}