/* css/style.css */

/* ------------------------------------------------- */
/*                  STYLES GLOBAUX                   */
/* ------------------------------------------------- */
html, body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
}

/* ------------------------------------------------- */
/*              STYLES DES BOUTONS         */
/* ------------------------------------------------- */
.btn {
    display: inline-block;
    font-weight: 500;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}


.btn-lg {
    padding: 0.8rem 1.5rem;
    font-size: 1.25rem;
}

h2 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #555;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

/* ------------------------------------------------- */
/*              STRUCTURE DE L'APPLICATION           */
/* ------------------------------------------------- */
.app-container { display: flex; flex-direction: column; height: 100%; max-width: 1920px; margin: 0 auto; }
.main-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 2rem; background-color: #343a40; color: white; }
.main-header h1 { font-size: 1.5rem; }
.user-info { display: flex; align-items: center; gap: 1rem; }

.content-wrapper {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
    padding: 1.2rem;
    gap: 1.2rem;
}

#levels-column { flex: 1.5; }
.main-content-area { flex: 4.5; display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; height: 100%; }

.top-content-area { flex-grow: 1; display: flex; gap: 1.2rem; min-height: 0; }
.output-wrapper { flex-shrink: 0; height: 250px; }

#context-column { flex: 2.5; }
#editor-column { flex: 3; }

.panel-column, .main-column { display: flex; flex-direction: column; min-width: 0; height: 100%; }

