@font-face{font-family:'Noto Sans';src:url('../fonts/noto-sans/noto-sans.regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('../fonts/noto-sans/noto-sans.bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('../fonts/noto-sans/noto-sans.italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{--wit:#fbfbfb;--zwart:#0a0a0a;--oranje:#f09200;--blauw:#2071b6;--groen:#95c11f;--rood:#e0020c;--geel:#f7d117;--lichtoranje:#fde4bf;--lichtblauw:#d2e5f6;--lichtgroen:#e7f2c8;--lichtrood:#f9c8cb;--lichtgeel:#fdf4c2;--shadow:0 12px 30px rgba(10,10,10,.08);--radius:18px}
*{box-sizing:border-box}html{background:var(--wit);color:var(--zwart);font-family:'Noto Sans',Arial,sans-serif}body{margin:0;min-height:100vh;background:linear-gradient(135deg,var(--wit),var(--lichtgeel))}a{color:var(--blauw)}button,input,select,textarea{font:inherit}.app-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,52px);background:var(--zwart);color:var(--wit);box-shadow:var(--shadow)}.brand{color:var(--wit);font-weight:700;font-size:1.35rem;text-decoration:none}.main-nav{margin-left:auto;display:flex;gap:6px;align-items:center}.main-nav a{color:var(--wit);text-decoration:none;padding:9px 11px;border-radius:10px}.main-nav a:hover,.main-nav a.active{background:var(--blauw)}.menu-toggle{display:none;margin-left:auto;background:transparent;border:0;color:var(--wit);font-size:1.5rem}.page-shell{width:min(1400px,calc(100% - 32px));margin:28px auto 60px}.auth-shell{min-height:100vh;display:grid;place-items:center;margin-top:0}.card,.choice-card{background:rgba(251,251,251,.96);border:1px solid rgba(10,10,10,.1);border-radius:var(--radius);padding:clamp(20px,4vw,36px);box-shadow:var(--shadow)}.narrow,.auth-card{width:min(560px,100%)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--oranje);margin:0 0 5px}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.page-heading h1,.card h1{margin:.15em 0}.form-stack{display:grid;gap:17px}.form-stack label{display:grid;gap:7px;font-weight:700}.form-stack input,.form-stack select,.form-stack textarea{width:100%;padding:12px 13px;border:2px solid #d4d4d4;border-radius:11px;background:#fff;color:var(--zwart)}.form-stack input:focus{outline:3px solid var(--lichtblauw);border-color:var(--blauw)}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:11px;background:var(--blauw);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;cursor:pointer}.button:hover{filter:brightness(.93)}.button.danger{background:var(--rood)}.password-wrap{position:relative;display:block}.password-wrap input{padding-right:52px}.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:8px;cursor:pointer}.flash,.field-error{padding:12px 14px;border-radius:10px;margin:10px 0}.flash-success{background:var(--lichtgroen);border-left:5px solid var(--groen)}.flash-warning{background:var(--lichtoranje);border-left:5px solid var(--oranje)}.field-error,.flash-error{background:var(--lichtrood);border-left:5px solid var(--rood)}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:22px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}.choice-card{display:block;color:var(--zwart);text-decoration:none}.choice-card:hover{border-color:var(--blauw);transform:translateY(-2px)}.details{display:grid;grid-template-columns:minmax(130px,.6fr) 1fr;gap:10px 18px}.details dt{font-weight:700}.details dd{margin:0}.empty-state{text-align:center}.muted{color:#555}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:0;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);max-width:520px}dialog::backdrop{background:rgba(10,10,10,.5)}.save-status{
    position:fixed;
    z-index:99999;
    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:3px;

    overflow:hidden;
    pointer-events:none;

    background:transparent;
}

.save-status[hidden]{
    display:none;
}

.save-status-bar{
    width:100%;
    height:100%;

    background:var(--blauw);

    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .22s ease,
        background-color .18s ease;
}

.save-status[data-state="pending"] .save-status-bar{
    background:var(--blauw);
    transform:scaleX(.12);
}

.save-status[data-state="saving"] .save-status-bar{
    background:var(--blauw);
    animation:stagenda-save-progress 1.1s ease-in-out infinite;
}

.save-status[data-state="saved"] .save-status-bar{
    background:var(--groen);
    animation:none;
    transform:scaleX(1);
}

.save-status[data-state="error"] .save-status-bar{
    background:var(--rood);
    animation:none;
    transform:scaleX(1);
}

.autosave-error-message{
    margin:0 0 16px;
}

