/**
 * Code Display Component Styles
 * Copy, Lines, Wrap controls with syntax highlighting
 * Author: iDevOpsLLC
 */

/* Container */
.code-display-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary, #050505);
    border: 1px solid var(--border-color, #26272B);
    margin: 10px 0;
}

/* Toolbar */
.code-display-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary, #111112);
    border-bottom: 1px solid var(--border-color, #26272B);
}

.code-display-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #888);
    background: var(--bg-secondary, #050505);
    border: 1px solid var(--border-color, #26272B);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-display-btn:hover {
    background: var(--bg-hover, #17181B);
    color: var(--text-primary, #fff);
    border-color: var(--accent-primary, #007acc);
}

.code-display-btn.active {
    background: var(--accent-primary, #007acc);
    color: #fff;
    border-color: var(--accent-primary, #007acc);
}

.code-display-btn i {
    font-size: 12px;
}

/* Code Wrapper */
.code-display-wrapper {
    position: relative;
    display: flex;
    overflow: hidden;
}

/* Line Numbers */
.code-display-line-numbers {
    display: none;
    flex-shrink: 0;
    padding: 15px 10px;
    background: var(--bg-tertiary, #111112);
    border-right: 1px solid var(--border-color, #26272B);
    color: var(--text-secondary, #7F8087);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
    user-select: none;
    min-width: 45px;
}

.code-display-wrapper.show-line-numbers .code-display-line-numbers {
    display: block;
}

.line-number {
    display: block;
}

/* Pre/Code Elements */
.code-display-pre {
    flex: 1;
    margin: 0;
    padding: 15px;
    overflow-x: auto;
    overflow-y: auto;
    /* Dynamic height: viewport height minus header/toolbar space */
    min-height: 400px;
    max-height: calc(100vh - 350px);
    background: var(--bg-secondary, #050505);
    color: var(--text-primary, #F4F4F5);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    tab-size: 4;
}

.code-display-wrapper.word-wrap .code-display-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

.code-display-pre code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    padding: 0;
}

/* Scrollbar Styling */
.code-display-pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.code-display-pre::-webkit-scrollbar-track {
    background: var(--bg-primary, #050505);
}

.code-display-pre::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary, #26272B);
    border-radius: 5px;
}

.code-display-pre::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary, #007acc);
}

/* Syntax Highlighting - VS Code Dark Theme */
.code-display-pre .token.comment,
.code-display-pre .token.prolog,
.code-display-pre .token.doctype,
.code-display-pre .token.cdata {
    color: #6a9955;
}

.code-display-pre .token.punctuation {
    color: var(--ink, #F4F4F5);
}

.code-display-pre .token.property,
.code-display-pre .token.tag,
.code-display-pre .token.boolean,
.code-display-pre .token.number,
.code-display-pre .token.constant,
.code-display-pre .token.symbol,
.code-display-pre .token.deleted {
    color: #b5cea8;
}

.code-display-pre .token.selector,
.code-display-pre .token.attr-name,
.code-display-pre .token.string,
.code-display-pre .token.char,
.code-display-pre .token.builtin,
.code-display-pre .token.inserted {
    color: var(--warn, #E8B366);
}

.code-display-pre .token.operator,
.code-display-pre .token.entity,
.code-display-pre .token.url,
.code-display-pre .language-css .token.string,
.code-display-pre .style .token.string {
    color: var(--ink, #F4F4F5);
}

.code-display-pre .token.atrule,
.code-display-pre .token.attr-value,
.code-display-pre .token.keyword {
    color: var(--accent, #75DBD3);
}

.code-display-pre .token.function,
.code-display-pre .token.class-name {
    color: var(--warn, #E8B366);
}

.code-display-pre .token.regex,
.code-display-pre .token.important,
.code-display-pre .token.variable {
    color: #d16969;
}

/* ServiceNow-specific highlighting */
.code-display-pre .token.sn-api {
    color: var(--ok, #5FD68A);
}

/* JSON Syntax */
.code-display-pre.language-json .token.property {
    color: var(--accent, #75DBD3);
}

.code-display-pre.language-json .token.string {
    color: var(--warn, #E8B366);
}

.code-display-pre.language-json .token.number {
    color: #b5cea8;
}

.code-display-pre.language-json .token.boolean,
.code-display-pre.language-json .token.null {
    color: var(--accent, #75DBD3);
}

/* Inline Code Toolbar (for modal/preview displays) */
.code-toolbar-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary, #111112);
    border-radius: 6px 6px 0 0;
}

.code-toolbar-inline .btn {
    padding: 4px 10px;
    font-size: 11px;
}

.code-toolbar-inline .btn.active {
    background: var(--accent-primary, #007acc) !important;
    color: #fff !important;
}

/* Copy Success Animation */
@keyframes copySuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.code-display-btn.active {
    animation: copySuccess 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .code-display-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .code-display-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .code-display-pre {
        font-size: 12px;
        min-height: 300px;
        max-height: calc(100vh - 300px);
    }
}

/* Light Theme Support */
.theme-light .code-display-container {
    background: #f5f5f5;
    border-color: #ddd;
}

.theme-light .code-display-toolbar {
    background: #e8e8e8;
    border-color: #ddd;
}

.theme-light .code-display-btn {
    background: #fff;
    border-color: #ddd;
    color: #666;
}

.theme-light .code-display-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.theme-light .code-display-pre {
    background: #fff;
    color: #333;
}

.theme-light .code-display-line-numbers {
    background: #f0f0f0;
    border-color: #ddd;
    color: #999;
}