/* SYSTJEM 11.28.0 — lesmodus, mobile dossier polish, app shell */
:root{--lesson-bg:#f5f3ed;--lesson-ink:#1b211c;--lesson-green:#173c2b;--lesson-soft:#eef2ed;--lesson-line:#d8ddd6}

/* Sprint 26 — Lesmodus */
.student-dossier-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
html.systjem-lesson-mode,html.systjem-lesson-mode body{background:var(--lesson-bg)!important}
html.systjem-lesson-mode .session-topbar,
html.systjem-lesson-mode .admin-hero,
html.systjem-lesson-mode .primary-admin-nav,
html.systjem-lesson-mode .section-nav,
html.systjem-lesson-mode .systjem-storage-footer,
html.systjem-lesson-mode .students-hero,
html.systjem-lesson-mode .students-status-tabs,
html.systjem-lesson-mode #new-student-form,
html.systjem-lesson-mode .student-info-grid,
html.systjem-lesson-mode .student-dashboard-grid,
html.systjem-lesson-mode .developer-only,
html.systjem-lesson-mode .student-bottom-info,
html.systjem-lesson-mode .developer-toggle-wrap,
html.systjem-lesson-mode .panel-history,
html.systjem-lesson-mode .panel-edit,
html.systjem-lesson-mode .student-privacy-panel{display:none!important}
html.systjem-lesson-mode .admin-wrap{margin-left:0!important;padding:0!important;max-width:none!important;width:100%!important}
html.systjem-lesson-mode .students-shell{border:0!important;box-shadow:none!important;background:transparent!important;margin:0!important;padding:0!important}
html.systjem-lesson-mode .student-dossier{border:0!important;box-shadow:none!important;margin:0!important;padding:16px clamp(14px,3vw,38px) 40px!important;max-width:none!important}
html.systjem-lesson-mode .student-dossier-head{position:sticky;top:0;z-index:110;background:rgba(245,243,237,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:calc(10px + env(safe-area-inset-top)) 0 12px!important;border-bottom:1px solid var(--lesson-line);margin-bottom:14px}
html.systjem-lesson-mode .student-dossier-head h2{font-size:clamp(22px,3vw,34px)!important;margin:0!important}
html.systjem-lesson-mode .lesson-mode-launch{display:none!important}
.lesson-mode-exit{display:none}
html.systjem-lesson-mode .lesson-mode-exit{display:inline-flex!important;align-items:center;justify-content:center;min-height:42px;border-radius:12px;padding:0 15px;background:#20251f;color:#fff;text-decoration:none;font-weight:700}
html.systjem-lesson-mode #leerlingdoelen,
html.systjem-lesson-mode .panel-postit{display:block!important;margin:12px 0!important;border-radius:18px!important;box-shadow:0 7px 26px rgba(20,40,31,.08)!important}
html.systjem-lesson-mode #leerlingdoelen{order:1}
html.systjem-lesson-mode .panel-postit{order:2}
html.systjem-lesson-mode .student-dossier{display:flex!important;flex-direction:column!important}
html.systjem-lesson-mode .student-dossier-head{order:0}
html.systjem-lesson-mode .student-goals-dossier{order:1}
html.systjem-lesson-mode .panel-postit{order:2}
html.systjem-lesson-mode .postit-template-preview{display:none!important}
html.systjem-lesson-mode .modern-postit-textarea{min-height:210px!important;font-size:17px!important;line-height:1.45!important}
html.systjem-lesson-mode .student-goals-list{max-height:none!important}
html.systjem-lesson-mode .student-goals-dossier button,
html.systjem-lesson-mode .panel-postit button{min-height:44px}
.lesson-mode-network{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:99999;padding:8px 12px;border-radius:999px;background:#20251f;color:#fff;font:600 13px/1.1 system-ui;box-shadow:0 6px 24px rgba(0,0,0,.2);display:none}
html.systjem-offline .lesson-mode-network{display:block;background:#7a2b26}

/* Sprint 27 — iPhone dossier: informatie dicht en bedienbaar */
@media(max-width:700px){
 .student-dossier{padding:12px!important;border-radius:0!important}
 .student-dossier-head{gap:8px!important;align-items:flex-start!important}
 .student-dossier-head h2{font-size:25px!important;line-height:1.05!important}
 .student-dossier-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .student-dossier-head-actions .btn{min-height:40px!important;padding:8px 10px!important;font-size:14px!important;text-align:center}
 .student-dossier .student-panel{padding:14px!important;margin:9px 0!important;border-radius:16px!important}
 .student-dossier .student-panel h3{font-size:19px!important;margin:0 0 8px!important}
 .student-dossier .student-panel p{margin-top:6px!important}
 .student-dossier .two,.student-dossier .three{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
 .student-dossier input,.student-dossier select,.student-dossier textarea{font-size:16px!important}
 .student-dossier .btn,.student-dossier button{min-height:40px!important;padding:8px 12px!important}
 .student-goals-head{gap:8px!important}
 .student-goals-score{min-width:70px!important}
 .student-goals-toolbar{gap:8px!important}
 .student-goals-dossier .goal-row,.student-goals-dossier label{min-height:42px}
 .modern-postit-head{gap:8px!important}
 .postit-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
 .postit-actions .btn{flex:1 1 auto}
 html.systjem-lesson-mode .student-dossier{padding:8px 10px calc(30px + env(safe-area-inset-bottom))!important}
 html.systjem-lesson-mode .student-dossier-head-actions{grid-template-columns:1fr!important}
 html.systjem-lesson-mode .student-dossier-head .btn:not(.lesson-mode-exit){display:none!important}
 html.systjem-lesson-mode #leerlingdoelen,html.systjem-lesson-mode .panel-postit{border-radius:14px!important;padding:12px!important}
}

/* iPad lesson mode: goals + post-it next to each other when space allows */
@media(min-width:900px){
 html.systjem-lesson-mode .student-dossier{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;gap:16px!important;align-items:start!important}
 html.systjem-lesson-mode .student-dossier-head{grid-column:1/-1!important}
 html.systjem-lesson-mode #leerlingdoelen{grid-column:1!important}
 html.systjem-lesson-mode .panel-postit{grid-column:2!important;position:sticky;top:96px}
}

/* Sprint 28 — standalone/home-screen polish */
@media(display-mode:standalone){
 body{overscroll-behavior-y:none}
 .session-topbar{padding-top:env(safe-area-inset-top)!important}
}