@keyframes stagenda-save-progress{
    0%{
        transform:scaleX(.15);
    }

    55%{
        transform:scaleX(.72);
    }

    100%{
        transform:scaleX(.94);
    }
}.wide-page-guard{min-height:300px}
@media(max-width:1023px){.wide-only-link{opacity:.48;text-decoration:line-through!important}.laptop-mark{display:inline}.two-column,.choice-grid{grid-template-columns:1fr}}
@media(max-width:800px){.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 16px 18px;background:var(--zwart);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px}.page-shell{width:min(100% - 20px,1400px);margin-top:16px}.page-heading{align-items:flex-start}.details{grid-template-columns:1fr}.details dd{margin-bottom:10px}}
.section-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.section-tabs a{padding:11px 16px;border-radius:12px;background:#fff;color:var(--zwart);text-decoration:none;border:1px solid rgba(10,10,10,.12);font-weight:700}.section-tabs a.active{background:var(--blauw);color:#fff}.management-layout{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:22px;align-items:start}.management-list{position:sticky;top:92px;padding:18px}.list-heading,.card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.list-heading h2,.card-heading h2{margin:.2em 0}.icon-button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--groen);color:var(--zwart);font-size:1.6rem;text-decoration:none;font-weight:700}.scroll-list{display:grid;gap:7px;max-height:70vh;overflow:auto;padding-right:4px}.list-item{display:grid;gap:2px;padding:11px 12px;border-radius:11px;color:var(--zwart);text-decoration:none;border:1px solid transparent}.list-item span{font-size:.88rem;color:#555}.list-item:hover,.list-item.active{background:var(--lichtblauw);border-color:var(--blauw)}.management-detail{display:grid;gap:22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label,.form-grid fieldset{display:grid;gap:7px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px 13px;border:2px solid #d4d4d4;border-radius:11px;background:#fff}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:3px solid var(--lichtblauw);border-color:var(--blauw)}.full{grid-column:1/-1}.form-actions{display:flex;gap:10px}.danger-zone{margin-top:22px;padding-top:18px;border-top:1px solid rgba(10,10,10,.12)}.weekday-switches{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.check-card{position:relative}.check-card input{position:absolute;opacity:0}.check-card span{display:block;padding:11px;border:2px solid #d4d4d4;border-radius:11px;text-align:center;cursor:pointer}.check-card input:checked+span{background:var(--lichtgroen);border-color:var(--groen)}.history-list{display:grid;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(10,10,10,.12)}.two-panel{display:grid;grid-template-columns:1fr 1fr;gap:28px}.inline-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.switch-label{display:flex;gap:8px;align-items:center;font-weight:700}.stats-row{display:flex;gap:10px;flex-wrap:wrap}.stat{padding:8px 11px;border-radius:999px;font-weight:700}.stat.good{background:var(--lichtgroen)}.stat.bad{background:var(--lichtrood)}.button.secondary{background:var(--oranje);color:var(--zwart)}.placement-card,.provider-card{display:grid;gap:4px;padding:13px 14px;margin:8px 0;border:1px solid rgba(10,10,10,.13);border-radius:12px;text-decoration:none;color:var(--zwart);background:#fff}.placement-card:hover,.provider-card:hover{border-color:var(--blauw);background:var(--lichtblauw)}.placement-card span,.provider-card span{font-size:.9rem;color:#555}.placement-form,.provider-form{margin-top:22px;padding-top:22px;border-top:2px solid var(--lichtblauw)}.form-grid fieldset{border:1px solid rgba(10,10,10,.15);border-radius:12px;padding:14px}.multi-check{display:grid;gap:8px;max-height:220px;overflow:auto}.multi-check label{display:flex;gap:9px;align-items:flex-start;font-weight:400}.multi-check input{width:auto;margin-top:4px}.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.management-layout{grid-template-columns:1fr}.management-list{position:static}.scroll-list{max-height:300px}.weekday-switches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.form-grid,.two-panel,.provider-grid{grid-template-columns:1fr}.full{grid-column:auto}.weekday-switches{grid-template-columns:1fr}.card-heading{align-items:flex-start;flex-direction:column}.management-layout{gap:14px}}
.role-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.role-checks .check-card span{height:100%}@media(max-width:700px){.role-checks{grid-template-columns:1fr}}

.school-calendar-layout{display:grid;grid-template-columns:minmax(620px,1.15fr) minmax(400px,.85fr);gap:22px;align-items:start}.calendar-editor{padding:20px}.calendar-preview{padding:0;max-height:calc(100vh - 105px);overflow:auto}.preview-sticky{position:sticky;top:0;z-index:3;background:var(--wit);padding:20px 22px 12px;border-bottom:1px solid rgba(10,10,10,.1)}.preview-sticky h2{margin:.15em 0}.calendar-topbar{display:flex;gap:16px;align-items:end;justify-content:space-between;margin-bottom:20px}.calendar-topbar label{display:grid;gap:7px;font-weight:700}.calendar-topbar select,.calendar-fields input,.calendar-row input,.calendar-row select{padding:10px;border:2px solid #d4d4d4;border-radius:10px;background:#fff}.calendar-block{border:1px solid rgba(10,10,10,.15);border-radius:14px;margin:0 0 18px;padding:16px}.calendar-block legend{font-weight:700;padding:0 7px}.calendar-fields{display:grid;gap:12px}.calendar-fields.three{grid-template-columns:repeat(3,1fr)}.calendar-fields label,.calendar-row label{display:grid;gap:6px;font-weight:700;font-size:.92rem}.calendar-rows{display:grid;gap:10px}.calendar-row{display:grid;grid-template-columns:minmax(170px,1.5fr) minmax(145px,1fr) minmax(145px,1fr) minmax(115px,.7fr) minmax(130px,.8fr) minmax(110px,.7fr) 40px;gap:8px;align-items:end;padding:10px;border-radius:12px;background:#fff;border:1px solid rgba(10,10,10,.1)}.calendar-row label:only-of-type{grid-column:1/-2}.row-remove{height:42px;width:40px;border:0;border-radius:10px;background:var(--lichtrood);color:var(--rood);font-size:1.4rem;cursor:pointer}.row-add{margin-top:12px;padding:9px 13px}.row-errors{grid-column:1/-1;color:var(--rood);font-size:.86rem}.has-error{border-color:var(--rood)!important;background:var(--lichtrood)!important}.calendar-preview-list{padding:12px 18px 24px}.preview-week{position:sticky;top:100px;z-index:2;background:var(--zwart);color:var(--wit);padding:7px 12px;border-radius:9px;margin:10px 0 6px;font-weight:700}.preview-day{display:grid;grid-template-columns:125px 1fr;min-height:58px;border-radius:10px;margin:5px 0;overflow:hidden;border:1px solid rgba(10,10,10,.12)}.preview-date{display:flex;justify-content:space-between;gap:8px;padding:10px;background:rgba(255,255,255,.65)}.preview-info{padding:10px;font-weight:700}.preview-weekend{background:var(--geel)}.preview-stage_day{background:var(--wit)}.preview-school_day{background:var(--lichtgeel)}.preview-holiday,.preview-free_day{background:var(--oranje);color:var(--wit)}.preview-day.is-today{outline:4px solid var(--blauw);outline-offset:1px}
@media(max-width:1250px){.school-calendar-layout{grid-template-columns:1fr}.calendar-preview{max-height:none}.calendar-row{grid-template-columns:repeat(3,minmax(0,1fr)) 40px}.row-errors{grid-column:1/-1}.calendar-fields.three{grid-template-columns:1fr 1fr}}


.grade-target { min-width: 13rem; }
.grade-dropdown { position: relative; }
.grade-dropdown > summary { cursor: pointer; list-style: none; min-height: 2.75rem; padding: .7rem 2.2rem .7rem .85rem; border: 1px solid rgba(10,10,10,.25); border-radius: .55rem; background: var(--wit); position: relative; }
.grade-dropdown > summary::-webkit-details-marker { display: none; }
.grade-dropdown > summary::after { content: '▾'; position: absolute; right: .8rem; }
.grade-dropdown[open] > summary::after { content: '▴'; }
.grade-options { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; min-width: 100%; max-height: 15rem; overflow: auto; padding: .55rem; border: 1px solid rgba(10,10,10,.25); border-radius: .55rem; background: var(--wit); box-shadow: 0 .5rem 1.5rem rgba(10,10,10,.16); }
.grade-options label { display: flex; align-items: center; gap: .55rem; padding: .45rem; white-space: nowrap; }
.grade-options input { width: 1.1rem; height: 1.1rem; }

/* Agenda v0.6 */
.agenda-top-sticky{position:sticky;top:70px;z-index:35;background:var(--wit);padding:10px 0 14px;border-bottom:1px solid rgba(10,10,10,.12);margin-bottom:18px}.agenda-title-row{display:flex;justify-content:space-between;align-items:end;gap:20px}.agenda-title-row h1{margin:.1em 0}.agenda-selectors{display:flex;gap:12px;align-items:end}.agenda-selectors label{display:grid;gap:5px;font-weight:700;position:relative}.agenda-selectors select,.agenda-selectors input{padding:10px 12px;border:2px solid #d4d4d4;border-radius:10px;background:#fff;min-width:220px}.student-options{position:absolute;top:100%;right:0;z-index:50;width:100%;max-height:320px;overflow:auto;background:#fff;border:1px solid rgba(10,10,10,.2);border-radius:10px;box-shadow:var(--shadow);padding:6px}.student-options button{display:grid;width:100%;text-align:left;border:0;background:#fff;padding:9px;border-radius:8px}.student-options button:hover{background:var(--lichtblauw)}.student-options small{color:#555}.agenda-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:start}.month-nav{position:sticky;top:190px;padding:10px;display:grid;gap:3px}.month-nav button{border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-weight:700;cursor:pointer}.month-nav button:hover{background:var(--lichtblauw)}.agenda-stream{min-width:0}.month-anchor{scroll-margin-top:180px;padding:12px 2px 4px}.month-anchor h2{margin:0;color:var(--blauw)}.agenda-week{position:sticky;top:154px;z-index:25;background:var(--zwart);color:var(--wit);padding:8px 13px;border-radius:9px;margin:8px 0 6px;font-weight:700}.agenda-day{border:1px solid rgba(10,10,10,.15);border-radius:12px;margin:6px 0;overflow:hidden;scroll-margin-top:210px}.day-weekend{background:var(--geel)}.day-stage_day{background:var(--wit)}.day-school_day{background:var(--lichtgeel)}.day-holiday,.day-free_day{background:var(--oranje);color:var(--wit)}.agenda-day.is-today{outline:4px solid var(--blauw);outline-offset:1px}.day-summary{width:100%;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:20px 190px minmax(0,1fr) auto 22px;gap:12px;align-items:center;text-align:left;padding:13px;cursor:pointer}.day-date{display:grid}.day-date small{font-weight:400}.day-lines{display:grid;gap:3px}.day-comment-preview{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-chevron{font-size:1.8rem;transition:transform .2s}.agenda-day.is-open .day-chevron{transform:rotate(90deg)}.attendance-dot{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 auto}.dot-present{background:var(--groen)}.dot-absent{background:var(--rood)}.dot-pending{background:var(--oranje)}.dot-unplaced{background:var(--geel);border:1px solid rgba(10,10,10,.18)}.dot-none{background:transparent;border:1px solid transparent}.day-detail{background:rgba(251,251,251,.97);color:var(--zwart);padding:18px;border-top:1px solid rgba(10,10,10,.15)}.detail-head{display:flex;justify-content:space-between;gap:20px}.detail-head h3{margin:.2em 0}.close-detail{border:0;background:transparent;font-size:2rem;cursor:pointer}.detail-section{padding:16px 0;border-top:1px solid rgba(10,10,10,.12)}.detail-section textarea{width:100%;padding:11px;border:2px solid #d4d4d4;border-radius:10px}.notes-list{display:grid;gap:10px;margin-bottom:12px}.note-card{background:var(--lichtblauw);padding:13px;border-radius:11px}.note-card p{margin:.2em 0 .7em}.note-card footer{display:flex;gap:10px;flex-wrap:wrap;font-size:.84rem}.inline-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}.inline-actions button{padding:7px 10px;border:0;border-radius:8px;cursor:pointer}.attendance-choices{display:flex;gap:10px}.attendance-choices button{display:flex;align-items:center;gap:7px;padding:10px 14px;border:2px solid #ccc;border-radius:999px;background:#fff}.attendance-choices button.active{border-color:var(--blauw);box-shadow:0 0 0 3px var(--lichtblauw)}.today-students{margin-bottom:16px}.today-student-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.today-student{display:flex;align-items:center;gap:9px;padding:9px;border-radius:9px;text-decoration:none;color:var(--zwart)}.today-student:hover{background:var(--lichtblauw)}.undo-toast{position:fixed;right:20px;bottom:20px;z-index:100;background:var(--zwart);color:#fff;padding:12px 14px;border-radius:10px;box-shadow:var(--shadow)}.undo-toast button{margin-left:14px;background:var(--geel);border:0;border-radius:7px;padding:6px 9px;font-weight:700}
@media(max-width:900px){.month-nav{display:none}.agenda-layout{grid-template-columns:1fr}.agenda-title-row{align-items:stretch;flex-direction:column}.agenda-selectors{align-items:stretch;flex-wrap:wrap}.agenda-top-sticky{top:62px}.agenda-week{top:176px}.day-summary{grid-template-columns:18px minmax(135px,.7fr) minmax(0,1fr) auto 18px}}
@media(max-width:760px){.agenda-top-sticky{position:relative;top:auto}.agenda-week{top:62px}.today-students{display:none}.day-summary{grid-template-columns:16px minmax(0,1fr) auto 16px;padding:11px}.day-lines{grid-column:2/4}.note-count{grid-column:3}.day-detail{position:fixed;inset:0;z-index:200;overflow:auto;padding:18px;background:var(--wit)}body.day-detail-open{overflow:hidden}.student-options{left:0;right:auto}.agenda-selectors input,.agenda-selectors select{min-width:0;width:100%}}


/* v0.7 – workflow, services and logging */
.button-secondary{background:var(--wit);color:var(--blauw);border:2px solid var(--blauw)}
.agenda-title-row>.button-secondary{margin-left:auto;margin-right:8px}
.record-links{display:flex;gap:10px;margin-left:auto;font-size:.9rem}.record-links a{font-weight:700}
.activity-filters{display:grid;grid-template-columns:minmax(220px,2fr) minmax(180px,1fr) minmax(150px,.8fr) auto auto;gap:12px;align-items:end;margin-bottom:18px}.activity-filters label{display:grid;gap:6px;font-weight:700}.activity-filters input,.activity-filters select{padding:10px;border:2px solid #d4d4d4;border-radius:10px;background:#fff}.activity-table-wrap{overflow:auto;max-height:65vh}.activity-table{width:100%;border-collapse:collapse;min-width:920px}.activity-table th,.activity-table td{text-align:left;padding:10px;border-bottom:1px solid rgba(10,10,10,.12);vertical-align:top}.activity-table thead{position:sticky;top:0;background:var(--wit);z-index:2}.result-pill{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700}.result-pill.success{background:var(--lichtgroen)}.result-pill.failed{background:var(--lichtrood)}
.save-status[data-state="detected"] .save-status-bar{background:var(--oranje);width:20%}.save-status[data-state="preparing"] .save-status-bar{background:var(--oranje);width:42%}.save-status[data-state="saving"] .save-status-bar{background:var(--blauw);animation:none;width:78%;transition:width .25s}.save-status[data-state="saved"] .save-status-bar{background:var(--groen);width:100%;transition:width .2s}.save-status[data-state="error"] .save-status-bar{background:var(--rood);width:100%}
@media(max-width:900px){.activity-filters{grid-template-columns:1fr 1fr}.agenda-title-row>.button-secondary{margin:0}}
@media(max-width:600px){.activity-filters{grid-template-columns:1fr}}


/* v0.7.1 – notities en cursusjaarhistorie */
.stagenda-note-indicator{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:rgba(10,10,10,.52)}
.stagenda-note-indicator svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stagenda-note-indicator.has-unread{color:var(--rood);background:var(--lichtrood);box-shadow:0 0 0 2px var(--rood)}
.stagenda-note-indicator>span{position:absolute;right:-7px;top:-8px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:var(--rood);color:var(--wit);font-size:.72rem;font-weight:700;display:grid;place-items:center}

/* v0.7.2: centrale cursusjaarcontext */
.course-year-context{margin-left:8px;flex:0 0 auto}.course-year-context label{display:grid;gap:2px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.course-year-context select{min-width:132px;padding:7px 9px;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:#fff;color:var(--zwart);font-weight:700}.course-year-warning{position:sticky;top:68px;z-index:45;display:flex;justify-content:center;align-items:center;gap:18px;padding:9px 18px;background:var(--lichtoranje);border-bottom:4px solid var(--oranje);box-shadow:0 4px 12px rgba(10,10,10,.12)}.course-year-warning form{margin:0}.course-year-warning button{border:0;border-radius:9px;padding:7px 11px;background:var(--zwart);color:var(--wit);font-weight:700;cursor:pointer}.agenda-course-year{white-space:nowrap}.course-year-date-hint{font-size:.78rem;color:#555;font-weight:400}
@media(max-width:1100px){.app-header{gap:12px}.main-nav{gap:2px}.main-nav a{padding:8px 7px;font-size:.9rem}.course-year-context select{min-width:118px}}
@media(max-width:800px){.course-year-context{margin-left:auto}.course-year-context label span{display:none}.course-year-context select{min-width:116px;padding:8px}.course-year-warning{top:62px;flex-direction:column;gap:6px;text-align:center}.main-nav{z-index:60}}


/* v0.7.4 – centrale paginakop en vaste pagina-opbouw */
.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:0 0 22px;
}
.page-heading-main{min-width:0}
.page-heading .eyebrow{margin:0 0 5px}
.page-heading h1{margin:.15em 0 0}
.page-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.agenda-controls-sticky{
    position:sticky;
    top:calc(var(--app-header-height) + var(--course-year-warning-height));
    z-index:35;
    margin:0 0 18px;
    padding:10px 0 14px;
    background:var(--wit);
    border-bottom:1px solid rgba(10,10,10,.12);
}
.agenda-controls-row{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    gap:20px;
}
.agenda-controls-row>.button-secondary{margin-right:auto}

@media(max-width:900px){
    .agenda-controls-row{align-items:stretch;flex-direction:column}
    .agenda-controls-row>.button-secondary{margin:0;align-self:flex-start}
}

@media(max-width:800px){
    .page-heading{align-items:flex-start}
}

@media(max-width:760px){
    .agenda-controls-sticky{position:relative;top:auto}
}


/* v0.7.4.1 – de Agenda scrollt binnen een eigen werkgebied */
@media(min-width:761px){
    .agenda-layout{
        align-items:stretch;
    }

    .agenda-stream{
        min-width:0;
        min-height:360px;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
        padding-right:4px;
    }

    .agenda-week{
        top:0;
    }

    .month-nav{
        position:relative;
        top:auto;
        align-self:start;
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .month-anchor,
    .agenda-day{
        scroll-margin-top:48px;
    }
}

/* v0.8 – Contact en communicatie */
.contact-layout,
.contact-provider-students{
    display:grid;
    gap:22px;
}

.contact-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.contact-layout .contact-school{
    grid-column:1/-1;
}

.contact-section,
.contact-student-card{
    display:grid;
    gap:18px;
}

.contact-list{
    display:grid;
    gap:10px;
}

.contact-person{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 16px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:13px;
    background:#fff;
}

.contact-person-main{
    min-width:0;
    display:grid;
    gap:3px;
}

.contact-person h3{
    margin:0;
}

.contact-subtitle{
    margin:0;
    font-weight:700;
    color:#555;
}

.contact-detail{
    display:block;
    overflow-wrap:anywhere;
}

.contact-actions{
    display:flex;
    gap:8px;
    flex:0 0 auto;
}

.contact-action{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--lichtblauw);
    color:var(--blauw);
    text-decoration:none;
}

.contact-action:hover{
    background:var(--blauw);
    color:var(--wit);
}

.contact-action-whatsapp{
    background:var(--lichtgroen);
    color:#397500;
}

.contact-action-whatsapp:hover{
    background:var(--groen);
    color:var(--zwart);
}

.contact-action svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-nested{
    margin-top:6px;
    padding-top:18px;
    border-top:1px solid rgba(10,10,10,.12);
}

.contact-nested>h3{
    margin:0 0 12px;
}

.school-address{
    display:grid;
    gap:4px;
}

.settings-card{
    max-width:900px;
}

.settings-switch-list{
    display:grid;
    gap:10px;
    margin-top:20px;
}

.settings-switch-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:16px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:13px;
    background:#fff;
    cursor:pointer;
}

.settings-switch-row>span{
    display:grid;
    gap:4px;
}

.settings-switch-row small{
    color:#555;
    font-weight:400;
}

.switch-input{
    appearance:none;
    width:52px;
    height:30px;
    margin:0;
    border:2px solid #b7b7b7;
    border-radius:999px;
    background:#ddd;
    position:relative;
    cursor:pointer;
    flex:0 0 auto;
    transition:background-color .18s ease,border-color .18s ease;
}

.switch-input::after{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(10,10,10,.2);
    transition:transform .18s ease;
}

.switch-input:checked{
    background:var(--groen);
    border-color:var(--groen);
}

.switch-input:checked::after{
    transform:translateX(22px);
}

.switch-input:focus-visible{
    outline:3px solid var(--lichtblauw);
    outline-offset:2px;
}

@media(max-width:800px){
    .contact-layout{
        grid-template-columns:1fr;
    }

    .contact-layout .contact-school{
        grid-column:auto;
    }
}

@media(max-width:560px){
    .contact-person{
        align-items:flex-start;
    }

    .settings-switch-row{
        align-items:flex-start;
    }
}

@media(min-width:761px){
    .contact-actions{
        display:none;
    }
}

/* v0.9.2a – vereenvoudigd Dashboard */
.dashboard-simple{
    display:grid;
    gap:22px;
}

.dashboard-disclosure{
    padding:0;
    overflow:hidden;
}

.dashboard-disclosure-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 24px;
    cursor:pointer;
    list-style:none;
}

.dashboard-disclosure-summary::-webkit-details-marker{
    display:none;
}

.dashboard-disclosure-summary::after{
    content:'▾';
    margin-left:8px;
    font-size:1.2rem;
    font-weight:700;
}

.dashboard-disclosure:not([open])
.dashboard-disclosure-summary::after{
    content:'›';
}

.dashboard-disclosure-summary>span:first-child{
    display:grid;
    gap:3px;
}

.dashboard-disclosure-summary strong{
    font-size:1.25rem;
}

.dashboard-disclosure-content{
    padding:0 24px 24px;
    border-top:1px solid rgba(10,10,10,.1);
}

.dashboard-count-badge{
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    padding:0 9px;
    border-radius:999px;
    background:var(--lichtblauw);
    color:var(--blauw);
    font-weight:700;
}

.dashboard-student-list,
.dashboard-note-list{
    display:grid;
    gap:8px;
    padding-top:16px;
}

.dashboard-student-row,
.dashboard-note-row{
    display:grid;
    align-items:center;
    gap:12px;
    color:var(--zwart);
    text-decoration:none;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
}

.dashboard-student-row{
    grid-template-columns:18px minmax(0,1fr) auto 18px;
    padding:12px 14px;
}

.dashboard-note-row{
    grid-template-columns:32px minmax(0,1fr) 18px;
    padding:14px;
}

.dashboard-student-row:hover,
.dashboard-note-row:hover{
    border-color:var(--blauw);
    background:var(--lichtblauw);
}

.dashboard-dot-placeholder{
    width:13px;
    height:13px;
}

.dashboard-status-text{
    color:#555;
    font-size:.9rem;
    white-space:nowrap;
}

.dashboard-note-main{
    display:grid;
    gap:4px;
    min-width:0;
}

.dashboard-note-main>span{
    overflow-wrap:anywhere;
}

.dashboard-note-main small{
    color:#555;
}

.dashboard-note-explanation{
    margin:16px 0 0;
    color:#555;
    font-size:.9rem;
}

.dashboard-main-action{
    display:flex;
    justify-content:flex-start;
}

@media(max-width:600px){
    .dashboard-simple{
        gap:12px;
    }

    .dashboard-disclosure-summary{
        padding:14px 15px;
    }

    .dashboard-disclosure-content{
        padding:0 12px 12px;
    }

    .dashboard-student-row{
        grid-template-columns:16px minmax(0,1fr) 16px;
        gap:9px;
        padding:10px;
    }

    .dashboard-student-row .dashboard-status-text{
        grid-column:2;
        font-size:.8rem;
    }

    .dashboard-note-row{
        grid-template-columns:28px minmax(0,1fr) 14px;
        gap:9px;
        padding:10px;
    }

    .dashboard-disclosure-summary strong{
        font-size:1.05rem;
    }
}


/* v0.9.2c – ongelezen notities afhandelen */
.dashboard-note-row{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    padding:0;
    overflow:hidden;
    touch-action:pan-y;
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.dashboard-note-link{
    display:grid;
    grid-template-columns:32px minmax(0,1fr) 18px;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:14px;
    color:var(--zwart);
    text-decoration:none;
    transform:translateX(var(--swipe-distance,0));
    transition:transform .16s ease;
}

.dashboard-note-read-button{
    align-self:center;
    margin:10px 12px 10px 0;
    padding:8px 11px;
    border:0;
    border-radius:9px;
    background:var(--lichtgroen);
    color:var(--zwart);
    font-weight:700;
    cursor:pointer;
}

.dashboard-note-read-button:hover{
    background:var(--groen);
}

.dashboard-note-row.is-swiping::before{
    content:'Gelezen';
    position:absolute;
    inset:0 auto 0 0;
    width:120px;
    display:flex;
    align-items:center;
    padding-left:16px;
    background:var(--groen);
    color:var(--zwart);
    font-weight:700;
}

.dashboard-note-row.is-marking-read{
    pointer-events:none;
}

.dashboard-note-row.is-read{
    opacity:0;
    transform:translateX(40px);
}

@media(max-width:760px){
    .dashboard-note-row{
        grid-template-columns:1fr;
    }

    .dashboard-note-link{
        grid-template-columns:28px minmax(0,1fr) 14px;
        gap:9px;
        padding:10px;
    }

    .dashboard-note-read-button{
        display:none;
    }
}


/* v0.9.3a – verjaardagen */
.dashboard-birthday-today{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    color:var(--zwart);
    text-decoration:none;
    border:3px solid var(--oranje);
    background:linear-gradient(135deg,var(--lichtoranje),var(--lichtgeel));
}
.dashboard-birthday-today>span:nth-child(2){display:grid;gap:4px}
.dashboard-birthday-today strong{font-size:1.2rem}
.dashboard-birthday-today small{color:#555}
.dashboard-birthday-icon{font-size:2rem}
.dashboard-birthday-list{display:grid;gap:8px;padding-top:16px}
.dashboard-birthday-row{
    display:grid;
    grid-template-columns:90px minmax(0,1fr) auto 18px;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    color:var(--zwart);
    text-decoration:none;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
}
.dashboard-birthday-row:hover{border-color:var(--oranje);background:var(--lichtoranje)}
.dashboard-birthday-date{font-weight:700;color:var(--oranje)}
.agenda-day.is-birthday{
    border:3px solid var(--oranje);
    box-shadow:0 0 0 3px var(--lichtoranje),var(--shadow);
}
.day-birthday-preview{font-weight:700;color:#8a4e00}
.birthday-system-comment{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    padding:12px 14px;
    border-left:5px solid var(--oranje);
    border-radius:10px;
    background:var(--lichtoranje);
}
@media(max-width:600px){
    .dashboard-birthday-today{padding:14px;gap:10px}
    .dashboard-birthday-today strong{font-size:1rem}
    .dashboard-birthday-row{
        grid-template-columns:64px minmax(0,1fr) 14px;
        gap:8px;
        padding:10px;
    }
    .dashboard-birthday-row>span:nth-last-child(2){grid-column:2;font-size:.82rem;color:#555}
}


/* v0.9.3b – eigen SVG-taarticoon */
.stagenda-cake-icon{
    display:inline-block;
    width:22px;
    height:22px;
    flex:0 0 auto;
    vertical-align:-.25em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-birthday-icon{
    display:grid;
    place-items:center;
}

.day-birthday-preview{
    display:flex;
    align-items:center;
    gap:7px;
}

.birthday-system-comment{
    display:flex;
    align-items:center;
    gap:10px;
}

@media(max-width:600px){
    .stagenda-cake-icon{
        width:20px;
        height:20px;
    }
}


/* v0.9.3c – instelbare verjaardagsperiode */
.settings-page-grid{
    display:grid;
    gap:22px;
}

.settings-number-form{
    max-width:360px;
    margin-top:20px;
}

.settings-number-form label{
    display:grid;
    gap:7px;
    font-weight:700;
}

.settings-number-form input{
    width:100%;
    padding:12px 13px;
    border:2px solid #d4d4d4;
    border-radius:11px;
    background:#fff;
    color:var(--zwart);
}

.settings-number-form input:focus{
    outline:3px solid var(--lichtblauw);
    border-color:var(--blauw);
}

.settings-number-form small{
    color:#555;
    font-weight:400;
}


/* v0.9.4a – taarticoon volgt tekstkleur en docentcontact */
.stagenda-cake-icon{
    color:inherit;
}

.teacher-contact-list{
    display:grid;
    gap:12px;
}

.teacher-contact-person{
    scroll-margin-top:110px;
}

.teacher-contact-person.is-target{
    outline:4px solid var(--blauw);
    outline-offset:2px;
}


/* v0.9.5b – eenvoudige keuze voor anoniem bellen */
.settings-subheading{
    margin-top:14px;
    padding-top:18px;
    border-top:1px solid rgba(10,10,10,.12);
}

.settings-subheading h3{
    margin:.15em 0 .35em;
}


/* v0.9.6a – Beheer en Accountbeheer gelijkgetrokken */
.account-management-intro{
    margin:-12px 0 22px;
}

form[data-page-autosave="1"] .autosave-error-message{
    grid-column:1/-1;
}

@media(max-width:700px){
    .account-management-intro{
        margin-top:-8px;
    }
}


/* v0.9.7a – export en voorbeeldbestanden */
.data-transfer-card{
    margin-bottom:22px;
}

.data-transfer-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
}

.data-transfer-item{
    padding:16px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
}

.data-transfer-item h3{
    margin:0 0 14px;
}

.data-transfer-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

@media(max-width:900px){
    .data-transfer-grid{
        grid-template-columns:1fr;
    }
}


/* v0.9.8a – docentcontact zoeken en doorklikken */
.teacher-contact-search{
    display:grid;
    gap:7px;
    max-width:620px;
    margin:18px 0 4px;
    font-weight:700;
}

.teacher-contact-search input{
    width:100%;
    padding:12px 13px;
    border:2px solid #d4d4d4;
    border-radius:11px;
    background:#fff;
    color:var(--zwart);
}

.teacher-contact-search input:focus{
    outline:3px solid var(--lichtblauw);
    border-color:var(--blauw);
}

.teacher-contact-person{
    position:relative;
    padding:0;
    overflow:hidden;
}

.teacher-contact-agenda-link{
    display:grid;
    grid-template-columns:minmax(0,1fr) 20px;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:14px;
    color:var(--zwart);
    text-decoration:none;
}

.teacher-contact-agenda-link:hover{
    background:var(--lichtblauw);
}

.teacher-contact-chevron{
    font-size:1.6rem;
    line-height:1;
}

.teacher-contact-person .contact-actions{
    padding:0 14px 14px;
}

.teacher-contact-person[hidden]{
    display:none!important;
}

@media(max-width:760px){
    .teacher-contact-search{
        margin-top:12px;
    }

    .teacher-contact-agenda-link{
        padding:11px;
    }

    .teacher-contact-person .contact-actions{
        padding:0 11px 11px;
    }
}


/* v0.9.9a – CSV-import */
.data-import-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:24px;align-items:start;margin-top:22px;padding-top:22px;border-top:1px solid rgba(10,10,10,.12)}
.data-import-panel h3{margin:.15em 0 .5em}.data-import-form{display:grid;gap:14px}.data-import-form label{display:grid;gap:7px;font-weight:700}.data-import-form select,.data-import-form input[type="file"]{width:100%;padding:11px 12px;border:2px solid #d4d4d4;border-radius:10px;background:#fff}
@media(max-width:900px){.data-import-panel{grid-template-columns:1fr}}


/* v0.9.10a – volledig gebruikersarchief */
.archive-intro{
    margin:-10px 0 22px;
}

.archive-sections{
    display:grid;
    gap:22px;
}

.archive-count{
    display:grid;
    place-items:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border-radius:999px;
    background:var(--lichtblauw);
    color:var(--blauw);
    font-weight:700;
}

.archive-list{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.archive-record{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    padding:16px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
}

.archive-record h3{
    margin:0 0 10px;
}

.archive-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 26px;
    margin:0;
}

.archive-meta div{
    display:grid;
    gap:2px;
}

.archive-meta dt{
    color:#555;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.archive-meta dd{
    margin:0;
}

.archive-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:9px;
}

.archive-actions form{
    margin:0;
}

@media(max-width:800px){
    .archive-record{
        grid-template-columns:1fr;
        gap:14px;
    }

    .archive-actions{
        justify-content:flex-start;
    }
}

@media(max-width:520px){
    .archive-actions,
    .archive-actions form,
    .archive-actions .button{
        width:100%;
    }
}


/* v0.9.11a – wachtwoordherstel en eenmalige links */
.account-security-actions{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(10,10,10,.12);
}

.account-security-actions form{
    margin:0;
}

.password-link-card{
    display:grid;
    gap:18px;
}

.password-link-card h2{
    margin:0;
}

.password-link-field{
    display:grid;
    gap:7px;
    font-weight:700;
}

.password-link-field input{
    width:100%;
    padding:12px 13px;
    border:2px solid #d4d4d4;
    border-radius:11px;
    background:#fff;
}

.password-link-copy-result{
    margin:0;
}


/* v0.9.11c – beheerkeuze voor wachtwoordherstel */
.password-delivery-card{
    display:grid;
    gap:18px;
}

.password-delivery-card h2{
    margin:0;
}

.password-delivery-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.password-delivery-actions form{
    margin:0;
}

@media(max-width:520px){
    .password-delivery-actions,
    .password-delivery-actions form,
    .password-delivery-actions .button{
        width:100%;
    }
}


/* v0.9.13a – docentcontact afgerond */
.teacher-contact-card-main{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:14px;
}

.teacher-contact-title-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
    margin-bottom:4px;
}

.teacher-contact-title-row h3{
    margin:0;
}

.teacher-contact-roles{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.teacher-contact-role{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:3px 8px;
    border-radius:999px;
    background:var(--lichtoranje);
    color:var(--zwart);
    font-size:.75rem;
    font-weight:700;
}

.teacher-contact-email{
    width:max-content;
    max-width:100%;
    color:var(--blauw);
    text-decoration:underline;
    text-underline-offset:2px;
}

.teacher-contact-open-agenda{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:10px;
    background:var(--lichtblauw);
    color:var(--blauw);
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

.teacher-contact-open-agenda:hover{
    background:var(--blauw);
    color:var(--wit);
}

.teacher-contact-agenda-text{
    display:inline;
}

@media(max-width:760px){
    .teacher-contact-card-main{
        grid-template-columns:minmax(0,1fr) auto;
        padding:11px;
    }

    .teacher-contact-agenda-text{
        display:none;
    }

    .teacher-contact-open-agenda{
        padding:8px 10px;
    }
}


/* v0.9.13b – docentcontact gegroepeerd per rol */
.teacher-contact-groups{
    display:grid;
    gap:24px;
    margin-top:20px;
}

.teacher-contact-group{
    display:grid;
    gap:10px;
}

.teacher-contact-group[hidden]{
    display:none!important;
}

.teacher-contact-group-title{
    margin:0;
    padding:0 2px 8px;
    border-bottom:2px solid var(--lichtblauw);
    color:var(--zwart);
}

.teacher-contact-group
.teacher-contact-list{
    display:grid;
    gap:10px;
}

.teacher-contact-card-main
.contact-person-main>h3{
    margin:0 0 4px;
}


/* v0.9.13c – contactlijsten invouwbaar */
.teacher-contact-group{
    display:block;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
}

.teacher-contact-group[hidden]{
    display:none!important;
}

.teacher-contact-group-summary{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 48px 14px 16px;
    cursor:pointer;
    list-style:none;
    background:var(--lichtblauw);
    user-select:none;
}

.teacher-contact-group-summary::-webkit-details-marker{
    display:none;
}

.teacher-contact-group-summary::after{
    content:'▾';
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.15rem;
    transition:transform .18s ease;
}

.teacher-contact-group[open]
.teacher-contact-group-summary::after{
    transform:translateY(-50%) rotate(180deg);
}

.teacher-contact-group-title{
    margin:0;
    padding:0;
    border:0;
    color:var(--zwart);
    font-weight:700;
    font-size:1.05rem;
}

.teacher-contact-group-count{
    display:grid;
    place-items:center;
    min-width:30px;
    height:30px;
    padding:0 9px;
    border-radius:999px;
    background:var(--wit);
    color:var(--blauw);
    font-weight:700;
}

.teacher-contact-group
.teacher-contact-list{
    display:grid;
    gap:10px;
    padding:12px;
}

@media(max-width:760px){
    .teacher-contact-group-summary{
        padding:12px 44px 12px 13px;
    }

    .teacher-contact-group
    .teacher-contact-list{
        padding:9px;
    }
}


/* v0.9.14b – schoolgegevens in App-instellingen */
.settings-school-card{
    margin-bottom:22px;
}

.settings-school-form{
    margin-top:20px;
}

.settings-school-form
.autosave-error-message{
    grid-column:1/-1;
}


/* v0.9.15a – functionele systeemcontrole */
.system-check-link-card{
    margin-bottom:22px;
}

.system-check-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.system-check-summary-item{
    display:grid;
    gap:2px;
    padding:18px;
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow);
}

.system-check-summary-item strong{
    font-size:1.8rem;
}

.system-check-summary-item.is-ok{
    border-left:6px solid var(--groen);
}

.system-check-summary-item.is-warning{
    border-left:6px solid var(--oranje);
}

.system-check-summary-item.is-error{
    border-left:6px solid var(--rood);
}

.system-check-card{
    margin-bottom:22px;
}

.system-check-list{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.system-check-row{
    display:grid;
    grid-template-columns:16px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:13px;
    border:1px solid rgba(10,10,10,.1);
    border-radius:11px;
    background:#fff;
}

.system-check-row h3{
    margin:0 0 3px;
    font-size:1rem;
}

.system-check-row p{
    margin:0;
    color:#555;
}

.system-check-indicator{
    width:13px;
    height:13px;
    margin-top:4px;
    border-radius:50%;
}

.system-check-row.is-ok
.system-check-indicator{
    background:var(--groen);
}

.system-check-row.is-warning
.system-check-indicator{
    background:var(--oranje);
}

.system-check-row.is-error
.system-check-indicator{
    background:var(--rood);
}

.manual-check-sections{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.manual-check-section{
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
}

.manual-check-section>summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    cursor:pointer;
    font-weight:700;
    list-style:none;
    background:var(--lichtblauw);
}

.manual-check-section>summary::-webkit-details-marker{
    display:none;
}

.manual-check-progress{
    display:grid;
    place-items:center;
    min-width:42px;
    height:28px;
    padding:0 9px;
    border-radius:999px;
    background:var(--wit);
    color:var(--blauw);
}

.manual-check-items{
    display:grid;
    gap:0;
    padding:8px 14px;
}

.manual-check-item{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:11px 2px;
    border-bottom:1px solid rgba(10,10,10,.08);
}

.manual-check-item:last-child{
    border-bottom:0;
}

.manual-check-item input{
    width:19px;
    height:19px;
    margin-top:2px;
}

.system-check-actions{
    display:flex;
    justify-content:flex-end;
}

@media(max-width:700px){
    .system-check-summary{
        grid-template-columns:1fr;
    }

    .system-check-card
    .card-heading{
        align-items:stretch;
    }

    .system-check-card
    .card-heading .button{
        width:100%;
    }
}


/* v0.9.16a – veilige studentenimportwizard */
.data-import-types{
    display:grid;
    gap:10px;
}

.data-import-type{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:11px;
    background:#fff;
}

.data-import-type h4{
    margin:0 0 4px;
}

.data-import-type p{
    margin:0;
    color:#555;
}

.data-import-type.is-pending{
    opacity:.65;
}

.import-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:22px;
}

.import-steps span{
    padding:10px 12px;
    border-radius:10px;
    background:#fff;
    border:1px solid rgba(10,10,10,.12);
    text-align:center;
    font-weight:700;
}

.import-steps span.active{
    background:var(--blauw);
    color:var(--wit);
    border-color:var(--blauw);
}

.import-wizard-card{
    max-width:1200px;
}

.import-rules{
    margin:20px 0;
    padding:16px;
    border-radius:12px;
    background:var(--lichtblauw);
}

.import-rules h3{
    margin:0 0 8px;
}

.import-rules p{
    margin:6px 0;
}

.import-upload-form{
    margin-top:20px;
}

.import-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:22px;
}

.import-summary-item{
    display:grid;
    gap:2px;
    padding:16px;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow);
}

.import-summary-item strong{
    font-size:1.75rem;
}

.import-summary-item.is-create{
    border-left:5px solid var(--groen);
}

.import-summary-item.is-update{
    border-left:5px solid var(--blauw);
}

.import-summary-item.is-unchanged{
    border-left:5px solid #777;
}

.import-summary-item.is-error{
    border-left:5px solid var(--rood);
}

.import-file-name{
    max-width:45%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:700;
}

.import-preview-wrap{
    margin-top:18px;
    overflow:auto;
}

.import-preview-table{
    width:100%;
    min-width:980px;
    border-collapse:collapse;
}

.import-preview-table th,
.import-preview-table td{
    padding:10px;
    border-bottom:1px solid rgba(10,10,10,.1);
    text-align:left;
    vertical-align:top;
}

.import-preview-table thead{
    background:var(--zwart);
    color:var(--wit);
}

.import-preview-table tr.is-error{
    background:var(--lichtrood);
}

.import-preview-table tr.is-create{
    background:var(--lichtgroen);
}

.import-preview-table tr.is-update{
    background:var(--lichtblauw);
}

.import-status{
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:#fff;
    font-weight:700;
    white-space:nowrap;
}

.import-message.error{
    color:var(--rood);
    font-weight:700;
}

.import-message.warning{
    color:#8a5500;
    font-weight:700;
}

.import-confirm-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.import-confirm-actions form{
    margin:0;
}

.import-confirm-actions button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.import-result-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:22px 0;
}

.import-result-list div{
    padding:14px;
    border-radius:11px;
    background:var(--lichtblauw);
}

.import-result-list dt{
    font-weight:700;
}

.import-result-list dd{
    margin:5px 0 0;
    font-size:1.5rem;
    font-weight:700;
}

@media(max-width:800px){
    .data-import-type{
        align-items:stretch;
        flex-direction:column;
    }

    .data-import-type .button{
        width:100%;
    }

    .import-summary-grid,
    .import-result-list{
        grid-template-columns:1fr 1fr;
    }

    .import-file-name{
        max-width:100%;
    }
}

@media(max-width:520px){
    .import-steps{
        grid-template-columns:1fr;
    }

    .import-summary-grid,
    .import-result-list{
        grid-template-columns:1fr;
    }

    .import-confirm-actions,
    .import-confirm-actions form,
    .import-confirm-actions .button{
        width:100%;
    }
}


/* v0.9.16b – uitgebreide studentenimport */
.import-preview-table{
    min-width:1320px;
}


/* v0.9.19 – docentenimport */
.teacher-import-table{
    min-width:1180px;
}


/* v0.9.20 – stagebedrijven en stagebieders */
.import-summary-item.is-unresolved{
    border-left:5px solid var(--oranje);
}

[data-provider-company-id][hidden]{
    display:none!important;
}


/* v0.9.20 – automatische adresaanvulling */
.address-lookup-status{
    padding:10px 12px;
    border-radius:10px;
    font-weight:700;
}

.address-lookup-status.is-success{
    background:var(--lichtgroen);
    color:#315d00;
}

.address-lookup-status.is-error{
    background:var(--lichtrood);
    color:var(--rood);
}


/* v0.9.22 – stagebieder als contactpersoon/account */
.account-state{
    display:flex;
    align-items:center;
    min-height:34px;
}

.provider-form small{
    display:block;
    margin-top:5px;
}


/* v0.9.24 – tabelarchief met bulkselectie */
.archive-table-wrap{
    margin-top:18px;
    overflow-x:auto;
    border:1px solid rgba(10,10,10,.12);
    border-radius:12px;
    background:#fff;
}

.archive-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.archive-table th,
.archive-table td{
    padding:12px 14px;
    border-bottom:1px solid rgba(10,10,10,.09);
    text-align:left;
    vertical-align:middle;
}

.archive-table thead th{
    background:var(--lichtblauw);
    font-size:.82rem;
    font-weight:700;
}

.archive-table tbody tr:last-child td{
    border-bottom:0;
}

.archive-table tbody tr:hover{
    background:rgba(32,113,182,.04);
}

.archive-select-cell{
    width:54px;
    text-align:center !important;
}

.archive-checkbox{
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    cursor:pointer;
}

.archive-checkbox input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.archive-checkbox span{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:2px solid var(--blauw);
    border-radius:5px;
    background:#fff;
}

.archive-checkbox input:checked + span{
    background:var(--blauw);
}

.archive-checkbox input:checked + span::after{
    content:"";
    width:8px;
    height:4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translateY(-1px) rotate(-45deg);
}

.archive-checkbox input:indeterminate + span{
    background:var(--blauw);
}

.archive-checkbox input:indeterminate + span::after{
    content:"";
    width:9px;
    height:2px;
    background:#fff;
    border-radius:2px;
}

.archive-checkbox input:focus-visible + span{
    outline:3px solid rgba(32,113,182,.28);
    outline-offset:2px;
}

.archive-bulk-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    min-height:42px;
    margin-top:14px;
}

.archive-bulk-actions[hidden]{
    display:none;
}

.archive-selected-count{
    margin-right:auto;
    color:#555;
    font-size:.9rem;
    font-weight:700;
}

.archive-icon-action{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:10px;
    background:var(--blauw);
    color:#fff;
    cursor:pointer;
}

.archive-icon-action:hover{
    filter:brightness(.93);
}

.archive-icon-action.danger{
    background:var(--rood);
}

.archive-icon-action svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.archive-icon-action:focus-visible{
    outline:3px solid rgba(32,113,182,.28);
    outline-offset:2px;
}

@media(max-width:700px){
    .archive-bulk-actions{
        justify-content:flex-start;
    }

    .archive-selected-count{
        margin-right:0;
    }
}


/* v0.9.25 – compacte verjaardagskaart */
.dashboard-birthday-today{
    grid-template-columns:auto minmax(0,1fr);
}

.dashboard-birthday-today-content{
    display:grid;
    gap:7px;
}

.dashboard-birthday-today-list{
    display:grid;
    gap:6px;
}

.dashboard-birthday-today-list a,
.dashboard-birthday-today-list span{
    color:var(--zwart);
    font-size:1.1rem;
    font-weight:700;
    text-decoration:none;
}

.dashboard-birthday-today-list a:hover{
    text-decoration:underline;
}


/* v0.9.26 – compacte dashboardregels, verjaardagen en wachtwoord-SVG */
.password-toggle[hidden]{display:none}
.password-toggle-svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-student-row{
    grid-template-columns:18px minmax(0,1fr) 18px;
    min-height:42px;
    padding:9px 12px;
}
.dashboard-status-text{display:none}
.dashboard-dot-placeholder{display:none}
.dashboard-student-row .dot-none{
    background:#ffffff;
    border:1px solid rgba(10,10,10,.28);
}

.dashboard-birthday-today{
    display:block;
}
.dashboard-birthday-today-content{
    display:grid;
    gap:8px;
}
.dashboard-birthday-today-list{
    display:grid;
    gap:4px;
}
.dashboard-birthday-today-person,
a.dashboard-birthday-today-person{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-height:34px;
    padding:3px 0;
    color:var(--zwart);
    text-decoration:none;
    font-weight:700;
}
a.dashboard-birthday-today-person:hover{
    color:var(--zwart);
    text-decoration:none;
}
.dashboard-birthday-today-person .stagenda-cake-icon{
    width:22px;
    height:22px;
}

.dashboard-birthday-list{
    gap:4px;
    padding-top:10px;
}
.dashboard-birthday-row{
    grid-template-columns:155px minmax(0,1fr) 18px;
    min-height:38px;
    padding:7px 10px;
    gap:10px;
}
.dashboard-birthday-row strong,
.dashboard-birthday-date{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.month-anchor-hidden{
    height:0;
    padding:0;
    margin:0;
    overflow:hidden;
    scroll-margin-top:180px;
}

@media(max-width:600px){
    .dashboard-student-row{
        grid-template-columns:16px minmax(0,1fr) 16px;
        min-height:38px;
        padding:7px 9px;
    }

    .dashboard-birthday-today-person,
    a.dashboard-birthday-today-person{
        grid-template-columns:22px minmax(0,1fr);
        min-height:32px;
        color:var(--zwart);
        font-weight:700;
        text-decoration:none;
    }

    .dashboard-birthday-row{
        grid-template-columns:minmax(112px,auto) minmax(0,1fr) 14px;
        min-height:36px;
        padding:6px 8px;
        gap:7px;
    }

    .dashboard-birthday-date{
        font-size:.78rem;
    }

    .dashboard-birthday-row strong{
        font-size:.88rem;
    }
}


/* v0.9.27 – importcontrole benut volledige paginabreedte */
.import-wizard-card{
    width:100%;
    max-width:none;
}

.import-preview-wrap{
    width:100%;
}

.import-preview-table th:last-child,
.import-preview-table td:last-child{
    min-width:360px;
}

.import-preview-table td:last-child{
    white-space:normal;
    overflow-wrap:anywhere;
}


/* v0.9.27 – dashboarduitlijning en verjaardagsdatum */
.dashboard-disclosure-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px 20px;
    align-items:center;
    gap:10px;
}

.dashboard-disclosure-summary::after{
    margin-left:0;
    justify-self:center;
}

.dashboard-count-badge{
    justify-self:center;
    min-width:34px;
    max-width:44px;
}

.dashboard-note-meta{
    font-style:italic;
}

.dashboard-birthday-date-short{
    display:none;
}

.dashboard-birthday-row{
    grid-template-columns:minmax(220px,auto) minmax(0,1fr) 18px;
}

@media(max-width:600px){
    .dashboard-birthday-date-full{
        display:none;
    }

    .dashboard-birthday-date-short{
        display:inline;
    }

    .dashboard-birthday-row{
        grid-template-columns:minmax(126px,auto) minmax(0,1fr) 14px;
    }
}


/* v0.9.27 – brede pagina's blijven bereikbaar op smartphone */
@media(max-width:1023px){
    .wide-only-link{
        opacity:1;
        text-decoration:none!important;
    }

    .laptop-mark{
        display:none!important;
    }
}

.dialog-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}


/* v0.9.27 – gesloten oog en ingelogd blijven */
.password-closed-eye-svg{
    stroke-width:1.9;
}

.remember-login-option{
    justify-self:start;
}


/* v0.9.28 – aanmelden en account */
.remember-login-option{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    margin-top:-4px;
    font-size:.9rem;
    cursor:pointer;
}

.custom-check-inline{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
}

.custom-check-inline input{
    position:absolute;
    opacity:0;
}

.custom-check-inline > span{
    width:18px;
    height:18px;
    border:2px solid var(--blauw);
    border-radius:5px;
    background:#fff;
}

.custom-check-inline input:checked + span{
    background:var(--blauw);
}

.custom-check-inline input:checked + span::after{
    content:"";
    display:block;
    width:7px;
    height:4px;
    margin:4px 0 0 4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
}

.password-eye-highlight{
    fill:currentColor;
    stroke:none;
}

.password-eye-off-svg .password-eye-slash{
    stroke-width:2.15;
}

.account-logout-button{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:10px;
    background:var(--rood);
    color:#fff;
}

.account-logout-button svg,
.account-edit-button svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.account-editable-value{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
}

.account-edit-button{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--blauw);
    cursor:pointer;
}

