/*  design.css - Moderne Stijl - Aangepast voor lesvanjelmer.nl/lida43 */

/* Globale Stijlen en Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*  design.css - Moderne Stijl - Aangepast voor lesvanjelmer.nl/lida43 */

/* ... rest van de bestaande CSS ... */

/*  design.css - Moderne Stijl - Aangepast voor lesvanjelmer.nl/lida43 */

/* ... rest van de bestaande CSS ... */


/* Verbeterde Stijlen voor de Afbeelding Popup - GECORRIGEERD - FINAL and CORRECT */
#imgdialog {
    display: none; /* Zorg ervoor dat de popup standaard VERBORGEN is */
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Donkerdere achtergrond voor betere zichtbaarheid */
    z-index: 1001; /* Hogere z-index dan de rest */
    overflow: auto; /* Zorg voor scrollen als de afbeelding te groot is */
    text-align: center; /* Centreer de inhoud horizontaal */
    padding: 0; /* Padding op #imgdialog zelf verwijderd */
    box-sizing: border-box; /* Box-sizing to include padding in width/height */
    pointer-events: none; /* Voorkom dat de overlay interacties blokkeert als hij verborgen is */

    /* Flexbox for centering is NO LONGER in #imgdialog itself */
}

/* Style de content container of jQuery UI dialog - Flexbox centering is HERE */
#imgdialog .ui-dialog-content {
    background-color: white; /* Witte achtergrond voor de popup zelf */
    border-radius: 0.75rem; /* Afgeronde hoeken voor de popup container */
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* Sterkere schaduw voor popup container */
    text-align: center; /* Centreer de afbeelding binnen de witte container */
    max-width: 95%; /* Maximale breedte van de popup container */
    max-height: 95%; /* Maximale hoogte van de popup container */
    box-sizing: border-box; /* Box-sizing voor de popup container */
    overflow: auto; /* Scrollen binnen de popup container indien nodig */
    pointer-events: auto; /* Zorg ervoor dat de content container wel interacties kan ontvangen */

    /* Flexbox stijlen to center content WITHIN the popup */
    display: flex; /* Use flexbox for centering of the image in the popup */
    justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
    flex-direction: column; /* Stack items vertically if needed */
}


#imgdialog img {
    max-width: 100%; /* Max width of the image inside the popup container */
    max-height: 100%; /* Max height of the image inside the popup container */
    border-radius: 0.5rem; /* Optional: rounded corners for the image */
    box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Subtle shadow for the image itself */
    display: block; /* Ensure margin: 0 auto; works */
    margin: 0 auto; /* Center the image horizontally within the container */
    height: auto; /* Height of img set to 'auto' */
}

/* Style for the close button */
#imgdialog-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    z-index: 1002; /* Ensure the close button is above the image */
    text-shadow: 2px 2px 4px #000000; /* Add shadow to the close button for better visibility */
}

#imgdialog-close-btn:hover {
    opacity: 1;
}


/*  Nieuwe Stijl voor de klikbare afbeelding link in assignment list */
.assignment-image-link {
    cursor: pointer; /* Cursor pointer om aan te geven dat het klikbaar is */
    text-decoration: none; /* Verwijder de standaard link underline */
    color: inherit; /* Behoud de tekstkleur van de parent */
}

.assignment-image-link:hover {
    opacity: 0.8; /* Lichte feedback bij hover (optioneel) */
}


/* ... rest van de bestaande CSS ... */

/* Updated CSS for Text Labels (S, M, L) */
.ql-toolbar .ql-formats button.ql-image-size-small::before { content: 'S'; } /* "S" for small */
.ql-toolbar .ql-formats button.ql-image-size-medium::before { content: 'M'; } /* "M" for medium */
.ql-toolbar .ql-formats button.ql-image-size-large::before { content: 'L'; } /* "L" for large */
.ql-toolbar .ql-formats button.ql-image-size-reset::before { content: 'X'; } /* "Normaal" for reset */

