/* ========================================================================
   HLJS CODE SYNTAX HIGHLIGHTING - BRUTAL IO THEME
   Theme-aware across all 22 themes using IO Design System variables
   Works on both light and dark themes
   ======================================================================== */

/* Base code block */
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0;
    background: transparent;
    color: var(--io-text-secondary); /* Slightly dimmed for unclassified identifiers */
}

/* Comments */
.hljs-comment,
.hljs-quote {
    color: var(--io-text-tertiary);
    font-style: italic;
}

/* Keywords */
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: var(--io-accent);
    font-weight: 600;
}

/* Strings */
.hljs-string,
.hljs-doctag,
.hljs-char {
    color: var(--io-success);
}

/* Numbers */
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable {
    color: var(--io-warning);
}

/* Functions */
.hljs-function,
.hljs-title,
.hljs-title.function_,
.hljs-builtin-name {
    color: var(--io-info);
}

/* Types & Classes */
.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_ {
    color: var(--io-accent-bright);
}

/* Built-in types and constants */
.hljs-built_in {
    color: var(--io-info);
}

/* Attributes (unified - no duplicates) */
.hljs-attr,
.hljs-attribute {
    color: var(--io-accent-bright);
}

/* Properties */
.hljs-property {
    color: var(--io-accent-bright);
}

/* Operators */
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: var(--io-text-secondary);
}

/* Tags (HTML/XML) */
.hljs-tag,
.hljs-name {
    color: var(--io-accent);
}

/* Punctuation */
.hljs-punctuation {
    color: var(--io-text-secondary);
}

/* Meta (preprocessor directives) */
.hljs-meta,
.hljs-meta-keyword {
    color: var(--io-text-tertiary);
}

/* Symbols */
.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: var(--io-info);
}

/* Code blocks */
.hljs-code {
    color: var(--io-text-primary);
    background: var(--io-surface-sunken);
}

/* Math formulas */
.hljs-formula {
    color: var(--io-warning);
    font-style: italic;
}

/* Deletions (diffs) */
.hljs-deletion {
    color: var(--io-error);
    background: var(--io-error-subtle);
}

/* Additions (diffs) */
.hljs-addition {
    color: var(--io-success);
    background: var(--io-success-subtle);
}

/* Regex */
.hljs-regexp,
.hljs-selector-id,
.hljs-selector-class {
    color: var(--io-success);
}

/* Emphasis */
.hljs-emphasis {
    font-style: italic;
}

/* Strong */
.hljs-strong {
    font-weight: 700;
}

/* Section headers */
.hljs-section {
    color: var(--io-accent);
    font-weight: 700;
}

/* Template strings */
.hljs-template-tag {
    color: var(--io-warning);
}

/* Parameters */
.hljs-params {
    color: var(--io-text-secondary);
}

/* ========================================================================
   LANGUAGE-SPECIFIC OVERRIDES
   ======================================================================== */

/* JavaScript */
.language-javascript .hljs-keyword {
    color: var(--io-accent);
}

.language-javascript .hljs-function,
.language-javascript .hljs-title.function_ {
    color: var(--io-info);
}

/* C# */
.language-csharp .hljs-keyword {
    color: var(--io-accent);
}

.language-csharp .hljs-built_in,
.language-csharp .hljs-type {
    color: var(--io-accent-bright);
}

.language-csharp .hljs-title.class_ {
    color: var(--io-accent-bright);
    font-weight: 600;
}

.language-csharp .hljs-title {
    color: var(--io-info);
}

.language-csharp .hljs-variable {
    color: var(--io-text-primary);
}

.language-csharp .hljs-params {
    color: var(--io-text-secondary);
}

/* Python */
.language-python .hljs-keyword {
    color: var(--io-accent);
}

.language-python .hljs-built_in {
    color: var(--io-info);
}

.language-python .hljs-title.function_ {
    color: var(--io-info);
}

/* SQL */
.language-sql .hljs-keyword {
    color: var(--io-accent);
}

.language-sql .hljs-built_in {
    color: var(--io-info);
}

/* JSON */
.language-json .hljs-attr {
    color: var(--io-info);
}

.language-json .hljs-string {
    color: var(--io-success);
}

/* CSS */
.language-css .hljs-selector-tag {
    color: var(--io-accent);
}

.language-css .hljs-attribute,
.language-css .hljs-attr {
    color: var(--io-info);
}

.language-css .hljs-built_in {
    color: var(--io-accent-bright);
}

/* TypeScript */
.language-typescript .hljs-keyword {
    color: var(--io-accent);
}

.language-typescript .hljs-type,
.language-typescript .hljs-title.class_ {
    color: var(--io-accent-bright);
}

.language-typescript .hljs-built_in {
    color: var(--io-info);
}

