/* Shared styles for all Ingenieurinformatik Python-Module (python_variablen,
   python_listen, python_dictionarys, python_if_elif_else, python_for,
   python_while, python_do_while, python_funktionen, python_if_name_main,
   python_kombiniert, python_kniffel).
   Container, Module-Nav, Card and heading styles come from
   app/static/css/base/blueprint_elearning.css. This file holds only
   Python-module-specific overrides (code snippets, status table,
   export form). Tokens: colors.css + tokens.css. */

.pyv-h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--textcolor-fullcontrast);
    margin: var(--spacing-2xl) 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: var(--border-thin) solid var(--surface-border-light);
}

.pyv-h2:first-child { margin-top: 0; }

.pyv-snippet {
    background: var(--slate-50);
    border: var(--border-thin) solid var(--surface-border-light);
    border-left: var(--border-thick) solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: var(--spacing-sm) 0;
    color: var(--gray-800);
    white-space: pre;
    overflow-x: auto;
}

.elearn-card code {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    padding: 0.05em 0.4em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.elearn-card.warning code {
    /* Neutral code-bg so the inline-snippet remains readable on amber card */
    background: rgba(var(--neutrals-0-rgb), 0.6);
}

.pyv-tryit {
    font-weight: 600;
    color: var(--textcolor-50contrast);
    margin-bottom: var(--spacing-xs);
    font-size: var(--text-sm);
}

.pyv-task-list {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-xl);
}

.pyv-task-list li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.55;
}

.pyv-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    text-decoration: none;
}

/* The Anleitungs-Page reuses tutorial.css backgrounds — give the embedded
   E-Learning container a small inset so it sits flush inside the card. */
.pyv-anleitung { padding: 0; max-width: none; }
.pyv-anleitung .pyv-h2:first-of-type { margin-top: var(--spacing-sm); }

/* Inline-<code> in the module-nav button should be unstyled */
.pyv-anleitung .module-nav-btn code,
.pyv-aufgabe .module-nav-btn code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.95em;
}

/* Spacing under the „Weiter zu Modul X →" button.
   display:block + text-align:right ersetzt die früheren Inline-style="display:block;"
   auf den .tnsel-next-module-DIVs (überschreibt die Blueprint-Regel display:flex). */
.pyv-anleitung .tnsel-next-module,
.pyv-aufgabe .tnsel-next-module {
    display: block;
    margin: 1.75rem 0 var(--spacing-sm) 0;
    text-align: right;
}

/* Code editor in the tasks should be taller than in the tutorial examples.
   CodeMirror-scroll is the actual scroll container — min-height must be set
   there for the visible area to grow. */
.pyv-aufgabe .python-runner-editor .CodeMirror,
.pyv-aufgabe .python-runner-editor .CodeMirror-scroll {
    min-height: 220px;
}

/* ── Protokoll-Teil: Status-Tabelle ──────────────────────────────── */
.pyv-status-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-xs);
}
.pyv-status-table th,
.pyv-status-table td {
    padding: 0.55rem 0.8rem;
    border-bottom: var(--border-thin) solid var(--surface-border-light);
    text-align: left;
    font-size: var(--text-sm);
}
.pyv-status-table th {
    background: var(--surface-bg);
    font-weight: 600;
}
.pyv-status {
    font-weight: 600;
}
.pyv-status--done {
    color: var(--success-800);
    background: var(--success-50);
}
.pyv-status--open {
    color: var(--error-800);
    background: var(--error-50);
}
.pyv-export-hint {
    margin: 0.8rem 0 0 0;
    font-size: var(--text-sm);
    color: var(--textcolor-50contrast);
}

/* ── Protokoll-Teil: Export-Formular ─────────────────────────────── */
.pyv-export-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}
.pyv-name-input {
    flex: 0 1 220px;
    max-width: 220px;
    min-width: 0;
    padding: 0.4rem 0.65rem;
    border: var(--border-thin) solid var(--surface-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}
.pyv-name-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.pyv-export-feedback {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
}
.pyv-export-feedback--info {
    background: var(--primary-tint);
    color: var(--primary-color);
    border: var(--border-thin) solid rgba(var(--primary-rgb), 0.3);
}
.pyv-export-feedback--success {
    background: var(--success-50);
    color: var(--success-900);
    border: var(--border-thin) solid var(--success-200);
}
.pyv-export-feedback--error {
    background: var(--error-50);
    color: var(--error-800);
    border: var(--border-thin) solid var(--error-200);
}