.ql-toolbar .ql-formats button.ql-image-size-small,
.ql-toolbar .ql-formats button.ql-image-size-medium,
.ql-toolbar .ql-formats button.ql-image-size-large,
.ql-toolbar .ql-formats button.ql-image-size-reset {
    font-size: 0.7em; /* Adjust font size as needed */
    font-weight: bold;
    padding: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f0f0f0; /* Light background for buttons */
    cursor: pointer;
    line-height: normal; /* Reset line-height to default */
}

.ql-toolbar .ql-formats button.ql-image-size-small:hover,
.ql-toolbar .ql-formats button.ql-image-size-medium:hover,
.ql-toolbar .ql-formats button.ql-image-size-large:hover,
.ql-toolbar .ql-formats button.ql-image-size-reset:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
}

.editassignment p .ql-image-small,
.ql-editor p .ql-image-small,
.assignment p .ql-image-small {
    max-width: 15%;
}

.editassignment p .ql-image-medium,
.ql-editor p .ql-image-medium,
.assignment p .ql-image-medium {
    max-width: 25%;
}

.editassignment p .ql-image-large,
.ql-editor p .ql-image-large,
.assignment p .ql-image-large {
    max-width: 35%;
}

td.assignment p strong img {
    display: inline-block;
    max-width: 150px;
    height: auto;
}

body {
    font-family: 'Raleway', sans-serif; /* Modern sans-serif font */
    background-color: #ffffff; /* Lichtere achtergrond - bijna wit */
    color: #333; /* Donkergrijze tekstkleur */
    font-size: 16px;
    line-height: 1.6;
    margin-top: 60px; /* Margin-top aangepast aan menu hoogte */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Strakke font voor titels */
    font-weight: 700;
    color: #222; /* Donkerdere titel kleur */
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.0rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    font-size: 1rem;
    margin-bottom: 0rem;
    color: #444; /* Iets lichtere paragraaf kleur */
}

a {
    color: #007bff; /* Accent kleur - blauw */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: #0056b3; /* Donkerder blauw bij hover */
}

/* Lijsten */
ul, ol {
    margin-bottom: 1.2rem;
    padding-left: 2rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse; /* Strakke tabel randen */
    margin-bottom: 1.5rem;
    border: 0px solid #e0e0e0; /* Lichtere tabel border */
    table-layout: fixed; /* Toevoegen: Vaste tabel layout */
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Horizontale lijnen */
}

th {
    background-color: #f5f5f5; /* Lichte header background */
    font-weight: 600;
    color: #555; /* Iets donkerdere header text */
    text-transform: uppercase;
    font-size: 0.9rem;
}

td {
    vertical-align: top;
}

/* Formulieren */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.3rem; /* Afgeronde hoeken inputs */
    margin-bottom: 1.2rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #007bff; /* Accent kleur focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtiele focus schaduw */
}

textarea {
    min-height: 180px;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

/* Knoppen */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    padding: 1rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #4e4e4e;
    border: none;
    border-radius: 0.3rem; /* Afgeronde knoppen */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background-color: #0056b3; /* Donkerder blauw hover */
}

.button-secondary,
button.secondary,
input[type="submit"].secondary,
input[type="reset"].secondary,
input[type="button"].secondary {
    background-color: #6c757d; /* Secundaire knop kleur - grijs */
    color: #fff;
}

.button-secondary:hover,
button.secondary:hover,
input[type="submit"].secondary:hover,
input[type="reset"].secondary:hover,
input[type="button"].secondary:hover {
    background-color: #5a6268; /* Donkerder grijs hover */
}

/* Specifieke Elementen van de Huidige CSS (Aangepast) */

.ql-editor img,
.editassignment img,
.assignment img {
    max-width: 100%;
    height: auto;
    border-radius: 0.3rem; /* Afgeronde hoeken afbeeldingen in editor */
}

.ql-container,
.ql-editor {
    font-family: inherit;
    font-size: 1rem; /* Gebruik body font-size */
}

.colorpickeritem {
    display: inline-block;
    width: 25px; /* Iets kleiner */
    height: 25px; /* Iets kleiner */
    border: 1px solid #ccc; /* Lichtere border */
    border-radius: 50%;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer; /* Cursor feedback */
    transition: border-color 0.2s ease-in-out;
}

.colorpickeritem:hover {
    border-color: #888; /* Iets donkerder hover border */
}


