/* Ahur Lab - Code Highlighting Styles */
/* Enhanced syntax highlighting with proper layout fixes */

/* CSS Variables for Code Colors */
:root {
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
    --code-border: #334155;
    --code-selection: rgba(139, 92, 246, 0.3);
    --code-line-number: #64748b;
    --code-copy-btn-bg: #475569;
    --code-copy-btn-hover: #6366f1;

    /* Syntax highlighting colors - Light theme */
    --syntax-comment: #6a737d;
    --syntax-keyword: #d73a49;
    --syntax-string: #032f62;
    --syntax-number: #005cc5;
    --syntax-function: #6f42c1;
    --syntax-variable: #e36209;
    --syntax-class: #22863a;
    --syntax-operator: #005cc5;
    --syntax-punctuation: #24292e;
    --syntax-tag: #22863a;
    --syntax-attribute: #22863a;
    --syntax-selector: #6f42c1;
    --syntax-property: #005cc5;
    --syntax-value: #032f62;
}

[data-theme="dark"] {
    --code-bg: #0f172a;
    --code-text: #f1f5f9;
    --code-border: #1e293b;
    --code-copy-btn-bg: #1e293b;

    /* Syntax highlighting colors - Dark theme */
    --syntax-comment: #8b949e;
    --syntax-keyword: #ff7b72;
    --syntax-string: #a5d6ff;
    --syntax-number: #79c0ff;
    --syntax-function: #d2a8ff;
    --syntax-variable: #ffa657;
    --syntax-class: #7ee83f;
    --syntax-operator: #79c0ff;
    --syntax-punctuation: #c9d1d9;
    --syntax-tag: #7ee83f;
    --syntax-attribute: #7ee83f;
    --syntax-selector: #d2a8ff;
    --syntax-property: #79c0ff;
    --syntax-value: #a5d6ff;
}

/* Base Code Block Styles */
pre {
    position: relative;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 8px;
    margin: 1.5rem 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

pre code {
    display: block;
    background: transparent;
    color: var(--code-text);
    padding: 1rem;
    overflow-x: auto;
    font-family:
        "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    tab-size: 4;
    -moz-tab-size: 4;
    direction: ltr !important;
    text-align: left !important;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    hyphens: none;
}

/* Inline Code */
code:not(pre code) {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: "Fira Code", "Cascadia Code", monospace;
    font-size: 0.875em;
    white-space: nowrap;
    word-break: keep-all;
}

/* Fix for RTL layout issues with code blocks */
.post-content pre {
    direction: ltr !important;
    text-align: left !important;
}

/* Language Label */
pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom-left-radius: 4px;
    z-index: 1;
}

/* Copy Button */
.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--code-copy-btn-bg);
    color: var(--text-primary);
    border: 1px solid var(--code-border);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: var(--code-copy-btn-hover);
    color: white;
}

.code-copy-btn.copied {
    background: var(--success);
    color: white;
}

/* Line Numbers */
pre.line-numbers {
    counter-reset: linenumber;
}

pre.line-numbers code {
    position: relative;
    padding-left: 3.5rem;
}

pre.line-numbers code .line {
    position: relative;
    display: block;
    counter-increment: linenumber;
}

pre.line-numbers code .line::before {
    content: counter(linenumber);
    position: absolute;
    left: -3rem;
    width: 2rem;
    text-align: right;
    color: var(--code-line-number);
    font-size: 0.75rem;
    user-select: none;
}

/* Syntax Highlighting - Prism Token Classes */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--syntax-comment);
    font-style: italic;
}

.token.punctuation {
    color: var(--syntax-punctuation);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
    color: var(--syntax-number);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--syntax-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: var(--syntax-operator);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: var(--syntax-keyword);
}

.token.function {
    color: var(--syntax-function);
}

.token.class-name {
    color: var(--syntax-class);
}

