/* Code Components */

/* Code Blocks - Base */
.code-block pre,
.code-block code {
  background: transparent;
}

.code-block pre {
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.code-header {
  background: #1e293b;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 1px solid #334155;
}

.code-content {
  background: #0f172a;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow-x: auto;
}

/* Code Tabs */
.code-tabs-wrapper {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.code-tabs-nav {
  background: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.75rem 0.75rem 0;
}

.code-tab {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem 0.375rem 0 0;
  transition: all 150ms ease;
  cursor: pointer;
  color: #94a3b8;
  background: #1e293b;
  border-bottom: 2px solid transparent;
}

.code-tab:hover {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.5);
}

.code-tab.active {
  background: #0f172a;
  color: #60a5fa;
  border-bottom-color: #3b82f6;
}

.code-tabs-content {
  background: #0f172a;
  border-radius: 0 0 0.5rem 0.5rem;
}

.code-panel {
  display: none;
}

.code-panel.active {
  display: block;
}

.code-panel pre {
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: transparent;
}

.code-panel code {
  background: transparent;
}

/* Rouge Syntax Highlighting Tokens */
.highlight { background: transparent; }
.highlight .c, .highlight .cm, .highlight .cp, .highlight .c1, .highlight .cs { color: #64748b; font-style: italic; }
.highlight .err { color: #f87171; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: #f472b6; font-weight: 600; }
.highlight .o, .highlight .ow { color: #f9a8d4; }
.highlight .p { color: #cbd5e1; }
.highlight .n, .highlight .py { color: #f8fafc; }
.highlight .na { color: #60a5fa; }
.highlight .nb { color: #34d399; }
.highlight .nc { color: #facc15; font-weight: 600; }
.highlight .no { color: #fb923c; }
.highlight .nd { color: #93c5fd; }
.highlight .nf { color: #60a5fa; font-weight: 600; }
.highlight .nn { color: #facc15; }
.highlight .nt { color: #f472b6; }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #93c5fd; }
.highlight .l, .highlight .ld { color: #6ee7b7; }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo { color: #fb923c; }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #6ee7b7; }
.highlight .ge { font-style: italic; }
.highlight .gs { font-weight: 700; }
.highlight .gu { color: #a78bfa; font-weight: 700; }
.highlight .gd { color: #f87171; }
.highlight .gi { color: #34d399; }
.highlight .lineno { color: #475569; user-select: none; margin-right: 1rem; }

/* Highlight.js Tokens (for code editor) */
.hljs { color: #f8fafc; }
.hljs-comment { color: #64748b; font-style: italic; }
.hljs-keyword { color: #f472b6; font-weight: 600; }
.hljs-built_in { color: #34d399; }
.hljs-type { color: #facc15; }
.hljs-literal { color: #fb923c; }
.hljs-number { color: #fb923c; }
.hljs-string { color: #6ee7b7; }
.hljs-symbol { color: #6ee7b7; }
.hljs-regexp { color: #6ee7b7; }
.hljs-title { color: #60a5fa; font-weight: 600; }
.hljs-params { color: #f8fafc; }
.hljs-variable { color: #93c5fd; }
.hljs-attr { color: #60a5fa; }
.hljs-class { color: #facc15; }
.hljs-function { color: #60a5fa; }

/* Code Editor Layout */
.code-editor {
  min-height: 300px;
}

.code-editor textarea {
  min-height: 300px;
}