/* ============================
   LIZIU DSA - Code Theme
   Catppuccin-inspired dark theme for code blocks
   ============================ */

/* Code Block Container */
pre,
.code-block {
    background: #1E1E2E;
    color: #CDD6F4;
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    position: relative;
    border: 1px solid #313244;
    margin-bottom: var(--sp-6);
    tab-size: 4;
}

pre code,
.code-block code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

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

pre::-webkit-scrollbar-track {
    background: #181825;
    border-radius: 3px;
}

pre::-webkit-scrollbar-thumb {
    background: #45475A;
    border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #585B70;
}

/* Language Label */
.code-block::before {
    content: attr(data-lang);
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--sp-1) var(--sp-3);
    background: #313244;
    color: #BAC2DE;
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: 0 var(--radius-lg) 0 var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Copy Button */
.code-copy-btn {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    background: #313244;
    color: #BAC2DE;
    border: 1px solid #45475A;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition);
}

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

.code-copy-btn:hover {
    background: #45475A;
    color: #CDD6F4;
}

.code-copy-btn.copied {
    background: #A6E3A1;
    color: #1E1E2E;
    border-color: #A6E3A1;
}

/* ---- Syntax Colors ---- */
/* Keywords (purple to match brand) */
.token-keyword,
.hljs-keyword,
.hljs-built_in {
    color: #CBA6F7;
    font-weight: 500;
}

/* Strings */
.token-string,
.hljs-string,
.hljs-template-string {
    color: #A6E3A1;
}

/* Numbers */
.token-number,
.hljs-number {
    color: #FAB387;
}

/* Comments */
.token-comment,
.hljs-comment {
    color: #6C7086;
    font-style: italic;
}

/* Functions */
.token-function,
.hljs-title.function_ {
    color: #89B4FA;
}

/* Variables / Parameters */
.token-variable,
.hljs-variable,
.hljs-params {
    color: #F38BA8;
}

/* Types / Classes */
.token-type,
.hljs-type,
.hljs-class .hljs-title {
    color: #F9E2AF;
}

/* Operators */
.token-operator,
.hljs-operator {
    color: #89DCEB;
}

/* Properties */
.token-property,
.hljs-attr {
    color: #89B4FA;
}

/* Punctuation */
.token-punctuation {
    color: #BAC2DE;
}

/* Boolean / Constants */
.token-boolean,
.hljs-literal {
    color: #FAB387;
}

/* Decorator / Attribute */
.token-decorator,
.hljs-meta {
    color: #F9E2AF;
}

/* Line Numbers (optional) */
.code-line-numbers {
    display: flex;
}

.code-line-numbers .line-nums {
    padding-right: var(--sp-4);
    border-right: 1px solid #313244;
    margin-right: var(--sp-4);
    color: #45475A;
    user-select: none;
    text-align: right;
    min-width: 2.5em;
}

/* Highlighted Line */
.code-highlight-line {
    background: rgba(139, 92, 246, 0.1);
    margin: 0 calc(-1 * var(--sp-5));
    padding: 0 var(--sp-5);
    border-left: 3px solid var(--primary);
    display: block;
}

/* Code block with filename header */
.code-with-header {
    margin-bottom: var(--sp-6);
}

.code-header {
    background: #313244;
    color: #BAC2DE;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid #313244;
    border-bottom: none;
}

.code-with-header pre,
.code-with-header .code-block {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: 0;
    border-top: none;
}

/* Window dots */
.code-header .dots {
    display: flex;
    gap: 6px;
    margin-right: var(--sp-2);
}

.code-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.code-header .dot:nth-child(1) { background: #F38BA8; }
.code-header .dot:nth-child(2) { background: #F9E2AF; }
.code-header .dot:nth-child(3) { background: #A6E3A1; }

/* Inline code in dark context */
.dark-context code {
    background: #313244;
    color: #CBA6F7;
}