/* ------------------------------------------------- */
/*                  STYLE DES PANNEAUX               */
/* ------------------------------------------------- */
.panel {
    background-color: #ffffff; border: 1px solid #dee2e6; border-radius: 8px;
    padding: 1.2rem;
    display: flex; flex-direction: column; overflow: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

#levels-column .panel, #context-column .panel, #editor-column .panel { flex-grow: 1; }
#context-column .panel { padding: 0; }
#editor-column .panel { flex-grow: 1; }
#editor-panel { padding: 0; display: flex; flex-direction: column; }
#editor-container { flex-grow: 1; width: 100%; }
#run-button { margin: 1rem; padding: 0.6rem 1.2rem; border: none; background-color: #007bff; color: white; border-radius: 5px; cursor: pointer; align-self: flex-start; flex-shrink: 0; font-weight: 500; }
#output-panel { height: 100%; }
#instructions-content p, #instructions-content h3 { margin-top: 0; }
#show-solution-btn { margin: 1rem; padding: 0.6rem 1.2rem; border: none; background-color: #278d70; color: white; border-radius: 5px; cursor: pointer; align-self: flex-start; flex-shrink: 0; font-weight: 500; }
#show-solution-btn:disabled { background-color: #b4eedd; color:#777  }

.tabbed-panel .tab-headers { display: flex; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.tabbed-panel .tab-button { padding: 0.8rem 1.5rem; border: none; background-color: transparent; cursor: pointer; font-size: 1rem; color: #6c757d; border-bottom: 3px solid transparent; }
.tabbed-panel .tab-button.active { color: #007bff; border-bottom-color: #007bff; font-weight: 600; }
.tabbed-panel .tab-content { padding: 1.2rem; display: none; overflow-y: auto; flex-grow: 1; }
.tabbed-panel .tab-content.active { display: block; }

/* ------------------------------------------------- */
/*          COMPOSANTS (NIVEAUX, SCHÉMA)    */
/* ------------------------------------------------- */
#levels-list, .levels-sublist { list-style-type: none; padding: 0; margin: 0; }
.levels-sublist { padding-left: 15px; margin-bottom: 8px; }

.category-header { background-color: #f8f9fa; padding: 10px 15px; margin-top: 5px; cursor: pointer; border: 1px solid #dee2e6; border-radius: 5px; transition: background-color 0.2s; font-size: 0.95rem; font-weight: 600; }
.category-header:hover { background-color: #e9ecef; }
.levels-sublist.hidden { display: none; }
.level-item { padding: 10px 15px; border-bottom: 1px solid #f1f1f1; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
.level-item:hover { background-color: #f8f9fa; }
.level-item.completed::before { content: '✔ '; color: #28a745; font-weight: bold; }
.level-item.active { background-color: #007bff; color: white; font-weight: bold; border-color: #007bff; }

.table-name { font-weight: bold; cursor: pointer; padding: 5px; }
.columns-list { list-style-type: none; padding-left: 20px; font-size: 0.9rem; }
.columns-list li { padding: 2px 0; }
.column-type { color: #6c757d; }

.results-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.results-table th, .results-table td { padding: 8px 12px; border: 1px solid #dee2e6; text-align: left; }
.results-table thead { background-color: #f8f9fa; }
.result-message { padding: 1rem; border-radius: 5px; }
.result-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.result-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.validation-feedback { margin-bottom: 1rem; padding: 1rem; border: 1px solid #eee; border-radius: 5px; }
.validation-feedback ul { list-style-type: none; padding: 0; margin: 0; }
.validation-feedback li { padding: 0.25rem 0; }
.validation-feedback li.pass::before { content: '✔ '; color: #28a745; font-weight: bold; }
.validation-feedback li.fail::before { content: '✖ '; color: #dc3545; font-weight: bold; }

.key-indicator { display: inline-block; padding: 2px 5px; font-size: 0.75rem; font-weight: bold; border-radius: 4px; margin-right: 8px; color: white; }
.key-indicator.pk { background-color: #f0ad4e; }
.key-indicator.fk { background-color: #5bc0de; }
.columns-list li { display: flex; align-items: center; padding: 2px 0; }

/* ------------------------------------------------- */
/*                  PLEIN ÉCRAN EDITEUR              */
/* ------------------------------------------------- */

#editor-panel { position: relative; }
.editor-controls { position: absolute; top: 10px; right: 20px; z-index: 10; }
#fullscreen-toggle-btn { background: #555; border: none; color: white; cursor: pointer; border-radius: 4px; padding: 5px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
#fullscreen-toggle-btn:hover { background: #777; }
#fullscreen-toggle-btn svg { width: 16px; height: 16px; }

.app-container.editor-fullscreen #levels-column,
.app-container.editor-fullscreen #context-column { display: none; }

/* ------------------------------------------------- */
/*                  STYLES DASHBOARD ÉTUDIANT        */
/* ------------------------------------------------- */
.dashboard-body { display: flex; justify-content: center; align-items: center; height: 100vh; }
.dashboard-container { text-align: center; background: white; padding: 3rem 4rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-width: 600px; }
.progress-bar-container { background-color: #e9ecef; border-radius: 10px; height: 20px; width: 100%; margin: 1.5rem 0 0.5rem; overflow: hidden; }
.progress-bar { background-color: #007bff; height: 100%; border-radius: 10px; transition: width 0.5s ease-in-out; }
.dashboard-button { display: inline-block; margin-top: 2rem; padding: 0.8rem 1.5rem; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; font-weight: 500; transition: background-color 0.2s; }
.dashboard-button:hover { background-color: #218838; }
.dashboard-logout { display: block; margin-top: 1rem; color: #6c757d; }

.dashboard-section-title { margin-top: 2.5rem; font-size: 1.2rem; color: #495057; border-bottom: 1px solid #e9ecef; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
#category-progress-container { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.category-progress-item { font-size: 0.9rem; }
.category-progress-item .label-line { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-weight: 500; }
.category-progress-item .percentage { font-weight: bold; color: #007bff; }
.category-progress-item .progress-bar-container { height: 10px; margin: 0; }
#activity-feed-container ul { list-style-type: none; padding: 0; margin: 0; text-align: left; }
#activity-feed-container li { padding: 0.8rem 0; border-bottom: 1px solid #f1f1f1; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
#activity-feed-container li:last-child { border-bottom: none; }
.activity-text::before { margin-right: 0.8rem; font-weight: bold; }
.activity-text.correct::before { content: '✔'; color: #28a745; }
.activity-text.incorrect::before { content: '✖'; color: #dc3545; }
.activity-timestamp { font-size: 0.85rem; color: #6c757d; flex-shrink: 0; padding-left: 1rem; }

/* Dashboard étudiant multi-colonnes */
.dashboard-container { max-width: 1100px; text-align: left; }
#dashboard-greeting { margin-bottom: 2rem; }
.dashboard-main-content { display: grid; grid-template-columns: 2fr 3fr; gap: 2.5rem; width: 100%; }
.dashboard-column { display: flex; flex-direction: column; gap: 2.5rem; }
.dashboard-panel { background-color: #fff; padding: 1.5rem 2rem; border-radius: 8px; border: 1px solid #e9ecef; }
.dashboard-section-title { margin-top: 0; }
#continue-button { width: 100%; box-sizing: border-box; text-align: center; }

/* ------------------------------------------------- */
/*                 STYLES DES MODALES                */
/* ------------------------------------------------- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fff; margin: 8% auto; padding: 2rem; border: 1px solid #ddd; width: 90%; max-width: 500px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1rem; }
.modal-header h2 { margin: 0; border: none; padding: 0; }
.modal-body .form-group { margin-bottom: 1rem; }
.modal-body label { display: block; margin-bottom: .5rem; font-weight: 600; }
.modal-body input[type="text"], .modal-body input[type="file"], .modal-body textarea, .modal-body select { width: 100%; padding: .7rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.modal-footer { display: flex; justify-content: flex-end; align-items: center; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #eee; gap: 0.5rem; }
.modal-footer div[id$="-feedback"] { margin-right: auto; font-size: 0.9rem; font-weight: 500; }

.modal {
    display: none; /* Caché par défaut */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Empêche le scroll de la page derrière */
    background-color: rgba(0,0,0,0.6); 
    /* Centrage */
    justify-content: center;
    align-items: center;
}
.modal.active {
    display: flex; /* Utiliser flex pour centrer */
}
.modal-content { 
    background-color: #fff; 
    padding: 0; 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    width: 90%; 
    max-width: 500px;
    max-height: 90vh; /* Hauteur maximale */
    display: flex;
    flex-direction: column;
}
.modal-header { padding: 1.5rem 2rem; border-bottom: 1px solid #eee; }
.modal-header h2 { margin: 0; }
.modal-body { padding: 1.5rem 2rem; overflow-y: auto; } /* C'est ici que le scroll se produit */
.modal-footer { padding: 1.5rem 2rem; border-top: 1px solid #eee; background-color: #f8f9fa; }

/* ------------------------------------------------- */
/*              STYLES DASHBOARD PROFESSEUR          */
/* ------------------------------------------------- */
.profile-wrapper { padding: 2rem; max-width: 1400px; margin: 0 auto; }

/* NOUVELLE MISE EN PAGE DU DASHBOARD PROF */
.dashboard-grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Colonne principale plus large, sidebar plus étroite */
    gap: 2rem;
    align-items: start;
}
.dashboard-column-left, .dashboard-column-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}
.panel-header h2 {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 1.2rem;
}
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f1f1f1;
}
.list-item:last-child {
    border-bottom: none;
}
.list-item-title {
    font-weight: 500;
}
.list-item-actions {
    display: flex;
    gap: 0.5rem;
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: #6c757d;
}
.btn-icon:hover { color: #333; }
.btn-icon svg { width: 18px; height: 18px; }

/* MODALE LARGUE */
.modal-content.modal-lg {
    max-width: 800px;
    margin: 4% auto; /* Moins de marge en haut */
}
.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e9ecef;
    color: #007bff;
}
.form-section-title:first-of-type {
    margin-top: 0;
}


/* ASSISTANT D'OBJECTIFS */
.objective-block {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 1rem;
    background: #fff;
    overflow: hidden;
}
.objective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
}
.objective-header .objective-type-select {
    font-weight: bold;
    border: none;
    background: transparent;
    font-size: 1rem;
    flex-grow: 1;
    padding: 0.2rem;
}
.remove-objective-btn {
    border: none;
    background: none;
    color: #dc3545;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}
.objective-body {
    padding: 1.2rem;
}
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.form-group-inline label {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ------------------------------------------------- */
/*                     HEADER & MENU                 */
/* ------------------------------------------------- */
.user-menu { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: 0.75rem; background-color: transparent; border: none; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
.user-menu-trigger:hover { background-color: rgba(255, 255, 255, 0.1); }
.header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.5); }
#user-greeting { color: white; font-weight: 500; }
.dropdown-arrow { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.7); }
.user-menu-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; background-color: white; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); min-width: 200px; z-index: 1000; padding: 0.5rem 0; overflow: hidden; }
.user-menu-dropdown.active { display: block; }
.dropdown-item { display: block; padding: 0.75rem 1.25rem; color: #333; text-decoration: none; font-size: 0.95rem; transition: background-color 0.2s; }
.dropdown-item:hover { background-color: #f0f2f5; }
.dropdown-divider { height: 1px; background-color: #e9ecef; margin: 0.5rem 0; }

/* ------------------------------------------------- */
/*                  PAGE DE PROFIL                   */
/* ------------------------------------------------- */
.profile-content { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-top: 1.5rem; }
.profile-column .dashboard-panel { background: #fff; padding: 1.5rem 2rem; border-radius: 8px; border: 1px solid #dee2e6; }
.avatar-container { text-align: center; position: relative; }
.profile-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1rem; }
.avatar-upload-label { cursor: pointer; background-color: #007bff; color: white; padding: 0.5rem 1rem; border-radius: 5px; font-weight: 500; transition: background-color 0.2s; }
.avatar-upload-label:hover { background-color: #0056b3; }
.form-message { margin-top: 1rem; min-height: 1em; font-weight: 500; }
.profile-content .form-group { margin-bottom: 1.2rem; }
.profile-content .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #555; }
.profile-content .form-group input { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 1rem; }
.profile-content button[type="submit"] { width: 100%; padding: 0.75rem; border: none; border-radius: 4px; background-color: #007bff; color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; margin-top: 1rem; }
.profile-content button[type="submit"]:hover { background-color: #0056b3; }
.input-readonly { background-color: #e9ecef; cursor: not-allowed; }
.category-badge {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 8px;
}

#custom-level-list-container .category-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    margin-top: 5px;
    cursor: pointer;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    transition: background-color 0.2s;
    font-size: 0.95rem;
    font-weight: 600;
}

#custom-level-list-container .category-header:hover {
    background-color: #e9ecef;
}

#custom-level-list-container .levels-sublist {
    list-style-type: none;
    padding: 0;
    margin: 0 0 8px 0;
    padding-left: 15px;
    border-left: 2px solid #e9ecef;
}

#custom-level-list-container .levels-sublist.hidden {
    display: none;
}
.list-item {
    /* On s'assure que le conteneur principal est flexible */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-item-content {
    /* Ce nouveau conteneur regroupe le titre et les détails */
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* Espace entre le titre et les détails */
}

.list-item-details {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espace entre chaque groupe d'icône/texte */
    font-size: 0.85rem;
    color: #6c757d;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Espace entre une icône et son texte */
}

.detail-item svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}


#assigned-levels-panel {
    grid-column: 1 / -1; /* Fait en sorte que le panneau prenne toute la largeur */
}

.assignment-item {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid #f1f1f1;
    display: grid;
    grid-template-columns: 1fr auto auto; /* Titre | Dates | Actions */
    gap: 1rem;
    align-items: center;
}
.assignment-item:last-child { border-bottom: none; }

.assignment-details { font-size: 0.85rem; color: #555; }
.assignment-dates { display: flex; flex-direction: column; gap: 0.2rem; text-align: right; }
.assignment-actions { display: flex; gap: 0.5rem; }

/* Styles pour la modale d'assignation */
#assign-level-modal .tab-headers {
    margin-bottom: 1rem;
}
.assign-level-list {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 5px;
}
.assign-level-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f1f1;
}
.assign-level-item:last-child { border-bottom: none; }
.level-info-author {
    font-size: 0.8rem;
    color: #6c757d;
    margin-left: 0.5rem;
}
#assign-level-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
#assign-level-form .form-group {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.assign-level-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.assign-level-controls input[type="text"] {
    flex-grow: 1;
}

#my-levels-list .category-header,
#public-levels-list .category-header {
    padding: 8px 12px;
    font-size: 0.9rem;
    background-color: #f1f1f1;
}

#my-levels-list .levels-sublist,
#public-levels-list .levels-sublist {
    border-left: none;
    padding-left: 0;
}


.btn-icon:hover { color: #333; }
.btn-icon svg { width: 18px; height: 18px; }

/* MODIFICATION: Style pour un bouton de suppression plus discret dans une liste */
.btn-subtle-danger {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-subtle-danger:hover {
    background-color: #dc3545;
    color: white;
}
.assign-level-item.selectable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s;
}
.assign-level-item.selectable:hover {
    background-color: #f8f9fa;
}
.assign-level-item.selected {
    background-color: #eaf5ff;
    font-weight: bold;
}
.level-select-checkbox {
    flex-shrink: 0;
}
.level-select-label {
    flex-grow: 1;
    cursor: pointer; /* Pour que le curseur soit une main sur le label aussi */
}
.class-detail-header {
    display: flex;
    justify-content: space-between; /* Aligne les éléments aux extrémités */
    align-items: center;            /* Centre les éléments verticalement */
    margin-bottom: 2rem;
}
.class-detail-header #student-list-title {
    font-size: 2rem;
    margin: 0; /* Assure qu'il n'y a pas de marge par défaut */
    padding: 0;
    border: none;
}

.class-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.class-card {
    display: block;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.class-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.class-card-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    color: #007bff;
}

.class-card-prof {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.class-card .progress-bar-container {
    height: 10px;
    margin-bottom: 0.5rem;
}

.class-card-progress {
    margin: 0;
    font-size: 0.85rem;
    color: #495057;
    text-align: right;
}

.solo-practice-button {
    background-color: #6c757d; /* Couleur secondaire */
    display: inline-block; /* Pour que le margin-top fonctionne */
    margin-top: 1rem;
}
.solo-practice-button:hover {
    background-color: #5a6268;
}

.class-card-wrapper {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.class-card-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Le lien principal ne contient que les infos générales */
.class-card-main-link {
    display: block;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
}

/* Les détails (catégories) sont dans une section séparée */
.class-card-details {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* On réutilise les styles de la vue "solo" pour la cohérence */
.class-card-details .category-progress-item {
    font-size: 0.9rem;
}
.class-card-details .category-progress-item .label-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-weight: 500;
}
.class-card-details .category-progress-item .percentage {
    font-weight: bold;
    color: #007bff;
}
.class-card-details .category-progress-item .progress-bar-container {
    height: 8px; /* Un peu plus fin pour s'intégrer dans la carte */
    margin: 0;
}

/* On retire l'ancienne décoration du .class-card qui est maintenant gérée par le wrapper */
.class-card {
    display: block;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: none;
    box-shadow: none;
}
.class-card:hover {
    transform: none;
    box-shadow: none;
}
/* AJOUTER À LA FIN DE css/style.css */
.level-item.locked {
    color: #999;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.level-item.locked svg {
    vertical-align: middle;
    margin-left: 5px;
}

/* Style pour le bouton solution à côté du bouton Exécuter */
#editor-panel {
    position: relative; /* Nécessaire pour le positionnement du bouton fullscreen */
}

/* Wrapper pour les boutons sous l'éditeur */
.editor-action-buttons {
    display: flex;
    gap: 0.75rem;
    margin: 1rem;
    align-self: flex-start;
}
#editor-panel {
    /* On s'assure que le panel est un conteneur de positionnement */
    position: relative;
}

.editor-controls {
    /* On positionne le conteneur du bouton en haut à droite de l'éditeur */
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10;
}

#fullscreen-toggle-btn {
    /* Style du bouton lui-même */
    background: #555;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

#fullscreen-toggle-btn:hover {
    background: #777;
}

/* On définit la taille de l'icône SVG à l'intérieur du bouton */
#fullscreen-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Styles pour gérer la vue en Plein Écran --- */

/* Quand l'app-container a la classe 'editor-fullscreen', on cache les panneaux latéraux */
.app-container.editor-fullscreen #levels-column,
.app-container.editor-fullscreen #context-column {
    display: none;
}

.editor-action-buttons {
    display: flex;       /* Aligne les éléments sur une ligne */
    gap: 0.75rem;        /* Ajoute un petit espace entre les boutons */
    margin: 1rem;        /* Marge autour du groupe de boutons */
    align-self: flex-start; /* Empêche le groupe de s'étirer sur toute la largeur */
}

.student-item .list-item-content {
    cursor: pointer;
}
.student-item:hover {
    background-color: #f8f9fa;
}

#student-progress-container .panel {
    margin-bottom: 2rem;
}
#student-progress-container .panel-header h3 {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 1.2rem;
    color: #333;
}
#student-progress-container .panel-header span {
    font-weight: 500;
    color: #6c757d;
}

.progress-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}
.progress-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.progress-item:first-child {
    padding-top: 0;
}

.progress-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.progress-item-title {
    font-weight: 600;
    font-size: 1rem;
}

.progress-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.completion-date {
    color: #555;
}

.status-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.8rem;
    color: white;
    text-align: center;
    min-width: 90px;
}

.status-badge.status-completed { background-color: #28a745; }
.status-badge.status-in-progress { background-color: #ffc107; color: #333; }
.status-badge.status-not-started { background-color: #6c757d; }

.progress-item-body .submission-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
}

.submission-code {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 0.8rem;
    border-radius: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    word-break: break-all;
    border-left-width: 4px;
}

.submission-code.correct {
    border-left-color: #28a745;
    background-color: #f0fff4;
}

.submission-code.incorrect {
    border-left-color: #dc3545;
    background-color: #fff5f5;
}

.assignment-item {
    /* On change le display en flex pour aligner le handle et le contenu */
    display: flex; 
    grid-template-columns: unset; /* On annule le grid précédent */
    align-items: center;
    gap: 1rem;
}

.drag-handle {
    cursor: grab;
    color: #adb5bd;
    padding: 0.5rem;
}
.drag-handle:active {
    cursor: grabbing;
}

/* Le reste des éléments doit maintenant prendre toute la place disponible */
.assignment-details { flex-grow: 1; }
.assignment-dates { flex-shrink: 0; }
.assignment-actions { flex-shrink: 0; }

/* Classe ajoutée par SortableJS pendant le drag */
.sortable-ghost {
    background: #e9ecef;
    opacity: 0.6;
}
.sortable-drag {
    opacity: 1 !important;
}

/* Style pour l'en-tête de catégorie dans la liste des exercices assignés */
.assigned-category-header {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.assigned-category-header:first-child {
    margin-top: 0;
}

.assigned-category-header:hover {
    background-color: #e9ecef;
}

/* Style pour le chevron de l'accordéon */
.assigned-category-header::after {
    content: '▼';
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

.assigned-category-header.collapsed::after {
    transform: rotate(-90deg);
}

/* Conteneur pour la sous-liste des exercices */
.assigned-levels-sublist {
    padding-left: 1rem;
    border-left: 2px solid #e9ecef;
    margin-left: 1rem;
}

.assigned-levels-sublist.hidden {
    display: none;
}

/* On ajuste légèrement l'item pour qu'il s'aligne bien */
.assigned-levels-sublist .assignment-item {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f1f1f1;
}
.assigned-levels-sublist .assignment-item:last-child {
    border-bottom: none;
}