.account-edit-button:hover{
    background:var(--lichtblauw);
}

.account-inline-input{
    width:min(320px,100%);
    min-height:36px;
}

.account-birthday-settings{
    gap:10px;
}

.account-choice-card{
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:50px;
    padding:11px 14px;
    border:1px solid var(--rand);
    border-radius:12px;
    background:var(--wit);
    cursor:pointer;
    transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}

.account-choice-card:hover{
    border-color:var(--blauw);
}

.account-choice-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.account-choice-control{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:2px solid var(--blauw);
    border-radius:7px;
    background:#fff;
    color:#fff;
}

.account-choice-control svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0;
}

.account-choice-card input:checked + .account-choice-control{
    background:var(--blauw);
}

.account-choice-card input:checked + .account-choice-control svg{
    opacity:1;
}

.account-choice-card:has(input:checked){
    border-color:var(--blauw);
    background:var(--lichtblauw);
    box-shadow:0 0 0 1px rgba(32,113,182,.08);
}

.account-choice-card:has(input:focus-visible){
    outline:3px solid rgba(32,113,182,.22);
    outline-offset:2px;
}

.account-choice-text{
    font-weight:700;
    line-height:1.35;
}

@media(max-width:700px){
    .two-column{
        display:flex;
        flex-direction:column;
    }
    .account-info-card{order:1;}
    .account-password-card{order:2;}
    .account-birthday-card{order:3;}
}

/* v0.9.28a – grotere afmeldknop */
.account-logout-button{
    width:46px;
    height:46px;
}

.account-logout-button .account-logout-svg{
    width:27px;
    height:27px;
    stroke-width:2;
}


/* v1.0.0 – nieuwe header en vaste iconennavigatie */
body{
    padding-bottom:88px;
}

.app-header{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px clamp(16px,3vw,34px);
    background:var(--zwart);
    color:#fff;
    transition:background-color .2s ease;
}

.app-header.is-historical{
    background:var(--rood);
}

.app-header .brand{
    color:inherit;
}

.course-year-header{
    position:relative;
    margin-left:auto;
}

.course-year-text{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
}

.course-year-button{
    cursor:pointer;
}

.course-year-menu{
    position:absolute;
    z-index:1300;
    top:calc(100% + 8px);
    right:0;
    min-width:180px;
    padding:8px;
    border:1px solid var(--rand);
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.course-year-menu form{
    margin:0;
}

.course-year-menu button{
    width:100%;
    padding:10px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    text-align:left;
    font:inherit;
    cursor:pointer;
}

.course-year-menu button:hover,
.course-year-menu button.active{
    background:var(--lichtblauw);
}

.main-nav,
.menu-toggle,
.course-year-context,
.course-year-warning{
    display:none!important;
}

.bottom-nav{
    position:fixed;
    z-index:1200;
    left:50%;
    bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:space-around;
    width:min(520px,calc(100vw - 24px));
    height:64px;
    padding:8px 12px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:23px;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    backdrop-filter:blur(12px);
}

.bottom-nav-item{
    position:relative;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--zwart);
    text-decoration:none;
    cursor:pointer;
}

.bottom-nav-bubble{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;
}

.bottom-nav-bubble svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bottom-nav-item.active .bottom-nav-bubble{
    transform:translateY(-18px) scale(1.22);
    background:var(--blauw);
    color:#fff;
    box-shadow:0 8px 18px rgba(32,113,182,.3),0 0 0 7px #fff;
}

.management-popover{
    position:fixed;
    z-index:1190;
    left:50%;
    bottom:82px;
    transform:translateX(-50%);
    width:min(500px,calc(100vw - 34px));
}

.management-popover[hidden]{display:none;}

.management-popover-panel{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:12px;
    border:1px solid var(--rand);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.management-popover-panel a{
    padding:11px 12px;
    border-radius:10px;
    color:var(--zwart);
    text-decoration:none;
    font-weight:700;
}

.management-popover-panel a:hover{
    background:var(--lichtblauw);
}

.data-hub-table-wrap{overflow-x:auto;}
.data-hub-table{width:100%;border-collapse:collapse;}
.data-hub-table th,.data-hub-table td{padding:12px;border-bottom:1px solid var(--rand);text-align:left;}
.data-hub-table thead th{background:var(--lichtblauw);}

@media(max-width:600px){
    body{padding-bottom:84px;}
    .app-header{min-height:58px;padding:8px 14px;}
    .bottom-nav{width:calc(100vw - 16px);bottom:max(7px,env(safe-area-inset-bottom));height:60px;padding:6px 8px;}
    .bottom-nav-item{width:48px;height:48px;}
    .bottom-nav-bubble{width:42px;height:42px;}
    .bottom-nav-item.active .bottom-nav-bubble{transform:translateY(-16px) scale(1.18);}
    .management-popover{bottom:76px;width:calc(100vw - 24px);}
    .management-popover-panel{grid-template-columns:1fr;max-height:58vh;overflow:auto;}
}


/* v1.0.1 – Aanmelden */
.auth-shell:has(.login-auth-card){
    place-items:start center;
    padding-top:18px;
}
.login-auth-card{margin-top:0}
.remember-login-option{
    justify-content:flex-end;
    gap:8px;
}
.login-forgot-link{
    margin-bottom:0;
    text-align:right;
}

/* v1.0.1 – Agenda: compacte sticky studentregel */
.agenda-page-title{margin-bottom:6px}
.agenda-page-title .eyebrow{font-size:.86rem}
.agenda-student-sticky{
    position:sticky;
    top:var(--app-header-height);
    z-index:36;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:56px;
    margin:0 0 8px;
    padding:8px 2px;
    background:var(--wit);
    border-bottom:1px solid rgba(10,10,10,.12);
}
.agenda-student-current{
    position:relative;
    min-width:0;
    flex:1 1 auto;
}
.agenda-selected-student-name{
    display:block;
    overflow:hidden;
    font-size:1.35rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.agenda-student-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
}
.agenda-student-icon-button{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid rgba(10,10,10,.14);
    border-radius:10px;
    background:#fff;
    color:var(--blauw);
    cursor:pointer;
    text-decoration:none;
}
.agenda-student-icon-button:hover{background:var(--lichtblauw)}
.agenda-student-icon-button svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.agenda-student-search-panel{width:min(430px,100%)}
.agenda-student-search-panel .student-combobox{display:block;position:relative}
.agenda-student-search-panel input{
    width:100%;
    min-width:0;
    padding:9px 11px;
    border:2px solid #d4d4d4;
    border-radius:10px;
    background:#fff;
}
.agenda-student-search-panel .student-options{
    left:0;
    right:auto;
    width:100%;
}

/* v1.0.1 – compacte dagkaarten */
.day-summary{
    grid-template-columns:20px minmax(230px,auto) minmax(0,1fr) auto 22px;
    padding:10px 13px;
}
.day-date{display:block;white-space:nowrap}
.day-weekday{font-weight:700}
.day-lines{gap:2px;line-height:1.18}
.day-comment-preview{
    font-weight:700;
    text-transform:uppercase;
}
.stagenda-note-indicator{transform:translateX(-4px)}

@media(max-width:760px){
    .agenda-page-title{margin-bottom:2px}
    .agenda-student-sticky{
        top:var(--app-header-height);
        min-height:50px;
        padding:6px 1px;
    }
    .agenda-selected-student-name{font-size:1.15rem}
    .agenda-student-icon-button{width:36px;height:36px}
    .agenda-student-icon-button svg{width:21px;height:21px}

    .day-summary{
        grid-template-columns:16px minmax(0,1fr) 34px;
        gap:8px;
        padding:9px 10px;
        align-items:start;
    }
    .day-date{grid-column:2;grid-row:1}
    .day-lines{
        grid-column:2;
        grid-row:2;
        margin-top:1px;
    }
    .stagenda-note-indicator{
        grid-column:3;
        grid-row:1 / span 2;
        align-self:center;
        justify-self:center;
        margin:0;
        transform:none;
    }
    .day-chevron{display:none!important}
}


/* v1.0.2 – studentnaam is de studentwisselaar */
.agenda-student-switcher{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:auto;
    max-width:100%;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.agenda-student-switcher > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.agenda-student-switcher-chevron{
    width:17px;
    height:17px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.62;
}

.agenda-student-switcher:hover{
    color:var(--blauw);
}

.agenda-student-switcher:focus-visible{
    outline:2px solid var(--blauw);
    outline-offset:4px;
    border-radius:4px;
}

/*
 * Iedere gesloten dagkaart reserveert altijd ruimte voor precies één
 * regel daginformatie. Alleen daadwerkelijke extra inhoud (bijv.
 * daginformatie én dagopmerking) maakt de kaart hoger.
 */
.day-summary{
    min-height:48px;
}

.day-lines{
    min-height:1.2em;
    align-content:center;
}

.day-lines > b,
.day-lines > .day-comment-preview{
    line-height:1.2;
}

/* Op mobiel staan datum en de gereserveerde informatieregel onder elkaar. */
@media(max-width:760px){
    .day-summary{
        min-height:62px;
    }

    .day-lines{
        min-height:1.2em;
        align-content:center;
    }
}


/* v1.0.3 – aanmelden */
.login-auth-card .remember-login-option{
    justify-self:end;
    width:max-content;
    margin-left:auto;
    justify-content:flex-end;
}

.login-auth-card .login-forgot-link{
    text-align:right;
}

/* v1.0.3 – uniforme paginakoppen */
.page-heading h1{
    font-size:1.35rem;
    line-height:1.2;
}

/*
 * De gekozen student heeft voor iedere gebruiker exact dezelfde
 * lettergrootte. De chevron van de kiezer blijft klein.
 */
.agenda-selected-student-name,
.agenda-student-switcher{
    font-size:1.35rem;
    line-height:1.2;
}

/* Student beheren staat direct naast de naam in plaats van rechts. */
.agenda-student-sticky{
    justify-content:flex-start;
}

.agenda-student-current{
    flex:0 1 auto;
    max-width:min(620px,calc(100% - 52px));
}

.agenda-student-actions{
    margin-left:0;
    flex:0 0 auto;
}

/*
 * Filtering werkelijk toepassen. De bestaande regel
 * .student-options button { display:grid } overrulede anders het
 * HTML hidden-attribuut.
 */
.student-options button[hidden]{
    display:none!important;
}

@media(max-width:760px){
    .page-heading h1,
    .agenda-selected-student-name,
    .agenda-student-switcher{
        font-size:1.15rem;
    }

    .agenda-student-current{
        max-width:calc(100% - 44px);
    }
}


/* v1.0.4 – aanmelden: checkbox links, tekst rechts, samen rechts */
.login-auth-card .remember-login-option{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:right!important;
}

.login-auth-card .remember-login-option .archive-checkbox{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:24px!important;
    height:24px!important;
    margin:0!important;
}

.login-auth-card .remember-login-option > span:last-child{
    display:inline-block!important;
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
}

.login-auth-card .login-forgot-link{
    display:block!important;
    width:100%!important;
    text-align:right!important;
}

/* v1.0.4 – uniforme paginakop op Agenda */
.agenda-page-title{
    margin-bottom:12px!important;
}

.agenda-page-title .page-heading-main{
    width:100%;
}

.agenda-heading-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin-top:4px;
    min-width:0;
}

.agenda-heading-row .agenda-student-current{
    flex:0 1 auto;
    min-width:0;
    max-width:min(620px,calc(100% - 50px));
}

.agenda-heading-row .agenda-student-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    margin-left:0;
}

.agenda-heading-row .agenda-selected-student-name,
.agenda-heading-row .agenda-student-switcher{
    font-size:1.35rem!important;
    line-height:1.2!important;
    margin:0!important;
}

