/* Simple Prism.js Copy Button Styling */

/* Force white background and add border to code blocks */
pre[class*="language-"],
pre:not([class*="language-"]) {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 52px 16px 16px 16px !important;
    margin: 16px 0 !important;
    position: relative;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    outline: none !important;
}

/* Remove focus outline */
pre[class*="language-"]:focus,
pre:not([class*="language-"]):focus {
    outline: none !important;
}

code[class*="language-"] {
    background: transparent !important;
}

/* Language label at top of code block */
pre[class*="language-"]::before {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.05em;
    z-index: 1;
    min-height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Extract language name from class */
pre[class*="language-javascript"]::before,
pre[class*="language-js"]::before { content: "JavaScript"; }
pre[class*="language-json"]::before { content: "JSON"; }
pre[class*="language-swift"]::before { content: "Swift"; }
pre[class*="language-objectivec"]::before,
pre[class*="language-objc"]::before { content: "Objective-C"; }
pre[class*="language-kotlin"]::before { content: "Kotlin"; }
pre[class*="language-python"]::before,
pre[class*="language-py"]::before { content: "Python"; }
pre[class*="language-bash"]::before { content: "Bash"; }
pre[class*="language-shell"]::before,
pre[class*="language-sh"]::before { content: "Shell"; }
pre[class*="language-html"]::before { content: "HTML"; }
pre[class*="language-css"]::before { content: "CSS"; }
pre[class*="language-xml"]::before { content: "XML"; }
pre[class*="language-yaml"]::before,
pre[class*="language-yml"]::before { content: "YAML"; }
pre[class*="language-markdown"]::before,
pre[class*="language-md"]::before { content: "Markdown"; }
/* Java MUST come after JavaScript to avoid conflicts */
pre.language-java::before { content: "Java"; }

/* Plain code blocks without language class - add "CODE" header */
pre:not([class*="language-"])::before {
    content: "CODE";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.05em;
    z-index: 1;
    min-height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Toolbar positioning - in top bar */
div.code-toolbar > .toolbar {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
    padding: 8px 16px;
    z-index: 2;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* Toolbar item wrapper */
div.code-toolbar > .toolbar > .toolbar-item {
    display: inline-block;
}

/* Copy button - modern minimal style */
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    font-size: 0;
    padding: 4px;
    font-family: -apple-system, system-ui, sans-serif;
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modern copy icon - SVG-style */
div.code-toolbar > .toolbar > .toolbar-item > button::before,
div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button:hover {
    background: transparent;
    opacity: 0.7;
}

/* Success state - modern checkmark */
div.code-toolbar > .toolbar > .toolbar-item > button[data-copy-state="copy-success"]::before,
div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button[data-copy-state="copy-success"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

div.code-toolbar > .toolbar > .toolbar-item > button[data-copy-state="copy-success"],
div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button[data-copy-state="copy-success"] {
    background: transparent;
}

/* Ensure code-toolbar has relative positioning */
div.code-toolbar {
    position: relative;
}

/* Dark theme support */
[data-theme="dark"] pre[class*="language-"],
[data-theme="dark"] pre:not([class*="language-"]) {
    background: #1a202c !important;
    border-color: #2d3748 !important;
    color: #e2e8f0;
}

[data-theme="dark"] pre[class*="language-"]::before,
[data-theme="dark"] pre:not([class*="language-"])::before {
    background: #2d3748;
    border-bottom-color: #4a5568;
    color: #a0aec0;
}

[data-theme="dark"] code[class*="language-"] {
    color: #e2e8f0 !important;
}

[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > button,
[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button {
    color: #a0aec0;
}

[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > button:hover,
[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button:hover {
    background: transparent;
    opacity: 0.7;
}