/* --- Stijlen (Uit jouw stabiele versie) --- */
:root { /* Colors & Icons */
   --primary: #004c7a; --accent: #ecc00c; --secondary: #f0f0f0; --danger: #dc3545; --success: #28a745; --text-light: #fff; --text-dark: #333; --border-color: #ddd;
   --label-lezen: #2a9d8f; --label-luisteren: #e9c46a; --label-schrijven: #f4a261; --label-spreken: #e76f51; --label-grammatica: #8a6a9c;
   --icon-pauze: '☕'; --icon-instructie: '📣'; --icon-import: '📥'; --icon-settings: '⚙️'; --icon-add-to-plan: '➕'; --icon-search: '🔍'; --icon-login: '👤'; --icon-logout: '🚪'; --icon-view: '👁️'; --icon-save: '💾'; --icon-new: '📄'; --icon-load: '📂'; --icon-delete: '🗑️';
 }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background-color: #f9f9f9; color: var(--text-dark); line-height: 1.6; font-size: 16px; }
.wrapper { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background-color: var(--primary); color: var(--text-light); padding: 20px; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar__nav { flex-grow: 1; }
/* Adjusted style for consistency */
.sidebar__nav button, .sidebar__actions button, .sidebar__user-section button {
   width: 100%;
   padding: 12px;
   margin-bottom: 10px;
   border: none;
   border-radius: 4px;
   background-color: var(--primary);
   color: var(--text-light);
   cursor: pointer;
   text-align: left;
   font-size: 0.9em; /* Slightly increased size */
   transition: background-color 0.2s ease;
   display: flex; /* Align icon and text */
   align-items: center;
   gap: 8px; /* Space between icon and text */
}
.sidebar__nav button:hover, .sidebar__actions button:hover, .sidebar__user-section button:hover { background-color: #003352; }
.sidebar__nav button.active { background-color: var(--accent); color: var(--text-dark); font-weight: bold; }
 .sidebar__nav button:disabled, .sidebar__actions button:disabled, .sidebar__user-section button:disabled {
    background-color: #003352;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}
.sidebar__actions { margin-top: 20px; border-top: 1px solid #6699bb; padding-top: 15px; }
.sidebar__actions h3 { margin-bottom: 10px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 5px; }
.sidebar__user-section { margin-top: 20px; border-top: 1px solid #6699bb; padding-top: 15px; }
.sidebar__user-section h4 { margin-bottom: 10px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 5px; }

.main-content { flex-grow: 1; padding: 30px; overflow-y: auto; }
.tab-section { display: none; } .tab-section.active { display: block; }
.btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-add { background-color: var(--accent); color: var(--text-dark); } .btn-add:hover:not(:disabled) { background-color: #d4ac0b; }
.btn-primary { background-color: var(--primary); color: var(--text-light); } .btn-primary:hover:not(:disabled) { background-color: #003352; }
.btn-secondary { background-color: var(--secondary); color: var(--text-dark); border: 1px solid #ccc; } .btn-secondary:hover:not(:disabled) { background-color: #e0e0e0; }
.btn-danger { background-color: var(--danger); color: var(--text-light); } .btn-danger:hover:not(:disabled) { background-color: #a01d28; }
.btn-cancel { background-color: #6c757d; color: var(--text-light); } .btn-cancel:hover:not(:disabled) { background-color: #5a6268; }
.btn-small { padding: 4px 8px; font-size: 0.8em; }
.btn-tag { padding: 5px 10px; font-size: 0.8em; border-radius: 15px; background-color: var(--secondary); color: var(--text-dark); border: 1px solid #ccc; margin-right: 5px; margin-bottom: 5px; } .btn-tag.active { background-color: var(--primary); color: var(--text-light); border-color: var(--primary); font-weight: bold; }
.btn-icon-only { padding: 5px 8px; font-size: 1em; }
.lesson-plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; gap: 15px; flex-wrap: wrap;}
.lesson-plan-title-duration { flex-grow: 1; }
#current-plan-title { color: var(--primary); margin-bottom: 5px; }
#lesson-plan-info { font-size: 0.9em; color: #555; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 50px;}
  #lesson-plan-info .target-duration-button { margin-left: 5px; padding: 2px 5px; font-size: 0.8em; }
.progress-bar-container { width: 100%; max-width: 550px; height: 12px; background-color: var(--secondary); border-radius: 6px; margin-top: 8px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border-color); }
.progress-bar-value { height: 100%; width: 0%; background-color: var(--primary); border-radius: 6px; transition: width 0.4s ease-out; }
.progress-bar-value.over-limit { background-color: var(--accent); }
.auth-controls { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 5px;}
#user-status { display: none; flex-direction: column; align-items: stretch; gap: 10px; font-size: 0.9em; }
#user-display-name { padding: 8px 12px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; text-align: center; word-break: break-all; font-size: 0.9em; }
#login-btn {}
#logout-btn {font-size: 0.9em; }
.lesson-plan-controls { display: flex; flex-direction: column; gap: 10px; align-items: left; }
.plan-management { display: flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content:left}
.plan-management label { font-size: 0.80em; margin-right: 5px; }
.plan-management select { padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.80em; min-width: 150px; max-width: 250px; }
.plan-management button {}
.lesson-plan__global-actions { margin-top: 10px; align-self: flex-end; }
.lesson-notes-section { margin-top: 5px; margin-bottom: 25px; font-size: 0.8em; }
 .lesson-notes-section label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--primary); font-size: 1.1em; }
 #lesson-notes { width: 100%; min-height: 100px; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.95em; line-height: 1.5; resize: vertical; }
  #lesson-notes:disabled { background-color: #f8f8f8; cursor: not-allowed; opacity: 0.7; }

/* === REGEL HIERONDER VERVANGEN === */
.lesson-block {
  background-color: var(--secondary); /* Lichte achtergrond voor contrast */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px; /* Meer ruimte tussen blokken */
  border-left: 4px solid var(--primary); /* Duidelijke gekleurde linker rand */
  box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* Iets duidelijkere schaduw */
}

/* === REGEL HIERONDER AANGEPAST/VERVANGEN === */
.lesson-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
  /* Lijn onder de header */
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

/* === REGEL HIERONDER VERVANGEN === */
.lesson-block__header h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.1em; /* Titel iets groter maken */
  flex-grow: 1;
}

.lesson-block__header .header-actions { display: flex; gap: 8px; }
.dropzone { min-height: 80px; background-color: var(--secondary); padding: 15px; border-radius: 5px; list-style: none; border: 2px dashed var(--border-color); transition: background-color 0.2s ease, border-color 0.2s ease; position: relative; }
.dropzone:empty::before { content: 'Sleep items hierheen of voeg toe'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; font-size: 0.9em; pointer-events: none; text-align: center; }
.dropzone.drag-over { background-color: #e0e0e0; border-color: var(--accent); border-style: solid; }
.dropzone li { background-color: var(--text-light); padding: 10px 15px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; cursor: grab; font-size: 0.95em; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dropzone li.dragging { opacity: 0.5; background: #f0f0f0; box-shadow: none; }
.dropzone li .item-icon { margin-right: 8px; font-size: 1.0em; display: inline-block; width: 20px; text-align: center; }
.dropzone li .item-details { flex-grow: 1; } .dropzone li .item-description { font-size: 0.5em; color: #777; display: block; margin-left: 28px; }
.dropzone li .item-time { font-size: 0.85em; color: #666; margin-left: 10px; white-space: nowrap; }
.dropzone li .item-actions { display: flex; gap: 5px; margin-left: 10px; align-items: center;}
.btn-remove-item, .btn-view-item { background: none; border: none; color: var(--text-dark); cursor: pointer; font-size: 1.1em; font-weight: bold; padding: 0 4px; line-height: 1; opacity: 0.6; transition: opacity 0.2s ease; }
.btn-remove-item { color: var(--danger); }
.btn-remove-item:hover, .btn-view-item:hover { opacity: 1; }

/* --- Stijlen voor Niveau-labels in het Lesplan --- */
.dropzone li .item-level-tag {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* Ruimte tussen naam en label */
    color: var(--text-dark);
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
/* Kleurcodering op basis van niveau (data-attribuut) */
.dropzone li .item-level-tag[data-level^="A"] {
    background-color: #e8f5e9; /* Lichtgroen */
    border-color: #c8e6c9;
    color: #1b5e20;
}
.dropzone li .item-level-tag[data-level^="B"] {
    background-color: #e3f2fd; /* Lichtblauw */
    border-color: #bbdefb;
    color: #0d47a1;
}
.dropzone li .item-level-tag[data-level^="C"] {
    background-color: #ffebee; /* Lichtrood */
    border-color: #ffcdd2;
    color: #b71c1c;
}
.dropzone li .item-level-tag[data-level^="Alfa"] {
    background-color: #f3e5f5; /* Lichtpaars */
    border-color: #e1bee7;
    color: #4a148c;
}

#library-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
#library-section h2 { color: var(--primary); margin: 0; }
#library-section .header-actions { display: flex; gap: 10px; } #library-section .header-actions .btn-add { padding: 6px 12px; font-size: 0.85em; } #library-section .header-actions .btn-secondary { padding: 6px 12px; font-size: 0.85em; }
.library-controls { display: flex; gap: 20px; margin-top: 15px; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-start; }
.library-search-control { flex-grow: 1; min-width: 200px; }
.library-search-control label { font-weight: bold; font-size: 0.9em; margin-bottom: 5px; display: block; color: #555; }
.library-search-control input[type="search"] { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.95em; }
.library-filters-area { display: flex; gap: 20px; flex-wrap: wrap; flex-grow: 2; }
#library-filter-controls, #level-filter-controls { margin-top: 0; margin-bottom: 0; min-width: 200px; flex: 1; }
.filter-group h4 { margin-bottom: 8px; font-size: 0.9em; color: #555; }
.filter-group .filter-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-group .filter-reset { margin-top: 10px; }
.library__list { list-style: none; min-height: 100px; position: relative; }
.library-message { padding: 20px; text-align: center; color: #888; font-style: italic; position: absolute; top: 40px; left: 0; width: 100%; pointer-events: none; }
.library__item { background-color: var(--text-light); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px 15px; margin-bottom: 10px; display: flex; flex-direction: column; font-size: 0.95em; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.library__item-main { display: flex; justify-content: space-between; align-items: flex-start; width: 100%;}
.library__item-details { flex-grow: 1; margin-right: 15px; } .library__item-details .item-type-icon { margin-right: 5px; } .library__item-details .item-name { font-size: 1.05em; font-weight: bold; } .library__item-details .item-time { font-size: 0.9em; color: #666; margin-left: 5px; } .library__item-details .item-level { font-size: 0.85em; font-style: italic; color: #555; margin-left: 8px; background-color: #eee; padding: 1px 4px; border-radius: 3px; border: 1px solid #ddd;} .library__item-details small { color: #777; display: block; font-size: 0.9em; margin-top: 4px; padding-left: 22px; }
.library__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.library__item-labels { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eee; width: 100%; }
.label-tag { display: inline-block; padding: 3px 8px; margin-right: 5px; margin-bottom: 3px; border-radius: 4px; font-size: 0.8em; color: var(--text-light); white-space: nowrap; }
.label-tag[data-label="Lezen"] { background-color: var(--label-lezen); } .label-tag[data-label="Luisteren"] { background-color: var(--label-luisteren); color: #333; } .label-tag[data-label="Schrijven"] { background-color: var(--label-schrijven); } .label-tag[data-label="Spreken"] { background-color: var(--label-spreken); } .label-tag[data-label="Grammatica"] { background-color: var(--label-grammatica); }
#pagination-controls { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: flex; justify-content: center; align-items: center; gap: 10px; }
#pagination-controls button { min-width: 80px; }
#pagination-info { font-size: 0.9em; color: #666; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; z-index: 1000; padding: 20px; }
.modal__content { background-color: var(--text-light); padding: 30px; border-radius: 8px; width: 90%; max-width: 650px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.2); position: relative; }
#add-pauze-modal .modal__content, #add-instructie-modal .modal__content, #set-target-duration-modal .modal__content, #choose-block-modal .modal__content, #save-plan-as-modal .modal__content { max-width: 450px; }
.modal__content h3 { margin-top: 0; color: var(--primary); margin-bottom: 25px; }
.modal__content label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.9em;}
.modal__content input[type="text"], .modal__content input[type="number"], .modal__content select, .modal__content textarea { width: 100%; padding: 12px; margin-bottom: 18px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; }
.modal__content input.invalid, .modal__content textarea.invalid { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2); }
.modal__content .validation-message { color: var(--danger); font-size: 0.85em; margin-top: -10px; margin-bottom: 10px; display: none; }
.modal__content textarea { min-height: 80px; resize: vertical; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
#choose-block-modal .modal__actions { justify-content: center; } #choose-block-modal .modal__actions button { width: 30%; }
.modal__feedback { position: absolute; bottom: 15px; left: 30px; font-size: 0.9em; color: var(--success); display: none; }
.skill-labels-group { margin-bottom: 20px; } .skill-labels-group fieldset { border: 1px solid var(--border-color); border-radius: 4px; padding: 15px; } .skill-labels-group legend { font-weight: bold; font-size: 0.9em; padding: 0 5px; color: var(--primary); } .skill-labels-group .checkbox-container { display: flex; flex-wrap: wrap; gap: 15px; } .skill-labels-group .checkbox-item { display: flex; align-items: center; } .skill-labels-group input[type="checkbox"] { margin-right: 8px; width: auto; accent-color: var(--primary); }
#modal-library-list { list-style: none; max-height: 35vh; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; margin-bottom: 20px;}
#modal-library-list li { padding: 10px 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.2s ease; font-size: 0.95em; display: flex; flex-direction: column; gap: 5px; } #modal-library-list li:last-child { border-bottom: none; } #modal-library-list li:hover { background-color: #f0f0f0; } #modal-library-list li .item-info { display: flex; align-items: center; gap: 8px; } #modal-library-list li strong { color: var(--primary); } #modal-library-list .item-labels-modal { font-size: 0.8em; }
.modal-filter-area { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
  .modal-filter-group { flex: 1; min-width: 180px; }
  .modal-filter-group h4 { margin-bottom: 8px; font-size: 0.9em; color: #555; }
  .modal-filter-group .filter-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
  .modal-filter-group .filter-reset { margin-top: 10px; }
#view-item-modal .modal__content { max-width: 650px; } #view-item-modal p { margin-bottom: 15px; line-height: 1.5; } #view-item-modal p strong { color: var(--primary); min-width: 110px; display: inline-block; font-weight: bold;} #view-item-modal p span { color: #444; } #view-item-modal .view-item-labels { margin-top: 10px; }
#notification-area { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.notification { padding: 15px; border-radius: 4px; color: var(--text-light); box-shadow: 0 2px 10px rgba(0,0,0,0.2); font-size: 0.9em; opacity: 0; transition: opacity 0.5s ease; }
.notification.show { opacity: 1; } .notification.success { background-color: var(--success); } .notification.error { background-color: var(--danger); } .notification.info { background-color: var(--primary); }
@media print {
   /* --- Verberg onnodige elementen --- */
   .sidebar,
   #library-section, /* Verberg bibliotheek tab inhoud */
   .modal, /* Verberg alle modals */
   .sidebar__actions #print-button, /* Verberg print knop zelf */
   .sidebar__actions, /* Verberg hele actie sectie in sidebar */
   .sidebar__user-section, /* Verberg gebruiker sectie */
   .lesson-plan-controls, /* Verberg plan selectie/knoppen */
   .lesson-block__header .header-actions, /* Verberg + / pauze / instructie knoppen */
   .dropzone li .item-actions, /* Verberg view/remove knoppen op items */
   #lesson-plan-info .target-duration-button, /* Verberg duration knop */
   .progress-bar-container, /* Verberg voortgangsbalk */
   #notification-area {
     display: none !important;
    }

    /* --- NIEUW: Twee kolommen lay-out voor PDF/Print --- */

/* Forceer de 'Gedifferentieerde Verwerking' dropzone om kolommen te tonen */
.lesson-block.midden-blok .dropzone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

/* Verberg de 'Sleep items hier' placeholder tijdens printen */
.lesson-block.midden-blok .dropzone::before {
    display: none;
}

/* Elke 'print-column' is een flex-item */
.print-column {
    width: 48%;            /* Twee kolommen naast elkaar (met 4% tussenruimte) */
    margin-bottom: 10px;
    page-break-inside: avoid; /* Probeer een groep op één pagina te houden */
    border: 1px solid #eee !important;
    padding: 5px !important;
    border-radius: 4px;
}

/* Een 'full-width' kolom (voor items vóór het eerste label) */
.print-column.full-width {
    width: 100%;
    border: none !important;
    padding: 0 !important;
    border-bottom: 1px dashed #ccc !important;
    margin-bottom: 10px;
}

/* Stijl de <li> items binnen de nieuwe kolommen */
.print-column li {
   display: block !important;
   width: 100%;
   /* De bestaande 'dropzone li' printstijlen worden nu hierop toegepast */
}

/* Geef de GroepLabel <li> een duidelijke header-stijl in de PDF */
.print-column li[data-type="GroepLabel"] {
    border-bottom: 2px solid #666 !important;
    background-color: #eee !important;
    font-size: 10pt;
    font-weight: bold;
    padding: 5px !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important; /* Reset de standaard marge */
    border-left: none !important;
}
/* --- EINDE NIEUW --- */


   /* --- Layout aanpassingen --- */
   body {
     font-size: 10pt; /* Kleiner font */
     background-color: #fff !important;
     color: #000 !important;
     margin: 0;
     padding: 0;
   }
   .wrapper {
     display: block !important; /* Override flexbox */
     min-height: auto;
   }
   .main-content {
     width: 100% !important; /* Volledige breedte */
     padding: 1.5cm !important; /* Print marges */
     margin: 0 !important;
     overflow: visible !important; /* Toon alles, geen scroll */
     flex-grow: 0 !important;
   }
   #lesson-plan {
       box-shadow: none !important;
       border: none !important;
   }

   /* --- Content styling --- */
   * {
     color: #000 !important;
     background-color: transparent !important;
     box-shadow: none !important;
     border-color: #ccc !important; /* Lichtere randen indien nodig */
   }

   h2, h3 {
       color: #000 !important;
       margin-top: 1em;
       margin-bottom: 0.5em;
       page-break-after: avoid; /* Probeer header bij content te houden */
       font-family: sans-serif; /* Simpel font */
   }
    #current-plan-title { /* Hoofdtitel */
       margin-top: 0;
       text-align: center;
       font-size: 14pt; /* Kleiner */
       margin-bottom: 1em;
   }
    .lesson-block__header h3 { /* Blok Titels */
        font-size: 12pt; /* Kleiner */
        border-bottom: 1px solid #000;
        padding-bottom: 2px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    /* Les Info & Notities */
    #lesson-plan-info { /* Behoud tijdinfo */
        margin-top: 5px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 9pt; /* Kleiner */
        color: #333 !important;
    }
    #lesson-plan-info strong {
        font-weight: bold;
        color: #000 !important;
    }
    .lesson-notes-section {
        margin-top: 15px;
        margin-bottom: 25px;
        font-size: 10pt;
        page-break-inside: avoid; /* Probeer notities bij elkaar te houden */
    }
    .lesson-notes-section label {
         font-size: 10pt; /* Kleiner */
         font-weight: bold;
         margin-bottom: 5px;
         color: #000 !important;
    }
    #lesson-notes {
         border: 1px solid #ccc !important;
         min-height: 50px;
         resize: none;
         padding: 8px;
         width: 100%;
         background-color: #fff !important;
         white-space: pre-wrap; /* Behoud nieuwe regels etc. */
         display: block !important;
         visibility: visible !important;
         opacity: 1 !important;
    }

   /* Lesblokken en Items */
   .lesson-block {
       border: 1px solid #eee !important; /* Subtiele rand om blok */
       padding: 10px !important;
       margin-bottom: 15px !important;
       page-break-inside: avoid; /* Probeer blok bij elkaar te houden */
   }
   .dropzone {
       border: none !important;
       padding: 0 !important;
       min-height: auto !important;
   }
    .dropzone:empty::before { display: none; } /* Verberg placeholder */

   .dropzone li {
       border: none !important;
       border-bottom: 1px dotted #ccc !important; /* Lijn tussen items */
       padding: 6px 0 !important;
       margin-bottom: 6px !important;
       box-shadow: none !important;
       page-break-inside: avoid; /* Probeer item bij elkaar te houden */
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       flex-wrap: wrap;
   }
   .dropzone li .item-icon { /* Icoontje behouden */
       display: inline-block;
       margin-right: 5px;
       font-size: 1em;
       width: auto;
   }
   .dropzone li .item-details { /* Naam */
       flex-grow: 1;
       font-weight: bold;
       margin-right: 10px;
       /* Erft 10pt */
   }
    .dropzone li .item-description { /* Beschrijving */
       display: block; /* Altijd tonen */
       font-size: 8pt;
       color: #444 !important;
       margin-left: 28px;
       width: 100%;
       margin-top: 3px;
       font-weight: normal;
       font-style: italic;
   }
   .dropzone li .item-time { /* Tijd */
       font-size: 9pt;
       color: #333 !important;
       margin-left: 15px;
       white-space: nowrap;
       font-weight: normal;
   }
 }
::placeholder {opacity: 1; /* Firefox */font-size: 0.9em;}

/* --- NIEUW: Stijlen voor Niveau-labels in het Lesplan --- */
.dropzone li .item-level-tag {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* Ruimte tussen naam en label */
    color: var(--text-dark);
    background-color: var(--secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
/* Kleurcodering op basis van niveau (data-attribuut) */
.dropzone li .item-level-tag[data-level^="A"] {
    background-color: #e8f5e9; /* Lichtgroen */
    border-color: #c8e6c9;
    color: #1b5e20;
}
.dropzone li .item-level-tag[data-level^="B"] {
    background-color: #e3f2fd; /* Lichtblauw */
    border-color: #bbdefb;
    color: #0d47a1;
}
.dropzone li .item-level-tag[data-level^="C"] {
    background-color: #ffebee; /* Lichtrood */
    border-color: #ffcdd2;
    color: #b71c1c;
}
.dropzone li .item-level-tag[data-level^="Alfa"] {
    background-color: #f3e5f5; /* Lichtpaars */
    border-color: #e1bee7;
    color: #4a148c;
}

/* --- NIEUW: Visuele stijl voor differentiatieblok --- */
.lesson-block.midden-blok {
    /* Geef het 'beleg' een heel licht afwijkende achtergrond */
    background-color: #fdfdfd; 
    border-left: 4px solid var(--accent); /* Gebruik de accentkleur voor de rand */
}

.lesson-block.midden-blok .lesson-block__header {
    /* Maak de header van het middenblok ook subtiel anders */
    background-color: #fffbf2; 
    border-bottom: 1px dashed var(--accent); /* Een stippellijn in de accentkleur */
}

.lesson-block.midden-blok .lesson-block__header h3 {
    color: #c79a00; /* Een donkere variant van de accentkleur */
    font-weight: bold;
}

/* --- Stijlen voor Groep Label Modal & Items --- */

/* Maak de 'add-group-modal' de juiste grootte */
#add-group-modal .modal__content {
    max-width: 450px;
}

/* Stijl voor de kleur-kiezer in de modal */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.color-picker__option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-picker__option:hover {
    transform: scale(1.1);
}

.color-picker__option.selected {
    border-color: var(--primary);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Stijl voor het Groep Label LI element in het lesplan */
.dropzone li[data-type="GroepLabel"] {
    background-color: var(--secondary); /* Fallback kleur */
    border: none;
    border-left: 5px solid var(--primary); /* Dikkere rand */
    padding: 10px 15px;
    margin-top: 20px; /* Meer ruimte erboven */
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-dark);
    cursor: grab !important; /* Blijft sleepbaar */
}

/* Verberg de 'tijd' en 'bekijk' knop voor Groep Labels */
.dropzone li[data-type="GroepLabel"] .item-time,
.dropzone li[data-type="GroepLabel"] .btn-view-item {
    display: none;
}

/* Pas de details-span aan zodat deze de volledige ruimte inneemt */
.dropzone li[data-type="GroepLabel"] .item-details {
    margin-left: 28px; /* Lijn uit met andere items */
    color: inherit; /* Erf de tekstkleur */
}

/* --- Stijlen voor Laad-Modal --- */
#load-plan-modal .modal__content {
    max-width: 500px;
}

#load-plan-list {
    list-style: none;
    margin-top: 15px;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

#load-plan-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#load-plan-list li:last-child {
    border-bottom: none;
}

#load-plan-list li:hover {
    background-color: var(--secondary);
}

#load-plan-list li .plan-name {
    font-weight: 500;
    flex-grow: 1;
    margin-right: 15px;
}

#load-plan-list li .delete-plan-in-modal-btn {
    padding: 4px 8px;
    font-size: 0.9em;
    flex-shrink: 0;
}

#load-plan-list li.no-plans {
    font-style: italic;
    color: #888;
    cursor: default;
}
#load-plan-list li.no-plans:hover {
    background-color: transparent;
}

/* --- Stijlen voor Tijd Wijzigen Modal & Knop --- */

#edit-time-modal .modal__content {
    max-width: 400px;
}

/* De nieuwe knop (⏰) op het lesplan item */
.dropzone li .item-actions .btn-edit-time {
    background: none;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 1.1em; /* Zelfde grootte als de andere iconen */
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.dropzone li .item-actions .btn-edit-time:hover {
    opacity: 1;
    color: var(--primary); /* Maak 'm blauw bij hover */
}

/* Verberg de tijd-wijzigen knop voor items die het niet nodig hebben */
.dropzone li[data-type="Pauze"] .btn-edit-time,
.dropzone li[data-type="Instructie Uitleg"] .btn-edit-time,
.dropzone li[data-type="GroepLabel"] .btn-edit-time {
    display: none;
}

/* --- NIEUW: Stijlen voor Verplichte Auth Modal --- */

/* Toon de auth modal standaard */
/* VERVANG HET BLOK HIERBOVEN DOOR DIT: */
#auth-modal {
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000; 
}

/* Zorg dat de modal content niet te sluiten is door ernaast te klikken */
.auth-modal-content {
    max-width: 400px;
    pointer-events: auto; /* Zorg dat je wel kunt klikken */
}

/* Stijl voor de formuliervelden */
.auth-modal-content label {
    margin-top: 15px;
}
.auth-modal-content input {
    margin-bottom: 5px; /* Minder marge onder input */
}

/* Feedback/foutmelding */
#auth-feedback {
    color: var(--danger);
    font-size: 0.9em;
    min-height: 1.2em; /* Voorkom verspringen */
    margin-top: 10px;
    display: none; /* Standaard verborgen */
}

/* Actieknoppen */
.auth-actions {
    justify-content: space-between; /* Knoppen uit elkaar */
}

/* Link om te wisselen tussen login/register */
.auth-toggle {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
}

.auth-toggle a {
    color: var(--primary);
    text-decoration: none;
}
.auth-toggle a:hover {
    text-decoration: underline;
}

/* --- NIEUW: Uniforme Stijlen voor Input Velden --- */

/* * Dit is de nieuwe basis-stijl voor alle tekst-inputs, 
 * inclusief modals, zoekvelden, en de auth-modal.
 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"] {
    width: 100%;
    padding: 12px; /* Consistente padding */
    margin-bottom: 15px; /* Consistente marge */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.95em; /* Consistente fontgrootte */
    line-height: 1.5;
    box-sizing: border-box; /* Essentieel voor correcte breedte */
    background-color: #fff;
    color: var(--text-dark);
}

/* Kleine aanpassing voor zoekvelden (zijn vaak iets compacter) */
input[type="search"] {
    padding: 10px 12px;
}

/* Specifieke overrides voor de auth-modal (minder marge) */
.auth-modal-content input[type="email"],
.auth-modal-content input[type="password"],
.auth-modal-content input[type="text"] {
    margin-bottom: 8px; 
}

/* Zorg dat de zoekbalk in de bibliotheek zich ook aanpast */
.library-search-control input[type="search"] {
    padding: 10px 12px;
    margin-bottom: 0; /* Geen marge nodig in de bieb */
}

/* Zorg dat de zoekbalk in de "Kies Lesplan" modal zich ook aanpast */
#load-plan-modal input[type="search"] {
     padding: 10px 12px;
}

/* --- NIEUW: Stijlen voor Samen & Zelfstandig Werken --- */

/* Maak de nieuwe modals de juiste (kleine) grootte */
#add-samen-modal .modal__content,
#add-zelfstandig-modal .modal__content {
    max-width: 450px;
}

/* Stijl voor de LI-elementen in het lesplan */
.dropzone li[data-type="SamenWerken"] {
    background-color: #f0f9eb; /* Lichtgroen */
    border-left: 5px solid var(--label-lezen); /* Groene rand */
    color: #333;
}

.dropzone li[data-type="ZelfstandigWerken"] {
    background-color: #f3e5f5; /* Lichtpaars */
    border-left: 5px solid var(--label-grammatica); /* Paarse rand */
    color: #333;
}

/* --- Stijlen voor 'Wachtwoord Vergeten' Link --- */
.auth-toggle-forgot {
    text-align: right;
    font-size: 0.85em;
    margin-top: -5px; /* Trekt het iets dichter bij het wachtwoordveld */
    margin-bottom: 10px;
}

.auth-toggle-forgot a {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}
.auth-toggle-forgot a:hover {
    text-decoration: underline;
}

* --- Stijlen voor de Wachtwoord Herstellen Modal --- */
#reset-password-modal .modal__content {
    max-width: 400px;
}

#reset-password-modal p {
    color: #555;
    line-height: 1.5;
}

