/* --- START: Toevoegingen/Aanpassingen aan style.css --- */

/* --- Navigatiemenu --- */
.main-nav { background-color: #343a40; padding: 10px 0; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.main-nav ul { list-style: none; padding: 0; margin: 0 auto; max-width: 950px; text-align: center; }
.main-nav li { display: inline-block; margin: 0 15px; }
.main-nav a { color: #f8f9fa; text-decoration: none; padding: 8px 15px; border-radius: 4px; transition: background-color 0.3s ease; }
.main-nav a:hover { background-color: #495057; text-decoration: none; }
.main-nav a.active { background-color: #007bff; font-weight: bold; }

/* --- Info Link Box (index.html) --- */
.info-link { background-color: #e9ecef; border: 1px solid #dee2e6;}
.info-link p { margin-bottom: 5px; }

/* --- Modus Selector (index.html) --- */
.mode-selector {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    text-align: left;
}
.mode-selector label {
    cursor: pointer;
    font-weight: normal; /* Maak label niet vet */
}
.mode-selector input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}
.mode-selector p {
    text-align: left; /* Aligneer helptekst links */
    margin-left: 25px; /* Indent helptekst */
}


/* --- AI Persoonlijkheid Selector (index.html) --- */
.ai-personality-selector { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #fdfdfd; text-align: left; }
.ai-personality-selector label { display: inline-block; margin-right: 10px; font-weight: bold; vertical-align: middle; }
.ai-personality-selector select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; min-width: 250px; vertical-align: middle; }

/* --- Extra Knop Styling (Log knop) --- */
.info-btn { background-color: #17a2b8; font-size: 0.9em; padding: 8px 15px; }
.info-btn:hover { background-color: #138496; }

/* --- Docs Pagina Specifiek --- */
.docs-content { max-width: 800px; margin: 20px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: left; }
.docs-content h2 { text-align: left; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 30px; }
.docs-content h3 { text-align: left; margin-top: 25px; font-size: 1.2em; color: #333; }
.docs-content p, .docs-content ul, .docs-content li, .docs-content ol { text-align: left; margin-bottom: 15px; }
.docs-content ul { list-style: disc; padding-left: 30px; }
.docs-content ol { list-style: decimal; padding-left: 30px; }
.docs-content .warning { color: #dc3545; font-weight: bold; }

/* --- END: Toevoegingen/Aanpassingen --- */
.mode-selector {
    margin-bottom: 15px;
    padding: 15px; /* Meer padding */
    background-color: #e9ecef; /* Andere achtergrond voor onderscheid */
    border: 1px solid #ced4da;
    border-radius: 5px;
    text-align: left;
}
.mode-selector label {
    cursor: pointer;
    font-weight: normal;
    display: block; /* Label op eigen regel */
}
.mode-selector label strong {
     font-weight: bold; /* Maak hoofdtekst vet */
     font-size: 1.1em;
}

.mode-selector input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
    transform: scale(1.2); /* Maak checkbox iets groter */
}
.mode-selector p {
    text-align: left;
    margin-left: 28px; /* Lijn helptekst uit met tekst na checkbox */
    margin-top: 5px;
    margin-bottom: 0;
}

/* Zorg dat student management sectie verborgen kan worden */
#studentManagementSection {
    /* Standaard zichtbaar als container zichtbaar is, JS regelt de rest */
}


/* --- REST VAN style.css (uit vorige response) --- */
body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; color: #333; }
h1, h2, h3, h4 { color: #0056b3; text-align: center; margin-bottom: 15px; }
h4 { margin-top: 0; font-size: 1.1em; color: #333; }
p { text-align: center; margin-bottom: 15px; max-width: 700px; margin-left: auto; margin-right: auto; }
hr { border: none; border-top: 1px solid #eee; margin: 25px 0; }
code { background-color: #e9ecef; padding: 2px 4px; border-radius: 3px; font-family: monospace; display: inline-block; }
.status-message { font-style: italic; color: green; text-align: center; margin-top: 10px; min-height: 1.2em; }
.status-message.error { color: #dc3545; }
.status-message.warning { color: #ffc107; }
.rubric-container, .history-section, .ai-generator-container, .student-container, .results-container { background-color: #fff; padding: 25px; margin: 20px auto; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 950px; }
button, #downloadLink, .example-download-link { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; text-decoration: none; display: inline-block; transition: background-color 0.3s ease; vertical-align: middle; }
button:hover, #downloadLink:hover, .example-download-link:hover { background-color: #0056b3; }
button:disabled { background-color: #ccc; cursor: not-allowed; }
.button-container { text-align: center; margin-top: 20px; }
.button-container button, .button-container a { margin: 5px 10px; }
#addCriterionBtn { background-color: #17a2b8; } #addCriterionBtn:hover { background-color: #138496; }
#saveRubricBtn, #saveStudentGradeBtn { background-color: #28a745; } #saveRubricBtn:hover, #saveStudentGradeBtn:hover { background-color: #218838; }
#importCsvRubricBtn, #importCsvStudentsBtn { background-color: #6c757d; } #importCsvRubricBtn:hover, #importCsvStudentsBtn:hover { background-color: #5a6268; }
#exportRubricBtn { background-color: #ffc107; color: #333; } #exportRubricBtn:hover { background-color: #e0a800; }
#generateSuggestionsBtn { background-color: #fd7e14; } #generateSuggestionsBtn:hover { background-color: #e66b00; }
#generateAllBtn { background-color: #dc3545; } #generateAllBtn:hover { background-color: #c82333; }
.warning-btn { background-color: #ffc107; color: #333; } .warning-btn:hover { background-color: #e0a800;}
.definition-container h2 { margin-bottom: 10px; }
.definition-container h3 { text-align: left; margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.import-export-section { display: flex; gap: 20px; background-color: #f8f9fa; padding: 20px; border: 1px solid #e9ecef; border-radius: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.import-export-section h3 { width: 100%; margin-top: 0; margin-bottom: 20px; border-bottom: none; text-align: center; }
.import-column, .export-column { flex: 1; min-width: 300px; background-color: #fff; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.import-column .instructions, .export-column .instructions { font-size: 0.9em; color: #6c757d; padding: 10px; border-radius: 4px; border: 1px solid #eee; margin-bottom: 15px; text-align: left; background-color: #f8f9fa; }
.example-download-link { display: block; margin-top: 8px; font-size: 0.9em; cursor: pointer; }
.import-column input[type="file"] { display: block; margin: 10px 0; }
.import-column button, .export-column button { display: block; margin: 10px 0; }
.criterion-definition { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; background-color: #f9f9f9; position: relative; }
.criterion-definition label { display: block; margin-bottom: 5px; font-weight: bold; }
.criterion-definition input[type="text"], .criterion-definition input[type="number"], .criterion-definition textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.criterion-definition textarea { min-height: 60px; resize: vertical; }
.criterion-definition .levels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.criterion-definition .level-input label { font-size: 0.9em; color: #555; }
.criterion-definition .weight-input { max-width: 100px; }
.criterion-definition .remove-criterion-btn { background-color: #dc3545; color: white; border: none; padding: 2px 8px; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 1.2em; font-weight: bold; position: absolute; top: 5px; right: 5px; transition: background-color 0.3s ease; }
.criterion-definition .remove-criterion-btn:hover { background-color: #c82333; }
.student-container .import-export-section { display: flex; gap: 20px; flex-wrap: wrap; }
.student-container .import-column { flex: 1; min-width: 280px; }
.student-container .export-column { flex: 2; min-width: 350px; }
#studentList { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; }
#studentList li { padding: 8px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.2s ease; display: flex; justify-content: space-between; align-items: center; }
#studentList li:last-child { border-bottom: none; }
#studentList li:hover { background-color: #f0f0f0; }
#studentList li.active-student { background-color: #cfe2ff; font-weight: bold; }
#studentList li i { color: #6c757d; }
#studentList .student-status { font-size: 0.9em; color: green; margin-left: 10px; }
.assessment-container h2 span#currentStudentDisplay { color: #dc3545; font-style: italic; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: middle; }
th { background-color: #e9ecef; font-weight: bold; white-space: nowrap; }
#assessmentTable td.rating-cell { cursor: pointer; }
#assessmentTable td.rating-cell:hover { background-color: #f8f9fa; }
#assessmentTable td:nth-child(n+2):nth-child(-n+6), #assessmentTable td:last-child { text-align: center; }
#assessmentTable td:last-child { font-style: italic; color: #555; cursor: default; }
#assessmentTable td:last-child:hover { background-color: initial; }
input[type="radio"] { cursor: pointer; margin: 0; vertical-align: middle; pointer-events: none; }
.comment-section { margin-bottom: 20px; }
.comment-section label { display: block; margin-bottom: 5px; font-weight: bold; }
.comment-section textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; }
#nameWarning { margin-top: 5px; margin-bottom: 0; }
.output-options { margin-top: 20px; margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #fdfdfd; }
.output-options h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; text-align: left; border-bottom: none; }
.output-options label { display: block; margin-bottom: 8px; font-weight: normal; cursor: pointer; }
.output-options input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }
.results-container .history-section { margin-top: 30px; padding: 0; border: none; box-shadow: none; }
#historyList { list-style: none; padding: 0; }
#historyList li { background-color: #f9f9f9; border: 1px solid #eee; padding: 10px 15px; margin-bottom: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
#historyList a { background-color: #28a745; color: white; padding: 5px 10px; text-decoration: none; border-radius: 4px; font-size: 14px; transition: background-color 0.3s ease; }
#historyList a:hover { background-color: #218838; }

/* --- END OF style.css --- */