/* Codelauf: Editor, Knoepfe, Ausgabe (src/Codelauf.php, assets/js/codelauf.js).
 *
 * Die Farben kommen aus dem Theme (Bootstrap-Variablen), damit der Kasten im
 * hellen und im dunklen Modus lesbar bleibt - wie die Sqlprobe zeigt er eine
 * Flaeche der Plattform, keine fremde Seite.
 */

.codelauf {
    margin: 1rem 0;
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.codelauf-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f1f5f9);
}

.codelauf-sprache {
    font-weight: 600;
    font-size: .9rem;
    margin-inline-end: auto;
    color: var(--bs-secondary-color, #475569);
}

.codelauf-code {
    border: 0;
    border-radius: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: .95rem;
    line-height: 1.5;
    tab-size: 4;
    resize: vertical;
}

.codelauf-code:focus {
    box-shadow: none;
    outline: 2px solid var(--bs-primary, #1d6f8c);
    outline-offset: -2px;
}

.codelauf-ausgabe {
    margin: 0;
    padding: .75rem;
    border-top: 1px solid var(--bs-border-color, #d1d5db);
    background: var(--bs-tertiary-bg, #f8fafc);
    font-family: 'Courier New', Courier, monospace;
    font-size: .95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 22rem;
    overflow: auto;
}

/* Ein Fehler ist eine Auskunft, keine Schelte: markiert, aber nicht rot-grell. */
.codelauf-ausgabe[data-art="fehler"] {
    border-inline-start: 4px solid var(--bs-warning, #c26a1b);
}

.codelauf-ausgabe[data-art="hinweis"] {
    color: var(--bs-secondary-color, #475569);
    font-style: italic;
}

.codelauf-urteil {
    margin: 0;
    padding: .6rem .75rem;
    border-top: 1px solid var(--bs-border-color, #d1d5db);
    font-size: .95rem;
}

.codelauf-urteil.ist-richtig {
    color: var(--bs-success-text-emphasis, #0f5132);
    background: var(--bs-success-bg-subtle, #d1e7dd);
}

.codelauf-urteil.ist-abweichend {
    color: var(--bs-warning-text-emphasis, #664d03);
    background: var(--bs-warning-bg-subtle, #fff3cd);
}