/* De naam/studentkiezer is niet meer sticky. */
.agenda-student-sticky{
    position:static!important;
    top:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

/* Veilige scrollruimte onder header + weekbalk. */
.agenda-day{
    scroll-margin-top:calc(var(--app-header-height) + 58px)!important;
}

@media(max-width:760px){
    .agenda-page-title{
        margin-bottom:12px!important;
    }

    .agenda-heading-row{
        margin-top:4px;
    }

    .agenda-heading-row .agenda-selected-student-name,
    .agenda-heading-row .agenda-student-switcher{
        font-size:1.15rem!important;
    }

    .agenda-heading-row .agenda-student-current{
        max-width:calc(100% - 44px);
    }

    .agenda-week{
        top:var(--app-header-height)!important;
    }

    .agenda-day{
        scroll-margin-top:calc(var(--app-header-height) + 54px)!important;
    }
}


/* ============================================================
   v1.0.5 – uniforme, altijd zichtbare paginakop
   ============================================================ */

:root{
    --page-heading-height:0px;
}

/*
 * Op iedere gewone applicatiepagina blijven eyebrow + paginanaam
 * samen bovenaan staan, direct onder de zwarte appheader.
 */
.page-shell > .page-heading,
.page-shell > form > .page-heading{
    position:sticky;
    top:var(--app-header-height);
    z-index:42;

    margin-top:0!important;
    margin-bottom:22px!important;
    padding:8px 0 10px;

    background:
        linear-gradient(
            135deg,
            var(--wit),
            var(--lichtgeel)
        );
}

/*
 * De geometrie van iedere paginakop is identiek.
 */
.page-heading{
    align-items:flex-end!important;
}

.page-heading .eyebrow{
    margin:0 0 5px!important;
    font-size:.78rem!important;
    line-height:1.2!important;
}

.page-heading h1{
    margin:.15em 0 0!important;
    font-size:1.35rem!important;
    line-height:1.2!important;
}

/*
 * Agenda: studentnaam vervangt functioneel de h1, maar krijgt
 * exact dezelfde typografie en afstand.
 */
.agenda-page-title{
    margin-bottom:22px!important;
}

.agenda-heading-row{
    margin-top:.15em!important;
    min-height:1.62rem;
}

.agenda-heading-row .agenda-selected-student-name,
.agenda-heading-row .agenda-student-switcher{
    margin:0!important;
    padding:0!important;
    font-size:1.35rem!important;
    line-height:1.2!important;
    font-weight:700!important;
}

/*
 * Weekkop op mobiel staat direct onder de vaste paginakop.
 * Desktop heeft een eigen scrollcontainer; daar blijft top:0.
 */
@media(max-width:760px){
    .page-shell > .page-heading,
    .page-shell > form > .page-heading{
        top:var(--app-header-height);
        padding:8px 0 10px;
        margin-bottom:18px!important;
    }

    .page-heading .eyebrow{
        font-size:.78rem!important;
    }

    .page-heading h1,
    .agenda-heading-row .agenda-selected-student-name,
    .agenda-heading-row .agenda-student-switcher{
        font-size:1.15rem!important;
        line-height:1.2!important;
    }

    .agenda-week{
        top:calc(
            var(--app-header-height)
            + var(--page-heading-height)
        )!important;
    }

    .agenda-day{
        scroll-margin-top:calc(
            var(--app-header-height)
            + var(--page-heading-height)
            + 54px
        )!important;
    }
}

@media(min-width:761px){
    .agenda-stream .agenda-week{
        top:0!important;
    }

    .agenda-stream .agenda-day{
        scroll-margin-top:48px!important;
    }
}


/* ============================================================
   v1.0.6 – sticky paginakop met vaste bovenruimte
   ============================================================ */

:root{
    --page-heading-top-space:14px;
}

/*
 * De paginakop bestaat voortaan expliciet uit:
 * 14px lege ruimte + eyebrow + paginanaam/studentnaam.
 * Die lege ruimte hoort dus bij het sticky blok en blijft zichtbaar.
 */
.page-shell > .page-heading,
.page-shell > form > .page-heading{
    top:var(--app-header-height)!important;
    padding:
        var(--page-heading-top-space)
        0
        10px!important;
    margin-top:0!important;
}

/*
 * Omdat de bovenruimte nu ín de sticky paginakop zit, mag de
 * page-shell zelf niet nóg eens 28px bovenruimte toevoegen.
 */
.page-shell{
    margin-top:0!important;
}

/* Exact dezelfde afstand eyebrow → titel/naam. */
.page-heading .eyebrow{
    margin:0 0 5px!important;
}

.page-heading h1,
.agenda-heading-row{
    margin-top:.15em!important;
}

.agenda-heading-row{
    align-items:center!important;
}

.agenda-heading-row .agenda-student-switcher,
.agenda-heading-row .agenda-selected-student-name{
    display:inline-flex!important;
    align-items:center!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    line-height:1.2!important;
    vertical-align:baseline!important;
}

.agenda-heading-row .agenda-student-switcher-chevron{
    margin-left:4px;
    align-self:center;
}

/*
 * Geen extra hoogte door de knop: de klikbare naam gedraagt zich
 * typografisch exact als een gewone h1.
 */
.agenda-heading-row .agenda-student-current{
    display:flex;
    align-items:center;
}

@media(max-width:760px){
    :root{
        --page-heading-top-space:14px;
    }

    .page-shell > .page-heading,
    .page-shell > form > .page-heading{
        padding:
            var(--page-heading-top-space)
            0
            10px!important;
    }
}


/* ============================================================
   v1.0.6 – navigatie komt uit de onderkant van het scherm
   ============================================================ */

.bottom-nav{
    bottom:-4px!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    padding-bottom:calc(
        10px + env(safe-area-inset-bottom, 0px)
    )!important;
}

/*
 * Onder de navigatie mag geen stukje pagina zichtbaar blijven.
 * De navigatie zelf valt een paar pixels buiten beeld.
 */
body{
    padding-bottom:0!important;
}

.page-shell{
    padding-bottom:
        calc(
            92px + env(safe-area-inset-bottom, 0px)
        )!important;
}

@media(max-width:760px){
    .bottom-nav{
        bottom:-4px!important;
        border-bottom-left-radius:0!important;
        border-bottom-right-radius:0!important;
    }
}


/* v1.0.6 – volledig zichtbaar blauw kader rond vandaag */
.agenda-day.is-today{
    outline:4px solid var(--blauw);
    outline-offset:1px;
    margin-top:10px;
}

@media(min-width:761px){
    .agenda-day.is-today{
        scroll-margin-top:56px!important;
    }
}


/* v1.0.7 – wide page headings */
.page-shell > .wide-page-guard > .page-heading,
.page-shell > .wide-page-guard > form > .page-heading,
.wide-page-guard > .page-heading{
    position:sticky;
    top:var(--app-header-height);
    z-index:42;
    margin-top:0!important;
    margin-bottom:22px!important;
    padding:var(--page-heading-top-space) 0 10px!important;
    background:linear-gradient(135deg,var(--wit),var(--lichtgeel));
}

/* Student beheren visueel naast naam, zonder titelhoogte te bepalen */
.agenda-heading-row{
    position:relative!important;
    display:inline-flex!important;
    width:max-content;
    max-width:calc(100% - 52px);
}
.agenda-heading-row .agenda-student-current{
    flex:0 1 auto!important;
    max-width:100%!important;
}
.agenda-heading-row .agenda-student-actions{
    position:absolute!important;
    left:calc(100% + 8px);
    top:50%;
    transform:translateY(-50%);
    margin:0!important;
}

/* Vandaagkader binnen de kaart */
.agenda-day.is-today{
    outline:none!important;
    outline-offset:0!important;
    box-shadow:inset 0 0 0 4px var(--blauw)!important;
    margin-top:6px!important;
}

/* Vaste hoogte gesloten dagkaarten */
.agenda-day:not(.is-open) .day-summary{
    height:58px;
    min-height:58px;
    max-height:58px;
    overflow:hidden;
}
.agenda-day:not(.is-open) .day-lines{
    min-height:1.2em;
    max-height:1.2em;
    overflow:hidden;
    white-space:nowrap;
}

/* Grote geopende dagkaart */
body.day-detail-open{overflow:hidden!important;}

.agenda-day.is-open{
    position:fixed!important;
    z-index:40!important;
    top:calc(var(--app-header-height) + var(--page-heading-height))!important;
    bottom:-4px!important;
    left:max(16px,calc((100vw - 1400px) / 2))!important;
    right:max(16px,calc((100vw - 1400px) / 2))!important;
    display:flex!important;
    flex-direction:column!important;
    margin:0!important;
    border:1px solid rgba(10,10,10,.15)!important;
    border-radius:14px!important;
    overflow:hidden!important;
    box-shadow:0 18px 44px rgba(0,0,0,.16)!important;
}

.agenda-day.is-open .day-summary{
    flex:0 0 auto;
    width:100%;
    min-height:72px;
    height:auto;
    padding:14px 56px 14px 16px;
    border-radius:0;
    cursor:default;
}

.agenda-day.is-open .day-chevron,
.agenda-day.is-open .stagenda-note-indicator{
    display:none!important;
}

.agenda-day.is-open .day-detail{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:22px 22px calc(110px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(10,10,10,.15);
    background:#fff!important;
    color:var(--zwart);
}

.day-open-close{display:none;}

.agenda-day.is-open .day-open-close{
    position:absolute;
    z-index:3;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:var(--zwart);
    font-size:1.7rem;
    line-height:1;
    cursor:pointer;
}

.agenda-day.is-open .birthday-system-comment{margin:0 0 18px;}

@media(max-width:760px){
    .page-shell > .wide-page-guard > .page-heading,
    .page-shell > .wide-page-guard > form > .page-heading,
    .wide-page-guard > .page-heading{
        margin-bottom:18px!important;
    }
    .agenda-day:not(.is-open) .day-summary{
        height:74px;
        min-height:74px;
        max-height:74px;
    }
    .agenda-day.is-open{
        left:16px!important;
        right:16px!important;
    }
    .agenda-day.is-open .day-summary{
        min-height:86px;
        padding:14px 52px 14px 14px;
    }
    .agenda-day.is-open .day-detail{
        padding:18px 18px calc(105px + env(safe-area-inset-bottom,0px));
    }
    .agenda-day.is-open .day-open-close{
        top:12px;
        right:12px;
        width:36px;
        height:36px;
    }
}


/* v1.0.8 – vaste achtergrond */
html{background:var(--wit);}
body{
    position:relative;
    background:transparent!important;
}
body::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    background:linear-gradient(135deg,var(--wit),var(--lichtgeel));
    pointer-events:none;
}

/* paginakop transparant */
.page-shell > .page-heading,
.page-shell > form > .page-heading,
.page-shell > .wide-page-guard > .page-heading,
.page-shell > .wide-page-guard > form > .page-heading,
.wide-page-guard > .page-heading{
    background:transparent!important;
}

/* smartphone navigatie 80% */
@media(max-width:600px){
    .bottom-nav{
        width:80vw!important;
        max-width:420px;
    }
}

/* mobiel aanwezigheidsbolletje verticaal centreren */
@media(max-width:760px){
    .agenda-day:not(.is-open)
    .day-summary > .attendance-dot{
        grid-row:1 / 3;
        align-self:center;
    }
}

/* stagebedrijf alleen op geopende kaart */
.day-stage-company{
    display:none;
    font-weight:700;
}
.agenda-day.is-open .day-stage-company{
    display:block;
}
.agenda-day.is-open .day-lines{
    max-height:none!important;
    min-height:0!important;
    white-space:normal!important;
}

/* exact agenda-kolombreed + onderruimte + animatie */
.agenda-day.is-open{
    left:var(--open-day-left,16px)!important;
    right:auto!important;
    width:var(
        --open-day-width,
        calc(100vw - 32px)
    )!important;
    bottom:8px!important;
    transition:
        opacity .18s ease,
        transform .18s ease;
}
.agenda-day.is-open.is-opening,
.agenda-day.is-open.is-closing{
    opacity:0;
    transform:translateY(14px) scale(.992);
}
@media(max-width:760px){
    .agenda-day.is-open{
        left:var(--open-day-left,10px)!important;
        right:auto!important;
        width:var(
            --open-day-width,
            calc(100vw - 20px)
        )!important;
        bottom:8px!important;
    }
}

/* aanwezigheid inline */
.attendance-editor-inline{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
}
.attendance-editor-inline > strong{
    flex:0 0 auto;
}
.attendance-editor-inline .attendance-choices{
    display:flex;
    align-items:center;
    gap:8px;
}
.attendance-editor-inline .attendance-choices button{
    padding:7px 11px;
}

/* notities */
.notes-section{padding-top:16px;}
.notes-list:empty{display:none;}
.note-card{
    position:relative;
    padding-right:96px;
}
.note-card footer{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    font-style:normal;
}
.note-icon-actions{
    position:absolute;
    top:10px;
    right:10px;
    display:flex;
    gap:6px;
}
.note-icon-actions button{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:9px;
    background:rgba(255,255,255,.72);
    color:var(--zwart);
    cursor:pointer;
}
.note-icon-actions button:hover{
    background:#fff;
}
.note-icon-actions button[data-delete-note]{
    color:var(--rood);
}
.note-icon-actions svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.notes-section textarea[data-new-note]{
    margin-top:8px;
}
@media(max-width:600px){
    .note-card{
        padding-right:82px;
    }
    .note-icon-actions button{
        width:31px;
        height:31px;
    }
    .attendance-editor-inline{
        gap:10px;
    }
}


/* ============================================================
   v1.0.9 – sticky paginakop krijgt achtergrond terug
   ============================================================ */

.page-shell > .page-heading,
.page-shell > form > .page-heading,
.page-shell > .wide-page-guard > .page-heading,
.page-shell > .wide-page-guard > form > .page-heading,
.wide-page-guard > .page-heading{
    background:
        linear-gradient(
            135deg,
            var(--wit),
            var(--lichtgeel)
        )!important;
}

/* ============================================================
   v1.0.9 – onderliggende agenda vervaagt volledig bij open dag
   ============================================================ */

body.day-detail-open .agenda-stream > .agenda-week,
body.day-detail-open .agenda-stream > .agenda-day:not(.is-open),
body.day-detail-open .agenda-stream > .month-anchor{
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .14s ease;
}

/*
 * De geopende kaart zelf blijft uiteraard volledig zichtbaar.
 */
body.day-detail-open .agenda-stream > .agenda-day.is-open{
    opacity:1!important;
}

/* ============================================================
   v1.0.9 – dunner blauw kader vandaag
   ============================================================ */

.agenda-day.is-today{
    box-shadow:
        inset 0 0 0 2px var(--blauw)!important;
}

/*
 * Ook op de geopende kaart blijft het blauwe kader zichtbaar.
 * Het kader wordt binnen de afgeronde kaart getekend.
 */
.agenda-day.is-open.is-today{
    box-shadow:
        inset 0 0 0 2px var(--blauw),
        0 18px 44px rgba(0,0,0,.16)!important;
}


/* ============================================================
   v1.1.0 – branding
   ============================================================ */

.brand-logo-link{
    display:flex;
    align-items:center;
    min-width:0;
}

.brand-logo{
    display:block;
    width:auto;
    max-width:190px;
    height:30px;
    object-fit:contain;
}

.login-logo-heading{
    margin:.15em 0!important;
    line-height:1;
}

.login-logo{
    display:block;
    width:min(430px,100%);
    height:auto;
    max-height:96px;
    object-fit:contain;
    object-position:left center;
}

@media(max-width:600px){
    .brand-logo{
        height:27px;
        max-width:165px;
    }

    .login-logo{
        width:100%;
        max-height:82px;
    }
}

/* ============================================================
   v1.1.0 – configureerbare centrale kleuren
   ============================================================ */

.agenda-week{
    background:var(--theme-week-bg)!important;
    color:var(--theme-week-text)!important;
}

.day-stage_day{
    background:var(--theme-stage-bg)!important;
    color:var(--theme-stage-text)!important;
}

.day-school_day{
    background:var(--theme-nonstage-bg)!important;
    color:var(--theme-nonstage-text)!important;
}

.day-holiday,
.day-free_day{
    background:var(--theme-free-bg)!important;
    color:var(--theme-free-text)!important;
}

.day-weekend{
    background:var(--theme-weekend-bg)!important;
    color:var(--theme-weekend-text)!important;
}

.button:not(.danger),
.section-tabs a.active,
.bottom-nav-item.active .bottom-nav-bubble{
    background:var(--theme-action-bg)!important;
    color:var(--theme-action-text)!important;
}

/* ============================================================
   v1.1.0 – compactere gesloten dagkaarten
   ============================================================ */

.agenda-day:not(.is-open) .day-summary{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    padding:8px 12px!important;
}

.agenda-day:not(.is-open) .day-lines{
    gap:1px!important;
}

@media(max-width:760px){
    .agenda-day:not(.is-open) .day-summary{
        height:64px!important;
        min-height:64px!important;
        max-height:64px!important;
        padding:7px 10px!important;
        row-gap:1px!important;
    }

    .agenda-day:not(.is-open) .day-lines{
        margin-top:-2px;
    }
}

/* ============================================================
   v1.1.0 – Undo boven mobiele navigatie
   ============================================================ */

.undo-toast{
    z-index:1350!important;
}

@media(max-width:760px){
    .undo-toast{
        left:50%!important;
        right:auto!important;
        bottom:calc(
            72px
            + env(safe-area-inset-bottom,0px)
        )!important;
        transform:translateX(-50%);
        width:min(92vw,430px);
    }
}

/* ============================================================
   v1.1.0 – sluitknop open dag
   ============================================================ */

.agenda-day.is-open .day-open-close{
    border:1px solid rgba(10,10,10,.48)!important;
}

/* ============================================================
   v1.1.0 – navigatiebubbel krijgt doorlopende rand
   ============================================================ */

.bottom-nav-item.active .bottom-nav-bubble{
    border:1px solid rgba(10,10,10,.16);
    box-shadow:
        0 8px 18px rgba(10,10,10,.18),
        0 0 0 7px #fff,
        0 0 0 8px rgba(10,10,10,.12)!important;
}

/* Progressive enhancement: onderste navigatie blijft bij
   cross-document view transitions visueel staan. */






/* ============================================================
   v1.1.0 – vandaagkader
   ============================================================ */

.agenda-day.is-today:not(.is-open){
    box-shadow:
        inset 0 0 0 2px var(--blauw)!important;
}

.agenda-day.is-open.is-today{
    border:2px solid var(--blauw)!important;
    box-shadow:
        0 18px 44px rgba(0,0,0,.16)!important;
}

/* ============================================================
   v1.1.0 – App-instellingen kleurkeuze
   ============================================================ */

.theme-settings-form{
    display:grid;
    gap:18px;
    margin-top:20px;
}

.theme-setting-row{
    margin:0;
    padding:0 0 16px;
    border:0;
    border-bottom:1px solid rgba(10,10,10,.1);
}

.theme-setting-row legend{
    margin-bottom:9px;
    font-weight:700;
}

.theme-color-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.theme-color-choice{
    position:relative;
    cursor:pointer;
}

.theme-color-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.theme-color-choice > span[aria-hidden="true"]{
    display:block;
    width:34px;
    height:34px;
    border:1px solid rgba(10,10,10,.25);
    border-radius:7px;
    background:var(--choice-bg);
    color:var(--choice-text);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}

.theme-color-choice input:checked
+ span[aria-hidden="true"]{
    outline:3px solid var(--zwart);
    outline-offset:2px;
}

.theme-color-choice input:focus-visible
+ span[aria-hidden="true"]{
    outline:3px solid var(--blauw);
    outline-offset:2px;
}

.theme-reset-form{
    margin-top:20px;
}

/* Leerjaar in de studentkiezer compact en rustig. */
.student-options small{
    font-size:.82rem;
}


/* ============================================================
   v1.1.1 – compactere weeknummerbalk
   ============================================================ */

.agenda-week{
    padding:4px 10px!important;
    margin:5px 0 4px!important;
    border-radius:4px!important;
    line-height:1.15!important;
}

/* ============================================================
   v1.1.1 – groter headerlogo zonder hogere header
   ============================================================ */

.app-header{
    padding-top:6px!important;
    padding-bottom:6px!important;
}

.brand-logo{
    height:38px!important;
    max-width:235px!important;
}

@media(max-width:600px){
    .app-header{
        min-height:58px!important;
        padding-top:4px!important;
        padding-bottom:4px!important;
    }

    .brand-logo{
        height:36px!important;
        max-width:205px!important;
    }
}

/* ============================================================
   v1.1.1 – compacte stagebedrijven op Contact leerling
   ============================================================ */

.student-provider-groups{
    display:grid;
    gap:16px;
}

.student-provider-group{
    display:grid;
    gap:7px;
}

.student-provider-group
+ .student-provider-group{
    padding-top:14px;
    border-top:1px solid rgba(10,10,10,.1);
}

.student-provider-company{
    margin:0;
    font-size:1rem;
    line-height:1.25;
    font-weight:700;
}

.student-provider-group .contact-list{
    gap:6px;
}

.student-provider-group .contact-person{
    padding-top:8px;
    padding-bottom:8px;
}

.student-provider-group .contact-subtitle{
    margin:.1em 0 .25em;
    color:#666;
    font-size:.82rem;
    font-style:italic;
}


/* ============================================================
   v1.1.2 – weeknummerbalk vrijwel vlak
   ============================================================ */

.agenda-week{
    padding:2px 10px!important;
    margin:3px 0 3px!important;
    border-radius:1px!important;
    line-height:1.05!important;
}

/* ============================================================
   v1.1.2 – headerlogo aantoonbaar groter, header blijft 58px
   ============================================================ */

.app-header{
    height:58px!important;
    min-height:58px!important;
    padding:2px clamp(16px,4vw,52px)!important;
    overflow:visible;
}

.brand-logo-link{
    height:54px;
    display:flex;
    align-items:center;
}

.brand-logo{
    height:46px!important;
    max-height:46px!important;
    max-width:245px!important;
}

@media(max-width:600px){
    .app-header{
        height:58px!important;
        min-height:58px!important;
        padding:2px 14px!important;
    }

    .brand-logo-link{
        height:54px;
    }

    .brand-logo{
        height:46px!important;
        max-height:46px!important;
        max-width:228px!important;
    }
}

.student-provider-empty{
    margin:2px 0 0;
}


/* v1.1.3 – uitgebreidere Contactkaarten */
.teacher-contact-card-main,.teacher-contact-person{display:block!important;}
.teacher-stage-providers{display:grid;gap:2px;margin-top:4px;font-size:.9rem;}
.teacher-contact-bottom-actions{display:flex;align-items:center;gap:8px;margin-top:12px;}
.contact-mobile-only{display:none!important;}
@media(max-width:760px){.contact-mobile-only{display:grid!important;}}
.contact-provider-students .contact-person{display:flex;flex-direction:column;align-items:flex-start;}
.contact-provider-students .contact-person .contact-actions{align-self:flex-start;margin-top:9px;}
@media(min-width:761px){.contact-provider-students .contact-person .contact-actions{display:none!important;}}
.student-provider-empty{margin:.25rem 0 0;}


/* ============================================================
   v1.1.4 – docentkaart: acties vóór stage
   ============================================================ */

.teacher-contact-bottom-actions{
    margin-top:10px;
    margin-bottom:12px;
}

.teacher-contact-stage-block{
    display:grid;
    gap:3px;
    padding-top:10px;
    border-top:1px solid rgba(10,10,10,.1);
}

.teacher-contact-stage-block > strong{
    font-weight:700;
}

.teacher-contact-stage-block > span,
.teacher-stage-providers span{
    display:block;
}

.teacher-stage-providers{
    margin-top:0!important;
    gap:2px!important;
}


/* ============================================================
   v1.1.5 – actieve navigatie weer als echte bubbel uit de balk
   ============================================================ */

/*
 * De witte uitstulping is onderdeel van de navigatiebalk.
 * Er staat dus niet langer een losse witte cirkel achter het
 * actieve blauwe icoon.
 */
.bottom-nav{
    overflow:visible!important;
}

.bottom-nav-item{
    z-index:1;
}

.bottom-nav-item.active{
    z-index:3;
}

/* De 'schouder' van de bubbel die uit de balk omhoogkomt. */
.bottom-nav-item.active::before{
    content:"";
    position:absolute;
    z-index:-2;
    left:50%;
    top:-29px;
    width:78px;
    height:50px;
    transform:translateX(-50%);
    border:1px solid rgba(10,10,10,.12);
    border-bottom:0;
    border-radius:42px 42px 0 0;
    background:rgba(255,255,255,.98);
    box-shadow:0 -5px 12px rgba(0,0,0,.05);
}

/*
 * Deze strook verbindt de uitstulping optisch met de witte balk
 * en verbergt de horizontale bovenrand van de navigatie eronder.
 */
.bottom-nav-item.active::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    top:9px;
    width:76px;
    height:26px;
    transform:translateX(-50%);
    background:rgba(255,255,255,.98);
}

.bottom-nav-item.active .bottom-nav-bubble{
    transform:translateY(-19px) scale(1.16)!important;
    border:0!important;
    background:var(--theme-action-bg)!important;
    color:var(--theme-action-text)!important;
    box-shadow:
        0 7px 15px rgba(10,10,10,.18)!important;
}

/* Het actieve icoon blijft boven zijn witte uitstulping. */
.bottom-nav-item.active .bottom-nav-bubble{
    position:relative;
    z-index:2;
}

@media(max-width:600px){
    .bottom-nav-item.active::before{
        top:-27px;
        width:72px;
        height:47px;
        border-radius:39px 39px 0 0;
    }

    .bottom-nav-item.active::after{
        top:8px;
        width:70px;
        height:24px;
    }

    .bottom-nav-item.active .bottom-nav-bubble{
        transform:translateY(-17px) scale(1.14)!important;
    }
}