#tbladdeditassignment {
    background-color: #fff; /* Witte achtergrond */
    border-radius: 0.5rem; /* Afgeronde hoeken tabel */
    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05); /* Subtiele schaduw */
    padding: 1rem;
}

/* Definieer breedtes van de kolommen voor tblassignments tabel */
#tblassignments tr > *:nth-child(1) {
    width: 7rem; /* Vaste breedte voor de eerste kolom */
  }
  
  #tblassignments tr > *:nth-child(2) {
    width: auto; /* Flexibele breedte voor de middelste kolom (neemt de rest van de ruimte in) */
  }
  
  #tblassignments tr > *:nth-child(3) {
    width: 5rem; /* Vaste breedte voor de derde kolom */
  }

  #txtdoa {
    width: 109px;
  min-width: 73px;
  box-sizing: border-box;
  font-size: 1rem;
  text-align: left;
  padding: 0.75rem;
  border-radius: 0.3rem;
  border: 1px solid #ccc;
}

#txtcolor {
    width: 80px; /* Auto breedte */
    min-width: 80px; /* Minimum breedte */
    box-sizing: border-box;
    font-size: 1rem;
    text-align: left; /* Links uitlijnen tekst */
    padding: 0.75rem; /* Iets kleinere padding */
    border-radius: 0.3rem; /* Afgeronde hoeken inputs */
    border: 1px solid #ccc;
}

#assignmentsavestatus {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 0.5rem; /* Meer afgerond */
    padding: 0.5rem 1rem; /* Meer padding */
    text-align: center;
    vertical-align: middle;
    font-size: 0.8rem; /* Iets kleiner font */
    font-weight: 600; /* Bold font */
    background-color: #eee; /* Lichtere achtergrond */
    color: #666; /* Donkerdere tekst */
    border: 1px solid #ddd; /* Lichte border */
}

.fullblack {
    background-color: #333; /* Donkere achtergrond */
    color: #eee; /* Lichtere tekst */
    opacity: 1;
    padding: 1rem;
    border-radius: 0.5rem;
}

h3 {
    margin: 0.5rem 0; /* Meer verticale ruimte */
    font-size: 1.5rem;
    color: #333;
}

h2 {
    margin: 0.5rem 0;
    font-size: 1.0rem;
    display: block;
    border-bottom: 2px solid #eee; /* Lichtere en dikkere border */
    padding-bottom: 0.5rem;
    font-weight: 600;
    color: #444;
}

h1.menu {
    margin: 0;
    font-family: 'Montserrat', sans-serif; /* Strak menu font */
    color: #fff; /* Witte menu tekst */
    font-size: 1.4rem; /* Grotere menu font */
    line-height: normal; /* Normale line-height */
    font-weight: 700; /* Bold menu font */
}

.ui-dialog .ui-dialog-titlebar-close {
    display: none; /* Titelbar close button verbergen */
}

#content {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    position: relative; /* Relative position */
    top: 0px; /* Top positie aanpassen aan menu hoogte */
    overflow-y: auto;
    padding: 10px; /* Meer padding content */
    max-width: 100%; /* Volledige breedte content */
    box-sizing: border-box; /* Box-sizing content */
}

#assignmentlistcontainer, #userlistcontainer, #addeditassignmentcontainer {
    padding: 0rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
    max-width: 700px;
}

#dialog {
    display: none; /* Standaard verborgen */
}

#tblusers td, #tblassignments td {
    padding: 0.45rem;
    border-bottom: 1px solid #eee; /* Lichtere cel borders */
}

#tblusers td {
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

#tblassignments td {
    border-bottom: 1px solid #eee;
}


table.ui-table-reflow thead {
    display: none; /* Verberg table header reflow */
}

td.date {
    /* white-space: nowrap;  Uitgecommentarieerd: Datum tekst mag afbreken op mobiel */
    text-align: right;
    font-size: 0.9rem; /* Kleinere datum font */
    color: #777; /* Lichtere datum kleur */
}

