/* Prism Custom Theme - Near Black, Modern (shared across all features) */
/* Loads after CDN prism-tomorrow.css to override it */
:root {
    --code-bg: #000000; /* Force true black */
    --code-panel: #000000; /* Force true black panel */
    --code-border: #1a212e;
    --code-text: #e6eaf2;
    --code-subtle: #a0a6b2;
    --code-selection: rgba(
        255,
        255,
        255,
        0.12
    ); /* neutral selection for code */
    --code-line-highlight: rgba(255, 255, 255, 0.06);
    --code-line-number: #4a5366;
    --code-line-number-bg: #000000;
    --code-accent: #4da3ff;
    --code-line-height: 1.55; /* Unified code line height */
    /* Token colors (Night Owl / modern blend) */
    --code-comment: #5c6773;
    --code-punctuation: #b3b9c5;
    --code-operator: #b3b9c5;
    --code-keyword: #c792ea;
    --code-string: #c3e88d;
    --code-number: #ffcb6b;
    --code-boolean: #ffcb6b;
    --code-function: #82aaff;
    --code-class: #f78c6c;
    --code-variable: #f78c6c;
    --code-constant: #ffcb6b;
    --code-attr-name: #addb67;
    --code-attr-value: #c3e88d;
    --code-tag: #e2777a;
    --code-selector: #a1e8ff;
}

/* Selection */
pre[class*="language-"] ::selection,
code[class*="language-"] ::selection,
pre[class*="language-"]::selection,
code[class*="language-"]::selection {
    background: var(--code-selection);
}

/* Token styles */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--code-comment);
}
.token.punctuation {
    color: var(--code-punctuation);
}
.token.operator {
    color: var(--code-operator);
}
.token.property {
    color: var(--code-attr-name);
}
.token.tag {
    color: var(--code-tag);
}
.token.boolean {
    color: var(--code-boolean);
}
.token.number {
    color: var(--code-number);
}
.token.constant {
    color: var(--code-constant);
}
.token.selector {
    color: var(--code-selector);
}
.token.attr-name {
    color: var(--code-attr-name);
}
.token.attr-value {
    color: var(--code-attr-value);
}
.token.string {
    color: var(--code-string);
}
.token.char {
    color: var(--code-string);
}
.token.builtin {
    color: var(--code-class);
}
.token.inserted {
    color: var(--code-string);
}
.token.deleted {
    color: #ef4444;
}
.token.keyword {
    color: var(--code-keyword);
}
.token.regex {
    color: #ecc48d;
}
.token.variable {
    color: var(--code-variable);
}
.token.function {
    color: var(--code-function);
}
.token.class-name {
    color: var(--code-class);
}

/* Base pre rules: positioning and readable font size */
pre[class*="language-"] {
    max-height: calc(30 * 1.5em);
    overflow: auto;
    font-family: var(
        --font-mono,
        "Roboto Mono",
        ui-monospace,
        SFMono-Regular,
        Consolas,
        Menlo,
        monospace
    ) !important;
    font-size: 14px !important; /* enforce readable size */
    position: relative !important; /* anchor for overlay controls */
    padding-top: 15px !important; /* space for language badge without extra gutter */
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
    border: 1px solid var(--code-border) !important;
    border-radius: 8px !important;
    white-space: pre !important; /* keep original whitespace and line breaks */
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Enforce compact line-height for all code blocks and inline Prism code in Work Item Manager */
pre[class*="language-"],
pre[class*="language-"] code,
code[class*="language-"] {
    line-height: var(--code-line-height) !important;
    font-size: 14px !important; /* ensure consistent size inside code */
}

/* Ensure any nested spans/elements from Prism or pastes inherit baseline sizes */
/* Keep line-height tight for nested elements; avoid forcing font-size which can harm token styling */
pre[class*="language-"] *,
code[class*="language-"] * {
    line-height: inherit !important;
}

/* Also apply to any plain <pre> used in content areas without a language class */
.content-area pre,
.page-content-scope pre {
    line-height: var(--code-line-height) !important;
}
.content-area pre *,
.page-content-scope pre * {
    line-height: inherit !important;
}

/* Ensure nested code element fills container and inherits whitespace */
body.feature-workitemmanager
    pre[class*="language-"]
    > code[class*="language-"] {
    display: block !important;
    white-space: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* Fallback styling when Prism JS doesn’t apply tokens (e.g., plaintext) */
pre.language-plaintext,
code.language-plaintext,
pre[class*="language-"] .language-plaintext,
code[class*="language-"] .language-plaintext {
    color: var(--code-text) !important;
}

/* Generic pre/code fallback if no language class is present */
pre:not([class*="language-"]),
code:not([class*="language-"]) {
    font-family: var(
        --font-mono,
        "Roboto Mono",
        ui-monospace,
        SFMono-Regular,
        Consolas,
        Menlo,
        monospace
    ) !important;
    font-size: 14px !important;
    line-height: var(--code-line-height) !important;
}

/* Ensure proper token highlighting */
.token {
    background: transparent !important;
}

/* In preview mode, keep scrolling and text selection enabled */
.content-area.preview-mode pre[class*="language-"],
body.feature-workitemmanager
    .content-area.preview-mode
    pre[class*="language-"]
    *,
body.feature-workitemmanager
    .content-area.preview-mode
    code[class*="language-"] {
    cursor: default !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Allow copy button in preview mode */
body.feature-workitemmanager
    .content-area.preview-mode
    pre[class*="language-"]
    .code-copy-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Top-right controls: copy button and language badge */
/* Copy button and language badge consistent with pages feature */
pre .code-copy-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: var(--code-panel) !important;
    border: 1px solid var(--code-border) !important;
    color: var(--code-text) !important;
    padding: 0 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
    z-index: 10 !important;
    line-height: 1 !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
pre .code-copy-btn svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
pre .code-copy-btn:hover {
    opacity: 1 !important;
    background: var(--code-accent) !important;
    border-color: var(--code-accent) !important;
}
pre .code-copy-btn.copied {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
/* Language badge CSS removed - labels not needed inside code blocks */

/* Ensure general code blocks have enough vertical padding to clear badges/buttons */
pre[class*="language-"],
.content-area pre,
.page-content-scope pre {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Language selector (edit mode) styling for consistency */
pre select.language-selector {
    position: absolute !important;
    top: 6px !important;
    right: 40px !important; /* leave space for copy button */
    background: rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
    border: 1px solid var(--code-border) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    z-index: 12 !important;
    cursor: pointer !important;
}

/* Scrollbar for code blocks */
pre[class*="language-"]::-webkit-scrollbar {
    height: 10px;
}
pre[class*="language-"]::-webkit-scrollbar-thumb {
    background: #1f2633;
    border-radius: 8px;
}

/* Hide any line-highlight overlays */
.prism-line-highlight {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove any per-character backgrounds/borders/shadows inside code */
pre[class*="language-"] .token {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

pre[class*="language-"] span {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Focus handling */
pre[class*="language-"] *:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

pre[class*="language-"]:focus,
pre[class*="language-"]:focus-within {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}