/* ============================================================
   v1.1.5 – rustiger Stage-blok op docentcontactkaart
   ============================================================ */

.teacher-contact-stage-block{
    gap:6px!important;
    margin-top:2px;
    padding:14px 0 12px!important;
}

.teacher-contact-stage-block > strong{
    margin-bottom:1px;
}

.teacher-contact-stage-block > span{
    font-weight:700;
}

.teacher-stage-providers{
    padding-left:12px;
    gap:3px!important;
}

.teacher-stage-providers span{
    position:relative;
    padding-left:13px;
}

.teacher-stage-providers span::before{
    content:"—";
    position:absolute;
    left:0;
    top:0;
}


.teacher-contact-bottom-actions,
.teacher-contact-stage-block{
  margin-left:14px;
  margin-right:14px;
}

.teacher-stage-heading{
  margin:0 0 8px 0;
  font-size:2rem;
  font-weight:700;
  line-height:1.1;
}

.teacher-contact-stage-block{
  gap:8px;
  padding-top:14px;
}

.teacher-stage-providers{
  padding-left:20px;
}

.teacher-stage-provider-item{
 display:list-item;
 list-style:disc;
}
.teacher-stage-provider-item::before{content:none!important;}


/* ============================================================
   v1.1.5b – Stage-kop gelijk aan leerlingnaam in contactkaart
   ============================================================ */

.teacher-contact-stage-title{
    display:block;
    margin:0!important;
    padding:0!important;
    font:inherit!important;
    font-size:1rem!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}

/*
 * De leerlingnaam in de docentcontactkaart gebruikt dezelfde
 * grootte. Zo zijn beide koppen visueel exact in balans.
 */
.teacher-contact-person .contact-person-main > h3,
.teacher-contact-stage-title{
    font-size:1rem!important;
    line-height:1.25!important;
    font-weight:700!important;
}


/* ============================================================
   v1.1.5d – Stage exact gelijk aan leerlingnaam
   ============================================================ */

/*
 * In docent-contactkaarten krijgen de naam van de leerling en de
 * kop 'Stage' exact dezelfde typografie.
 */
.teacher-contact-person .contact-person-main > strong,
.teacher-contact-stage-title{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-family:inherit!important;
    font-size:1.25rem!important;
    line-height:1.2!important;
    font-weight:700!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}

.teacher-contact-stage-title{
    margin-bottom:10px!important;
}


/* ============================================================
   v1.1.5e – definitieve correctie docentcontactkaart
   ============================================================ */

/*
 * Adem Akin en Stage zijn beide h3 binnen dezelfde kaart.
 * Deze regel geeft ze exact dezelfde typografie.
 */
.teacher-contact-card-main .contact-person-main > h3,
.teacher-contact-stage-block > .teacher-stage-heading{
    margin:0 0 4px!important;
    padding:0!important;
    font:inherit!important;
    font-size:1.17em!important;
    line-height:1.2!important;
    font-weight:700!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}

/*
 * De Stage-kop heeft alleen iets extra ruimte naar de inhoud eronder.
 */
.teacher-contact-stage-block > .teacher-stage-heading{
    margin-bottom:8px!important;
}

/*
 * Betrouwbare bullets: niet afhankelijk van list-item markers.
 */
.teacher-stage-providers{
    display:grid!important;
    gap:3px!important;
    padding-left:0!important;
    margin:0!important;
}

.teacher-stage-provider-item{
    display:grid!important;
    grid-template-columns:12px minmax(0,1fr);
    column-gap:4px;
    align-items:start;
    padding-left:0!important;
    margin:0!important;
    list-style:none!important;
}

.teacher-stage-provider-item::before{
    content:"•"!important;
    position:static!important;
    display:block!important;
    color:currentColor!important;
}


/* ============================================================
   v1.2.1 – Beheer als vaste tweekolomspagina
   ============================================================ */

.management-page-shell{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:24px;
    align-items:start;
    width:100%;
}

.management-page-workspace{
    min-width:0;
}

.management-sidebar{
    position:sticky;
    top:calc(var(--app-header-height) + 16px);
    z-index:38;
    align-self:start;
    max-height:calc(
        100vh
        - var(--app-header-height)
        - 112px
    );
    overflow:auto;
    padding:14px 10px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
}

.management-sidebar-title{
    padding:4px 10px 12px;
    font-size:1.15rem;
    font-weight:700;
}

.management-sidebar-nav{
    display:grid;
    gap:4px;
}

.management-sidebar-item{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    align-items:center;
    min-height:46px;
    padding:4px 8px;
    border-radius:12px;
    color:var(--zwart);
    text-decoration:none;
    font-weight:700;
}

.management-sidebar-item:hover{
    background:var(--lichtblauw);
}

.management-sidebar-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    color:var(--zwart);
    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.management-sidebar-icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.management-sidebar-item.active
.management-sidebar-icon{
    background:var(--theme-action-bg);
    color:var(--theme-action-text);
    transform:scale(1.06);
}

.management-sidebar-item.active{
    background:rgba(210,229,246,.42);
}

.management-page-workspace > .page-heading:first-child{
    margin-top:0!important;
}

/*
 * De oude uitklappende Beheer-popover bestaat in v1.2.1 niet meer.
 */
.management-popover{
    display:none!important;
}

@media(max-width:900px){
    .management-page-shell{
        grid-template-columns:68px minmax(0,1fr);
        gap:12px;
    }

    .management-sidebar{
        padding:10px 6px;
        border-radius:16px;
    }

    .management-sidebar-title,
    .management-sidebar-label{
        position:absolute!important;
        width:1px!important;
        height:1px!important;
        padding:0!important;
        margin:-1px!important;
        overflow:hidden!important;
        clip:rect(0,0,0,0)!important;
        white-space:nowrap!important;
        border:0!important;
    }

    .management-sidebar-item{
        grid-template-columns:1fr;
        justify-items:center;
        min-height:48px;
        padding:5px;
    }

    .management-sidebar-icon{
        width:40px;
        height:40px;
    }
}

/* ============================================================
   v1.2.1 – invouwbare onderdelen standaard dicht
   ============================================================ */

/*
 * De HTML bevat geen standaard-open attribuut meer voor de
 * docentcontactgroepen. Andere details-elementen waren al dicht.
 */

