/* Dracula Theme for Syntax Highlighting */
/* Based on https://draculatheme.com/ */

:root {
    --dracula-bg: #282a36;
    --dracula-current: #44475a;
    --dracula-selection: #44475a;
    --dracula-foreground: #f8f8f2;
    --dracula-comment: #6272a4;
    --dracula-cyan: #8be9fd;
    --dracula-green: #50fa7b;
    --dracula-orange: #ffb86c;
    --dracula-pink: #ff79c6;
    --dracula-purple: #bd93f9;
    --dracula-red: #ff5555;
    --dracula-yellow: #f1fa8c;
}

/* Code Block Container */
.content pre {
    background: var(--dracula-bg);
    border-color: var(--dracula-current);
}

.content pre code {
    color: var(--dracula-foreground);
}

/* Syntax Highlighting Classes */
.hljs {
    display: block;
    overflow-x: auto;
    padding: 1.25rem;
    background: var(--dracula-bg);
    color: var(--dracula-foreground);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
    color: var(--dracula-pink);
    font-weight: 500;
}

.hljs-function .hljs-keyword {
    color: var(--dracula-cyan);
}

.hljs-subst {
    color: var(--dracula-foreground);
}

.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
    color: var(--dracula-green);
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
    color: var(--dracula-comment);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
    font-weight: bold;
}

.hljs-params,
.hljs-title.class_ {
    color: var(--dracula-orange);
}

.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-class .hljs-title {
    color: var(--dracula-purple);
}

.hljs-attr {
    color: var(--dracula-cyan);
}

.hljs-regexp,
.hljs-link {
    color: var(--dracula-yellow);
}

.hljs-tag {
    color: var(--dracula-pink);
}

.hljs-tag .hljs-name {
    color: var(--dracula-pink);
}

.hljs-tag .hljs-attr {
    color: var(--dracula-green);
}

.hljs-selector-id,
.hljs-selector-class {
    color: var(--dracula-cyan);
}

.hljs-property {
    color: var(--dracula-cyan);
}

.hljs-function {
    color: var(--dracula-green);
}

.hljs-built_in {
    color: var(--dracula-cyan);
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

/* Language-specific adjustments */

/* Python */
.hljs-class .hljs-title {
    color: var(--dracula-cyan);
}

.hljs-decorator,
.hljs-meta .hljs-keyword {
    color: var(--dracula-pink);
}

/* JavaScript/TypeScript */
.hljs-variable.language_ {
    color: var(--dracula-purple);
}

.hljs-title.function_ {
    color: var(--dracula-green);
}

/* Shell/Bash */
.hljs-meta.prompt_ {
    color: var(--dracula-comment);
    user-select: none;
}

.hljs-meta.prompt_::before {
    content: "$ ";
}

/* Git */
.hljs-meta {
    color: var(--dracula-comment);
}

.hljs-addition {
    color: var(--dracula-green);
    background-color: rgba(80, 250, 123, 0.1);
}

.hljs-deletion {
    color: var(--dracula-red);
    background-color: rgba(255, 85, 85, 0.1);
}

/* JSON */
.hljs-attr {
    color: var(--dracula-cyan);
}

.hljs-string {
    color: var(--dracula-yellow);
}

/* YAML */
.yaml .hljs-attr {
    color: var(--dracula-cyan);
}

.yaml .hljs-string {
    color: var(--dracula-green);
}

/* CSS */
.css .hljs-selector-tag {
    color: var(--dracula-pink);
}

.css .hljs-selector-id,
.css .hljs-selector-class {
    color: var(--dracula-cyan);
}

.css .hljs-attribute {
    color: var(--dracula-cyan);
}

/* SQL */
.sql .hljs-keyword {
    color: var(--dracula-pink);
}

.sql .hljs-built_in {
    color: var(--dracula-cyan);
}

/* Line Numbers */
.hljs-ln {
    border-collapse: collapse;
}

.hljs-ln td {
    padding: 0;
}

.hljs-ln-numbers {
    user-select: none;
    text-align: right;
    color: var(--dracula-comment);
    border-right: 1px solid var(--dracula-current);
    vertical-align: top;
    padding-right: 1rem;
    margin-right: 1rem;
}

.hljs-ln-code {
    padding-left: 1rem;
}

/* Copy Button */
.code-block-wrapper {
    position: relative;
}

.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--dracula-current);
    color: var(--dracula-foreground);
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    font-family: var(--font-sans);
}

.code-block-wrapper:hover .copy-button {
    opacity: 1;
}

.copy-button:hover {
    background: var(--dracula-selection);
}

.copy-button:active {
    transform: scale(0.95);
}

.copy-button.copied {
    background: var(--dracula-green);
    color: var(--dracula-bg);
}

/* Selection */
.hljs::selection,
.hljs *::selection {
    background: var(--dracula-selection);
}

/* Scrollbar for code blocks */
.content pre::-webkit-scrollbar {
    height: 8px;
}

.content pre::-webkit-scrollbar-track {
    background: var(--dracula-bg);
}

.content pre::-webkit-scrollbar-thumb {
    background: var(--dracula-current);
    border-radius: 4px;
}

.content pre::-webkit-scrollbar-thumb:hover {
    background: var(--dracula-comment);
}

/* Light Theme Adjustments */
[data-theme="light"] .hljs,
[data-theme="light"] .content pre {
    background: #f8f9fa;
    border-color: #dee2e6;
}

[data-theme="light"] .hljs {
    color: #212529;
}

[data-theme="light"] .hljs-keyword,
[data-theme="light"] .hljs-selector-tag {
    color: #d73a49;
}

[data-theme="light"] .hljs-string,
[data-theme="light"] .hljs-title {
    color: #22863a;
}

[data-theme="light"] .hljs-comment {
    color: #6a737d;
}

[data-theme="light"] .hljs-number,
[data-theme="light"] .hljs-built_in {
    color: #005cc5;
}

[data-theme="light"] .hljs-function {
    color: #6f42c1;
}

[data-theme="light"] .hljs-attr {
    color: #005cc5;
}

[data-theme="light"] .copy-button {
    background: #e9ecef;
    color: #212529;
}

[data-theme="light"] .copy-button:hover {
    background: #dee2e6;
}

[data-theme="light"] .copy-button.copied {
    background: #28a745;
    color: #fff;
}