/*
 * Code Block Styles - GDX Cloud Documentation
 * Features:
 * - Vibrant syntax highlighting (Dracula-inspired dark, GitHub-inspired light)
 * - Copy button with icon-only, hover-triggered
 * - Custom gradient scrollbars
 * - HTTP/IP fallback for clipboard API
 * - Dark and light theme support
 */

/* ============================================
   Code Block Base Styles
   ============================================ */
pre {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 1rem;
    border-radius: 12px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 
                0 0 20px rgba(168, 85, 247, 0.1);
    line-height: 1.6;
    position: relative;
}

pre code {
    background-color: transparent;
    padding: 0;
    color: var(--light);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
}

/* Inline code */
code {
    background-color: var(--bg-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9375rem;
    color: var(--primary-light);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
}

pre code {
    background-color: transparent;
    padding: 0;
}

/* ============================================
   Custom Scrollbar for Code Blocks
   ============================================ */
pre::-webkit-scrollbar {
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}

/* ============================================
   Copy Button
   ============================================ */
.copy-code-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: var(--light);
    padding: 0.35rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    width: 2rem;
    height: 2rem;
    pointer-events: auto;
    /* Enhanced styling for better visibility and no scrolling */
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Show copy button on hover - works with wrapper structure */
.code-block-wrapper:hover .copy-code-btn,
pre:hover .copy-code-btn {
    opacity: 1;
    visibility: visible;
}

.copy-code-btn:hover {
    background: rgba(168, 85, 247, 0.4);
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.3);
}

.copy-code-btn.copied {
    background: rgba(80, 250, 123, 0.3);
    border-color: #50fa7b;
    color: #50fa7b;
    opacity: 1;
    visibility: visible;
}

.copy-code-btn i {
    font-size: 1rem;
}

/* ============================================
   Syntax Highlighting - Dark Theme (Dracula-inspired)
   ============================================ */

/* Generic text */
.chroma { 
    color: #e8e8e8; 
}

/* Comments */
.chroma .c,   /* Comment */
.chroma .c1,  /* CommentSingle */
.chroma .cm,  /* CommentMultiline */
.chroma .cs   /* CommentSpecial */ {
    color: #7cc36e;
    font-style: italic;
}

/* Keywords */
.chroma .k,   /* Keyword */
.chroma .kd,  /* KeywordDeclaration */
.chroma .kp,  /* KeywordPseudo */
.chroma .kr,  /* KeywordReserved */
.chroma .kt   /* KeywordType */ {
    color: #ff79c6;
    font-weight: 500;
}

/* Import/Include */
.chroma .kn {
    color: #ff6ac1;
}

/* Strings */
.chroma .s,   /* String */
.chroma .s1,  /* StringSingle */
.chroma .s2,  /* StringDouble */
.chroma .sb,  /* StringBacktick */
.chroma .sc,  /* StringChar */
.chroma .sd,  /* StringDoc */
.chroma .se,  /* StringEscape */
.chroma .sh   /* StringHeredoc */ {
    color: #f1fa8c;
}

/* Numbers */
.chroma .m,   /* Number */
.chroma .mf,  /* NumberFloat */
.chroma .mi,  /* NumberInteger */
.chroma .mh,  /* NumberHex */
.chroma .mo   /* NumberOct */ {
    color: #bd93f9;
}

/* Functions */
.chroma .n,   /* Name */
.chroma .nf,  /* NameFunction */
.chroma .fm   /* NameFunctionMagic */ {
    color: #50fa7b;
}

/* Classes/Types */
.chroma .nc,  /* NameClass */
.chroma .nn,  /* NameNamespace */
.chroma .nt   /* NameTag */ {
    color: #8be9fd;
}

/* Variables and Identifiers */
.chroma .nv,  /* NameVariable */
.chroma .nx,  /* NameOther */
.chroma .vi,  /* NameVariableInstance */
.chroma .vg   /* NameVariableGlobal */ {
    color: #6fcaf0;
}

/* Operators */
.chroma .o,   /* Operator */
.chroma .ow   /* OperatorWord */ {
    color: #ff79c6;
}

/* Built-ins */
.chroma .nb,  /* NameBuiltin */
.chroma .bp   /* NameBuiltinPseudo */ {
    color: #8be9fd;
}

/* Constants */
.chroma .kc,  /* KeywordConstant */
.chroma .no   /* NameConstant */ {
    color: #bd93f9;
}

