/* Code Block Dark Theme for Leftover Labs
 * Provides dark background styling for <pre><code> blocks with copy functionality
 */

/* Base styling for all code blocks */
pre {
  position: relative;
  margin: 1em 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light mode styling */
pre code {
  background-color: #f6f8fa;
  color: #24292e;
  border: 1px solid #e1e4e8;
}

/* Dark mode styling */
[data-theme="dark"] pre code {
  background-color: #2a3c33; /* Dark green background matching project theme */
  color: #e6edf3;
  border: 1px solid #3a4d43; /* Dark border matching card-border */
}

/* Copy button styling */
.code-copy-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em 0.5em;
  font-size: 0.8em;
  color: #6e7781;
  background-color: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

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

.code-copy-button:hover {
  background-color: #f3f4f6;
  color: #24292e;
}

/* Dark mode copy button */
[data-theme="dark"] .code-copy-button {
  color: #8bc2a8; /* Lighter green for better contrast */
  background-color: #2a3c33; /* Dark background matching code block */
  border: 1px solid #3a4d43; /* Dark border matching card-border */
}

[data-theme="dark"] .code-copy-button:hover {
  background-color: #3a4d43; /* Slightly lighter on hover */
  color: #8bc2a8;
}

/* Success state for copy button */
.code-copy-button.copied {
  color: #2c6e49; /* Darker green for better contrast in light mode */
  background-color: #e6f3eb;
}

[data-theme="dark"] .code-copy-button.copied {
  color: #8bc2a8; /* Lighter green for better contrast in dark mode */
  background-color: #2c6e49; /* Darker green background */
}

/* Syntax highlighting colors - light mode */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a737d;
}

.token.punctuation {
  color: #24292e;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #005cc5;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: #032f62;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #d73a49;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d73a49;
}

.token.function,
.token.class-name {
  color: #6f42c1;
}

.token.regex,
.token.important,
.token.variable {
  color: #e36209;
}

/* Syntax highlighting colors - dark mode */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
  color: #8b949e;
}

[data-theme="dark"] .token.punctuation {
  color: #e6edf3;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol {
  color: #79c0ff;
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin {
  color: #a5d6ff;
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
  color: #ff7b72;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
  color: #ff7b72;
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
  color: #d2a8ff;
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
  color: #ffa657;
}