td.assignment {
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

td.assignment .ql-code-block-container {
    display: none;
}

.ql-indent-1, .ql-indent-2 {
    padding-left: 1.5rem; /* Minder padding indent */
    list-style-type: none;
}


ul {
    list-style-type: none;
    padding-left: 0.5rem; /* Minder padding ul */
}

ul>li.ql-indent-1::before {
    content: '• '; /* Bullet point */
    color: #777; /* Lichtere bullet kleur */
}

ul>li.ql-indent-2::before {
    content: '◦ '; /* Open circle bullet */
    color: #999; /* Nog lichter bullet kleur */
}


#tblusers tr:nth-child(even) {
    background-color: #f9f9f9; /* Subtiele even rij achtergrond */
}

/* Specifieke achtergrondkleuren voor dagen van de week (NL) */
#tblusers tr.maandag {
    background-color: #E8F0FE; /* Een lichte blauwtint voor maandag */
}

#tblusers tr.donderdag {
    background-color: #E6F4EA; /* Een lichte groentint voor donderdag */
}

/* Iets donkerdere tint voor de EVEN rijen binnen de dag-kleuren */
#tblusers tr.maandag:nth-child(even) {
    background-color: #DCE7FB; /* Iets donkerder blauw */
}

#tblusers tr.donderdag:nth-child(even) {
    background-color: #D9EAE0; /* Iets donkerder groen */
}


#tblusers tr.gestopt:nth-child(odd),
#tblusers tr.gestopt:nth-child(even) {
    background-color: #f9f9f9; /* Gestopped rijen ook subtiel */
    color: #999; /* Gestopped rijen grijze tekst */
    display: none;
}

#tblassignments tr:nth-child(even) {
    background-color: #f9f9f9; /* Subtiele even rij achtergrond */
}


#tblusers tr:hover {
    background-color: #f0f0f0; /* Lichtere hover kleur */
    transition: background-color; /* Smooth hover transition */
}

/* Specifieke hover-effecten voor gekleurde rijen om conflict op te lossen */
#tblusers tr.maandag:hover {
    background-color: #C5D9F9; /* Donkerder blauw voor hover */
}

#tblusers tr.donderdag:hover {
    background-color: #CDE2D4; /* Donkerder groen voor hover */
}


td.nowrap {
    white-space: nowrap;
}


#login {
    display: none; /* Standaard verborgen */
}

#message_container {
    position: fixed;
    z-index: 9999999;
    display: none; /* Standaard verborgen */
    bottom: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.9); /* Semi-transparant donker */
    color: #fff; /* Witte tekst message */
    right: 0;
    padding: 1rem;
    text-align: center;
}

.pointer {
    cursor: pointer;
}

div.link, a.link-small, .big_icon, div.link-dark {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */
}


div.link {
    cursor: pointer;
    margin: 0rem;
    padding: 0.75rem 1rem;
    font-size: 1.2rem; /* Iets kleinere link font */
    color: #666; /* Donkergrijze link kleur */
    border-radius: 0.3rem;
    display: inline-block; /* Inline block links */
}

div.link:hover {
    color: #007bff; /* Accent kleur hover link */
    background-color: #f0f0f0; /* Lichte hover achtergrond link */
}


div.link-small {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.5rem;
    font-size: 0.9rem; /* Kleinere link-small font */
    color: #777; /* Lichtere link-small kleur */
    border: none;
    text-align: center;
    border-radius: 0.3rem;
}

a.link-small {
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block; /* Inline block a.link-small */
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem; /* Kleinere a.link-small font */
    color: #fff;
    border: none;
    background-color: #007bff; /* Accent kleur a.link-small */
    text-align: center;
    border-radius: 0.3rem;
}

a.link-small:hover {
    background-color: #0056b3; /* Donkerder blauw hover a.link-small */
    color: #fff;
}


.big_icon {
    font-size: 2rem; /* Iets kleinere iconen */
    padding: 0.6rem;
    cursor: pointer;
    border: 2px solid #007bff; /* Accent kleur border iconen */
    background-color: #007bff; /* Accent kleur achtergrond iconen */
    color: #fff; /* Witte icon kleur */
    border-radius: 0.3rem;
}

.big_icon:hover {
    background-color: #0056b3; /* Donkerder blauw hover iconen */
    border-color: #0056b3;
}


div.link-dark {
    color: #555; /* Donkerder link-dark kleur */
    border-color: #777; /* Donkerder border link-dark */
    border-radius: 0.3rem;
    padding: 0.75rem 1rem;
    display: inline-block;
    cursor: pointer;
}

