/**
 * Syntax Highlighting Styles
 * 
 * CSS-based syntax highlighting for code blocks.
 * Supports both light and dark themes.
 */

/* ==========================================================================
   Code Block Container
   ========================================================================== */

pre.code-block {
  position: relative;
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

pre.code-block code {
  display: block;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}

/* Language label */
.code-language {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  user-select: none;
}

/* Copy button */
.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 3.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

pre.code-block:hover .copy-button,
.copy-button:focus {
  opacity: 1;
}

.copy-button.copied {
  color: #22c55e;
}

.copy-button.error {
  color: #ef4444;
}

/* Inline code */
code.inline-code {
  padding: 0.125rem 0.375rem;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.875em;
  border-radius: 4px;
}

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Code block background */
  --code-bg: #f8f9fc;
  --code-border: #e2e8f0;
  --code-text: #1e293b;
  
  /* Language label */
  --code-label-bg: #e2e8f0;
  --code-label-text: #64748b;
  
  /* Copy button */
  --copy-btn-bg: #e2e8f0;
  --copy-btn-hover: #cbd5e1;
  --copy-btn-text: #475569;
  
  /* Inline code */
  --inline-code-bg: #f1f5f9;
  --inline-code-text: #0f172a;
  
  /* Token colors - inspired by GitHub Light */
  --token-keyword: #cf222e;      /* Red - keywords, control flow */
  --token-string: #0a3069;       /* Blue - strings */
  --token-number: #0550ae;       /* Dark blue - numbers */
  --token-comment: #6e7781;      /* Gray - comments */
  --token-function: #8250df;     /* Purple - functions */
  --token-variable: #953800;     /* Orange - variables */
  --token-operator: #24292f;     /* Dark - operators */
  --token-punctuation: #24292f;  /* Dark - punctuation */
  --token-property: #0550ae;     /* Blue - properties */
  --token-tag: #116329;          /* Green - HTML tags */
  --token-attribute: #0550ae;    /* Blue - attributes */
  --token-selector: #6639ba;     /* Purple - CSS selectors */
}

[data-theme="light"] pre.code-block {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-text);
}

[data-theme="light"] .code-language {
  background-color: var(--code-label-bg);
  color: var(--code-label-text);
}

[data-theme="light"] .copy-button {
  background-color: var(--copy-btn-bg);
  color: var(--copy-btn-text);
}

[data-theme="light"] .copy-button:hover {
  background-color: var(--copy-btn-hover);
}

[data-theme="light"] code.inline-code {
  background-color: var(--inline-code-bg);
  color: var(--inline-code-text);
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

[data-theme="dark"] {
  /* Code block background */
  --code-bg: #161b22;
  --code-border: #30363d;
  --code-text: #e6edf3;
  
  /* Language label */
  --code-label-bg: #30363d;
  --code-label-text: #8b949e;
  
  /* Copy button */
  --copy-btn-bg: #30363d;
  --copy-btn-hover: #484f58;
  --copy-btn-text: #c9d1d9;
  
  /* Inline code */
  --inline-code-bg: #343942;
  --inline-code-text: #e6edf3;
  
  /* Token colors - inspired by GitHub Dark */
  --token-keyword: #ff7b72;      /* Coral - keywords, control flow */
  --token-string: #a5d6ff;       /* Light blue - strings */
  --token-number: #79c0ff;       /* Blue - numbers */
  --token-comment: #8b949e;      /* Gray - comments */
  --token-function: #d2a8ff;     /* Purple - functions */
  --token-variable: #ffa657;     /* Orange - variables */
  --token-operator: #c9d1d9;     /* Light - operators */
  --token-punctuation: #c9d1d9;  /* Light - punctuation */
  --token-property: #79c0ff;     /* Blue - properties */
  --token-tag: #7ee787;          /* Green - HTML tags */
  --token-attribute: #79c0ff;    /* Blue - attributes */
  --token-selector: #d2a8ff;     /* Purple - CSS selectors */
}

[data-theme="dark"] pre.code-block {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-text);
}

[data-theme="dark"] .code-language {
  background-color: var(--code-label-bg);
  color: var(--code-label-text);
}

[data-theme="dark"] .copy-button {
  background-color: var(--copy-btn-bg);
  color: var(--copy-btn-text);
}

[data-theme="dark"] .copy-button:hover {
  background-color: var(--copy-btn-hover);
}