/* Inline code override */
code.cb-inline-code .hljs {
    padding: 0;
    background: transparent;
}

/* ========================================================================
   PRISM SYNTAX HIGHLIGHTING - BRUTAL IO THEME
   Clean, no font overrides, no blur, pure IO Design System
   ======================================================================== */

/* Base code blocks - NO FONT OVERRIDE, NO BLUR */
code[class*="language-"],
pre[class*="language-"] {
    color: var(--io-text-secondary);
    background: transparent;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Pre blocks - NO borders, shadows, or background overrides */
pre[class*="language-"] {
    margin: 0;
    padding: 0;
    overflow: auto;
}

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

/* Inline code - NO borders or backgrounds */
:not(pre) > code[class*="language-"] {
    padding: 0;
    white-space: normal;
    background: transparent;
}

/* ========================================================================
   TOKEN COLORS - IO Design System
   ======================================================================== */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--io-text-tertiary);
    font-style: italic;
}

/* Punctuation */
.token.punctuation {
    color: var(--io-text-secondary);
    opacity: 0.7;
}

/* Namespace */
.token.namespace {
    opacity: 0.7;
}

/* Keywords */
.token.keyword,
.token.selector,
.token.important,
.token.atrule {
    color: var(--io-accent);
    font-weight: 600;
}

/* Boolean, Numbers, Tags */
.token.boolean,
.token.number,
.token.tag,
.token.deleted {
    color: var(--io-accent);
}

/* Built-in, Constants, Properties, Symbols */
.token.builtin,
.token.constant,
.token.property,
.token.selector,
.token.symbol {
    color: var(--io-accent-bright);
}

/* Strings, Characters, Entities */
.language-css .token.string,
.style .token.string,
.token.attr-name,
.token.attr-value,
.token.char,
.token.entity,
.token.inserted,
.token.operator,
.token.string,
.token.url,
.token.variable {
    color: var(--io-success);
}

/* At-rules */
.token.atrule {
    color: var(--io-accent);
}

/* Important, Regex */
.token.important,
.token.regex {
    color: var(--io-warning);
}

/* Bold, Important */
.token.bold,
.token.important {
    font-weight: 700;
}

/* Italic */
.token.italic {
    font-style: italic;
}

/* Entity cursor */
.token.entity {
    cursor: help;
}

/* Markup-specific */
.language-markup .token.attr-name,
.language-markup .token.punctuation,
.language-markup .token.tag {
    color: var(--io-accent);
}

/* Token positioning */
.token {
    position: relative;
    z-index: 1;
}

/* ========================================================================
   LANGUAGE-SPECIFIC OVERRIDES
   ======================================================================== */

/* C# */
.language-csharp .token.keyword {
    color: var(--io-accent);
}

.language-csharp .token.class-name,
.language-csharp .token.type-name {
    color: var(--io-accent-bright);
    font-weight: 600;
}

.language-csharp .token.function {
    color: var(--io-info);
}

.language-csharp .token.property {
    color: var(--io-accent-bright);
}

/* Rust */
.language-rust .token.keyword {
    color: var(--io-accent);
}

.language-rust .token.type-name,
.language-rust .token.class-name {
    color: var(--io-accent-bright);
}

.language-rust .token.function {
    color: var(--io-info);
}

.language-rust .token.macro {
    color: var(--io-warning);
}

/* JavaScript */
.language-javascript .token.keyword {
    color: var(--io-accent);
}

.language-javascript .token.function {
    color: var(--io-info);
}

/* TypeScript */
.language-typescript .token.keyword {
    color: var(--io-accent);
}

.language-typescript .token.type-name,
.language-typescript .token.class-name {
    color: var(--io-accent-bright);
}

/* Python */
.language-python .token.keyword {
    color: var(--io-accent);
}

.language-python .token.function {
    color: var(--io-info);
}

.language-python .token.decorator {
    color: var(--io-warning);
}

/* SQL */
.language-sql .token.keyword {
    color: var(--io-accent);
}

.language-sql .token.function {
    color: var(--io-info);
}

/* JSON */
.language-json .token.property {
    color: var(--io-info);
}

.language-json .token.string {
    color: var(--io-success);
}

/* CSS */
.language-css .token.selector {
    color: var(--io-accent);
}

.language-css .token.property {
    color: var(--io-info);
}

.language-css .token.function {
    color: var(--io-accent-bright);
}

/* ========================================================================
   DIFF HIGHLIGHTING
   ======================================================================== */

.token.deleted:not(.prefix) {
    background-color: var(--io-error-subtle);
    color: var(--io-error);
}

.token.inserted:not(.prefix) {
    background-color: var(--io-success-subtle);
    color: var(--io-success);
}

/* ========================================================================
   LINE NUMBERS (if plugin enabled)
   ======================================================================== */

pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
    line-height: 1rem!important;
}

pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid var(--io-border-subtle);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: var(--io-text-tertiary);
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* ========================================================================
   LINE HIGHLIGHTING (if plugin enabled)
   ======================================================================== */

.line-highlight.line-highlight {
    background: var(--io-accent-subtle);
    border-bottom: 1px solid var(--io-border-subtle);
    border-top: 1px solid var(--io-border-subtle);
    margin-top: 0.75em;
    z-index: 0;
}

.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
    background-color: var(--io-accent);
    color: var(--io-on-accent);
}

/* ========================================================================
   PRISM PLUGINS - BRUTAL IO THEME
   Only structural CSS, no hardcoded colors
   ======================================================================== */

/* ====================================================================
   LINE NUMBERS PLUGIN
   ==================================================================== */

pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: inherit;
    line-height: 1.5rem!important;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid var(--io-border-subtle);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: var(--io-text-tertiary);
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* ====================================================================
   COMMAND LINE PLUGIN
   ==================================================================== */

.command-line-prompt {
    border-right: 1px solid var(--io-border-subtle);
    display: block;
    float: left;
    font-size: 100%;
    letter-spacing: -1px;
    margin-right: 1em;
    pointer-events: none;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.command-line-prompt > span:before {
    opacity: 0.7;
    content: ' ';
    display: block;
    padding-right: 0.8em;
    color: var(--io-text-tertiary);
}

.command-line-prompt > span[data-user]:before {
    content: "[" attr(data-user) "@" attr(data-host) "] $";
}

.command-line-prompt > span[data-user=root]:before {
    content: "[" attr(data-user) "@" attr(data-host) "] #";
}

.command-line-prompt > span[data-prompt]:before {
    content: attr(data-prompt);
}

.command-line-prompt > span[data-continuation-prompt]:before {
    content: attr(data-continuation-prompt);
}

.command-line span.token.output {
    opacity: 0.7;
}

/* ====================================================================
   TOOLBAR PLUGIN (if you want to use it)
   ==================================================================== */

div.code-toolbar {
    position: relative;
}

div.code-toolbar > .toolbar {
    position: absolute;
    z-index: 10;
    top: 0.3em;
    right: 0.2em;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1;
}

div.code-toolbar:focus-within > .toolbar {
    opacity: 1;
}

div.code-toolbar > .toolbar > .toolbar-item {
    display: inline-block;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
    color: var(--io-text-secondary);
    font-size: 0.8em;
    padding: 0 0.5em;
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius-sm);
    cursor: pointer;
    margin-right: 50px;
    pointer-events: none;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none!important;
}

div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
    color: var(--io-accent);
    text-decoration: none;
}

/* ====================================================================
   MATCH BRACES PLUGIN
   ==================================================================== */

.token.punctuation.brace-hover,
.token.punctuation.brace-selected {
    outline: solid 1px var(--io-accent);
}

/* Optional: Rainbow braces */
.rainbow-braces .token.punctuation.brace-level-1,
.rainbow-braces .token.punctuation.brace-level-5,
.rainbow-braces .token.punctuation.brace-level-9 {
    color: var(--io-error);
    opacity: 1;
}

.rainbow-braces .token.punctuation.brace-level-2,
.rainbow-braces .token.punctuation.brace-level-6,
.rainbow-braces .token.punctuation.brace-level-10 {
    color: var(--io-success);
    opacity: 1;
}

.rainbow-braces .token.punctuation.brace-level-3,
.rainbow-braces .token.punctuation.brace-level-7,
.rainbow-braces .token.punctuation.brace-level-11 {
    color: var(--io-info);
    opacity: 1;
}

.rainbow-braces .token.punctuation.brace-level-4,
.rainbow-braces .token.punctuation.brace-level-8,
.rainbow-braces .token.punctuation.brace-level-12 {
    color: var(--io-warning);
    opacity: 1;
}

/* ====================================================================
   SHOW LANGUAGE PLUGIN
   ==================================================================== */

/* Language label appears automatically - no CSS needed! */
/* It uses data-language attribute and plugin handles it */

/* Your copy button - top right */
.codex-code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100;
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    color: var(--io-text-secondary);
    padding: 6px 12px;
    border-radius: var(--io-radius-sm);
    cursor: pointer;
    transition: all var(--io-transition-base);
}

.codex-code-copy-btn:hover {
    background: var(--io-accent);
    color: var(--io-on-accent);
    border-color: var(--io-accent);
}

/* Show-language label - top LEFT or bottom right */
pre[class*="language-"][data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 8px;
    left: 8px; /* Move to LEFT side */
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    color: var(--io-text-tertiary);
    padding: 4px 8px;
    border-radius: var(--io-radius-sm);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 99;
}

/* Make sure pre is positioned */
pre[class*="language-"] {
    position: relative;
}