/* Decorators/Annotations */
.chroma .nd,  /* NameDecorator */
.chroma .ni   /* NameEntity */ {
    color: #ffb86c;
}

/* HTML/XML Tags */
.chroma .nt {  /* NameTag */
    color: #ff79c6;
}

/* HTML/XML Attributes */
.chroma .na {  /* NameAttribute */
    color: #50fa7b;
}

/* Property names (CSS/JSON) */
.chroma .nl,  /* NameLabel */
.chroma .py   /* NameProperty */ {
    color: #8be9fd;
}

/* Punctuation */
.chroma .p {   /* Punctuation */
    color: #f8f8f2;
}

/* Language variables (this, self, etc) */
.chroma .nb {
    color: #bd93f9;
}

/* Errors */
.chroma .err {
    color: #ff5555;
    font-weight: bold;
}

/* Generic emphasis */
.chroma .ge {
    font-style: italic;
}

/* Generic strong */
.chroma .gs {
    font-weight: bold;
}

/* Generic heading */
.chroma .gh {
    color: #bd93f9;
    font-weight: bold;
}

/* Generic subheading */
.chroma .gu {
    color: #8be9fd;
    font-weight: bold;
}

/* Shell prompts */
.chroma .gp {
    color: #6272a4;
}

/* Generic output */
.chroma .go {
    color: #e8e8e8;
}

/* ============================================
   Light Theme Override
   ============================================ */
html.light-theme,
body.light-theme {
    --primary-color: #a855f7;
    --secondary-color: #ec4899;
    --primary-dark: #9333ea;
    --primary-light: #c084fc;
    --light: #1a202c;
    --text-primary: #1a202c;
    --bg-tertiary: #f3f4f6;
    --border-color: #e0e0e0;
}

/* Light theme code blocks */
html.light-theme pre,
body.light-theme pre {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme pre code,
body.light-theme pre code {
    color: #2d3748 !important;
}

html.light-theme code,
body.light-theme code {
    background-color: var(--bg-tertiary);
    color: #2563eb;
}

/* Light theme copy button */
html.light-theme .copy-code-btn,
body.light-theme .copy-code-btn {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--primary-color);
}

html.light-theme .copy-code-btn:hover,
body.light-theme .copy-code-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

html.light-theme .copy-code-btn.copied,
body.light-theme .copy-code-btn.copied {
    background: rgba(34, 134, 58, 0.15);
    border-color: #22863a;
    color: #22863a;
    opacity: 1;
    visibility: visible;
}

/* Light theme scrollbar */
html.light-theme pre::-webkit-scrollbar,
body.light-theme pre::-webkit-scrollbar {
    height: 8px;
}

html.light-theme pre::-webkit-scrollbar-track,
body.light-theme pre::-webkit-scrollbar-track {
    background: rgba(168, 85, 247, 0.05);
    border-radius: 4px;
}

html.light-theme pre::-webkit-scrollbar-thumb,
body.light-theme pre::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
}

html.light-theme pre::-webkit-scrollbar-thumb:hover,
body.light-theme pre::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}

/* Syntax highlighting colors for light theme - GitHub-inspired */
html.light-theme .chroma,
body.light-theme .chroma {
    color: #24292e !important;
}

/* Comments */
html.light-theme .chroma .c,
html.light-theme .chroma .c1,
html.light-theme .chroma .cm,
html.light-theme .chroma .cs,
body.light-theme .chroma .c,
body.light-theme .chroma .c1,
body.light-theme .chroma .cm,
body.light-theme .chroma .cs {
    color: #22863a !important;
    font-style: italic;
}

/* Keywords */
html.light-theme .chroma .k,
html.light-theme .chroma .kd,
html.light-theme .chroma .kn,
html.light-theme .chroma .kp,
html.light-theme .chroma .kr,
html.light-theme .chroma .kt,
body.light-theme .chroma .k,
body.light-theme .chroma .kd,
body.light-theme .chroma .kn,
body.light-theme .chroma .kp,
body.light-theme .chroma .kr,
body.light-theme .chroma .kt {
    color: #d73a49 !important;
    font-weight: 500;
}

/* Import/Include */
html.light-theme .chroma .kn,
body.light-theme .chroma .kn {
    color: #6f42c1 !important;
}