[data-theme="dark"] code.inline-code {
  background-color: var(--inline-code-bg);
  color: var(--inline-code-text);
}

/* ==========================================================================
   Token Styles (Both Themes)
   ========================================================================== */

/* Keywords - if, else, for, while, function, return, etc. */
.token-keyword {
  color: var(--token-keyword);
  font-weight: 500;
}

/* Strings - "text", 'text', `text` */
.token-string {
  color: var(--token-string);
}

/* Numbers - 123, 45.67, 0xFF */
.token-number {
  color: var(--token-number);
}

/* Comments - // comment, /* comment */, # comment */
.token-comment {
  color: var(--token-comment);
  font-style: italic;
}

/* Functions - functionName() */
.token-function {
  color: var(--token-function);
}

/* Variables - variable names */
.token-variable {
  color: var(--token-variable);
}

/* Operators - +, -, *, /, =, ==, etc. */
.token-operator {
  color: var(--token-operator);
}

/* Punctuation - {, }, (, ), [, ], ;, etc. */
.token-punctuation {
  color: var(--token-punctuation);
}

/* Properties - object.property */
.token-property {
  color: var(--token-property);
}

/* HTML/XML tags */
.token-tag {
  color: var(--token-tag);
}

/* HTML/XML attributes */
.token-attribute {
  color: var(--token-attribute);
}

/* CSS selectors */
.token-selector {
  color: var(--token-selector);
}

/* ==========================================================================
   Language-Specific Overrides
   ========================================================================== */

/* JSON - make keys stand out */
[data-language="json"] .token-string:first-child {
  color: var(--token-property);
}

/* SQL - make keywords uppercase stand out more */
[data-language="sql"] .token-keyword {
  font-weight: 600;
}

/* Bash/Shell - different comment style */
[data-language="bash"] .token-comment,
[data-language="sh"] .token-comment {
  color: var(--token-comment);
}

/* ==========================================================================
   Line Numbers (Optional)
   ========================================================================== */

pre.code-block.show-line-numbers {
  padding-left: 3.5rem;
}

pre.code-block.show-line-numbers code {
  counter-reset: line;
}

pre.code-block.show-line-numbers code > span.line {
  display: block;
}

pre.code-block.show-line-numbers code > span.line::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 0.75rem;
  width: 2rem;
  text-align: right;
  color: var(--token-comment);
  opacity: 0.5;
  user-select: none;
}

/* ==========================================================================
   Line Highlighting
   ========================================================================== */

.line-highlight {
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}

[data-theme="light"] .line-highlight {
  background-color: rgba(255, 235, 59, 0.2);
}

[data-theme="dark"] .line-highlight {
  background-color: rgba(255, 235, 59, 0.1);
}

/* ==========================================================================
   Diff Highlighting
   ========================================================================== */

.token-inserted {
  color: #22c55e;
}

.token-deleted {
  color: #ef4444;
}

.line-inserted {
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.line-deleted {
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}

[data-theme="light"] .line-inserted {
  background-color: rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .line-deleted {
  background-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .line-inserted {
  background-color: rgba(34, 197, 94, 0.1);
}

[data-theme="dark"] .line-deleted {
  background-color: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 640px) {
  pre.code-block {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    font-size: 0.8125rem;
  }
  
  .code-language {
    font-size: 0.625rem;
  }
  
  .copy-button {
    right: 2.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  pre.code-block {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    page-break-inside: avoid;
  }
  
  .copy-button,
  .code-language {
    display: none !important;
  }
  
  .token-keyword { color: #d73a49 !important; }
  .token-string { color: #032f62 !important; }
  .token-number { color: #005cc5 !important; }
  .token-comment { color: #6a737d !important; }
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

pre.code-block::-webkit-scrollbar {
  height: 8px;
}

pre.code-block::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="light"] pre.code-block::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

[data-theme="light"] pre.code-block::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

[data-theme="dark"] pre.code-block::-webkit-scrollbar-thumb {
  background-color: #484f58;
  border-radius: 4px;
}

[data-theme="dark"] pre.code-block::-webkit-scrollbar-thumb:hover {
  background-color: #6e7681;
}

/* Firefox scrollbar */
pre.code-block {
  scrollbar-width: thin;
}

[data-theme="light"] pre.code-block {
  scrollbar-color: #cbd5e1 transparent;
}

[data-theme="dark"] pre.code-block {
  scrollbar-color: #484f58 transparent;
}