div.link-dark:hover {
    color: #333; /* Nog donkerder hover link-dark */
    background-color: #f0f0f0;
    border-color: #333;
}


#menu {
    display: flex;
    position: fixed;
    top: -8px;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 0.2rem 8px;
    background-color: #333;
    color: #fff;
    height: 79px;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    clip-path: polygon( 0 0, 100% 0, 100% 100%, );
    -webkit-clip-path: polygon( 0px 0px, 100% 0px, 100% 61%, 0 100%);
}

#menu h1.menu {
    margin-right: auto; /* Titel naar links, links naar rechts duwen */
}

#menu-links {
    display: flex; /* Flex container voor menu links */
    align-items: center;
}

#menu-links > div.link, #menu-links > a.link-small {
    margin-left: 1rem; /* Ruimte tussen menu links */
}


#btnsave {
    font-size: 1.5rem; /* Iets kleinere save button icon */
}

input, textarea {
    border: 1px solid #ccc; /* Standaard input border */
    font-size: 1rem; /* Standaard input font-size */
    padding: 0.75rem; /* Standaard input padding */
    color: #4A4A4A;
    border-radius: 0.3rem;
}

textarea {
    width: 100%; /* Volledige breedte textarea */
    min-height: 180px;
}

th.ha_save {
    max-width: 30px; /* Max breedte save header */
}

th {
    text-align: left;
    background-color: #f5f5f5; /* Lichtere header achtergrond */
    color: #555; /* Donkerdere header tekst */
    font-weight: 600;
    font-size: 0.8rem; /* Kleinere header font */
    text-transform: uppercase;
    padding: 0.5rem; /* Kleinere header padding */
    border-bottom: 2px solid #ddd; /* Dikkere header bottom border */
}


.edited {
    background-color: #ffc107; /* Oranje-achtige kleur edited */
    color: #fff;
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.saved {
    background-color: #28a745; /* Groene kleur saved */
    color: #fff;
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.colorpickeritem {
    margin: 0.2rem;
}




@media (max-width: 992px) { /* Tablets en kleinere desktops */
    .container {
        max-width: 960px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.0rem; }
    h3 { font-size: 1.5rem; }
}


@media (max-width: 300px) { /* Mobiele schermen - AANGEPAST naar 500px */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.0rem; }
    h3 { font-size: 1.3rem; }

    #menu {
        flex-direction: column; /* Menu items onder elkaar op mobiel */
        align-items: flex-start; /* Links uitlijnen menu items mobiel */
        height: auto; /* Auto hoogte menu mobiel */
        justify-content: flex-start; /* Menu items links uitlijnen mobiel */
    }

    #menu h1.menu {
        margin-bottom: 0.5rem; /* Marge onder menu titel mobiel */
        margin-right: 0; /* Geen rechter margin menu titel mobiel */
    }

    #menu-links {
        flex-direction: column; /* Menu links onder elkaar mobiel */
        width: 100%; /* Volledige breedte menu links mobiel */
    }

    #menu-links > div.link, #menu-links > a.link-small {
        margin-left: 0; /* Geen linker marge menu links mobiel */
        margin-bottom: 0.5rem; /* Marge onder menu links mobiel */
        display: block; /* Volledige breedte menu links mobiel */
        text-align: left; /* Links uitlijnen menu links mobiel */
        width: 100%;
        box-sizing: border-box; /* Box-sizing menu links mobiel */
    }

    #content {
        padding: 15px; /* Minder padding content mobiel */
        top: 60px; /* Top content aanpassen aan fixed menu hoogte */
        /* position: fixed;  VERWIJDERD: position fixed op content */
        overflow-y: scroll; /* Scrollable content */
        bottom: 0; /* Zorg dat content onder menu begint */
    }

    #assignmentlistcontainer, #userlistcontainer, #addeditassignmentcontainer {
        padding: 0.8rem; /* Minder padding containers mobiel */
        margin-bottom: 1rem; /* Minder marge containers mobiel */
    }

    th, td {
        padding: 0.5rem; /* Minder cel padding mobiel - AANGEPAST naar 0.5rem */
    }

    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        padding: 0.8rem 1.2rem; /* Kleinere knop padding mobiel */
        font-size: 0.9rem; /* Kleinere knop font mobiel */
    }

    input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
        padding: 0.8rem; /* Kleinere input padding mobiel */
        font-size: 0.9rem; /* Kleinere input font mobiel */
    }

    textarea {
        min-height: 120px; /* Kleinere textarea hoogte mobiel */
    }

    div.link, a.link-small, .big_icon, div.link-dark {
        padding: 0.6rem 0.8rem; /* Kleinere link padding mobiel */
        font-size: 1rem; /* Kleinere link font mobiel */
    }

    .big_icon {
        font-size: 1.5rem; /* Nog kleinere iconen mobiel */
        padding: 0.5rem;
    }
}


