/* Code Generator Styles - Syntax Highlighting */

/* Code block container */
.code-output {
    background: #1e1e1e;
    border: 1px solid #304f78;
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Code header with language indicator */
.code-header {
    background: rgba(72, 101, 139, 0.3);
    padding: 8px 15px;
    border-bottom: 1px solid #304f78;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-language-badge {
    color: #6afcff;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
}

.code-variation-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 10px;
}

.code-copy-btn {
    background: rgba(106, 252, 255, 0.1);
    border: 1px solid #6afcff;
    color: #6afcff;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
}

.code-copy-btn:hover {
    background: rgba(106, 252, 255, 0.2);
    border-color: #8cfdff;
}

.code-copy-btn.copied {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4CAF50;
    color: #4CAF50;
}

/* Code content area */
.code-content {
    padding: 15px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #d4d4d4;
}

.code-content pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.code-content code {
    font-family: inherit;
    background: transparent;
    padding: 0;
    color: inherit;
}

.code-content code[class*="language-"] {
    display: block;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #d4d4d4;
}

/* Syntax highlighting colors - VS Code Dark+ theme inspired */

/* Keywords */
.keyword {
    color: #569cd6;
    font-weight: bold;
}

/* Strings */
.string {
    color: #ce9178;
}

/* Numbers */
.number {
    color: #b5cea8;
}

/* Comments */
.comment {
    color: #6a9955;
    font-style: italic;
}

/* Function names */
.function {
    color: #dcdcaa;
}

/* Class names */
.class-name {
    color: #4ec9b0;
}

/* Variables */
.variable {
    color: #9cdcfe;
}

/* Operators */
.operator {
    color: #d4d4d4;
}

/* Punctuation */
.punctuation {
    color: #d4d4d4;
}

/* Built-in types */
.type {
    color: #4ec9b0;
}

/* Constants */
.constant {
    color: #4fc1ff;
}

/* Decorators/Annotations */
.decorator {
    color: #c586c0;
}

/* Properties */
.property {
    color: #9cdcfe;
}

/* Tags (HTML) */
.tag {
    color: #569cd6;
}

/* Attributes (HTML) */
.attr-name {
    color: #9cdcfe;
}

/* Attribute values (HTML) */
.attr-value {
    color: #ce9178;
}

/* Regex */
.regex {
    color: #d16969;
}

/* Escape sequences */
.escape {
    color: #d7ba7d;
}

/* Boolean */
.boolean {
    color: #569cd6;
}

/* Null/None/Nil */
.null {
    color: #569cd6;
}

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

.line-number {
    color: #858585;
    padding-right: 15px;
    user-select: none;
    text-align: right;
    min-width: 40px;
}

.line-content {
    flex: 1;
}

/* Scrollbar styling for code blocks */
.code-content::-webkit-scrollbar {
    height: 8px;
    background: rgba(72, 101, 139, 0.2);
}

.code-content::-webkit-scrollbar-thumb {
    background: rgba(72, 101, 139, 0.5);
    border-radius: 4px;
}

.code-content::-webkit-scrollbar-thumb:hover {
    background: rgba(72, 101, 139, 0.7);
}

/* Code metadata footer */
.code-footer {
    background: rgba(72, 101, 139, 0.2);
    padding: 8px 15px;
    border-top: 1px solid #304f78;
    font-size: 0.85em;
    color: #999;
}

/* Responsive */
@media (max-width: 768px) {
    .code-content {
        font-size: 12px;
        padding: 10px;
    }
    
    .code-header {
        padding: 6px 10px;
    }
    
    .code-copy-btn {
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

/* Language-specific adjustments */
.code-output[data-language="python"] .keyword {
    /* Python keywords can have slightly different color if needed */
}

.code-output[data-language="javascript"] .keyword {
    /* JavaScript keywords */
}

/* Error/Warning highlights */
.code-error {
    background: rgba(255, 0, 0, 0.1);
    border-bottom: 2px wavy #ff0000;
}

.code-warning {
    background: rgba(255, 165, 0, 0.1);
    border-bottom: 2px wavy #ffa500;
}

/* Selection styling */
.code-content ::selection {
    background: rgba(106, 252, 255, 0.3);
}

.code-content ::-moz-selection {
    background: rgba(106, 252, 255, 0.3);
}

/* Loading state */
.code-loading {
    text-align: center;
    padding: 40px;
    color: #6afcff;
}

.code-loading::after {
    content: '...';
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}