#reset-password-feedback {
    color: var(--danger);
    font-size: 0.9em;
    min-height: 1.2em; 
    margin-top: 10px;
    display: none; /* Standaard verborgen */
}

/* --- Stijlen voor Verplichte Auth Modal --- */
#auth-modal {
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000; 
}
.auth-modal-content {
    max-width: 400px;
    pointer-events: auto;
}
.auth-modal-content label {
    margin-top: 15px;
}
.auth-modal-content input {
    margin-bottom: 5px;
}
#auth-feedback {
    color: var(--danger);
    font-size: 0.9em;
    min-height: 1.2em;
    margin-top: 10px;
    display: none;
}
.auth-actions {
    display: flex;
    gap: 10px;
    justify-content: stretch; /* Knoppen vullen de ruimte */
}
.auth-toggle {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
}
.auth-toggle a {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}
.auth-toggle a:hover {
    text-decoration: underline;
}

/* Stijlen voor 'Wachtwoord Vergeten' Link */
.auth-toggle-forgot {
    text-align: right;
    font-size: 0.85em;
    margin-top: -5px;
    margin-bottom: 10px;
}
.auth-toggle-forgot a {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}
.auth-toggle-forgot a:hover {
    text-decoration: underline;
}

/* Stijlen voor de Wachtwoord Herstellen Modal */
#reset-password-modal .modal__content {
    max-width: 400px;
}
#reset-password-modal p {
    color: #555;
    line-height: 1.5;
}
#reset-password-feedback {
    color: var(--danger);
    font-size: 0.9em;
    min-height: 1.2em; 
    margin-top: 10px;
    display: none;
}

/* --- Stijlen voor Starttijd & Lopende Tijd --- */

/* Wrapper voor het 'Starttijd' veld */
.start-time-wrapper {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid var(--border-color);
}

.start-time-wrapper label {
    font-size: 0.9em;
    color: #555;
    margin-right: 5px;
}

/* Stijl voor het input-veld zelf */
#lesson-start-time {
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
}

/* De [09:00 - 09:15] tekst op elk les-item */
.dropzone li .item-running-time {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--primary);
    white-space: nowrap;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Verberg de lopende tijd voor Groep Labels (die hebben geen tijd) */
.dropzone li[data-type="GroepLabel"] .item-running-time {
    display: none;
}

/* Zorg dat de acties (tijd wijzigen, bekijken, etc.) altijd uiterst rechts staan */
.dropzone li .item-actions {
    margin-left: auto; /* Belangrijk! */
}