@media (max-width: 199px) { /* Kleinere mobiele schermen */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.0rem; }
    h3 { font-size: 1.2rem; }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #content {
        padding: 10px; /* Nog minder content padding kleine mobiel */
    }

    #assignmentlistcontainer, #userlistcontainer, #addeditassignmentcontainer {
        padding: 0.6rem; /* Nog minder container padding kleine mobiel */
    }

    th, td {
        padding: 0.4rem; /* Nog minder cel padding kleine mobiel */
    }
}

#history-button {
	position: fixed;
	bottom: 15px;
	right: 15px;
	background-color: #FFDA61;
	color: black;
	padding: 15px 20px;
	border-radius: 25px;
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	font-size: 16px;
    display: none;
}

#history-button:hover {
     /*Donkerdere kleur bij hover*/
    background-color: #f0c843;
}

#history-modal {
    position: fixed;
    top: 25px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond */
    z-index: 999;     /* Net onder de knop */
    display: flex;       /* Gebruik flexbox voor centrering */
    align-items: center; /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
}

.modal-content {
    background-color: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 32px;
  bottom: 10px;
  right: 10px;
  left: 10px;
  overflow: hidden;
}

.modal-content p:first-of-type{
    height: 100%;
    overflow: scroll;
}

#close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}
#close-modal:hover{
    color:#333;
}

/* drag drop */
#dropzone {
    border: 2px dashed #ccc;
    padding: 50px;
    text-align: center;
    cursor: pointer;
}

#dropzone.highlight {
    border-color: #007bff; /* Blauwe rand bij hover/drag over */
    background-color: #f0f8ff; /* Lichtblauwe achtergrond */
}

#fileList li {
    margin-bottom: 5px;
}
#fileList li button{
     margin-left: 5px;
}

/* Style de modal (optioneel, jQuery UI heeft basisstijlen) */
.ui-dialog {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtiele schaduw */
}

/* Een opvallende stijl voor de rij van de les die bezig is */
@keyframes glowing-border {
    0% {
        box-shadow: 0 0 3px rgba(40, 167, 69, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.7);
    }
    100% {
        box-shadow: 0 0 3px rgba(40, 167, 69, 0.1);
    }
}

.les-bezig {
    background-color: #D4EDDA !important; /* Duidelijkere groene kleur, overschrijft andere achtergronden */
    font-weight: bold;
    color: #155724; /* Donkergroene tekst voor beter contrast */
    border-left: 5px solid #28a745; /* Opvallende groene linker-border */
    animation: glowing-border 2s ease-in-out infinite; /* Animatie toevoegen */
    position: relative; /* Nodig voor de z-index en pseudo-elementen indien nodig */
    z-index: 1; /* Om ervoor te zorgen dat het boven andere elementen uitsteekt */
}
  
  /* Maak de tijdcel relatief gepositioneerd */
  #tblusers tbody td:nth-child(3) {
    position: relative;
    padding: 8px 5px; /* Pas eventueel padding aan */
  }
  
  /* Container DIV voor de voortgangsbalk, absoluut gepositioneerd */
  .progress-container-inline {
    position: absolute;
    bottom: 1px; /* Plaats onderaan de cel */
    left: 2px;   /* Kleine marge links */
    right: 2px;  /* Kleine marge rechts */
    height: 8px; /* Hoogte van de balk-container */
    background-color: #ddd; /* Achtergrondkleur voor het 'lege' deel */
    border-radius: 4px;
    overflow: hidden;
    z-index: 0; /* Achter de tekst */
  }
  
  /* De daadwerkelijke voortgangsbalk */
  .progress-bar-inline {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Begint op 0% */
    background-color: #66bb6a; /* Iets donkerder groen voor contrast */
    border-radius: 4px;
    /* Stijl voor de tekst binnen de balk */
    display: flex;
    align-items: center;
    justify-content: center; /* Centreer tekst horizontaal */
    color: white; /* Witte tekst */
    font-size: 7px; /* Zeer kleine tekst */
    font-weight: bold;
    line-height: 8px; /* Lijnhoogte gelijk aan hoogte container */
    overflow: hidden; /* Voorkom dat tekst buiten de balk loopt */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4); /* Kleine schaduw voor leesbaarheid */
  }
  
  /* Zorg dat de originele tijdtekst boven de balk blijft */
  #tblusers tbody td:nth-child(3) > span.original-time {
      position: relative;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.6); /* Optioneel: lichte achtergrond voor tekst */
      padding: 0 2px;
      border-radius: 2px;
  }