/* Strings */
html.light-theme .chroma .s,
html.light-theme .chroma .s1,
html.light-theme .chroma .s2,
html.light-theme .chroma .sb,
html.light-theme .chroma .sc,
html.light-theme .chroma .sd,
html.light-theme .chroma .se,
html.light-theme .chroma .sh,
body.light-theme .chroma .s,
body.light-theme .chroma .s1,
body.light-theme .chroma .s2,
body.light-theme .chroma .sb,
body.light-theme .chroma .sc,
body.light-theme .chroma .sd,
body.light-theme .chroma .se,
body.light-theme .chroma .sh {
    color: #032f62 !important;
}

/* Numbers */
html.light-theme .chroma .m,
html.light-theme .chroma .mf,
html.light-theme .chroma .mi,
html.light-theme .chroma .mh,
html.light-theme .chroma .mo,
body.light-theme .chroma .m,
body.light-theme .chroma .mf,
body.light-theme .chroma .mi,
body.light-theme .chroma .mh,
body.light-theme .chroma .mo {
    color: #005cc5 !important;
}

/* Functions */
html.light-theme .chroma .n,
html.light-theme .chroma .nf,
html.light-theme .chroma .fm,
body.light-theme .chroma .n,
body.light-theme .chroma .nf,
body.light-theme .chroma .fm {
    color: #6f42c1 !important;
}

/* Classes/Types */
html.light-theme .chroma .nc,
html.light-theme .chroma .nn,
html.light-theme .chroma .nt,
body.light-theme .chroma .nc,
body.light-theme .chroma .nn,
body.light-theme .chroma .nt {
    color: #22863a !important;
    font-weight: 600;
}

/* Variables and Identifiers */
html.light-theme .chroma .nv,
html.light-theme .chroma .nx,
html.light-theme .chroma .vi,
html.light-theme .chroma .vg,
body.light-theme .chroma .nv,
body.light-theme .chroma .nx,
body.light-theme .chroma .vi,
body.light-theme .chroma .vg {
    color: #e36209 !important;
}

/* Operators */
html.light-theme .chroma .o,
html.light-theme .chroma .ow,
body.light-theme .chroma .o,
body.light-theme .chroma .ow {
    color: #d73a49 !important;
}

/* Built-ins */
html.light-theme .chroma .nb,
html.light-theme .chroma .bp,
body.light-theme .chroma .nb,
body.light-theme .chroma .bp {
    color: #005cc5 !important;
}

/* Constants */
html.light-theme .chroma .kc,
html.light-theme .chroma .no,
body.light-theme .chroma .kc,
body.light-theme .chroma .no {
    color: #005cc5 !important;
}

/* Decorators/Annotations */
html.light-theme .chroma .nd,
html.light-theme .chroma .ni,
body.light-theme .chroma .nd,
body.light-theme .chroma .ni {
    color: #e36209 !important;
}

/* HTML/XML Tags */
html.light-theme .chroma .nt,
body.light-theme .chroma .nt {
    color: #22863a !important;
}

/* HTML/XML Attributes */
html.light-theme .chroma .na,
body.light-theme .chroma .na {
    color: #6f42c1 !important;
}

/* Property names (CSS/JSON) */
html.light-theme .chroma .nl,
html.light-theme .chroma .py,
body.light-theme .chroma .nl,
body.light-theme .chroma .py {
    color: #005cc5 !important;
}

/* Punctuation */
html.light-theme .chroma .p,
body.light-theme .chroma .p {
    color: #24292e !important;
}

/* Errors */
html.light-theme .chroma .err,
body.light-theme .chroma .err {
    color: #cb2431 !important;
    font-weight: bold;
}

/* Generic emphasis */
html.light-theme .chroma .ge,
body.light-theme .chroma .ge {
    font-style: italic;
}

/* Generic strong */
html.light-theme .chroma .gs,
body.light-theme .chroma .gs {
    font-weight: bold;
}

/* Generic heading */
html.light-theme .chroma .gh,
body.light-theme .chroma .gh {
    color: #005cc5 !important;
    font-weight: bold;
}

/* Generic subheading */
html.light-theme .chroma .gu,
body.light-theme .chroma .gu {
    color: #22863a !important;
    font-weight: bold;
}

/* Shell prompts */
html.light-theme .chroma .gp,
body.light-theme .chroma .gp {
    color: #6a737d !important;
}

/* Generic output */
html.light-theme .chroma .go,
body.light-theme .chroma .go {
    color: #24292e !important;
}

/* ============================================
   Hide Line Numbers
   ============================================ */
.line-number,
.ln,
code .line-number,
code .ln,
pre .line-number,
pre .ln {
    display: none !important;
}