/* =========================================================
   docs-tabs.css — Multi-language tabbed code examples
   Shared component for admin node and website landing.
   Depends on tokens.css variables.
   ========================================================= */

.docs-code-tabs {
    margin: 20px 0;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: #1e1e2e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* --- Tab header — fills full width, tabs stretch evenly --- */
.docs-code-tabs-header {
    display: flex;
    align-items: stretch;
    background: #16161e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.docs-code-tabs-header::-webkit-scrollbar { display: none; }

.docs-code-tab-btn {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    letter-spacing: 0.01em;
}

.docs-code-tab-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
}

.docs-code-tab-btn.active {
    color: #64b5ff;
    border-bottom-color: #64b5ff;
    background: rgba(100, 181, 255, 0.08);
}

/* Light theme overrides */
.light .docs-code-tab-btn.active {
    color: var(--accent-color, #2d8cf0);
    border-bottom-color: var(--accent-color, #2d8cf0);
    background: rgba(45, 140, 240, 0.08);
}

/* --- Tab panels --- */
.docs-code-tab-panel {
    display: none;
}

.docs-code-tab-panel.active {
    display: block;
    animation: docsTabFadeIn 0.15s ease;
}

@keyframes docsTabFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reset code block styles inside tabs */
.docs-code-tabs pre {
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    background: #1e1e2e;
}

/* Hide language label inside tabs (tab button serves as label) */
.docs-code-tabs .docs-code-lang,
.docs-code-tabs .code-lang {
    display: none;
}

/* Copy button visibility */
.docs-code-tabs .docs-code-copy,
.docs-code-tabs .code-copy-btn {
    opacity: 0;
}

.docs-code-tabs .docs-code-tab-panel.active:hover .docs-code-copy,
.docs-code-tabs .docs-code-tab-panel.active:hover .code-copy-btn {
    opacity: 1;
}

/* --- Syntax highlighting tokens --- */
.docs-code-tabs code .hljs-keyword,
.docs-body pre code .hljs-keyword { color: #c678dd; }

.docs-code-tabs code .hljs-string,
.docs-body pre code .hljs-string { color: #98c379; }

.docs-code-tabs code .hljs-comment,
.docs-body pre code .hljs-comment { color: #5c6370; font-style: italic; }

.docs-code-tabs code .hljs-number,
.docs-body pre code .hljs-number { color: #d19a66; }

.docs-code-tabs code .hljs-type,
.docs-body pre code .hljs-type { color: #e5c07b; }

.docs-code-tabs code .hljs-function,
.docs-body pre code .hljs-function { color: #61afef; }

.docs-code-tabs code .hljs-built-in,
.docs-body pre code .hljs-built-in { color: #56b6c2; }

.docs-code-tabs code .hljs-variable,
.docs-body pre code .hljs-variable { color: #e06c75; }

.docs-code-tabs code .hljs-operator,
.docs-body pre code .hljs-operator { color: #56b6c2; }

.docs-code-tabs code .hljs-decorator,
.docs-body pre code .hljs-decorator { color: #d19a66; }

.docs-code-tabs code .hljs-property,
.docs-body pre code .hljs-property { color: #e06c75; }

.docs-code-tabs code .hljs-flag,
.docs-body pre code .hljs-flag { color: #56b6c2; }

.docs-code-tabs code .hljs-command,
.docs-body pre code .hljs-command { color: #98c379; font-weight: 500; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .docs-code-tab-btn {
        padding: 9px 8px;
        font-size: 11.5px;
    }
}

/* --- Print --- */
@media print {
    .docs-code-tabs-header { background: #eee !important; border-bottom: 1px solid #ccc; }
    .docs-code-tab-btn { color: #333 !important; }
    .docs-code-tab-btn.active { color: #2d8cf0 !important; border-bottom-color: #2d8cf0 !important; background: rgba(45, 140, 240, 0.06) !important; }
    .docs-code-tab-panel { display: block !important; }
    .docs-code-tab-panel:not(.active) { display: none !important; }
}