/* Stijl voor de nieuwe dag-scheidingsrij */
.day-separator-row {
    background-color: #e9e9e9; /* Een iets donkerdere neutrale achtergrond voor duidelijkheid */
}

.day-separator-row:hover {
    background-color: #e9e9e9; /* Zorg dat hover geen effect heeft */
}

.day-header {
    font-size: 1.0rem; /* Iets compacter lettertype */
    font-weight: bold;
    color: #333;
    padding: 8px 8px !important; /* Minder verticale padding voor een compacter uiterlijk */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Iets minder ruimte tussen de letters */
}

/* --- Stijlen voor Leerdoelen Pagina --- */
.learning-goals-container {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1);
}

.domain-header {
    font-size: 1.3rem; /* Compacter lettertype */
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.3rem; /* Minder padding */
    margin-top: 1.5rem; /* Minder marge */
    margin-bottom: 0.75rem;
}

.component-header {
    font-size: 1.1rem; /* Compacter lettertype */
    color: #555;
    margin-top: 1rem; /* Minder marge */
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.goal-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 1rem; /* Minder marge */
}

.goal-list li {
    padding: 0.25rem 0.75rem; /* Minder verticale padding */
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    font-size: 0.9rem; /* Iets kleiner lettertype voor de doelen zelf */
}

.goal-list li label {
    flex-grow: 1; /* Zorgt dat het label alle beschikbare ruimte inneemt */
}

.goal-actions {
    margin-left: 1rem; /* Ruimte tussen de tekst en de knoppen */
}

.goal-checkbox {
    margin-right: 1rem;
    transform: scale(1.2); /* Maakt de checkbox iets groter */
}

.goal-saved-feedback {
    color: #28a745;
    font-style: italic;
    font-size: 0.8rem;
    margin-left: 1rem;
}

/**
 * Stijlen voor Huiswerkopdracht-markeringen (🆕, 🔁, ✅)
 * Creëert een opvallend blok voor opdrachten.
 */
.opdracht {
    background-color: #e9f5ff; /* Lichte, vriendelijke blauwe achtergrond */
    border-left: 5px solid #007bff; /* Duidelijke blauwe accentstreep */
    padding: 15px 20px;
    margin: 15px 0; /* Iets minder verticale marge */
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1.5;
    overflow: hidden; /* Zorgt dat de float binnen het blok blijft */
}

/* Stijl voor de emoji zelf om deze groter en duidelijker te maken */
.opdracht::first-letter {
    font-size: 1.5em; /* Maakt de emoji groter dan de tekst */
    margin-right: 10px; /* Geeft wat ruimte na de emoji */
    float: left; /* Zorgt dat de tekst er netjes omheen valt */
    line-height: 1; /* Zorgt voor een goede verticale uitlijning */
}

/* Specifieke accentkleuren per type opdracht (optioneel) */
.opdracht.herhaal {
    border-left-color: #ff9800; /* Oranje voor herhaling */
}
.opdracht.check {
    border-left-color: #4caf50; /* Groen voor controle/klaar */
}