/**
 * WordPress Python Editor - Styles
 */

/* Editor container */
.python-editor-container {
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Editor customization */
.python-editor-container .CodeMirror {
    height: 400px;
    border-radius: 4px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Output area */
.python-editor-container .output-area {
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* States for the output area */
.python-editor-container .output-area.loading {
    color: #6c757d;
    font-style: italic;
}

.python-editor-container .output-area.error {
    color: #dc3545;
}

.python-editor-container .output-area.success {
    color: #28a745;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .python-editor-container .editor-actions {
        display: flex;
        flex-wrap: wrap;
    }
    
    .python-editor-container .example-selector {
        margin-bottom: 10px;
        width: 100%;
    }
    
    .python-editor-container .CodeMirror {
        height: 300px;
    }
    
    .python-editor-container .output-area {
        min-height: 80px;
    }
}

/* Dark theme adjustments */
.python-editor-container[data-bs-theme="dark"] .card {
    border-color: #444;
}

.python-editor-container[data-bs-theme="dark"] .card-header {
    border-bottom-color: #444;
}

.python-editor-container[data-bs-theme="dark"] .card-footer {
    border-top-color: #444;
}

.python-editor-container[data-bs-theme="dark"] .output-area {
    background-color: #212529;
    border: 1px solid #444;
}