.token.regex,
.token.important,
.token.variable {
    color: var(--syntax-variable);
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

.token.deleted {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.token.inserted {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

/* Selection in code blocks */
pre code::selection,
pre code *::selection {
    background: var(--code-selection);
}

/* Scrollbar Styling */
pre::-webkit-scrollbar {
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: var(--code-bg);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: var(--code-border);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Firefox Scrollbar */
pre {
    scrollbar-width: thin;
    scrollbar-color: var(--code-border) var(--code-bg);
}

/* Code Block Container Fix */
.post-content {
    overflow-x: hidden;
}

.post-content pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Terminal/Console Styling */
.terminal,
.console,
pre.bash,
pre.shell {
    background: #1a1a1a;
    color: #00ff00;
    position: relative;
}

[data-theme="dark"] .terminal,
[data-theme="dark"] .console,
[data-theme="dark"] pre.bash,
[data-theme="dark"] pre.shell {
    background: #0a0a0a;
}

.terminal::before,
.console::before {
    content: "$ ";
    color: #00ff00;
    font-weight: bold;
}

/* Language-specific colors */
pre[data-language="javascript"]::before,
pre.language-javascript::before {
    background: #f7df1e;
    color: #000;
}

pre[data-language="typescript"]::before,
pre.language-typescript::before {
    background: #3178c6;
}

pre[data-language="python"]::before,
pre.language-python::before {
    background: #3776ab;
}

pre[data-language="php"]::before,
pre.language-php::before {
    background: #777bb4;
}

pre[data-language="css"]::before,
pre.language-css::before {
    background: #1572b6;
}

pre[data-language="html"]::before,
pre.language-html::before {
    background: #e34c26;
}

pre[data-language="bash"]::before,
pre.language-bash::before {
    background: #4eaa25;
}

pre[data-language="json"]::before,
pre.language-json::before {
    background: #000000;
}

/* Table of Contents Z-index Fix */
.sticky-top {
    position: sticky;
    top: 80px !important; /* Below navbar */
    z-index: 100 !important; /* Below navbar z-index */
}

/* Remove duplicate TOC in mobile */
.toc-container {
    display: none !important; /* Hide the duplicate TOC */
}

@media (max-width: 991px) {
    .d-none.d-lg-block {
        display: none !important;
    }
}

/* Output/Result Blocks */
.output,
.result {
    background: var(--bg-surface);
    border-left: 4px solid var(--warning);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    font-family: monospace;
}

/* Error Blocks */
.error,
.error-output {
    background: rgba(220, 38, 38, 0.1);
    border-left: 4px solid var(--danger);
    color: var(--danger);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    font-family: monospace;
}

/* Success Blocks */
.success,
.success-output {
    background: rgba(5, 150, 105, 0.1);
    border-left: 4px solid var(--success);
    color: var(--success);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    font-family: monospace;
}

/* Responsive Design */
@media (max-width: 768px) {
    pre code {
        font-size: 0.75rem;
        padding: 0.75rem;
        line-height: 1.4;
    }

    .code-copy-btn {
        opacity: 1; /* Always show on mobile */
    }

    pre.line-numbers code {
        padding-left: 2.5rem;
    }

    pre.line-numbers code .line::before {
        left: -2.5rem;
    }
}

/* Print Styles */
@media print {
    pre {
        border: 1px solid #ccc;
        background: white;
        page-break-inside: avoid;
    }

    pre code {
        color: black;
    }

    .code-copy-btn,
    pre::before {
        display: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    pre {
        border-width: 2px;
    }

    code:not(pre code) {
        border: 1px solid currentColor;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .code-copy-btn,
    pre {
        transition: none;
    }
}

/* Fix for code blocks breaking layout */
.post-content pre code {
    max-width: 100%;
    overflow-wrap: normal;
    white-space: pre;
}

/* Ensure code blocks don't overlap with sticky elements */
.post-content {
    position: relative;
    z-index: 1;
}

/* Fix navbar z-index to be above everything */
.navbar {
    z-index: 1050 !important;
}

/* Fix for long lines in code blocks */
pre code {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Highlight current line on hover */
pre code .line:hover {
    background: rgba(255, 255, 255, 0.05);
}