/* Styles pour les exercices de code */

#codeEditor {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
    tab-size: 4;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
}

#codeEditor:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.test-item {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.test-item:last-child {
    border-bottom: none;
}

.test-item code {
    background-color: #f8f9fa;
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
    word-break: break-word;
}

.test-status small {
    font-size: 0.875rem;
}

#testResults {
    animation: fadeIn 0.3s ease-in;
}

#testError {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour les badges de test */
.test-item .badge {
    transition: all 0.3s ease;
}

/* Styles pour le mode sombre si nécessaire */
@media (prefers-color-scheme: dark) {
    #codeEditor {
        background-color: #2d2d2d;
        color: #f8f9fa;
        border-color: #495057;
    }

    .test-item code {
        background-color: #343a40;
        color: #f8f9fa;
    }
}

/* Amélioration responsive */
@media (max-width: 768px) {
    #codeEditor {
        font-size: 12px;
    }

    .test-item code {
        font-size: 0.75rem;
    }
}

/* Boutons d'action */
#runTests, #resetCode {
    min-width: 120px;
    transition: all 0.2s ease;
}

#runTests:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#runTests:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Section des résultats */
#testResultsList .alert {
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Console d'exécution Python */
.code-console {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    border: 1px solid rgba(0,0,0,0.08);
    background: #0d1117;
    color: #e6eef8;
    border-radius: 6px;
    min-height: 100px;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
}

@media (prefers-color-scheme: light) {
    .code-console { background: #0f1724; color: #e6eef8; border-color: rgba(255,255,255,0.03); }
}

/* Per-line console styles */
.code-console .console-line { display: block; padding: 2px 6px; border-radius: 4px; margin: 2px 0; white-space: pre-wrap; }
.code-console .console-stdout { color: #dbeafe; background: rgba(255,255,255,0.01); }
.code-console .console-info { color: #c7f9d4; background: rgba(0,255,150,0.02); }
.code-console .console-error { color: #ffd6d6; background: rgba(255,0,0,0.04); font-weight: 600; }

@media (prefers-color-scheme: light) {
    .code-console .console-stdout { color: #0b1220; background: rgba(13,110,253,0.04); }
    .code-console .console-info { color: #0b2e12; background: rgba(40,167,69,0.04); }
    .code-console .console-error { color: #4a1a1a; background: rgba(255,0,0,0.06); }
}