/* SYSTJEM 11.5.0 — Sprint 1: mobiel, lesrechten en veiligere bediening */
:root{
  --s115-green:#315b3a;
  --s115-green-dark:#203d28;
  --s115-surface:#ffffff;
  --s115-soft:#f4f6f2;
  --s115-line:#dfe4dc;
  --s115-text:#202620;
  --s115-muted:#687168;
  --s115-radius:16px;
}

/* Algemene rust en consistente bediening */
body.admin-sidebar-on:not(.butcher-original-layout){
  color:var(--s115-text);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(.card,.modal,.student-card,.setting-card,.dashboard-panel,.communication-card,.lessonbook-card,.lessonbook-folder,.admin-slot-month){
  border-color:var(--s115-line)!important;
  border-radius:var(--s115-radius)!important;
  box-shadow:0 10px 30px rgba(24,38,27,.055)!important;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(input,select,textarea){
  min-width:0;
  max-width:100%;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(button,.btn,.primary,a.btn){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(.btn.green,.primary,.confirmed,.slot.active){
  color:#fff!important;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(.module-heading,.material-header,.settings-title,.communication-heading,.lessonbook-head,.calhead,.panel-head){
  min-width:0;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(.module-heading,.material-header,.settings-title,.communication-heading,.lessonbook-head,.calhead,.panel-head) > *{
  min-width:0;
}
body.admin-sidebar-on:not(.butcher-original-layout) :where(h1,h2,h3,p,strong,small,span,a){
  overflow-wrap:anywhere;
}

/* Tabellen blijven leesbaar zonder de hele pagina breder te maken. */
.sprint-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.sprint-table-scroll > table{min-width:680px}

/* Duidelijke status van formulieren tijdens verzenden. */
form.systjem-submitting{opacity:.78;pointer-events:none}
form.systjem-submitting [type="submit"]{cursor:wait}

/* Cheat Sheet is bewust herkenbaar en niet gekoppeld aan een gewone les. */
.emil-cheatsheet-card .emil-thumb{background-color:#263d2c;background-size:cover;background-position:center}

@media (max-width:1024px){
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-wrap{
    max-width:100%!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.dashboard-grid,.settings-grid,.communication-grid,.student-dashboard-grid,.butcher-dashboard-grid,.lessonbook-folder-grid,.lessonbook-material-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.module-heading,.material-header,.communication-heading,.lessonbook-head){
    gap:14px!important;
  }
}

@media (max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  body.admin-sidebar-on:not(.butcher-original-layout){
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-wrap{
    width:100%!important;
    margin:0!important;
    padding:18px max(14px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .session-topbar{
    min-height:58px!important;
    padding:max(9px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left))!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .session-identity{
    min-width:0!important;
    gap:10px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .session-identity span{
    min-width:0!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .session-identity strong{
    display:block;
    max-width:min(34vw,190px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.dashboard-grid,.settings-grid,.communication-grid,.student-dashboard-grid,.student-grid,.lessonbook-folder-grid,.lessonbook-material-grid,.stat,.platform-grid,.games-admin-grid,[class*="card-grid"]){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.two,.three,.inline-fields,.form-grid,.approval-form){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.module-heading,.material-header,.settings-title,.communication-heading,.lessonbook-head,.calhead,.panel-head,.modern-postit-head,.postit-footer,.calendar-toolbar){
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.actions,.postit-actions,.toolbar-actions){
    width:100%;
    gap:9px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.actions,.postit-actions) > :where(.btn,button,form,details){
    min-width:0;
    max-width:100%;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.btn,button,.primary,input,select,textarea){
    min-height:48px!important;
    font-size:16px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(input,select,textarea){
    width:100%!important;
    padding:12px 13px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) textarea{min-height:130px!important}
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.modal,dialog){
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 24px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .tabs,
  body.admin-sidebar-on:not(.butcher-original-layout) .section-nav,
  body.admin-sidebar-on:not(.butcher-original-layout) .material-tabs,
  body.admin-sidebar-on:not(.butcher-original-layout) .communication-tabs,
  body.admin-sidebar-on:not(.butcher-original-layout) .settings-jumpnav{
    display:flex!important;
    flex-wrap:nowrap!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.tabs,.section-nav,.material-tabs,.communication-tabs,.settings-jumpnav)::-webkit-scrollbar{display:none}
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.tabs,.section-nav,.material-tabs,.communication-tabs,.settings-jumpnav) > *{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    white-space:nowrap!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .calendar-shell,
  body.admin-sidebar-on:not(.butcher-original-layout) .calendar-card,
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-slot-calendars{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .lessonmaker-frame{
    width:100%!important;
    height:max(980px,115dvh)!important;
    min-height:980px!important;
    border-radius:14px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .student-add-panel{
    scroll-margin-top:74px;
  }
}

@media (max-width:520px){
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-wrap{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(.card,.modal,.student-card,.setting-card,.dashboard-panel,.communication-card,.lessonbook-card,.lessonbook-folder){
    padding:16px!important;
    border-radius:14px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(h1,.admin-dashboard-title h1){
    font-size:clamp(29px,9vw,39px)!important;
    line-height:1.05!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) :where(h2,.module-heading h2,.material-header h2,.settings-title h2,.lessonbook-head h2){
    font-size:24px!important;
    line-height:1.12!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .metric-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .metric-row article{
    min-width:0!important;
    padding:15px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .timeline-item{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .actions > :where(.btn,button,form){
    width:100%!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .actions form > :where(.btn,button){width:100%!important}
  body.admin-sidebar-on:not(.butcher-original-layout) .session-identity span:nth-child(2){display:none!important}
  body.admin-sidebar-on:not(.butcher-original-layout) .session-identity strong{max-width:42vw!important}
  body.admin-sidebar-on:not(.butcher-original-layout) .calendar-card .day{min-height:126px!important}
  body.admin-sidebar-on:not(.butcher-original-layout) .calendar-card .event{font-size:12px!important;line-height:1.32!important}
}

/* Openbare boekingspagina en leerlingweergave */
@media (max-width:700px){
  .booking-page{overflow-x:hidden}
  .booking-page :where(.booking-shell,.booking-step,.booking-form-card,.booking-calendar-card){max-width:100%!important}
  .booking-page :where(input,select,textarea,button,.btn){min-height:48px!important;font-size:16px!important}
  .booking-page .two{grid-template-columns:1fr!important}
  .booking-page .booking-step{align-items:flex-start!important}
  .emil-lessons-widget{padding:20px 12px!important}
  .emil-lessons-grid{gap:14px!important}
  .emil-lesson-card{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}