body { min-height: 100vh; }
body.docent-weergave main.container { max-width: none; padding-inline: clamp(1rem, 3vw, 3rem); }
body.beheer-weergave main.container { max-width: none; padding-inline: clamp(1rem, 3vw, 3rem); }
body.leerling-navbar-zichtbaar { padding-top: 4.5rem; }
@media (max-width: 991.98px) { body.leerling-navbar-zichtbaar { padding-top: 4rem; } }
.navbar-weekselectie { width: 25rem; }
@media (max-width: 575.98px) { .navbar-weekselectie { width: min(100%, 20rem); } }
.openstaande-leerling-zoekveld { width: min(100%, 24rem); }
.weektaak-shell.compact { max-width: 42rem; margin-inline: auto; }
.weektaak-shell.leerling-weergave { max-width: 75rem; }
.aanmeldkaart { max-width: 38rem; }
.leerling-weergave .aanmeldkaart { max-width: none; }
.beheer-weergave .aanmeldkaart { max-width: none; }
#beheerPaneelDocenten > #docentFormulier { display: none; }
.acties { display: flex; flex-wrap: wrap; gap: .4rem; }
#leerlingenTabel th, #leerlingenTabel td { white-space: nowrap; }
.status-acties { display: flex; flex-wrap: wrap; gap: .35rem; }
.openstaande-statuskop, .openstaande-leerling-kop { display: grid; grid-template-columns: minmax(15rem, 1fr) repeat(5, minmax(5rem, auto)); gap: 1rem; align-items: center; }
.openstaande-statuskop { background: #334155; color: #fff; font-size: .875rem; font-weight: 700; padding: .65rem .9rem; }
.openstaande-statuskop span:not(:first-child), .openstaande-leerling-kop > :not(:first-child) { text-align: center; }
.openstaande-leerlingkaart { background: #f8f9fa; }
.openstaande-leerling-kop { cursor: pointer; list-style: none; }
.openstaande-leerling-kop::-webkit-details-marker { display: none; }
.openstaande-takenlijst { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; }
.openstaande-taak { align-items: center; border-left: .35rem solid #9ca3af; display: grid; gap: .75rem; grid-template-columns: minmax(5.5rem, auto) minmax(6.5rem, .65fr) minmax(12rem, 1.5fr) minmax(9rem, .8fr) 8.75rem 11.5rem; padding: .8rem .95rem .8rem .6rem; }
.openstaande-taak + .openstaande-taak { border-top: 1px solid var(--bs-border-color); }
.openstaande-taak-open { border-left-color: #9ca3af; }
.openstaande-taak-nog-nakijken { border-left-color: #facc15; }
.openstaande-taak-verbeteren { border-left-color: #fb923c; }
.openstaande-taak-niet-ingeleverd { border-left-color: #f87171; }
.openstaande-taak-type { background: #e9ecef; border-radius: 999px; color: #334155; font-size: .75rem; justify-self: start; padding: .2rem .65rem; text-align: center; white-space: nowrap; }
.openstaande-taak-vak, .openstaande-taak-omschrijving { min-width: 0; }
.openstaande-taak-meta { color: var(--bs-secondary-color); line-height: 1.2; }
.openstaande-taak .badge { justify-self: center; min-width: 7.75rem; white-space: nowrap; }
.openstaande-taak .status-acties { flex-wrap: nowrap; justify-content: end; width: 11.5rem; }
@media (max-width: 991.98px) { .openstaande-taak { grid-template-columns: auto minmax(7rem, 1fr) minmax(9rem, 1.3fr) 8.75rem; } .openstaande-taak-meta { grid-column: 1 / 3; } .openstaande-taak .badge { grid-column: 3; } .openstaande-taak .status-acties { grid-column: 4; grid-row: 1 / 3; } }
@media (max-width: 767.98px) { .openstaande-statuskop { display: none; } .openstaande-leerling-kop { grid-template-columns: minmax(0, 1fr) repeat(2, auto); } .openstaande-leerling-kop > :nth-child(n + 4) { display: none; } .openstaande-taak { grid-template-columns: auto minmax(0, 1fr); } .openstaande-taak-omschrijving, .openstaande-taak-meta { grid-column: 1 / -1; } .openstaande-taak .badge { grid-column: 1; justify-self: start; } .openstaande-taak .status-acties { grid-column: 2; grid-row: auto; justify-self: end; width: auto; } }
.status-knop { align-items: center; display: inline-flex; height: 2rem; justify-content: center; padding: .375rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; width: 2rem; }
.status-knop:hover, .status-knop:focus-visible { background-color: var(--status-knop-hover-achtergrond) !important; border-color: currentColor !important; box-shadow: inset 0 0 0 1px currentColor, 0 0 0 .15rem color-mix(in srgb, currentColor 20%, transparent); }
.status-knop.actief { box-shadow: inset 0 0 0 2px currentColor; }
.status-knop-goedgekeurd { --status-knop-hover-achtergrond: #86efac; background: #bbf7d0; border-color: #bbf7d0; color: #14532d; }
.status-knop-goedgekeurd.actief { --status-knop-hover-achtergrond: #4ade80; background: #4ade80; border-color: #4ade80; color: #052e16; }
.status-knop-nog-nakijken { --status-knop-hover-achtergrond: #fcd34d; background: #fde68a; border-color: #fde68a; color: #713f12; }
.status-knop-nog-nakijken.actief { --status-knop-hover-achtergrond: #facc15; background: #facc15; border-color: #facc15; color: #422006; }
.status-knop-verbeteren { --status-knop-hover-achtergrond: #fdba74; background: #fed7aa; border-color: #fed7aa; color: #7c2d12; }
.status-knop-verbeteren.actief { --status-knop-hover-achtergrond: #fb923c; background: #fb923c; border-color: #fb923c; color: #431407; }
.status-knop-niet-ingeleverd { --status-knop-hover-achtergrond: #fca5a5; background: #fecaca; border-color: #fecaca; color: #7f1d1d; }
.status-knop-niet-ingeleverd.actief { --status-knop-hover-achtergrond: #f87171; background: #f87171; border-color: #f87171; color: #450a0a; }
.status-knop-ziek { --status-knop-hover-achtergrond: #d8b4fe; background: #e9d5ff; border-color: #e9d5ff; color: #581c87; }
.status-knop-ziek.actief { --status-knop-hover-achtergrond: #c084fc; background: #c084fc; border-color: #c084fc; color: #3b0764; }
.badge-status-goedgekeurd { background: #4ade80; color: #052e16; }
.badge-status-ingeleverd { background: #60a5fa; color: #1d4ed8; }
.badge-status-verbeteren { background: #fb923c; color: #431407; }
.badge-status-nakijken { background: #facc15; color: #422006; }
.badge-status-niet-ingeleverd { background: #f87171; color: #7f1d1d; }
.badge-status-ziek { background: #c084fc; color: #3b0764; }
.docent-taak-kaart { background: #fafbfc; border-left: 5px solid #94a3b8; border-radius: .5rem; padding: 1rem; }
.docent-taak-kop { align-items: flex-start; background: transparent; border: 0; border-bottom: 1px solid var(--bs-border-color); color: inherit; display: flex; gap: .5rem; margin-bottom: .75rem; padding: 0 0 .5rem; text-align: left; width: 100%; }
.docent-taak-kop > :first-child { flex: 1; }
.docent-taak-kop::after { background-image: var(--bs-accordion-btn-icon); background-size: 1rem; content: ''; flex: 0 0 1rem; height: 1rem; margin-top: .25rem; transition: var(--bs-accordion-btn-icon-transition); width: 1rem; }
.docent-taak-kop:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); transform: var(--bs-accordion-btn-icon-transform); }
.docent-taak-kop:hover, .docent-taak-kop:focus-visible { color: var(--bs-primary); outline: none; }
.docent-taak-leerlingen { border-top: 1px solid var(--bs-border-color); }
.docent-taak-leerling { align-items: center; background: #fff; border-bottom: 1px solid var(--bs-border-color); border-left: 5px solid #9ca3af; display: grid; gap: .75rem; grid-template-columns: minmax(13rem, 1.5fr) minmax(10rem, 1fr) 8.75rem 11.5rem; padding: .55rem .65rem; }
.docent-taak-leerling.matrix-status-open, .docent-taak-leerling.matrix-status-ingeleverd, .docent-taak-leerling.matrix-status-goedgekeurd, .docent-taak-leerling.matrix-status-verbeteren, .docent-taak-leerling.matrix-status-nog-nakijken, .docent-taak-leerling.matrix-status-niet-ingeleverd, .docent-taak-leerling.matrix-status-ziek { background: #fff; border-color: #e2e8f0; color: var(--bs-body-color); }
.dagtaak-niveaugroep-opties { display: flex; flex-wrap: wrap; gap: .35rem; }
[id$="NiveaugroepFilter"] > legend { font-size: 16px; }
.dagtaak-dag-titel { font-weight: 700; }
.accordion-button .dagtaak-dag-teller { flex: 1; margin-left: auto; margin-right: .75rem; text-align: right; }
.docent-taak-leerling.matrix-status-open { border-left-color: #9ca3af; }
.docent-taak-leerling.matrix-status-ingeleverd { border-left-color: #60a5fa; }
.docent-taak-leerling.matrix-status-goedgekeurd { border-left-color: #4ade80; }
.docent-taak-leerling.matrix-status-verbeteren { border-left-color: #fb923c; }
.docent-taak-leerling.matrix-status-nog-nakijken { border-left-color: #facc15; }
.docent-taak-leerling.matrix-status-niet-ingeleverd { border-left-color: #f87171; }
.docent-taak-leerling.matrix-status-ziek { border-left-color: #c084fc; }
.docent-taak-leerling-identiteit { align-items: baseline; display: flex; flex-wrap: wrap; gap: .45rem; }
.docent-taak-niveaubadge { align-items: center; background: #e2e8f0; border-radius: 50%; color: #334155; display: inline-flex; font-size: .7rem; font-weight: 700; height: 1.35rem; justify-content: center; line-height: 1; width: 1.35rem; }
.docent-taak-afgetekend-door { justify-self: end; min-width: 10rem; text-align: right; }
.docent-taak-leerling > .badge { justify-self: center; min-width: 7.75rem; text-align: center; white-space: nowrap; }
.docent-taak-leerling > .status-acties { flex-wrap: nowrap; justify-content: end; width: 11.5rem; }
.docent-taak-status.matrix-status-goedgekeurd { color: #166534; }
.docent-taak-status.matrix-status-verbeteren { color: #c2410c; }
.docent-taak-status.matrix-status-nog-nakijken { color: #a16207; }
.docent-taak-status.matrix-status-niet-ingeleverd { color: #dc2626; }
.docent-taak-status.matrix-status-ziek { color: #7e22ce; }
.docent-taak-ingeleverd { color: #2563eb; font-weight: 600; }
@media (max-width: 991.98px) { .docent-taak-leerling { grid-template-columns: minmax(13rem, 1.5fr) minmax(9rem, 1fr) 8.75rem; } .docent-taak-leerling > .status-acties { grid-column: 2 / -1; justify-self: end; } }
@media (max-width: 767.98px) { .docent-taak-leerling { align-items: start; grid-template-columns: 1fr auto; } .docent-taak-afgetekend-door { grid-column: 1; justify-self: start; min-width: 0; text-align: left; } .docent-taak-leerling > .badge { grid-column: 1; justify-self: start; } .docent-taak-leerling > .status-acties { grid-column: 2; grid-row: 1 / span 3; width: auto; } }
.inlever-icoon { color: #60a5fa; font-size: 1.1rem; }
.leerling-dag-accordion { --bs-accordion-border-color: #cbd5e1; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(96, 165, 250, .25); }
.leerling-dag-knop { font-weight: 700; }
.leerling-dag-teller { margin-left: auto; margin-right: .75rem; padding-right: .5rem; text-align: right; }
.leerling-taak-kaart { border-left: 5px solid #9ca3af; border-radius: .5rem; background: var(--bs-tertiary-bg); padding: 1rem; }
.leerling-taak-kaart.taak-status-ingeleverd { border-left-color: #60a5fa; }
.leerling-taak-kaart.taak-status-nog-nakijken { border-left-color: #facc15; }
.leerling-taak-kaart.taak-status-verbeteren { border-left-color: #fb923c; }
.leerling-taak-kaart.taak-status-goedgekeurd, .leerling-dag-accordion .alle-taken-af { border-left: 5px solid #4ade80; }
.leerling-taak-kaart.taak-status-niet-ingeleverd { border-left-color: #f87171; }
.leerling-inleverknop { align-items: center; color: #60a5fa; display: inline-flex; font-size: 1.35rem; justify-content: center; padding: .25rem .45rem; }
.leerling-inleverknop:hover, .leerling-inleverknop:focus-visible { color: #3b82f6; }
.leerling-inleverknop:disabled { color: #60a5fa; opacity: 1; }
.matrix-legenda { display: flex; flex-wrap: wrap; gap: .75rem; }
.matrix-legenda span { align-items: center; display: inline-flex; font-size: .875rem; gap: .35rem; }
.matrix-status { border: 1px solid transparent; border-radius: .2rem; display: inline-block; height: 1.2rem; padding: 0; vertical-align: middle; width: 1.2rem; }
button.matrix-status { cursor: pointer; }
button.matrix-status:hover, button.matrix-status:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.matrix-status-leeg { background: transparent; }
.matrix-status-open { background: #efefef; border-color: #d1d5db; color: #6b7280; }
.matrix-status-ingeleverd { background: #93c5fd; border-color: #60a5fa; color: #1d4ed8; }
.matrix-status-goedgekeurd { background: #86efac; border-color: #4ade80; color: #166534; }
.matrix-status-nog-nakijken { background: #fde68a; border-color: #facc15; color: #713f12; }
.matrix-status-verbeteren { background: #fdba74; border-color: #fb923c; color: #7c2d12; }
.matrix-status-niet-ingeleverd { background: #fca5a5; border-color: #f87171; color: #7f1d1d; }
.matrix-status-ziek { background: #d8b4fe; border-color: #c084fc; color: #581c87; }
.matrix-taak-gegevens, .matrix-meta-gegevens { display: grid; grid-template-columns: 8rem 1fr; margin: 0; row-gap: .2rem; }
.matrix-taak-gegevens dt { font-weight: 600; }
.matrix-taak-gegevens dd, .matrix-meta-gegevens dd { margin: 0; }
.matrix-meta-gegevens { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .875rem; margin-top: .75rem; padding-top: .75rem; }
.matrix-meta-gegevens dt { font-weight: 500; }
.matrix-modal-sluitknop { align-items: center; background: transparent; border: 0; color: var(--bs-body-color); display: inline-flex; font-size: 1rem; height: 2rem; justify-content: center; margin-left: auto; padding: .25rem; width: 2rem; }
.matrix-modal-sluitknop:hover, .matrix-modal-sluitknop:focus-visible { background: #f8f9fa; border-radius: .25rem; outline: 2px solid #94a3b8; outline-offset: 1px; }
.matrix-status-actie { align-items: center; background: #f8f9fa; border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); color: var(--bs-body-color); display: flex; font-weight: 600; gap: .75rem; padding: .55rem .7rem; text-align: left; width: 100%; }
.matrix-status-actie:hover, .matrix-status-actie:focus-visible, .matrix-status-actie.actief { background: #f8f9fa; border-color: #475569; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075), inset 0 0 0 1px #475569; outline: none; }
.matrix-status-actie-icoon { font-size: 1rem; width: 1rem; }
.docent-overzicht-matrix { table-layout: fixed; width: max-content; }
.docent-overzicht-matrix th, .docent-overzicht-matrix td { min-width: 30px; text-align: center; width: 30px; }
.matrix-taak-kolom { width: 240px; }
.matrix-alles-kolom, .matrix-leerling-kolom { width: 30px; }
.docent-overzicht-matrix > :not(caption) > * > :first-child { font-size: 13px; min-width: 240px; width: 240px; position: sticky; left: 0; background: var(--bs-body-bg); text-align: left; z-index: 3; }
.matrix-alles-kop, .matrix-alles-cel { min-width: 30px !important; width: 30px !important; }
.docent-overzicht-matrix .matrix-alles-kop, .docent-overzicht-matrix .matrix-alles-cel { background-color: #fff !important; left: 240px !important; position: sticky !important; z-index: 4; }
.matrix-alles-kop { height: 190px; padding: 4px !important; vertical-align: bottom; }
.matrix-alles-kop-inhoud { align-items: center; display: flex; height: 182px; justify-content: center; }
.matrix-alles-kop-inhoud > span { display: block; font-size: 12px; transform: rotate(-90deg); white-space: nowrap; }
.matrix-leerling-kop { font-size: 12px; height: 190px; min-width: 30px; padding: 4px !important; vertical-align: bottom; }
.matrix-leerling-kop-inhoud { align-items: center; display: flex; flex-direction: column; gap: 6px; height: 182px; justify-content: flex-end; }
.matrix-leerling-naam-ruimte { align-items: center; display: flex; height: 158px; justify-content: center; width: 30px; }
.matrix-leerling-naam { display: block; text-align: right; transform: rotate(-90deg); white-space: nowrap; width: 158px; }
.matrix-leerling-nummer { display: block; font-weight: 700; }
#overzichtMatrix { max-height: none; overflow-x: auto; overflow-y: visible; }
.docent-overzicht-matrix thead th { --bs-table-bg: #fff; --bs-table-accent-bg: #fff; background-color: #fff !important; box-shadow: inset 0 0 0 9999px #fff; position: relative; z-index: 10; }
.docent-overzicht-matrix thead > tr > :first-child { z-index: 11; }
.docent-overzicht-matrix thead .matrix-alles-kop { z-index: 12; }
.docent-overzicht-matrix .matrix-dag-rij th { background: #475569 !important; color: white; left: auto !important; position: relative !important; text-align: left !important; z-index: 9 !important; }
.weekplanning-tabel { min-width: 58rem; }
.weekplanning-tabel th:first-child { min-width: 9rem; }
.weekplanning-tabel td { min-width: 9rem; }
.vakkenkolom { background: var(--bs-tertiary-bg); }
.vakkenlijst { display: grid; gap: .5rem; }
.vakbibliotheek-item { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); cursor: grab; padding: .55rem .65rem; }
.vakbibliotheek-item:active { cursor: grabbing; }
.weekplanning-dagkolommen { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(11rem, 1fr)); overflow-x: auto; padding-bottom: .25rem; }
.weekplanning-dagkolom { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; min-height: 18rem; padding: .75rem; }
.weekplanning-dagkolom.drag-over { background: #eff6ff; border-color: #3b82f6; border-style: dashed; }
.weekplanning-dagkolom h3 { border-bottom: 1px solid var(--bs-border-color); font-size: 1rem; margin-bottom: .75rem; padding-bottom: .5rem; }
.weekplanning-dagkolom .leeg { color: var(--bs-secondary-color); font-size: .875rem; }
.dagplanning-dagkolommen { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(16rem, 1fr)); overflow-x: auto; padding-bottom: .25rem; }
.dagplanning-dagkolom { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; min-height: 18rem; padding: .75rem; }
.dagplanning-dagkolom h3 { border-bottom: 1px solid var(--bs-border-color); font-size: 1rem; margin-bottom: .75rem; padding-bottom: .5rem; }
.dagplanning-dagkolom .leeg { color: var(--bs-secondary-color); font-size: .875rem; }
.dagplanning-leskaart { background: var(--bs-body-bg); }
.dagplanning-leskaart-tijd { color: var(--bs-primary); font-variant-numeric: tabular-nums; font-weight: 600; }
.weekplanning-blok { align-items: flex-start; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); cursor: grab; display: flex; gap: .25rem; margin-bottom: .5rem; padding: .35rem; transition: opacity .12s ease; }
.weekplanning-blok:active { cursor: grabbing; }
.weekplanning-blok.wordt-versleept { border: 0; height: 0; margin: 0; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; }
.weekplanning-sleep-plaats { background: #eff6ff; border: 2px dashed var(--bs-primary); border-radius: .375rem; margin-bottom: .5rem; transition: height .12s ease; }
.weekplanning-blok.weekplanning-invoeg-voor { margin-top: 1.25rem; position: relative; }
.weekplanning-blok.weekplanning-invoeg-voor::before, .weekplanning-dagkolom.weekplanning-invoeg-einde::after { background: var(--bs-primary); border-radius: 99px; content: ''; height: 3px; left: 0; position: absolute; right: 0; top: -.7rem; }
.weekplanning-dagkolom.weekplanning-invoeg-einde { position: relative; }
.weekplanning-dagkolom.weekplanning-invoeg-einde::after { bottom: .35rem; left: .75rem; right: .75rem; top: auto; }
.weekplanning-blok-inhoud { flex: 1; padding: .2rem .3rem; }
.weekplanning-blok-inhoud strong, .weekplanning-blok-inhoud small, .weekplanning-blok-tijd { display: block; }
.weekplanning-blok-tijd { color: var(--bs-primary); font-size: .875rem; font-variant-numeric: tabular-nums; }
.weekplanning-blok small { color: var(--bs-secondary-color); }
.weekplanning-blok-klok, .weekplanning-blok-verwijder { align-items: center; display: inline-flex; height: 2rem; justify-content: center; padding: .25rem; width: 2rem; }
#weekplanningFormulier { display: none !important; }
.niveaugroepen-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.niveaugroep-zone { background: var(--bs-tertiary-bg); border: 2px dashed var(--bs-border-color); border-radius: .5rem; min-height: 14rem; padding: .75rem; transition: border-color .15s, background-color .15s; }
.niveaugroep-zone.drag-over { background: #eff6ff; border-color: #3b82f6; }
.niveaugroep-zone h3 { border-bottom: 1px solid var(--bs-border-color); margin-bottom: .75rem; padding-bottom: .5rem; }
.niveaugroep-kaarten { display: grid; gap: .5rem; }
.niveaugroep-leerling { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); cursor: grab; padding: .55rem .65rem; }
.niveaugroep-leerling:active { cursor: grabbing; }
.niveaugroep-leerling strong, .niveaugroep-leerling span { display: block; }
.niveaugroep-leerling span { color: var(--bs-secondary-color); font-size: .875rem; }