/* v1.2.2 – invouwbare studentcontactkaarten */
.teacher-contact-collapsible{overflow:hidden;padding:0!important;border:1px solid rgba(10,10,10,.14)!important;border-radius:16px;background:rgba(255,255,255,.94)}
.teacher-contact-collapsible[open]{border:2px solid rgba(10,10,10,.38)!important;box-shadow:0 8px 22px rgba(10,10,10,.08)}
.teacher-contact-summary{display:flex;align-items:center;min-height:58px;padding:10px 16px;cursor:pointer;list-style:none}
.teacher-contact-summary::-webkit-details-marker{display:none}
.teacher-contact-summary::marker{content:""}
.teacher-contact-summary-text{display:grid;gap:2px;min-width:0}
.teacher-contact-summary-text>strong{font-size:1.17em;line-height:1.2;font-weight:700}
.teacher-contact-summary-text>span,.teacher-contact-year{font-size:.92rem;line-height:1.25;color:var(--muted)}
.teacher-contact-expanded{padding:14px 16px 16px}
.teacher-contact-collapsible[open]>.teacher-contact-summary{display:none}
.teacher-contact-year{display:block;margin:-1px 0 7px}
@media(min-width:901px){
 .teacher-contact-expanded{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
 .teacher-contact-expanded>.teacher-contact-card-main,
 .teacher-contact-expanded>.teacher-contact-bottom-actions{grid-column:1}
 .teacher-contact-expanded>.teacher-contact-stage-block{grid-column:2;grid-row:1 / span 2;margin-top:0!important;padding-top:0!important;border-top:0!important}
}
@media(max-width:900px){.teacher-contact-expanded{display:block}}

/* ============================================================
   v1.2.3 – contact, beheer en mobiele beheerweergave
   ============================================================ */
.teacher-contact-expanded{position:relative}
.teacher-contact-close{
 position:absolute;top:8px;right:8px;z-index:3;
 display:grid;place-items:center;width:34px;height:34px;
 padding:0;border:1px solid rgba(10,10,10,.42);border-radius:50%;
 background:#fff;color:var(--zwart);font-size:1.55rem;line-height:1;
 cursor:pointer
}
.teacher-contact-close:hover{background:var(--lichtblauw)}

/* Beheerkoppen op dezelfde verticale positie als gewone paginakoppen. */
.management-page-workspace>.page-heading:first-child,
.management-page-workspace>.wide-page-guard>.page-heading:first-child,
.management-page-workspace>form>.page-heading:first-child{
 margin-top:0!important;
 padding-top:var(--page-heading-top-space)!important
}
.management-page-shell{
 padding-top:0!important
}
.management-sidebar{
 margin-top:var(--page-heading-top-space)
}

/* Op telefoon blijft Beheer bruikbaar; geen groter-scherm-blokkade. */
@media(max-width:760px){
 .management-page-shell{
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:8px!important
 }
 .management-sidebar{
  padding:7px 4px!important;
  border-radius:13px!important
 }
 .management-sidebar-item{
  min-height:44px!important;
  padding:3px!important
 }
 .management-sidebar-icon{
  width:36px!important;height:36px!important
 }
 .management-sidebar-icon svg{
  width:20px!important;height:20px!important
 }
 .management-page-workspace{min-width:0;overflow-x:auto}
 .teacher-contact-close{top:6px;right:6px}
}


/* ============================================================
   v1.2.4a – veilige uitlijning beheerheading
   ============================================================ */
.management-page-workspace > .page-heading:first-child,
.management-page-workspace > section:first-child > .page-heading:first-child,
.management-page-workspace > div:first-child > .page-heading:first-child,
.management-page-workspace > form:first-child > .page-heading:first-child{
    margin-top:0!important;
    padding-top:var(--page-heading-top-space)!important;
}

.management-page-workspace{
    padding-top:0!important;
}


/* ============================================================
   v1.2.5 – uniforme beheerlist, sticky kop en actietoolbar
   ============================================================ */
.management-page-workspace > .page-heading:first-child,
.management-page-workspace > section:first-child > .page-heading:first-child{
    position:sticky;
    top:var(--app-header-height);
    z-index:44;
    margin:0 0 18px!important;
    padding:var(--page-heading-top-space) 0 12px!important;
    background:linear-gradient(90deg,rgba(251,251,251,.97),rgba(253,244,194,.94));
    backdrop-filter:blur(8px);
}
.management-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.management-toolbar-button{
    display:grid;place-items:center;width:42px;height:42px;padding:0;
    border:1px solid rgba(10,10,10,.14);border-radius:50%;
    background:var(--theme-action-bg);color:var(--theme-action-text);
    text-decoration:none;cursor:pointer
}
.management-toolbar-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.management-toolbar-button.is-disabled{opacity:.28;filter:saturate(.25);cursor:default}
.management-search-wrap{margin:0 0 10px}
.management-search-input{width:100%;padding:10px 12px;border:2px solid #d4d4d4;border-radius:11px;background:#fff}
.management-search-input:focus{outline:3px solid var(--lichtblauw);border-color:var(--blauw)}
@media(min-width:1101px){
    .management-layout{grid-template-columns:minmax(250px,330px) minmax(0,1fr)}
}
@media(max-width:1100px){
    .management-page-workspace > .page-heading:first-child,
    .management-page-workspace > section:first-child > .page-heading:first-child{top:var(--app-header-height)}
    .management-list{order:1}
    .management-detail{order:2}
}
@media(max-width:700px){
    .management-page-workspace > .page-heading:first-child,
    .management-page-workspace > section:first-child > .page-heading:first-child{
        align-items:center!important;gap:8px;margin-bottom:10px!important;padding-bottom:9px!important
    }
    .management-page-workspace .page-heading-main{min-width:0;flex:1}
    .management-page-workspace .page-heading .eyebrow{font-size:.66rem}
    .management-page-workspace .page-heading h1{font-size:1.45rem}
    .management-page-workspace .page-heading-actions{gap:5px}
    .management-toolbar{gap:4px}
    .management-toolbar-button{width:34px;height:34px}
    .management-toolbar-button svg{width:18px;height:18px}
    .management-list{padding:12px!important}
    .management-list .list-heading{margin-bottom:7px}
    .management-list .list-heading h2{font-size:1.05rem}
    .scroll-list{gap:3px!important;max-height:none!important}
    .list-item{padding:8px 9px!important;gap:1px!important}
    .student-number-secondary,.teacher-role-secondary{display:none!important}
    .list-item span{font-size:.82rem}
}


/* v1.2.6a — verified management controls */
.management-toolbar-button--add{
  background:var(--groen)!important;
  color:var(--zwart)!important;
}
.management-toolbar-button--archive{
  background:var(--rood)!important;
  color:#fff!important;
}
.management-toolbar-button.is-disabled{
  opacity:.30!important;
  filter:saturate(.25)!important;
}

/* The actual management heading is a direct child of the workspace. */
.management-page-workspace > .page-heading{
  margin-top:0!important;
}

@media(max-width:700px){
  /* Match the vertical heading position used by the other pages. */
  .management-page-workspace > .page-heading{
    margin-top:0!important;
    padding-top:var(--page-heading-top-space)!important;
  }

  /* Actual list element: keep the card visible, scroll only its list. */
  .management-list{
    max-height:none!important;
    overflow:visible!important;
  }
  .management-list .scroll-list{
    max-height:min(34vh,300px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .student-number-secondary,
  .teacher-role-secondary{
    display:none!important;
  }
}


/* ============================================================
   v1.2.7a – verticale beheerbalk onder gezamenlijke paginakop
   ============================================================ */

/*
 * De gewone paginakop staat nu buiten de beheer-shell en vormt
 * daardoor exact hetzelfde bovenste blok als op niet-beheerpagina's.
 */
.page-shell > .page-heading{
    margin-top:0!important;
}

/*
 * De bestaande verticale beheeropbouw blijft behouden,
 * maar begint pas onder de paginakop.
 */
.management-page-shell{
    margin-top:0!important;
}

.management-sidebar{
    top:calc(
        var(--app-header-height)
        + 16px
    )!important;
}

/*
 * Oude beheer-specifieke heading-regels hebben geen invloed meer,
 * omdat de page-heading niet langer in management-page-workspace zit.
 */
.management-page-workspace > .page-heading,
.management-page-workspace > section > .page-heading,
.management-page-workspace > div > .page-heading{
    position:static!important;
    top:auto!important;
}

/*
 * Smartphone: dezelfde verticale positie van eyebrow + titel
 * als op alle overige pagina's.
 */
@media(max-width:760px){
    .page-shell > .page-heading{
        margin-top:0!important;
        padding-top:var(--page-heading-top-space)!important;
    }

    /*
     * De verticale beheerbalk blijft links staan en begint
     * pas onder het kopblok.
     */
    .management-page-shell{
        margin-top:0!important;
    }

    .management-sidebar{
        top:calc(
            var(--app-header-height)
            + 8px
        )!important;
    }
}


/* ============================================================
   v1.2.8 – uniforme beheerpositie, zoeken en mobiele scrolling
   ============================================================ */

/* De gedeelde kop van ELKE beheerpagina blijft bovenaan staan. */
.page-shell.is-management-page > .page-heading{
    position:sticky!important;
    top:var(--app-header-height)!important;
    z-index:46!important;
    margin:0 0 18px!important;
    padding:var(--page-heading-top-space) 0 12px!important;
    background:linear-gradient(
        90deg,
        rgba(251,251,251,.97),
        rgba(253,244,194,.94)
    )!important;
    backdrop-filter:blur(8px);
}

/* Eyebrow/titel en actietoetsen blijven samen in beeld. */
.page-shell.is-management-page > .page-heading .page-heading-actions{
    position:relative;
    z-index:2;
}

/*
 * De verticale beheerbalk begint exact op dezelfde horizontale lijn
 * als de eerste inhoudskaart/lijst en krijgt geen oude extra marge meer.
 */
.page-shell.is-management-page .management-sidebar{
    margin-top:0!important;
    align-self:start!important;
    position:sticky!important;
    top:calc(
        var(--app-header-height)
        + var(--page-heading-top-space)
        + 68px
    )!important;
}

/* Detailkop zichtbaar laten landen onder de vaste beheerheading. */
.page-shell.is-management-page .management-detail .card-heading,
.page-shell.is-management-page .management-detail > .card > .eyebrow{
    scroll-margin-top:calc(
        var(--app-header-height)
        + var(--page-heading-top-space)
        + 78px
    );
}

/* Hidden zoekresultaten moeten echt uit de lijst verdwijnen. */
.page-shell.is-management-page [data-management-list] .list-item[hidden]{
    display:none!important;
}

@media(max-width:700px){
    .page-shell.is-management-page > .page-heading{
        margin-top:0!important;
        padding-top:var(--page-heading-top-space)!important;
        padding-bottom:9px!important;
        gap:8px!important;
        align-items:center!important;
    }

    .page-shell.is-management-page > .page-heading .page-heading-main{
        min-width:0;
        flex:1;
    }

    .page-shell.is-management-page > .page-heading .eyebrow{
        font-size:.66rem;
    }

    .page-shell.is-management-page > .page-heading h1{
        font-size:1.45rem;
    }

    .page-shell.is-management-page .management-sidebar{
        margin-top:0!important;
        top:calc(
            var(--app-header-height)
            + var(--page-heading-top-space)
            + 58px
        )!important;
    }

    .page-shell.is-management-page .management-detail .card-heading,
    .page-shell.is-management-page .management-detail > .card > .eyebrow{
        scroll-margin-top:calc(
            var(--app-header-height)
            + var(--page-heading-top-space)
            + 70px
        );
    }
}

/* v1.2.9 */
.app-header{background:var(--theme-header-bg)!important;color:var(--theme-header-text)!important}
.app-header .course-year-text,.app-header .course-year-button{color:var(--theme-header-text)!important}
.app-header.is-historical{background:var(--theme-historical-header-bg)!important;color:var(--theme-historical-header-text)!important}
.app-header.is-historical .course-year-text,.app-header.is-historical .course-year-button{color:var(--theme-historical-header-text)!important}
.page-shell.is-management-page [data-management-archive-form]{display:none!important}
.password-save-row{display:flex;align-items:stretch;gap:8px}
.password-save-row .password-wrap{flex:1 1 auto;min-width:0}
.password-save-button{display:grid;place-items:center;flex:0 0 46px;width:46px;min-height:46px;padding:0;border:0;border-radius:11px;background:var(--theme-action-bg);color:var(--theme-action-text);cursor:pointer}
.password-save-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.page-shell.is-management-page .management-sidebar{margin-top:0!important;position:sticky!important;align-self:start!important}
.terminology-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.terminology-actions form{margin:0}
@media(max-width:700px){
 .page-shell.is-management-page .management-detail label.mobile-placeholder-label{gap:0!important;font-size:0!important;line-height:0!important}
 .page-shell.is-management-page .management-detail label.mobile-placeholder-label>input,
 .page-shell.is-management-page .management-detail label.mobile-placeholder-label>textarea{min-height:38px!important;padding:7px 10px!important;font-size:.95rem!important;line-height:1.2!important}
 .page-shell.is-management-page .management-detail input,.page-shell.is-management-page .management-detail select,.page-shell.is-management-page .management-detail textarea{min-height:38px}
 .password-save-button{flex-basis:40px;width:40px;min-height:40px;border-radius:10px}
 .terminology-actions{display:grid;grid-template-columns:1fr}.terminology-actions .button{width:100%}
}

/* v1.3.0 student management finishing pass */
.management-toolbar-button--agenda{background:var(--oranje)!important;color:var(--zwart)!important}
.password-save-button{border-radius:50%!important}
.terminology-choice{display:inline-flex;align-items:center;gap:8px}.terminology-choice.is-selected{box-shadow:0 0 0 3px rgba(32,113,182,.2)}.terminology-check{font-size:1.15em;font-weight:800}
.roster-periods{margin-top:10px;padding-top:0;border-top:0}.new-schedule-period{margin-top:22px;padding-top:18px;border-top:1px solid rgba(10,10,10,.12)}
.stats-list{display:grid;gap:0;margin-top:18px;max-width:420px}.stats-list>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid rgba(10,10,10,.1)}.stats-list>div:last-child{border-bottom:0}.stats-list span{font-variant-numeric:tabular-nums}
@media(max-width:700px){.student-schedule-card{scroll-margin-top:var(--management-mobile-detail-offset,160px)}.password-save-button{border-radius:50%!important}}

/* v1.2.11 */
.terminology-choice.is-current{
  box-shadow:0 0 0 3px var(--lichtgroen);
  position:relative;
}
.terminology-choice.is-current::before{
  content:"✓";
  margin-right:7px;
  font-weight:900;
}
.attendance-range-form{
  display:grid;
  grid-template-columns:max-content minmax(145px,210px);
  gap:8px 14px;
  align-items:center;
  margin-top:14px;
}
.attendance-range-form label{display:contents}
.attendance-range-form label>span{font-weight:700}
.attendance-range-form input{width:100%}
.attendance-stats-list .attendance-stat-present{
  background:var(--lichtgroen);
  padding-left:10px;padding-right:10px;border-radius:8px;
}
.attendance-stats-list .attendance-stat-absent{
  background:var(--lichtrood);
  padding-left:10px;padding-right:10px;border-radius:8px;
}
.attendance-stats-list .attendance-stat-unfilled{
  background:var(--lichtoranje);
  padding-left:10px;padding-right:10px;border-radius:8px;
}
.teacher-linked-student-list{
  display:grid;gap:8px;margin:12px 0 14px;
}
.teacher-linked-student-list label{
  display:flex;align-items:center;gap:9px;
}
.teacher-add-student-form{
  display:flex;align-items:end;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(10,10,10,.12);
}
.teacher-add-student-form label{
  display:grid;gap:6px;min-width:min(100%,320px);font-weight:700;
}
.teacher-add-student-form select{width:100%}
.provider-company-picker{position:relative}
.provider-company-suggestion{
  margin-top:7px;padding-bottom:9px;border-bottom:1px solid rgba(10,10,10,.18);
}
.provider-company-suggestion button{
  border:0;background:var(--lichtblauw);padding:8px 10px;border-radius:8px;
  font-weight:700;cursor:pointer;text-align:left;
}
.provider-company-peers{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(10,10,10,.12);
}
.provider-company-peers h3{margin:0 0 10px}
.provider-company-peers ul,.simple-provider-list{
  margin:0 0 14px;padding-left:22px;
}
.provider-company-peers li,.simple-provider-list li{margin:5px 0}
.provider-company-peers a,.simple-provider-list a{color:inherit}
.company-linked-providers .button{margin-top:6px}
@media(max-width:700px){
  .attendance-range-form{
    grid-template-columns:max-content minmax(0,1fr);
    gap:8px 12px;
  }
  .teacher-add-student-form{display:grid}
}

/* v1.2.12 – beheerfinetuning */
#student-attendance{
  scroll-margin-top:calc(var(--app-header-height) + 105px);
}
.attendance-stat-table{
  border-collapse:separate;
  border-spacing:0 5px;
  width:min(100%,420px);
  margin-top:16px;
  font-variant-numeric:tabular-nums;
}
.attendance-stat-table th,
.attendance-stat-table td{
  padding:7px 10px;
  text-align:left;
}
.attendance-stat-table th{
  width:58%;
  font-weight:700;
}
.attendance-stat-table td:nth-child(2),
.attendance-stat-table td:nth-child(3){
  width:21%;
  text-align:right;
}
.attendance-label-present{
  background:var(--groen);
  color:#0a0a0a;
  border-radius:8px;
}
.attendance-label-absent{
  background:var(--rood);
  color:#fff;
  border-radius:8px;
}
.attendance-label-unfilled{
  background:var(--oranje);
  color:#0a0a0a;
  border-radius:8px;
}

.round-action-button{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  padding:0;
  border:0;
  border-radius:50%;
  text-decoration:none;
  cursor:pointer;
}
.round-action-button svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.round-action-add{
  background:var(--groen);
  color:#0a0a0a;
}
.round-action-danger{
  background:var(--rood);
  color:#fff;
}
.teacher-add-student-form{
  grid-template-columns:minmax(0,1fr) auto;
}
.teacher-add-student-form label{
  min-width:0;
}
.teacher-add-student-form input[type="search"]{
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:2px solid #d4d4d4;
  border-radius:10px;
}
.teacher-linked-student-list + .round-action-button{
  margin-top:4px;
}

.provider-form.has-no-account [data-provider-email-field] input{
  border-color:var(--lichtrood)!important;
  box-shadow:0 0 0 2px rgba(249,200,203,.42);
}
.provider-form.has-no-account [data-provider-account-state]{
  margin-top:-4px;
}
.provider-form [data-provider-account-state]{
  transition:opacity .15s ease;
}
.company-linked-providers .round-action-button{
  margin-top:8px;
}

@media(max-width:700px){
  .attendance-stat-table{
    width:100%;
  }
  .teacher-add-student-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
  }
}

/* v1.2.13 */
.account-personal-settings-card .account-setting-group{padding-top:16px;margin-top:16px;border-top:1px solid rgba(10,10,10,.12)}
.account-personal-settings-card .account-setting-group:first-of-type{padding-top:8px;margin-top:8px;border-top:0}
.account-personal-settings-card .account-setting-group h3{margin:0 0 10px;font-size:1rem}
.management-toolbar-button--remove{background:var(--rood)!important;color:#fff!important}
.provider-company-search-wrap{display:flex;align-items:center;gap:6px}
.provider-company-search-wrap>input{flex:1 1 auto;min-width:0}
.provider-company-clear{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:#eee;color:var(--zwart);font-size:1.3rem;line-height:1;cursor:pointer}
.provider-company-clear[hidden]{display:none!important}
.roster-period-row{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
.roster-period-row form{margin:0;flex:0 0 auto}
.roster-period-delete{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(10,10,10,.25);border-radius:50%;background:#fff;color:var(--rood);font-size:1.2rem;line-height:1;cursor:pointer}
.placement-form [data-placement-date-field].has-placement-conflict input{border-color:var(--rood)!important;box-shadow:0 0 0 2px rgba(224,2,12,.16)!important}

/* v1.2.14 */
.placement-form .placement-company-field{
  grid-column:1 / -1;
}
.data-hub-groups{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.data-hub-group{
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(0,2.4fr);
  gap:16px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--rand);
}
.data-hub-group:first-child{
  border-top:0;
}
.data-hub-group h3{
  margin:0;
  font-size:1rem;
}
.data-hub-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.data-hub-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 11px;
  border:1px solid var(--rand);
  border-radius:10px;
  background:#fff;
  color:var(--zwart);
  font-weight:700;
  font-size:.86rem;
  text-decoration:none;
}
.data-hub-action:hover,
.data-hub-action:focus-visible{
  border-color:var(--theme-action-bg);
  outline:none;
}
.data-hub-action-primary{
  background:var(--theme-action-bg);
  color:var(--theme-action-text);
  border-color:var(--theme-action-bg);
}
.data-hub-action svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:700px){
  .data-hub-group{
    display:block;
    padding:14px 0;
  }
  .data-hub-group h3{
    margin:0 0 8px;
  }
  .data-hub-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .data-hub-action{
    width:100%;
    min-height:40px;
    justify-content:flex-start;
    padding:8px 10px;
  }
}

/* v1.2.14a – archief mobiel zonder horizontaal scrollen */
@media(max-width:700px){
  .archive-table-wrap{
    overflow:visible!important;
  }
  .archive-table{
    display:block;
    width:100%;
  }
  .archive-table thead{
    display:none;
  }
  .archive-table tbody{
    display:grid;
    gap:10px;
  }
  .archive-table tr{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:4px 10px;
    width:100%;
    padding:11px;
    border:1px solid var(--rand);
    border-radius:12px;
    background:#fff;
  }
  .archive-table td{
    display:block;
    min-width:0!important;
    width:auto!important;
    padding:2px 0!important;
    border:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .archive-table td.archive-select-cell{
    grid-column:1;
    grid-row:1 / span 8;
    align-self:start;
    padding-top:2px!important;
  }
  .archive-table td:not(.archive-select-cell){
    grid-column:2;
  }
  .archive-table td:not(.archive-select-cell)::before{
    display:block;
    margin-bottom:1px;
    font-size:.68rem;
    line-height:1.1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#666;
  }
  .archive-table-student td:nth-child(2)::before{content:"Naam"}
  .archive-table-student td:nth-child(3)::before{content:"Studentnummer"}
  .archive-table-student td:nth-child(4)::before{content:"E-mailadres"}
  .archive-table-student td:nth-child(5)::before{content:"Gearchiveerd"}

  .archive-table-docent td:nth-child(2)::before{content:"Naam"}
  .archive-table-docent td:nth-child(3)::before{content:"E-mailadres"}
  .archive-table-docent td:nth-child(4)::before{content:"Rollen"}
  .archive-table-docent td:nth-child(5)::before{content:"Gearchiveerd"}

  .archive-table-company td:nth-child(2)::before{content:"Stagebedrijf"}
  .archive-table-company td:nth-child(3)::before{content:"Plaats"}
  .archive-table-company td:nth-child(4)::before{content:"Gearchiveerd"}

  .archive-table-provider td:nth-child(2)::before{content:"Naam"}
  .archive-table-provider td:nth-child(3)::before{content:"Stagebedrijf"}
  .archive-table-provider td:nth-child(4)::before{content:"E-mailadres"}
  .archive-table-provider td:nth-child(5)::before{content:"Gearchiveerd"}
}

/* v1.2.15 */
.archive-section-title span{display:inline}
.archive-section-title span+span::before{content:" "}
@media(max-width:700px){
 .archive-section{padding:12px!important}
 .archive-section .card-heading{align-items:flex-start!important;margin-bottom:8px!important}
 .archive-section .eyebrow{margin-bottom:2px!important}
 .archive-section-title{font-size:1.08rem!important;line-height:1.05!important}
 .archive-section-title span{display:block}
 .archive-section-title span+span::before{content:none}
 .archive-table tbody{gap:7px!important}
 .archive-table tr{padding:9px!important;gap:2px 8px!important;border-radius:10px!important}
 .archive-table td:not(.archive-select-cell){padding:1px 0!important;line-height:1.22}
 .archive-table-student .archive-email{display:none!important}
 .archive-table-student .archive-name::before,
 .archive-table-student .archive-student-number::before{content:none!important;display:none!important}
 .archive-table-student .archive-date::before{content:"Gearchiveerd"!important}
 .archive-table-docent .archive-email{display:none!important}
 .archive-table-docent .archive-name::before,
 .archive-table-docent .archive-roles::before{content:none!important;display:none!important}
 .archive-table-docent .archive-date::before{content:"Gearchiveerd"!important}
 .archive-table-company .archive-company-code::before{content:"Bedrijfscode"!important}
 .archive-table-company .archive-company-name::before{content:"Stagebedrijf"!important}
 .archive-table-company .archive-city::before{content:"Plaats"!important}
 .archive-table-company .archive-date::before{content:"Gearchiveerd"!important}
 .archive-table-stagebieder .archive-email{display:none!important}
 .archive-table-stagebieder .archive-name::before{content:none!important;display:none!important}
 .archive-table-stagebieder .archive-provider-company::before{content:"Stagebedrijf"!important}
 .archive-table-stagebieder .archive-date::before{content:"Gearchiveerd"!important}
}
.school-calendar-phone-notice{display:none}
@media(max-width:700px){
 .school-calendar-phone-notice{display:block;padding:14px 4px 8px;font-weight:700;line-height:1.35}
 .school-calendar-layout{display:none!important}
}
@media(min-width:701px){
 .school-calendar-layout{
   display:grid!important;
   grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
   gap:18px;align-items:start;
 }
 .calendar-preview{
   position:sticky!important;
   top:calc(var(--app-header-height) + var(--page-heading-top-space) + 78px)!important;
   max-height:calc(100vh - var(--app-header-height) - var(--page-heading-top-space) - 92px);
   overflow:auto;
 }
 .stage-period-fields{
   display:grid!important;
   grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
   gap:10px 14px!important;
 }
 .stage-period-first{grid-column:1;grid-row:1}
 .stage-period-last{grid-column:2;grid-row:1}
 .stage-period-leaver{grid-column:2;grid-row:2}
 .calendar-row{
   display:grid!important;
   grid-template-columns:minmax(210px,1fr) minmax(155px,190px) 38px!important;
   gap:8px 12px!important;align-items:end!important;
 }
 .calendar-field-title{grid-column:1;grid-row:1}
 .calendar-field-start{grid-column:2;grid-row:1}
 .calendar-row>.row-remove{grid-column:3;grid-row:1;align-self:end}
 [data-calendar-section="holiday"] .calendar-field-end{grid-column:2;grid-row:2}
 [data-calendar-section="free_day"] .calendar-field-stage,
 [data-calendar-section="special"] .calendar-field-stage{grid-column:2;grid-row:2}
 [data-calendar-section="special"] .calendar-field-target{grid-column:2;grid-row:3}
 .calendar-row .row-errors{grid-column:1/-1}
}
.calendar-row .row-remove{
 width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
 border:0!important;border-radius:50%!important;background:var(--rood)!important;color:#fff!important;
 font-size:1.35rem!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer
}
.calendar-row .row-remove:disabled{opacity:.28!important;cursor:default!important}
.calendar-round-add{
 width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;margin-top:10px!important;
 border:0!important;border-radius:50%!important;background:var(--groen)!important;color:var(--zwart)!important;
 font-size:1.45rem!important;font-weight:800!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer
}

/* v1.2.15a */
@media(max-width:700px){
  /* Archief moet binnen de viewport blijven en nooit horizontaal uitlopen. */
  body:has(.archive-sections),
  body:has(.archive-sections) .page-shell,
  body:has(.archive-sections) .page-content,
  body:has(.archive-sections) main,
  .archive-sections,
  .archive-section,
  .archive-bulk-form,
  .archive-table-wrap,
  .archive-table,
  .archive-table tbody,
  .archive-table tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  body:has(.archive-sections),
  body:has(.archive-sections) .page-content,
  .archive-sections,
  .archive-section,
  .archive-table-wrap{
    overflow-x:hidden!important;
  }
  .archive-section{
    padding:10px!important;
  }
  .archive-table tr{
    grid-template-columns:28px minmax(0,1fr)!important;
  }
  .archive-table td{
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }

  .school-calendar-phone-notice{
    font-weight:400;
  }
  .school-calendar-phone-notice strong{
    font-weight:800;
  }
}

/* Witte secundaire gegevensknoppen duidelijk als knop herkenbaar. */
.data-hub-action:not(.data-hub-action-primary){
  border-color:#4f4f4f!important;
  border-width:1.5px!important;
}

/* Schoolkalenderblokken duidelijker afbakenen. */
.calendar-block{
  border-color:#a9a9a9!important;
  border-width:1.5px!important;
}

/* Plus rechts uitlijnen met de minknoppen. */
.calendar-round-add{
  margin-left:auto!important;
}

/* v1.2.15b – Gegevens: secundaire knoppen duidelijk zichtbaar */
.data-hub-card a.data-hub-action:not(.data-hub-action-primary){
    background:#fff!important;
    color:#0a0a0a!important;
    border:2px solid #353535!important;
    box-shadow:0 1px 0 rgba(10,10,10,.08)!important;
}
.data-hub-card a.data-hub-action:not(.data-hub-action-primary):hover,
.data-hub-card a.data-hub-action:not(.data-hub-action-primary):focus-visible{
    border-color:#0a0a0a!important;
    box-shadow:0 0 0 2px rgba(10,10,10,.10)!important;
}


/* ============================================================
   Stagenda v1.0 RC1
   Consistency-check op basis van de mobiele screenshotronde.
   Geen functionele wijzigingen; alleen gerichte UI-polish.
   ============================================================ */

/* Algemene ritmiek */
.card{border-radius:18px}
.card-heading{gap:12px}
.page-heading h1{line-height:1.08}
.eyebrow{line-height:1.1;letter-spacing:.13em}

/* Beheerbalk: exact ca. 8px meer lucht op telefoon/tablet */
@media(max-width:900px){
  .management-page-shell{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .management-sidebar{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .management-sidebar-item{
    min-height:50px!important;
  }
  .management-sidebar-icon{
    width:42px!important;
    height:42px!important;
  }
}

/* Beheerpagina's: lijst op telefoon bewust compact houden zodat gegevens zichtbaar blijven */
@media(max-width:700px){
  .management-list .scroll-list{
    max-height:278px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .management-list .list-item{
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  .management-toolbar{
    gap:7px!important;
  }
}

/* Dashboard: verjaardag iets nadrukkelijker, zonder extra navigatieknop */
.dashboard-birthday-today-person .stagenda-cake-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
.dashboard-birthday-today-person strong{
  line-height:1.3;
}
.dashboard-count-badge{
  min-width:34px!important;
  height:34px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
}

/* Agenda: minder harde selectie van vandaag. De weekkleur blijft configureerbaar. */
.agenda-day.is-today{
  outline-width:2px!important;
  outline-offset:1px!important;
}
.agenda-week{
  box-shadow:0 2px 7px rgba(10,10,10,.10);
}

/* Contact: teller visueel gelijk aan dashboardteller */
.contact-count,
.contact-count-badge,
.contact-accordion-count{
  min-width:34px!important;
  height:34px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
}

/* Account: identiteit vóór de gegevens */
.account-profile-intro{
  margin:2px 0 12px;
  padding:0 2px;
}
.account-profile-intro h2{
  margin:0;
  font-size:1.5rem;
  line-height:1.08;
}
.account-profile-intro p{
  margin:5px 0 0;
  color:#666;
  font-weight:700;
}

/* Docentgegevens: eyebrow blijft secundair aan de naam */
.management-detail .eyebrow,
.management-page-workspace .card .eyebrow{
  font-size:.72rem;
}

/* Stagebieder: wis-knop echt IN het stagebedrijfzoekveld */
.provider-company-search-wrap{
  position:relative!important;
  display:block!important;
}
.provider-company-search-wrap>input{
  width:100%!important;
  padding-right:48px!important;
}
.provider-company-clear{
  position:absolute!important;
  right:7px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  background:transparent!important;
}
.provider-company-clear:hover{
  background:#ededed!important;
}

/* Stages: plaatsingsregels compacter */
.placement-list .list-item,
.placement-list-item{
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.management-toolbar-button--remove:not(:disabled),
[data-management-action="remove"]:not(:disabled){
  background:var(--rood)!important;
  color:#fff!important;
}

/* Gegevens: secundaire witte acties herkenbaar, maar minder zwaar */
.data-hub-action:not(.data-hub-action-primary){
  border:1.25px solid #666!important;
  box-shadow:0 1px 2px rgba(10,10,10,.035)!important;
}
@media(max-width:700px){
  .data-hub-group{padding:11px 0!important}
  .data-hub-group h3{margin-bottom:6px!important}
  .data-hub-action{
    min-height:38px!important;
    padding:7px 10px!important;
  }
}

/* Archief: tellers en kaarten op telefoon compacter en rustiger */
.archive-count{
  min-width:28px!important;
  height:28px!important;
  padding:0 8px!important;
  font-size:.82rem!important;
}
@media(max-width:700px){
  .archive-section{padding:9px!important}
  .archive-table tbody{gap:6px!important}
  .archive-table tr{
    padding:8px!important;
    border-radius:10px!important;
  }
  .archive-table td:not(.archive-select-cell){
    line-height:1.18!important;
  }
}

/* Instellingen: schakelaars exact op dezelfde rechterlijn */
.settings-row,
.setting-row,
.contact-setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px;
  align-items:start;
}
.settings-row .switch,
.setting-row .switch,
.contact-setting-row .switch{
  justify-self:end;
}

/* App-instellingen: taalkeuze als compacte segmentkeuze i.p.v. twee zware blauwe knoppen */
.terminology-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  max-width:620px;
}
.terminology-actions form{min-width:0}
.terminology-choice{
  width:100%!important;
  min-height:44px!important;
  justify-content:flex-start!important;
  padding:8px 11px!important;
  border:1.5px solid #b8b8b8!important;
  background:#fff!important;
  color:var(--zwart)!important;
  box-shadow:none!important;
}
.terminology-choice.is-selected{
  border-color:var(--theme-action-bg)!important;
  box-shadow:inset 0 0 0 1px var(--theme-action-bg)!important;
  background:var(--lichtblauw)!important;
}
.terminology-check{
  color:var(--theme-action-bg);
}
@media(max-width:700px){
  .terminology-actions{
    grid-template-columns:1fr!important;
  }
}

/* App-instellingen: kleurregels beter van elkaar scheiden */
.theme-color-setting,
.color-setting-row{
  padding-block:13px!important;
}
.theme-color-setting + .theme-color-setting,
.color-setting-row + .color-setting-row{
  border-top:1px solid rgba(10,10,10,.09);
}

/* Schoolgegevens compacter */
.school-settings-form .form-grid,
.school-data-form .form-grid{
  gap:10px 12px!important;
}

/* Activiteitenlogboek: telefoon krijgt echte kaarten, geen gepropte tabel */
@media(max-width:700px){
  .activity-table-wrap{
    overflow:visible!important;
  }
  .activity-table,
  .activity-table tbody,
  .activity-table tr,
  .activity-table td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .activity-table thead{
    display:none!important;
  }
  .activity-table tbody{
    display:grid!important;
    gap:9px!important;
  }
  .activity-table tr{
    padding:11px 12px!important;
    border:1px solid #d8d8d8!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(10,10,10,.035);
  }
  .activity-table td{
    border:0!important;
    padding:2px 0!important;
    overflow-wrap:anywhere;
  }
  .activity-table td:nth-child(1){
    font-weight:800;
    margin-bottom:2px;
  }
  .activity-table td:nth-child(2){
    font-weight:700;
  }
  .activity-table td:nth-child(3) code{
    font-size:.82rem;
  }
  .activity-table td:nth-child(4),
  .activity-table td:nth-child(5){
    color:#555;
    font-size:.9rem;
  }
  .activity-table td:nth-child(6){
    margin-top:5px;
  }
}

/* Schoolkalendermelding mobiel compact */
@media(max-width:700px){
  .school-calendar-phone-notice{
    max-width:430px;
    padding-top:12px!important;
    line-height:1.4!important;
  }
}

/* Voldoende onderruimte boven de vaste mobiele navigatie */
@media(max-width:700px){
  main,.page-content{
    padding-bottom:max(92px,env(safe-area-inset-bottom))!important;
  }
}


/* ============================================================
   Stagenda v1.0 RC2 – mobiele correctieronde
   ============================================================ */

@media(max-width:900px){
  /* RC1 verbreding teruggedraaid: oorspronkelijke beheerbalk. */
  .management-page-shell{
    grid-template-columns:68px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .management-sidebar{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .management-sidebar-icon{
    width:40px!important;
    height:40px!important;
  }
}

/* Gegevens: alleen een subtiele aanwijzing dat wit ook een knop is. */
.data-hub-card .data-hub-action:not(.data-hub-action-primary){
  border:1px solid #b7b7b7!important;
  box-shadow:none!important;
}

/* Stagebedrijfzoeker: eigen verticale zoekresultaten i.p.v. browser-datalist. */
.provider-company-picker{
  position:relative;
}
.provider-company-results{
  display:grid;
  gap:2px;
  margin-top:5px;
  max-height:240px;
  overflow-y:auto;
  border:1px solid #cfcfcf;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(10,10,10,.10);
  padding:5px;
}
.provider-company-results[hidden]{display:none!important}
.provider-company-result{
  width:100%;
  border:0;
  background:#fff;
  color:#0a0a0a;
  padding:9px 10px;
  border-radius:8px;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.provider-company-result:hover,
.provider-company-result:focus-visible{
  background:var(--lichtblauw);
  outline:none;
}

/* Archief mobiel: de volledige rechterkolom blijft binnen de viewport. */
@media(max-width:700px){
  body:has(.archive-sections) .management-page-workspace,
  body:has(.archive-sections) .archive-sections,
  body:has(.archive-sections) .archive-section,
  body:has(.archive-sections) .archive-bulk-form,
  body:has(.archive-sections) .archive-table-wrap,
  body:has(.archive-sections) .archive-table,
  body:has(.archive-sections) .archive-table tbody,
  body:has(.archive-sections) .archive-table tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .archive-sections{
    overflow:hidden!important;
  }
  .archive-section{
    padding:10px!important;
    overflow:hidden!important;
  }
  .archive-table-wrap{
    overflow:hidden!important;
    border:0!important;
    background:transparent!important;
  }
  .archive-table,
  .archive-table tbody{
    display:block!important;
  }
  .archive-table thead{
    display:none!important;
  }
  .archive-table tbody{
    display:grid!important;
    gap:7px!important;
  }
  .archive-table tr{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:2px 8px!important;
    padding:9px!important;
    border:1px solid #d8d8d8!important;
    border-radius:10px!important;
    background:#fff!important;
  }
  .archive-table td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    padding:1px 0!important;
    border:0!important;
    grid-column:2!important;
    overflow-wrap:anywhere!important;
  }
  .archive-table .archive-select-cell{
    grid-column:1!important;
    grid-row:1 / span 5!important;
    align-self:start!important;
  }
  .archive-company-name{order:1}
  .archive-company-code{order:2}
  .archive-city{order:3}
  .archive-date{order:4}
  .archive-company-code::before,
  .archive-city::before{
    content:none!important;
  }
  .archive-date::before{
    content:"Gearchiveerd"!important;
    display:block!important;
    margin-top:4px;
    font-size:.72rem;
    font-weight:700;
    color:#666;
  }
}


/* ============================================================
   Stagenda v1.0 RC3
   ============================================================ */

/* Stageplaatsingen */
.placement-card.active{
  border-color:var(--blauw)!important;
  background:var(--lichtblauw)!important;
  box-shadow:0 0 0 2px rgba(32,113,182,.12);
}
.placement-card-providers{
  color:#333!important;
  font-weight:700;
}
.placement-card-provider-warning{
  color:var(--rood)!important;
  font-weight:700;
}
.placement-card-period{
  color:#555!important;
}

/*
 * Gegevens:
 * RC2 werd overschreven door een oudere, specifiekere selector
 * met een zwarte 2px-rand. Daarom nu bewust exact dezelfde
 * specificiteit en een werkelijk subtiele rand.
 */
.data-hub-card a.data-hub-action:not(.data-hub-action-primary){
  border:1px solid #d1d1d1!important;
  box-shadow:none!important;
}
.data-hub-card a.data-hub-action:not(.data-hub-action-primary):hover,
.data-hub-card a.data-hub-action:not(.data-hub-action-primary):focus-visible{
  border-color:#a8a8a8!important;
  box-shadow:none!important;
}

/*
 * Archief op telefoon:
 * de buitenste kaarten nemen niet langer opnieuw ruimte in binnen
 * de smalle rechterkolom. De eigenlijke archiefregel is de kaart.
 */
@media(max-width:700px){
  .archive-sections{
    display:grid!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .archive-section.card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .archive-section > .card-heading{
    width:100%!important;
    min-width:0!important;
    padding:0 0 8px!important;
    margin:0!important;
  }

  .archive-bulk-form,
  .archive-table-wrap,
  .archive-table,
  .archive-table tbody{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .archive-table tbody{
    display:grid!important;
    gap:7px!important;
  }

  .archive-table tr{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    padding:10px!important;
  }

  /*
   * Stagebedrijven: géén veldkopjes bij naam, code en plaats.
   * Alleen 'Gearchiveerd' blijft zichtbaar.
   */
  .archive-table-company .archive-company-name::before,
  .archive-table-company .archive-company-code::before,
  .archive-table-company .archive-city::before{
    content:none!important;
    display:none!important;
  }

  .archive-table-company .archive-date::before{
    content:"Gearchiveerd"!important;
    display:block!important;
  }
}


/* ============================================================
   Stagenda v1.0 RC4 – Archief mobiel
   ============================================================ */

@media(max-width:700px){

  /*
   * Een oude Archief-regel zette .page-shell expliciet op 100%.
   * Daardoor verdwenen de normale 10px marges links en rechts.
   * Herstel hier de standaard mobiele paginabreedte.
   */
  body:has(.archive-sections) .page-shell{
    width:min(calc(100% - 20px),1400px)!important;
    max-width:calc(100% - 20px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /*
   * De beheerindeling zelf moet binnen die paginabreedte blijven.
   */
  body:has(.archive-sections) .management-page-shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body:has(.archive-sections) .management-page-workspace{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  body:has(.archive-sections) .archive-sections{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /*
   * Buitenste witte kaarten terugplaatsen.
   */
  body:has(.archive-sections) .archive-section.card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:12px!important;
    border:1px solid rgba(10,10,10,.10)!important;
    border-radius:18px!important;
    background:rgba(251,251,251,.96)!important;
    box-shadow:var(--shadow)!important;
    overflow:hidden!important;
  }

  body:has(.archive-sections) .archive-section > .card-heading{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:0!important;
    margin:0 0 10px!important;
  }

  /*
   * De tabel en elke individuele archiefkaart mogen nooit breder
   * worden dan hun buitenste kaart.
   */
  body:has(.archive-sections) .archive-bulk-form,
  body:has(.archive-sections) .archive-table-wrap,
  body:has(.archive-sections) .archive-table,
  body:has(.archive-sections) .archive-table tbody{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0!important;
  }

  body:has(.archive-sections) .archive-table-wrap{
    overflow:hidden!important;
  }

  body:has(.archive-sections) .archive-table tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    padding:10px!important;
  }

  body:has(.archive-sections) .archive-table td{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}


/* ============================================================
   Stagenda v1.0 RC5
   ============================================================ */

.placement-card-provider-warning{
  color:var(--oranje)!important;
}

.student-provider-company-details{
  display:grid;
  gap:2px;
  margin:-2px 0 12px;
  color:#555;
  line-height:1.35;
}

/* Op telefoon blijven de actieknoppen rechtsboven; lange contactgegevens
   krijgen daaronder de volledige kaartbreedte. */
@media(max-width:560px){
  .contact-person:has(.contact-actions){
    position:relative;
    display:block;
  }
  .contact-person:has(.contact-actions) .contact-person-main > h3,
  .contact-person:has(.contact-actions) .contact-person-main > .contact-subtitle{
    padding-right:108px;
  }
  .contact-person:has(.contact-actions) .contact-actions{
    position:absolute;
    top:14px;
    right:16px;
  }
  .contact-person:has(.contact-actions) .contact-detail{
    margin-top:4px;
    padding-right:0;
    width:100%;
    max-width:100%;
    overflow-wrap:anywhere;
  }
}

/* Strakker WhatsApp-lijnicoon. */
.contact-action-whatsapp svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   Stagenda v1.0 RC6
   ============================================================ */

/* Contact: telefoon eerst; e-mail staat daaronder volledig vrij van actieknoppen. */
@media(max-width:560px){
  .contact-person:has(.contact-actions) .contact-phone{
    margin-top:4px!important;
  }
  .contact-person:has(.contact-actions) .contact-email{
    margin-top:2px!important;
    padding-right:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

/* Persoonlijke Stagenda-kleur. */
.account-color-card{
  align-self:start;
}
.account-color-card h2{
  margin-top:.15em;
}
.account-color-options{
  margin-top:14px;
}

/* Afmelden: Luach-stijl, volledig rond. */
.account-logout-button{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
}
.account-logout-button .account-logout-svg{
  width:25px!important;
  height:25px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* ============================================================
   Stagenda v1.0 RC7
   ============================================================ */

.account-logout-button{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--rood)!important;
    color:#fff!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    box-shadow:none!important;
}
.account-logout-button .account-logout-svg{
    width:25px!important;
    height:25px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

.account-color-card{
    width:100%;
    margin-top:22px;
}
.account-color-card h2{
    margin-top:.15em;
}
.account-color-options{
    display:grid!important;
    grid-template-columns:repeat(6, 38px)!important;
    grid-template-rows:repeat(2, 38px)!important;
    gap:10px 12px!important;
    align-items:center;
    justify-content:start;
    margin-top:16px;
}
.account-color-options .theme-color-choice > span[aria-hidden="true"]{
    width:38px!important;
    height:38px!important;
    border-radius:8px!important;
}

@media(max-width:420px){
    .account-color-options{
        grid-template-columns:repeat(6, 34px)!important;
        grid-template-rows:repeat(2, 34px)!important;
        gap:9px 8px!important;
    }
    .account-color-options .theme-color-choice > span[aria-hidden="true"]{
        width:34px!important;
        height:34px!important;
    }
}


/* ============================================================
   Stagenda v1.0 RC8 – Account
   ============================================================ */

.page-shell .page-heading form .account-logout-button{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#e0020c!important;
    color:#fff!important;
    display:grid!important;
    place-items:center!important;
    appearance:none!important;
    -webkit-appearance:none!important;
}

.page-shell .page-heading form .account-logout-button svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

.account-color-card{
    grid-column:1 / -1!important;
    width:100%!important;
}

.account-color-options{
    display:grid!important;
    grid-template-columns:repeat(6, 38px)!important;
    grid-template-rows:repeat(2, 38px)!important;
    grid-auto-flow:row!important;
    gap:10px 12px!important;
}


/* ============================================================
   Stagenda v1.0 RC9 – persoonlijke actiekleur uit Account
   ============================================================ */

/* Actieve bubbel in de onderste navigatie. */
.bottom-nav-item.active .bottom-nav-bubble{
    background:var(--user-accent-bg)!important;
    color:var(--user-accent-text)!important;
}

/* Actief icoon in de verticale beheerbalk. */
.management-sidebar-item.active .management-sidebar-icon{
    background:var(--user-accent-bg)!important;
    color:var(--user-accent-text)!important;
}

/*
 * Normale ronde beheerknoppen rechtsboven.
 * Semantische kleuren (groen toevoegen, rood verwijderen/archiveren)
 * blijven via hun specifiekere regels intact.
 */
.management-toolbar-button:not(.management-toolbar-button--add):not(.management-toolbar-button--archive):not(.management-toolbar-button--remove):not(.danger){
    background:var(--user-accent-bg)!important;
    color:var(--user-accent-text)!important;
}


/* ============================================================
   Stagenda v1.0 RC10 – Pushmeldingen
   ============================================================ */

.settings-push-card,
.account-push-card{
    margin-bottom:22px;
}

.account-push-list{
    margin-top:14px;
}

.account-push-status{
    margin:12px 0 0;
}

.account-push-status.is-error{
    color:var(--rood);
    font-weight:700;
}

.account-push-time{width:112px;min-width:112px}
.settings-technical-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--rand)}
.settings-technical-note textarea{width:100%;font:inherit;line-height:1.45;resize:vertical}


/* ============================================================
   Stagenda v1.0 RC12
   ============================================================ */

.account-push-card{
    margin-top:22px!important;
}

.teacher-student-links + .teacher-student-links{margin-top:18px}


/* ============================================================
   Stagenda v1.0 RC14
   ============================================================ */

.personal-settings-grid{
    display:grid;
    gap:22px;
}

.personal-settings-grid .account-push-card,
.personal-settings-grid .account-color-card{
    margin-top:0!important;
    width:100%;
}

.personal-settings-grid .account-color-options{
    display:grid!important;
    grid-template-columns:repeat(6, 38px)!important;
    grid-template-rows:repeat(2, 38px)!important;
    grid-auto-flow:row!important;
    gap:10px 12px!important;
    align-items:center;
    justify-content:start;
    margin-top:16px;
}

.account-core-grid{
    align-items:start;
}


/* ============================================================
   Stagenda v1.0 RC16 – verjaardag + daginformatie
   Alleen wanneer een verjaardag én normale daginformatie
   tegelijk in een gesloten dagkaart staan, krijgt de kaart
   extra hoogte. Alle andere gesloten dagkaarten houden hun
   vaste compacte hoogte.
   ============================================================ */

.agenda-day.is-birthday-with-day-info:not(.is-open) .day-summary{
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
}

.agenda-day.is-birthday-with-day-info:not(.is-open) .day-lines{
    min-height:2.55em!important;
    max-height:2.55em!important;
    white-space:normal!important;
    overflow:hidden!important;
    align-content:center;
}

@media(max-width:760px){
    .agenda-day.is-birthday-with-day-info:not(.is-open) .day-summary{
        height:84px!important;
        min-height:84px!important;
        max-height:84px!important;
    }

    .agenda-day.is-birthday-with-day-info:not(.is-open) .day-lines{
        min-height:2.75em!important;
        max-height:2.75em!important;
        margin-top:0!important;
    }
}


/* ============================================================
   Stagenda v1.0 RC17 – installeren als app
   ============================================================ */
.settings-install-intro{
    max-width:720px;
    margin:8px 0 0;
}

.settings-install-download{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:20px;
    padding:18px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:13px;
    background:var(--lichtgeel);
}

.settings-install-download img{
    width:150px;
    height:150px;
    flex:0 0 150px;
    background:#fff;
}

.settings-install-download p{
    margin:5px 0 14px;
}

.app-install-promo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:22px;
    padding:18px 20px;
    border:2px solid rgba(240,146,0,.42);
    background:var(--lichtoranje);
}

.app-install-promo[hidden]{
    display:none!important;
}

.app-install-promo-copy{
    display:grid;
    gap:3px;
}

.app-install-promo-copy strong{
    font-size:1.08rem;
}

.app-install-promo-copy small{
    color:#4d4d4d;
}

.app-install-promo-button{
    flex:0 0 auto;
}

.personal-settings-grid .personal-install-promo{
    width:100%;
    margin-top:0!important;
}

.app-install-page{
    max-width:680px;
    margin:30px auto;
}

.app-install-page h1{
    margin:.1em 0 .35em;
}

.app-install-page-intro{
    max-width:590px;
    margin-bottom:22px;
}

.app-install-state{
    padding:18px;
    border:1px solid rgba(10,10,10,.12);
    border-radius:13px;
    background:#fff;
}

.app-install-state[hidden]{
    display:none!important;
}

.app-install-state p{
    margin:6px 0 0;
}

.app-install-main-button{
    margin-top:16px;
}

.app-install-steps{
    margin:12px 0 0;
    padding-left:24px;
}

.app-install-steps li+li{
    margin-top:7px;
}

@media(max-width:650px){
    .settings-install-download,
    .app-install-promo{
        align-items:stretch;
        flex-direction:column;
    }

    .settings-install-download img{
        width:132px;
        height:132px;
        flex-basis:132px;
    }

    .app-install-promo-button{
        width:100%;
    }
}


/* RC18 – beheer en dashboard verfijningen */
.placement-card-student{display:block;margin-bottom:3px;font-size:1.02rem}
.placement-student-name{padding:10px 12px;border-radius:10px;background:var(--lichtblauw)}
.settings-section-explanation{margin:0 0 14px;color:#555;line-height:1.45}
.dashboard-note-link{grid-template-columns:minmax(0,1fr) 32px}
.dashboard-note-link>.stagenda-note-indicator{grid-column:2;grid-row:1;justify-self:center}
.dashboard-note-link>.dashboard-note-main{grid-column:1;grid-row:1}
.dashboard-note-link>span[aria-hidden="true"]:last-child{display:none}
@media(max-width:760px){
    .dashboard-note-link{grid-template-columns:minmax(0,1fr) 30px;gap:12px;padding:14px}
}


/* RC19 – tweestapsverificatie en copyright */
.site-copyright{margin:18px auto 8px;text-align:center;font-size:.76rem;color:#777;line-height:1.4}
.site-copyright a{color:inherit;text-decoration:none}
.site-copyright a:hover{text-decoration:underline}
.two-factor-card{max-width:560px;margin-inline:auto}
.two-factor-steps{padding-left:1.35rem;line-height:1.55}
.two-factor-secret{margin:14px 0;padding:14px;border:1px solid var(--rand);border-radius:12px;background:#fff;display:grid;gap:5px}
.two-factor-secret span{font-size:.78rem;color:#666;text-transform:uppercase;letter-spacing:.08em}
.two-factor-secret strong{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1rem;letter-spacing:.12em;overflow-wrap:anywhere;user-select:all}
.two-factor-trust-row{display:flex!important;align-items:center;gap:10px}
.two-factor-trust-row input{width:auto!important}
.teacher-security-actions{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.teacher-two-factor-status{display:grid;gap:2px;margin-right:auto}
.teacher-two-factor-status span{font-size:.88rem;color:#666}
.settings-copyright-card .switch-row{margin:0}

.two-factor-setup-grid{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:18px;align-items:center;margin:14px 0}
.two-factor-qr{display:grid;place-items:center;padding:10px;background:#fff;border:1px solid var(--rand);border-radius:12px}
.two-factor-qr canvas{display:block;max-width:100%;height:auto}
@media(max-width:600px){.two-factor-setup-grid{grid-template-columns:1fr}.two-factor-qr{max-width:260px;margin-inline:auto;width:100%}}

/* RC20 */
.school-login-picker{position:relative}.school-login-suggestions{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--rand);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden}.school-login-suggestion{display:block;width:100%;border:0;background:#fff;text-align:left;padding:10px 12px;font:inherit;cursor:pointer}.school-login-suggestion:hover,.school-login-suggestion:focus{background:var(--lichtblauw)}
.recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.recovery-code-grid code{padding:10px;border:1px solid var(--rand);border-radius:8px;background:#fff;text-align:center;font-weight:700;letter-spacing:.08em}.two-factor-recovery{margin-top:16px}.two-factor-recovery summary{cursor:pointer;font-weight:700}.two-factor-recovery form{margin-top:12px}
.settings-scope-card{display:grid;gap:16px}.settings-section-heading{margin:22px 2px 8px}.settings-section-heading h2{margin:2px 0}.settings-add-school-form{border-top:1px solid var(--rand);padding-top:14px}.settings-copyright-card .copyright-switch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:12px 0}.settings-copyright-card .copyright-switch-row>span{display:grid;gap:4px;min-width:0}.settings-copyright-card .copyright-switch-row small{display:block;line-height:1.35;color:#666}.settings-copyright-card .copyright-switch-row .switch-input{margin:0;justify-self:end;align-self:center}
@media(max-width:560px){.recovery-code-grid{grid-template-columns:1fr}.settings-copyright-card .copyright-switch-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}}


/* RC21 – app-instellingen verfijning */
.settings-scope-card,
.settings-copyright-card{
  background:var(--lichtblauw);
}
.settings-scope-card + .settings-copyright-card{
  margin-top:18px;
}
.settings-section-heading{
  margin:26px 2px 0;
}
.settings-section-heading + .card,
.settings-section-heading ~ .card{
  margin-top:18px;
}
.settings-add-school-form{
  grid-template-columns:minmax(220px,1fr) auto;
  align-items:end;
}
.settings-add-school-form .form-actions{
  align-items:end;
}
.settings-add-school-form .button{
  width:auto;
  min-height:44px;
  padding:10px 14px;
  white-space:nowrap;
}
.settings-copyright-card .copyright-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 16px;
}
.settings-copyright-card .copyright-switch-row>span{
  flex:1 1 auto;
  min-width:0;
}
.settings-copyright-card .copyright-switch-row .switch-input{
  width:52px !important;
  min-width:52px;
  max-width:52px;
  height:30px;
  padding:0 !important;
  flex:0 0 52px;
}
@media(max-width:700px){
  .settings-add-school-form{grid-template-columns:1fr}
  .settings-add-school-form .button{width:auto;justify-self:start}
}


/* RC22 – centrale beschikbaarheid van Stagenda */
.settings-access-card{margin-top:18px;background:var(--lichtblauw)}
.settings-access-card + .settings-copyright-card{margin-top:18px}
.stagenda-access-form{display:grid;gap:10px}
.stagenda-access-choice{position:relative;display:block;cursor:pointer}
.stagenda-access-choice input{position:absolute;opacity:0;pointer-events:none}
.stagenda-access-choice span{display:block;padding:13px 15px;border:2px solid #d4d4d4;border-radius:12px;background:#fff;font-weight:700;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.stagenda-access-choice:hover span{border-color:var(--blauw)}
.stagenda-access-choice input:checked+span{border-color:var(--groen);background:var(--lichtgroen);box-shadow:0 0 0 2px rgba(149,193,31,.12)}
.stagenda-access-choice input:focus-visible+span{outline:3px solid var(--lichtblauw);outline-offset:2px}
.stagenda-disabled-card{width:min(720px,100%);margin:clamp(36px,9vh,100px) auto;text-align:center;padding:clamp(28px,6vw,56px)}
.stagenda-disabled-card h1{margin:.25em 0 .55em}
.stagenda-disabled-card p:not(.eyebrow){font-size:1.05rem;line-height:1.55;margin:0 auto;max-width:560px}
.stagenda-disabled-actions{display:flex;justify-content:center;margin-top:24px}
body:has(.stagenda-disabled-card) .page-shell{min-height:calc(100vh - 110px)}


/* RC23 */
.provider-phone-privacy-check{display:flex;align-items:center;gap:10px}.provider-phone-privacy-check input{width:auto}
.management-bulk-checkbox{display:none;flex:0 0 auto;width:18px;height:18px;margin-right:8px}.management-bulk-active .management-bulk-checkbox{display:inline-block}.management-bulk-active .list-item{display:flex;align-items:center}.management-bulk-panel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.management-bulk-panel[hidden]{display:none}.management-bulk-panel select{min-width:180px}.attendance-fill-form{margin-top:14px}


/* RC24 – selectiemodus uitsluitend bij studenten */
.settings-access-card{
  background:var(--wit)!important;
}
.management-bulk-active .management-list .list-item{
  cursor:pointer;
  user-select:none;
}
.management-bulk-active .management-toolbar-button:not(.management-toolbar-button--select):not(.management-toolbar-button--archive){
  opacity:.45;
  cursor:not-allowed;
}
.management-toolbar-button--select.is-active{
  box-shadow:0 0 0 3px var(--lichtblauw);
}
.bulk-school-leaver-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 11px;
  border:1px solid rgba(10,10,10,.14);
  border-radius:10px;
  background:var(--wit);
  font-weight:700;
  cursor:pointer;
}
.bulk-school-leaver-toggle input{
  appearance:none;
  -webkit-appearance:none;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  margin:0;
  padding:0;
  border:2px solid var(--blauw);
  border-radius:5px;
  background:var(--wit);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.bulk-school-leaver-toggle input:checked{
  background:var(--blauw);
}
.bulk-school-leaver-toggle input:checked::after{
  content:"✓";
  color:var(--wit);
  font-size:15px;
  font-weight:900;
  line-height:1;
}
.bulk-school-leaver-toggle input:indeterminate{
  background:var(--lichtblauw);
}
.bulk-school-leaver-toggle input:indeterminate::after{
  content:"−";
  color:var(--blauw);
  font-size:18px;
  font-weight:900;
  line-height:1;
}
.bulk-school-leaver-toggle input:disabled{
  opacity:.45;
}
.password-save-row .password-save-button{
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  aspect-ratio:1/1;
  border-radius:50%!important;
  align-self:center;
}
@media(max-width:700px){
  .password-save-row .password-save-button{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }
}


/* RC25 – leerlingselectie, filters en archiefherstel */
.management-search-filter-row{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;position:relative}
.management-search-filter-row .management-search-wrap{flex:1 1 auto;min-width:0;margin:0}
.management-filter-menu{position:relative;flex:0 0 auto}
.management-filter-toggle{display:grid;place-items:center;width:36px;height:36px;border:1px solid #c8d1dc;border-radius:10px;background:#fff;cursor:pointer;font-size:1.15rem;line-height:1;list-style:none}
.management-filter-toggle::-webkit-details-marker{display:none}
.management-filter-menu[open] .management-filter-toggle{background:var(--lichtblauw);border-color:var(--blauw)}
.management-filter-popover{position:absolute;right:0;top:43px;z-index:30;width:min(285px,calc(100vw - 40px));padding:12px;border:1px solid #d4dde7;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.16);display:grid;gap:10px}
.management-filter-popover label{display:grid;gap:5px;font-weight:600}
.management-filter-popover select{width:100%}
.management-bulk-panel .compact-button{min-height:34px;padding:6px 10px}
.archive-restore-prompt{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;border-left:5px solid var(--oranje)}
.archive-restore-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.archive-restore-prompt{align-items:flex-start;flex-direction:column}.archive-restore-actions{justify-content:flex-start}.management-filter-popover{position:fixed;right:16px;top:auto}}


/* RC26 – bulkkeuze bij gemengde schoolverlaterstatus */
.bulk-choice-overlay{position:fixed;inset:0;z-index:250;background:rgba(10,10,10,.35);display:grid;place-items:center;padding:20px}
.bulk-choice-dialog{width:min(460px,100%);background:var(--wit);border-radius:14px;box-shadow:var(--shadow);padding:20px;display:grid;gap:14px}
.bulk-choice-dialog p{margin:0}
.bulk-choice-actions{display:flex;gap:8px;flex-wrap:wrap}

/* RC26 – zoeken binnen de bedrijfskiezer van een stageplaatsing */
.placement-company-picker{display:grid;gap:7px}
.placement-company-search{width:100%}


/* RC27 – aanwezigheid zonder stageplaats */
.attendance-label-unplaced{
  background:var(--geel);
  color:#0a0a0a;
  border-radius:8px;
}

/* RC27 – individuele stagedagcorrecties in de agenda */
.day-stage-override-actions{display:none}
.agenda-day.is-open .day-stage-override-actions{
  position:absolute;
  z-index:4;
  top:14px;
  right:62px;
  display:flex;
  gap:7px;
  align-items:center;
}
.day-stage-override-button{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(10,10,10,.18);
  border-radius:50%;
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(10,10,10,.12);
}
.day-stage-override-button.is-add{background:var(--groen);color:#0a0a0a}
.day-stage-override-button.is-remove{background:var(--rood)}
.day-stage-override-button.is-restore{background:var(--blauw)}
.day-stage-override-button:disabled{
  opacity:.3;
  cursor:default;
  box-shadow:none;
}
@media(max-width:760px){
  .agenda-day.is-open .day-stage-override-actions{
    top:12px;
    right:58px;
    gap:5px;
  }
  .day-stage-override-button{
    width:34px;
    height:34px;
    font-size:1.15rem;
  }
}

/* RC27 – uitklappende zoekresultaten bij stagebedrijf */
.placement-company-picker{position:relative}
.placement-company-results{
  max-height:260px;
  overflow:auto;
  border:1px solid rgba(10,10,10,.18);
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 28px rgba(10,10,10,.14);
  padding:5px;
  display:grid;
  gap:3px;
  z-index:40;
}
.placement-company-results[hidden]{display:none}
.placement-company-result{
  width:100%;
  border:0;
  border-radius:8px;
  background:#fff;
  color:var(--zwart);
  padding:9px 10px;
  text-align:left;
  cursor:pointer;
}
.placement-company-result:hover,
.placement-company-result:focus-visible{background:var(--lichtblauw)}
.placement-company-no-results{
  display:block;
  padding:9px 10px;
  color:#666;
}

/* RC28a – privacy-optie stagebegeleider compact onder telefoonnummer */
.provider-phone-field .provider-phone-privacy-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-weight:600;
  line-height:1.25;
}
.provider-phone-field .provider-phone-privacy-check input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
}

/* RC29 – contractgenerator */
.contract-layout-grid{display:grid;gap:18px}
.contract-layout-grid textarea{width:100%;resize:vertical}
.contract-token-list{display:flex;flex-wrap:wrap;gap:8px}
.contract-token-list code{padding:6px 9px;border:1px solid var(--line,#d8d8d8);border-radius:8px;background:#f7f7f7}
.contract-paper{max-width:800px;margin:0 auto;background:#fff;padding:32px;border:1px solid #ddd;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.contract-paper h1{text-align:center;font-size:1.4rem;margin:0 0 28px}
.contract-data-preview{margin:20px 0}
.contract-layout-save{position:sticky;bottom:88px;z-index:5;justify-content:flex-end}
.contract-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding:14px;border:1px solid #ddd;border-radius:12px}
.contract-review-grid div{display:flex;flex-direction:column;gap:2px}
@media(max-width:700px){.contract-review-grid{grid-template-columns:1fr}.contract-paper{padding:18px}}

/* RC30 – eenvoudige tekstverwerker voor stageovereenkomsten */
.contract-editor-toolbar{position:sticky;top:0;z-index:12;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px;border:1px solid #d8dde5;border-radius:12px;background:#fff;margin-bottom:12px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.contract-editor-toolbar button,.contract-editor-toolbar select{min-height:36px;border:1px solid #cfd6df;border-radius:8px;background:#fff;padding:6px 9px;color:inherit}
.contract-editor-toolbar button:hover{background:#f4f7fa}.contract-editor-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.contract-editor-main{overflow:auto;padding:8px;background:#eef1f4;border-radius:14px}.contract-editor-paper{box-sizing:border-box;width:210mm;min-height:297mm;max-width:100%;margin:0 auto;padding:20mm;background:#fff;box-shadow:0 5px 24px rgba(0,0,0,.12);outline:none;line-height:1.45}.contract-editor-paper h1{font-size:18pt}.contract-fields-panel{position:sticky;top:72px;display:grid;gap:10px}.contract-fields-panel>details{border:1px solid #d8dde5;border-radius:12px;background:#fff;padding:10px}.contract-fields-panel summary{cursor:pointer;font-weight:700}.contract-field-group{margin-top:8px;border-top:1px solid #eceff3;padding-top:7px}.contract-field-buttons{display:grid;gap:5px;margin-top:7px}.contract-insert-field{text-align:left;border:0;border-radius:8px;padding:7px 9px;background:#edf5ff;color:#175b91;cursor:pointer}.contract-insert-field:hover{background:#dcecff}.contract-field{display:inline-block;padding:1px 5px;border-radius:5px;background:#d2e5f6;color:#155c92;box-decoration-break:clone;-webkit-box-decoration-break:clone}.contract-conditional{background:#fff4c2!important;outline:1px dashed #d2aa00;outline-offset:2px}.contract-conditional-demo{background:#fff4c2;padding:2px 5px;border-radius:5px}.contract-page-break{margin:16px -10px;border-top:2px dashed #aab3bf;color:#7b8490;text-align:center;font-size:.8rem;padding-top:4px}.contract-editor-save{position:sticky;bottom:82px;z-index:10;justify-content:flex-end;margin-top:12px}.contract-field-demo{font-size:.9em}@media(max-width:980px){.contract-editor-workspace{grid-template-columns:1fr}.contract-fields-panel{position:static;order:-1}.contract-editor-paper{width:100%;min-height:70vh;padding:28px}}@media(max-width:600px){.contract-editor-toolbar{position:static}.contract-editor-paper{padding:18px}.contract-field-buttons{grid-template-columns:1fr 1fr}}

/* RC30b contracteditor */
.contract-editor-paper,.contract-generated-preview{line-height:1!important}.contract-editor-paper p,.contract-editor-paper div,.contract-generated-preview p,.contract-generated-preview div{margin-top:0;margin-bottom:0;line-height:1}.contract-editor-toolbar{gap:5px}.contract-editor-toolbar button{min-width:38px;font-size:1rem}.contract-conditional-button{background:#fdf4c2!important;border-color:#e1bf18!important}.contract-editor-paper img,.contract-generated-preview img{max-width:100%}.contract-editor-paper .contract-field[data-field="school_logo"] img{height:4cm;width:auto}.settings-contract-tools{margin-top:18px;padding-top:16px;border-top:1px solid #e4e7eb}.contract-filename-fields{display:flex;flex-wrap:wrap;gap:6px}.contract-filename-field{border:1px solid #bfd4e8;background:#edf5ff;color:#175b91;border-radius:8px;padding:6px 9px;cursor:pointer}


/* RC32 – overlappende stageplaatsingen */
.placement-overlap-panel{margin:18px 0;padding:18px;border:1px solid #e2b500;border-radius:14px;background:#fff9d9}
.placement-overlap-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.placement-overlap-heading span{font-size:.78rem;font-weight:700;padding:4px 8px;border-radius:999px;background:#f7d117}
.overlap-distribution-form{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.12)}.overlap-day-row{display:grid;grid-template-columns:minmax(90px,.6fr) minmax(180px,1.4fr) auto;align-items:center;gap:10px;margin:8px 0}.overlap-day-row em{font-size:.78rem;font-style:normal;font-weight:700;color:#8a6200}
.placement-overlap-dialog{max-width:620px;width:calc(100% - 32px);border:0;border-radius:18px;padding:0;box-shadow:0 24px 80px rgba(0,0,0,.28)}.placement-overlap-dialog::backdrop{background:rgba(0,0,0,.42)}.placement-overlap-dialog-body{padding:24px}.placement-overlap-choices{display:grid;gap:8px;margin-top:18px}.placement-overlap-choices small{display:block;margin:-2px 0 10px;color:var(--muted,#666)}
@media(max-width:650px){.overlap-day-row{grid-template-columns:1fr}.placement-overlap-heading{align-items:flex-start;flex-direction:column}}

/* RC32a – afwijkende tijden per stagedag */
.placement-day-times{border:1px solid var(--line,#ddd);border-radius:12px;padding:12px 14px}.placement-day-times summary{cursor:pointer;font-weight:700}.placement-day-times-grid{display:grid;gap:8px;margin-top:12px}.placement-day-time-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(130px,1fr) minmax(130px,1fr);gap:10px;align-items:end}.placement-day-time-row label{margin:0}@media(max-width:650px){.placement-day-time-row{grid-template-columns:1fr 1fr}.placement-day-time-row strong{grid-column:1/-1}}


/* RC32b – stagedagen op volgorde en nette uitlijning van afwijkende tijden */
.placement-day-time-row{
    align-items:start;
}
.placement-day-time-row>strong{
    align-self:start;
    padding-top:0;
    line-height:1.25;
}
.placement-day-time-row>label{
    display:grid;
    gap:6px;
}
.placement-day-time-row>label>span{
    display:block;
    min-height:1.25em;
    line-height:1.25;
    font-weight:700;
}
@media(min-width:651px){
    .placement-day-time-row{
        grid-template-columns:minmax(120px,.8fr) minmax(130px,1fr) minmax(130px,1fr);
    }
    .placement-day-time-row>strong{
        padding-top:0;
    }
}


/* RC33 – agenda, stageblok en uniforme beheerfilters */
.agenda-stage-detail{display:grid;gap:10px}
.agenda-stage-detail-placement{display:grid;gap:3px}
.agenda-stage-detail-placement>strong{font-size:1rem}
.agenda-stage-detail-placement>em{font-size:.9rem;color:var(--muted,#666)}
.management-filter-popover fieldset{border:0;padding:0;margin:0;min-width:0}
.management-filter-popover legend{font-weight:700;margin-bottom:6px}
.management-filter-checks{display:grid;gap:5px}
.management-filter-checks label{display:flex;grid-template-columns:none;align-items:center;gap:7px;font-weight:500}
.management-filter-checks input{margin:0;flex:0 0 auto}
.management-filter-checks-scroll{max-height:155px;overflow:auto;padding-right:4px}
.student-current-stages{display:grid;gap:10px}
.student-current-stage{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line,#ddd)}
.student-current-stage:last-child{border-bottom:0}
.student-current-stage-main{display:grid;gap:3px}
.student-current-stage-main>strong{font-size:1.05rem}
.student-stage-days{font-weight:700;color:var(--blauw)}
.student-stage-open-button{width:40px!important;height:40px!important;min-width:40px!important;padding:9px!important;border-radius:50%!important;background:var(--oranje)!important;color:var(--zwart)!important}
.student-stage-schedule{margin-top:16px;padding-top:16px;border-top:1px solid var(--line,#ddd)}
.student-stage-schedule .card-subheading{margin-bottom:10px}
.student-stage-schedule h3,.student-stage-schedule h4{margin-top:0}
.teacher-priority-list hr{border:0;border-top:1px solid var(--line,#ddd);width:100%;margin:5px 0}
@media(max-width:700px){.student-current-stage{grid-template-columns:minmax(0,1fr) 40px}}


/* RC33a – persistente filters en compacte filtergroepen */
.management-filter-menu.has-active-filters>.management-filter-toggle{background:var(--blauw)!important;border-color:var(--blauw)!important;color:#fff!important}
.management-filter-menu.has-active-filters[open]>.management-filter-toggle{background:var(--blauw)!important;color:#fff!important}
.management-filter-group{border:0;margin:0;padding:0}
.management-filter-group-summary{display:grid;grid-template-columns:10px minmax(0,1fr) 18px;align-items:center;gap:8px;min-height:32px;padding:5px 3px;border-radius:7px;cursor:pointer;list-style:none;font-weight:700}
.management-filter-group-summary::-webkit-details-marker{display:none}
.management-filter-group-summary:hover{background:rgba(32,113,182,.07)}
.management-filter-group-dot{width:8px;height:8px;border-radius:50%;background:transparent}
.management-filter-group.has-active-filters .management-filter-group-dot{background:var(--blauw)}
.management-filter-group-chevron{justify-self:end;transition:transform .15s ease}
.management-filter-group[open] .management-filter-group-chevron{transform:rotate(180deg)}
.management-filter-group>fieldset{margin:2px 0 7px 18px!important;padding:4px 0 5px!important}
.management-filter-group>fieldset>legend[hidden]{display:none!important}
.management-filter-popover{gap:3px!important}
.management-filter-popover>[data-management-filter-clear]{margin-top:7px}


/* RC31 – supervisor-accountwisselaar */
.account-switcher{margin-left:auto;position:relative;z-index:85;display:flex;align-items:center;padding-right:14px}
.account-switcher-toggle{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.82);color:#0a0a0a;box-shadow:0 2px 10px rgba(10,10,10,.16);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.account-switcher-toggle:hover,.account-switcher-toggle:focus-visible{transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,10,10,.22);outline:2px solid currentColor;outline-offset:2px}
.account-switcher-toggle.is-active{background:var(--lichtoranje);box-shadow:0 0 0 3px var(--oranje),0 3px 12px rgba(10,10,10,.2)}
.account-switcher-toggle svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-switcher-menu{position:absolute;right:14px;top:calc(100% + 10px);width:min(380px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 92px));overflow:auto;background:#fff;color:#0a0a0a;border:1px solid rgba(10,10,10,.12);border-radius:16px;box-shadow:0 16px 40px rgba(10,10,10,.24);padding:12px}
.account-switcher-heading{display:grid;gap:2px;padding:5px 7px 11px;border-bottom:1px solid rgba(10,10,10,.1);margin-bottom:8px}
.account-switcher-heading strong{font-size:1rem}.account-switcher-heading span{font-size:.82rem;color:#666}
.account-switcher-search{display:block;padding:2px 0 8px}.account-switcher-search input{width:100%;padding:10px 12px;border:1px solid #cfcfcf;border-radius:10px;background:#fff;color:#0a0a0a}
.account-switcher-list{display:grid;gap:4px}.account-switcher-target{margin:0}.account-switcher-target[hidden]{display:none}
.account-switcher-target button,.account-switcher-return{width:100%;border:0;border-radius:11px;background:transparent;color:#0a0a0a;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;text-align:left;padding:8px;cursor:pointer}
.account-switcher-target button:hover,.account-switcher-target button:focus-visible,.account-switcher-return:hover,.account-switcher-return:focus-visible{background:var(--lichtblauw);outline:none}
.account-switcher-return{background:var(--lichtoranje)}
.account-switcher-avatar{width:36px;height:36px;border-radius:50%;background:var(--blauw);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.account-switcher-return .account-switcher-avatar{background:var(--oranje);color:#0a0a0a}
.account-switcher-target button>span:last-child,.account-switcher-return>span:last-child{min-width:0;display:grid;gap:1px}
.account-switcher-target strong,.account-switcher-return strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-switcher-target small,.account-switcher-return small{font-size:.76rem;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-switcher-empty{margin:8px;padding:6px;font-size:.86rem;color:#666}
@media(max-width:700px){.account-switcher{padding-right:8px}.account-switcher-toggle{width:39px;height:39px}.account-switcher-menu{right:8px}}

/* RC31a – supervisor-accountwisselaar via Persoonlijke instellingen */
.account-hub-card,.account-linked-card{grid-column:1/-1}
.account-hub-active-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.account-hub-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--blauw);color:#fff;font-weight:700;flex:0 0 auto}
.account-hub-active-copy,.account-linked-identity>span:nth-child(2){display:grid;gap:2px;min-width:0}
.account-hub-active-copy small,.account-linked-identity small{color:#666;font-size:.82rem}
.account-hub-switch-button{white-space:nowrap}
.account-linked-list{display:grid;gap:12px;margin-top:14px}
.account-linked-item{border:1px solid rgba(10,10,10,.12);border-radius:13px;padding:12px;background:#fff}
.account-linked-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.account-linked-status{font-size:.76rem;font-weight:700;padding:5px 8px;border-radius:999px;background:var(--lichtoranje);white-space:nowrap}
.account-linked-status.is-active{background:var(--lichtgroen)}
.account-linked-details,.account-link-new{margin-top:10px}
.account-linked-details summary,.account-link-new summary{cursor:pointer;font-weight:700}
.account-linked-details .form-stack,.account-link-new .form-stack{margin-top:12px}
.danger-zone-inline{padding-top:0;border-top:0}
.account-link-new{border-top:1px solid rgba(10,10,10,.1);padding-top:14px;margin-top:18px}
.account-hub-sheet-backdrop{position:fixed;inset:0;z-index:1600;background:rgba(10,10,10,.42);display:flex;align-items:flex-end;justify-content:center;padding:18px}
.account-hub-sheet-backdrop[hidden]{display:none}
.account-hub-sheet{width:min(560px,100%);max-height:min(75vh,700px);overflow:auto;background:#fff;border-radius:22px 22px 14px 14px;padding:10px 16px 18px;box-shadow:0 -10px 36px rgba(10,10,10,.28)}
.account-hub-sheet-handle{width:44px;height:5px;border-radius:999px;background:#c8c8c8;margin:0 auto 10px}
.account-hub-sheet-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(10,10,10,.1);padding-bottom:10px;margin-bottom:8px}
.account-hub-sheet-heading h2{margin:2px 0 0}
.account-hub-sheet-close{border:0;background:transparent;font-size:2rem;line-height:1;cursor:pointer;padding:0 4px}
.account-hub-sheet-list{display:grid;gap:5px}
.account-hub-sheet-account{margin:0}
.account-hub-sheet-account button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-radius:12px;background:transparent;padding:9px;text-align:left;cursor:pointer;color:inherit}
.account-hub-sheet-account button:hover:not(:disabled),.account-hub-sheet-account button:focus-visible:not(:disabled){background:var(--lichtblauw);outline:none}
.account-hub-sheet-account button:disabled{cursor:default;background:#f5f5f5}
.account-hub-sheet-account button>span:nth-child(2){display:grid;gap:2px;min-width:0}
.account-hub-sheet-account small{color:#666}
.account-hub-current-badge{font-size:.76rem;font-weight:700;background:var(--lichtgroen);border-radius:999px;padding:5px 8px}
body.account-hub-sheet-open{overflow:hidden}
@media(max-width:650px){.account-hub-active-row{grid-template-columns:auto minmax(0,1fr)}.account-hub-switch-button{grid-column:1/-1;width:100%}.account-linked-identity{grid-template-columns:auto minmax(0,1fr)}.account-linked-status{grid-column:2;justify-self:start}.account-hub-sheet-backdrop{padding:0}.account-hub-sheet{border-radius:20px 20px 0 0}}
.dashboard-active-account{margin:-6px 0 16px;color:#666;font-size:.88rem}.dashboard-active-account strong{color:var(--zwart)}

/* RC33d – beheerkaarten blijven onder de vaste beheerkop staan.
 * De oude .management-list { top:92px } stamde nog uit de layout van vóór
 * de vaste app-/beheerkop. Daardoor kon de lijst bij scrollen een stukje
 * omhoog schuiven en achter de kop terechtkomen. Lijst en beheerbalk gebruiken
 * nu dezelfde sticky-bovenpositie. */
@media(min-width:701px){
    .page-shell.is-management-page .management-list{
        top:calc(
            var(--app-header-height)
            + var(--page-heading-top-space)
            + 68px
        )!important;
    }
}

/* RC33e – beheerwerkruimte exact tussen vaste kop en onderste navigatie.
 * Op grotere schermen krijgen de lijst en het detailgedeelte dezelfde
 * viewporthoogte. Alleen hun eigen inhoud scrolt, zodat beide kolommen
 * net boven de uitstekende navigatiebubbel eindigen. */
@media(min-width:1101px){
    .page-shell.is-management-page{
        --management-workspace-top: calc(
            var(--app-header-height)
            + var(--page-heading-top-space)
            + 68px
        );
        --management-workspace-bottom-clearance: 108px;
    }

    .page-shell.is-management-page .management-list{
        top:var(--management-workspace-top)!important;
        height:calc(
            100vh
            - var(--management-workspace-top)
            - var(--management-workspace-bottom-clearance)
        )!important;
        max-height:calc(
            100vh
            - var(--management-workspace-top)
            - var(--management-workspace-bottom-clearance)
        )!important;
        display:flex!important;
        flex-direction:column!important;
        min-height:0!important;
    }

    .page-shell.is-management-page .management-list .scroll-list{
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
    }

    .page-shell.is-management-page .management-detail{
        position:sticky!important;
        top:var(--management-workspace-top)!important;
        max-height:calc(
            100vh
            - var(--management-workspace-top)
            - var(--management-workspace-bottom-clearance)
        )!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        scroll-behavior:smooth;
        padding-right:4px;
    }

    .page-shell.is-management-page .management-sidebar{
        max-height:calc(
            100vh
            - var(--management-workspace-top)
            - var(--management-workspace-bottom-clearance)
        )!important;
    }
}


/* RC33f – korte beheerresultaten blijven bovenin de lijst staan. */
@media(min-width:1101px){
    .page-shell.is-management-page .management-list .scroll-list{
        align-content:start!important;
        grid-auto-rows:max-content!important;
    }
}

/* RC33g – uniforme koppen binnen het stageblok. */
.student-stage-card .card-subheading h2{margin:0}

/* ============================================================
   v1.0 RC33h – schoolkalender compacter + dagkaarten met meerdere regels
   ============================================================ */
.calendar-collapsible{
    padding:0!important;
    overflow:hidden;
}
.calendar-collapsible > summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    font-weight:700;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.calendar-collapsible > summary::-webkit-details-marker{display:none}
.calendar-collapsible > summary::before{
    content:'›';
    display:inline-block;
    font-size:1.35rem;
    line-height:1;
    transform:rotate(0deg);
    transition:transform .15s ease;
}
.calendar-collapsible[open] > summary::before{transform:rotate(90deg)}
.calendar-collapsible[open] > summary{border-bottom:1px solid rgba(10,10,10,.10)}
.calendar-collapsible > .calendar-fields,
.calendar-collapsible > .calendar-rows{
    margin:16px;
}
.calendar-collapsible > .calendar-round-add{
    margin:0 16px 16px auto!important;
}

/* Een gesloten dagkaart groeit mee als er meerdere regels daginformatie zijn. */
.agenda-day:not(.is-open) .day-summary{
    height:auto!important;
    min-height:52px!important;
    max-height:none!important;
    overflow:visible!important;
}
.agenda-day:not(.is-open) .day-lines{
    min-height:1.2em!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
}
@media(max-width:760px){
    .agenda-day:not(.is-open) .day-summary{
        height:auto!important;
        min-height:64px!important;
        max-height:none!important;
    }
}

/* RC33i – consistente tweekolomsopmaak voor bijzonderheden in de schoolkalender */
@media(min-width:701px){
  [data-calendar-section="special"] .calendar-row,
  [data-calendar-section="non_stage_special"] .calendar-row{
    grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) 38px!important;
  }
  [data-calendar-section="special"] .calendar-field-title,
  [data-calendar-section="non_stage_special"] .calendar-field-title{
    grid-column:1;grid-row:1;
  }
  [data-calendar-section="special"] .calendar-field-start,
  [data-calendar-section="non_stage_special"] .calendar-field-start{
    grid-column:2;grid-row:1;
  }
  [data-calendar-section="special"] .grade-target,
  [data-calendar-section="non_stage_special"] .grade-target{
    grid-column:1;grid-row:2;min-width:0;width:100%;
  }
  [data-calendar-section="special"] .calendar-field-end,
  [data-calendar-section="non_stage_special"] .calendar-field-end{
    grid-column:2;grid-row:2;
  }
  [data-calendar-section="special"] .calendar-field-stage{
    grid-column:1;grid-row:3;
  }
  [data-calendar-section="special"] .grade-target .calendar-field-target,
  [data-calendar-section="non_stage_special"] .grade-target .calendar-field-target{
    width:100%;
  }
  [data-calendar-section="special"] .grade-dropdown,
  [data-calendar-section="non_stage_special"] .grade-dropdown{
    width:100%;box-sizing:border-box;
  }
  [data-calendar-section="special"] .calendar-row>.row-remove,
  [data-calendar-section="non_stage_special"] .calendar-row>.row-remove{
    grid-column:3;grid-row:1;
  }
}

.site-legal-links{margin:6px auto 8px;text-align:center;font-size:.76rem;color:#777}.site-legal-links a{color:inherit;text-decoration:none}.site-legal-links a:hover{text-decoration:underline}.privacy-document{max-width:900px;margin-inline:auto}.privacy-document h2{margin-top:1.6rem}.privacy-document h3{margin-top:1.15rem}
.standalone-back-button{display:grid;place-items:center;width:46px;height:46px;margin:0 0 16px;border-radius:50%;background:var(--theme-action-bg);color:var(--theme-action-text);text-decoration:none;box-shadow:var(--shadow)}
.standalone-back-button:hover{filter:brightness(.93)}
.standalone-back-button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media print{.standalone-back-button{display:none!important}}