/* SYSTJEM 11.2.3 — rustige verfijning zonder de eigen stijl te verliezen */
:root{
  --sj-ink:#232720;
  --sj-muted:#6f756c;
  --sj-bg:#f4f2eb;
  --sj-surface:#fffefa;
  --sj-surface-soft:#f8f6f0;
  --sj-line:#dedbd1;
  --sj-green:#506c52;
  --sj-green-dark:#324b36;
  --sj-green-soft:#eaf1e8;
  --sj-warm:#b47b37;
  --sj-danger:#a83f3f;
  --sj-radius:16px;
  --sj-shadow:0 12px 30px rgba(35,39,32,.065);
}
html{scroll-behavior:smooth;background:var(--sj-bg)}
body{background:var(--sj-bg)!important;color:var(--sj-ink)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.admin-sidebar-on{background:linear-gradient(180deg,#f7f5ef 0,#f2f0e9 100%)!important}
::selection{background:#cfdcc9;color:#1c2b1e}

/* Basisoppervlakken */
.card,.modal,.setting-card,.connection-card,.student-card,.lesson-group,.admin-slot-month,.booking-calendar,.booking-form-card{
  border-color:var(--sj-line)!important;
  border-radius:var(--sj-radius)!important;
  box-shadow:var(--sj-shadow)!important;
  background:var(--sj-surface)!important;
}
.card{padding:22px!important}
.card>h2:first-child,.card>h3:first-child{letter-spacing:-.025em}
.module-heading h2,.material-header h2,.settings-title h2,.lessonbook-head h2{letter-spacing:-.035em!important;color:var(--sj-ink)!important}
.module-heading p,.material-header p,.settings-title p,.lessonbook-head p,.small{color:var(--sj-muted)!important}
.eyebrow{color:#8b683c!important;letter-spacing:.13em!important}

/* Knoppen */
.btn,.primary,button{min-height:42px;border-radius:10px!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover,.primary:hover,button:hover{transform:translateY(-1px)}
.btn:active,.primary:active,button:active{transform:translateY(0)}
.btn.green,.primary{background:var(--sj-green)!important;color:#fff!important;box-shadow:0 7px 16px rgba(62,91,67,.16)!important}
.btn.green:hover,.primary:hover{background:var(--sj-green-dark)!important}
.btn.light{background:#faf9f5!important;color:#30352e!important;border:1px solid var(--sj-line)!important;box-shadow:none!important}
.btn.light:hover{background:#fff!important;border-color:#c8c4b9!important}
.btn.red{background:var(--sj-danger)!important}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none!important}

/* Formulieren */
label{color:#343931!important}
input,select,textarea{border-color:#d3d6ce!important;border-radius:10px!important;background:#fff!important;transition:border-color .16s ease,box-shadow .16s ease}
input:hover,select:hover,textarea:hover{border-color:#bfc6bc!important}
input:focus,select:focus,textarea:focus{border-color:#718b73!important;box-shadow:0 0 0 3px rgba(80,108,82,.13)!important;outline:0!important}
input::placeholder,textarea::placeholder{color:#979c94!important}
.check-line{border-radius:10px}

/* Toegankelijke focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(80,108,82,.35)!important;outline-offset:3px!important
}

/* Bovenbalk en identiteit */
.session-topbar{background:rgba(255,255,252,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(215,212,202,.9)!important;box-shadow:0 7px 24px rgba(38,42,36,.055)!important}
.session-identity small{color:#898b83!important}
.session-identity strong{color:#2b3029!important}
.session-logout{border-radius:9px!important;background:#292e28!important}
.session-logout:hover{background:#151915!important}
#sidebarToggle{border-color:#d9d3c5!important;background:#fbf8f0!important;color:#3c4339!important;box-shadow:0 8px 20px rgba(38,42,36,.10)!important}

/* Zijbalk — dezelfde donkere SYSTJEM-identiteit, maar rustiger */
body.admin-sidebar-on .admin-hero{background:linear-gradient(180deg,#20251f 0%,#282e27 100%)!important}
body.admin-sidebar-on .adminnav .btn{border-radius:9px!important;color:#d9ddd5!important}
body.admin-sidebar-on .adminnav .btn:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
body.admin-sidebar-on .adminnav .btn.green,
body.admin-sidebar-on .adminnav .primary{background:rgba(222,235,216,.09)!important;color:#e7d5aa!important;box-shadow:none!important}
body.admin-sidebar-on .adminnav .btn.green::before{content:"";width:3px;height:22px;border-radius:99px;background:#d7b574;margin-right:8px}
body.admin-sidebar-on .adminnav{scrollbar-width:none!important}
body.admin-sidebar-on .adminnav::-webkit-scrollbar{display:none!important}
.brand-copy strong{letter-spacing:.03em}
.brand-copy small{color:#d8bd82!important;line-height:1.25!important}

/* Dashboard */
.admin-dashboard-title{margin-bottom:20px!important}
.admin-dashboard-title h1{font-size:clamp(34px,4vw,50px)!important;line-height:1!important}
.today-dashboard,.dashboard-grid,.stat{gap:14px!important}
.today-dashboard article,.dashboard-grid article,.stat .box{border:1px solid var(--sj-line)!important;border-radius:14px!important;background:var(--sj-surface)!important;box-shadow:0 9px 22px rgba(35,39,32,.045)!important}
.today-dashboard article:hover,.dashboard-grid article:hover,.stat .box:hover{border-color:#c9cec4!important}
.quick-links a{border-radius:9px!important}

/* Agenda */
.calendar-shell,.calendar-card{border-color:var(--sj-line)!important;box-shadow:var(--sj-shadow)!important}
.calendar-toolbar,.calhead{background:#fbfaf6!important}
.weekdays{background:#f3f0e8!important}
.weekdays span{color:#6c7068!important;font-weight:800!important}
.weekno{background:#eee9dc!important;color:#6e5b3e!important}
.day{background:#fffefa!important;min-height:142px!important}
.day.today{background:#f1f5ee!important;box-shadow:inset 0 3px 0 #728b72!important}
.day>strong{color:#32372f!important}
.event{background:#536f56!important;color:#fff!important;border-left-color:#d5bd85!important;font-weight:700!important;text-shadow:none!important}
.event:hover{background:#405c45!important}
.slot{font-weight:700!important}
.calendar-view-switch,.period-tabs{background:#efede6!important;border-radius:11px!important;padding:4px!important}
.calendar-view-switch .btn,.period-tabs .btn{border-radius:8px!important}

/* Tabellen */
.table{border-collapse:separate!important;border-spacing:0!important}
.table th{background:#f3f1ea!important;color:#565d54!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.05em}
.table th,.table td{border-bottom-color:#e6e3db!important}
.table tr:last-child td{border-bottom:0!important}
.table tbody tr:hover td{background:#fbfaf7!important}
.systjem-table-scroll,.audit-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--sj-line);border-radius:12px;background:#fff}
.systjem-table-scroll>.table,.audit-table-wrap>.table{min-width:760px;margin:0}

/* Leerlingen */
.student-grid{gap:15px!important}
.student-card{padding:18px!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.student-card:hover{transform:translateY(-2px);border-color:#c6ccc1!important;box-shadow:0 15px 32px rgba(35,39,32,.08)!important}
.student-head strong{font-size:17px!important}
.student-panel{background:#fffefa!important;border-color:var(--sj-line)!important}
.modern-postit{background:#fff7cf!important;border-color:#e6d38f!important}
.modern-postit-textarea{background:#fffdf3!important}

/* Lesmateriaal en Lesboek */
.material-header{border-radius:15px!important;background:#f5f1e7!important}
.material-tabs{border-bottom:1px solid var(--sj-line)}
.material-tabs a{border-radius:8px 8px 0 0!important}
.material-tabs a.active{background:#eef3ea!important;color:#334e36!important}
.lessonbook-shell{background:transparent!important}
.lessonbook-folder,.lessonbook-card{border-radius:14px!important;box-shadow:0 9px 24px rgba(35,39,32,.065)!important;border:1px solid #dfddd5!important}
.lessonbook-folder:hover,.lessonbook-card:hover{transform:translateY(-2px)!important;box-shadow:0 15px 30px rgba(35,39,32,.09)!important}
.lessonbook-card.active{border-color:#6f886f!important;box-shadow:0 0 0 3px rgba(80,108,82,.12)!important}
.lessonbook-card-thumb{background:linear-gradient(145deg,#e5e5df,#fafaf7)!important}
.lessonbook-toolbar button.active,.preview-done-button{background:var(--sj-green)!important}
.lessonbook-stage{background:#858b83!important}

/* Communicatie */
.communication-grid{gap:15px!important}
.communication-link-card{border-radius:15px!important}
.communication-link-card:hover{transform:translateY(-2px)!important}
.communication-tabs{background:#eeece5!important;border-radius:11px!important}
.communication-tabs a.active{color:#36543a!important}
.not-linked{background:#f3ead8!important;color:#785c31!important}
.linked{background:#e5efe3!important;color:#315b35!important}

/* Instellingen */
.settings-jumpnav{gap:10px!important}
.settings-jumpnav a{border-radius:12px!important;background:#faf8f3!important}
.settings-jumpnav a:hover{border-color:#c8cec2!important;box-shadow:0 10px 22px rgba(35,39,32,.065)!important}
.settings-hero{border-radius:12px!important}
.connection-card{padding:19px!important}
.branding-preview{max-height:100px!important;object-fit:contain!important;background:#f5f5f0!important;border-radius:12px!important}

/* Koppelingencontrole */
.link-audit-card .module-heading{align-items:center!important}
.audit-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.audit-summary span{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid var(--sj-line);border-radius:11px;background:#faf9f5;color:var(--sj-muted)}
.audit-summary strong{font-size:23px;color:var(--sj-ink)}
.audit-summary .audit-ok{background:#edf5eb;border-color:#d0e2cc}
.audit-summary .audit-warning{background:#fff7df;border-color:#ead9a4}
.audit-summary .audit-error{background:#fff0ee;border-color:#e8c5c0}
.audit-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:850}
.audit-badge.audit-ok{background:#e4f1e2;color:#315c34}
.audit-badge.audit-warning{background:#fff1c9;color:#71571d}
.audit-badge.audit-error{background:#f9ddda;color:#8b302c}
.audit-table ul{margin:0;padding-left:18px}
.audit-table code{font-size:11px}

/* Meldingen */
.notice,.autosave{border-radius:12px!important;box-shadow:none!important}
.notice{background:#edf4ea!important;border-color:#d2e1ce!important;color:#344d37!important}
.autosave{background:#f1f3ee!important;border-color:#dde1d8!important;color:#545c52!important;padding:10px 12px!important}
.autosave span{border-color:#e0e3dc!important}
.badge{border-radius:999px!important}

/* Openbare boekingspagina */
.booking-brand-hero{background:linear-gradient(135deg,#20251f 0%,#2f392f 100%)!important}
.booking-brand-hero .hero-inner{max-width:1320px!important}
.booking-logo-pair .company-logo{object-fit:contain!important;background:transparent!important;border:0!important}
.booking-brand-hero h1{letter-spacing:-.025em!important}
.booking-brand-hero p{color:#f0ede4!important;line-height:1.55!important}
.booking-calendar,.booking-form-card{background:#fffefa!important}
.booking-step>span{background:var(--sj-green)!important}
.booking-page .day{min-height:130px!important}
.booking-page .slot:not(.busy){background:#edf3e9!important;color:#2f5135!important;border-color:#cfddca!important}
.booking-page .slot:not(.busy):hover,.booking-page .slot.active{background:#506f54!important;color:#fff!important}
.booking-submit{box-shadow:0 8px 18px rgba(62,91,67,.18)!important}

/* Prestatievriendelijk renderen van lange, niet-zichtbare lijsten */
.student-card,.lessonbook-folder,.lessonbook-card,.communication-card,.admin-slot-month{content-visibility:auto;contain-intrinsic-size:250px}
img{image-rendering:auto}

/* Tablet */
@media(max-width:1100px){
  .card{padding:19px!important}
  .audit-summary{grid-template-columns:1fr 1fr}
  .day{min-height:132px!important}
}

/* iPhone/iPad */
@media(max-width:900px){
  body{font-size:15px}
  .card{padding:16px!important;border-radius:14px!important}
  .module-heading,.material-header,.lessonbook-head{gap:12px!important}
  .module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2{font-size:28px!important}
  .session-topbar{padding-top:max(9px,env(safe-area-inset-top))!important}
  .session-identity{gap:10px!important}
  .session-identity span:first-child{display:none!important}
  .session-logout{min-height:42px!important}
  .btn,.primary,button,input,select{min-height:46px}
  textarea{font-size:16px!important}
  .day{min-height:112px!important}
  .event,.slot{font-size:12px!important;padding:6px!important}
  .settings-jumpnav{grid-template-columns:1fr 1fr!important}
  .audit-summary{grid-template-columns:1fr 1fr}
  .link-audit-card .module-heading{align-items:stretch!important}
  .link-audit-card .module-heading .btn{width:100%}
  .booking-brand-hero .hero-inner{align-items:flex-start!important}
  .booking-page .day{min-height:112px!important}
}
@media(max-width:620px){
  .wrap,.admin-wrap{padding-left:12px!important;padding-right:12px!important}
  .card{padding:14px!important}
  .settings-jumpnav,.audit-summary{grid-template-columns:1fr!important}
  .student-card-actions{grid-template-columns:1fr!important}
  .booking-logo-pair{gap:8px!important}
  .booking-logo-pair .logo{width:48px!important;height:48px!important;min-width:48px!important;max-width:48px!important}
  .booking-brand-hero h1{font-size:23px!important}
  .booking-brand-hero p{font-size:14px!important}
  .booking-page .weekdays,.booking-page .week{min-width:710px}
  .booking-calendar{overflow-x:auto!important}
}

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

/* Afdrukken */
@media print{
  .session-topbar,.admin-hero,.adminnav,#sidebarToggle,.mobile-nav-toggle,.autosave{display:none!important}
  .admin-wrap{margin:0!important;padding:0!important}
  .card{box-shadow:none!important;border:1px solid #bbb!important;break-inside:avoid}
}

/* ==========================================================
   SYSTJEM 11.2.3 — brede UI- en mobiele afwerking
   De eigen bosgroene / warme SYSTJEM-stijl blijft behouden.
   ========================================================== */

/* Typografie en ritme */
body{line-height:1.48}
h1,h2,h3,h4{text-wrap:balance}
p{max-width:76ch}
main.admin-wrap{min-width:0}
.module-heading,.material-header,.lessonbook-head,.settings-title,.communication-heading,.planner-header,.page-head{
  min-width:0;
}
.module-heading>div,.material-header>div,.lessonbook-head>div,.settings-title>div,.communication-heading>div,.planner-header>div,.page-head>div{
  min-width:0;
}
.module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2,.communication-heading h2,.planner-header h2,.page-head h2{
  line-height:1.08!important;
}

/* Consistente oppervlakken */
.settings-section,.platform-card,.user-row,.goal-card,.game-card,.communication-link-card,.planner-shell,.planner-sidebar,.private-calendar-settings,.lessonbook-panel,.lessonbook-editor{
  border-color:var(--sj-line)!important;
  border-radius:var(--sj-radius)!important;
}
.setting-card,.connection-card,.communication-card,.game-card,.goal-card,.platform-card{
  overflow:hidden;
}
.setting-card>h3,.connection-card>h3,.communication-card>h3,.game-card>h3,.goal-card>h3{margin-top:0}
hr{border:0;border-top:1px solid var(--sj-line)}
code{overflow-wrap:anywhere}

/* Bovenbalk: pijltje maakt werkelijk deel uit van de balk */
.session-topbar{justify-content:flex-end!important}
.session-topbar #sidebarToggle{order:-2!important}
.session-topbar .session-identity{order:0!important}
.session-topbar .session-actions{order:1!important}
.session-actions{display:flex;align-items:center;gap:8px;min-width:0}
.session-actions .session-logout{display:inline-flex;align-items:center;justify-content:center}
#sidebarToggle .open-icon,#sidebarToggle .close-icon{font-size:21px;line-height:1}
body.sidebar-collapsed #sidebarToggle .open-icon{display:inline!important}
body.sidebar-collapsed #sidebarToggle .close-icon{display:none!important}
body:not(.sidebar-collapsed) #sidebarToggle .open-icon{display:none!important}
body:not(.sidebar-collapsed) #sidebarToggle .close-icon{display:inline!important}

/* Soepeler openen en sluiten zonder layoutschok */
@media(min-width:901px){
  body.admin-sidebar-on .admin-hero,
  body.admin-sidebar-on .adminnav,
  body.admin-sidebar-on .admin-wrap,
  body.admin-sidebar-on .session-topbar{
    transition:width .28s cubic-bezier(.22,.8,.24,1),left .28s cubic-bezier(.22,.8,.24,1),margin-left .28s cubic-bezier(.22,.8,.24,1),transform .28s cubic-bezier(.22,.8,.24,1),opacity .2s ease,padding .28s ease!important;
    will-change:transform,left,width,margin-left;
  }
  body.sidebar-collapsed .admin-hero,
  body.sidebar-collapsed .adminnav{visibility:hidden;transition-delay:0s,.22s!important}
  body:not(.sidebar-collapsed) .admin-hero,
  body:not(.sidebar-collapsed) .adminnav{visibility:visible}
}

/* Navigatie: actieve pagina duidelijk maar niet als zware balk */
body.admin-sidebar-on .adminnav .btn.green,
body.admin-sidebar-on .adminnav .primary{
  position:relative!important;
  background:transparent!important;
  color:#f0d9a5!important;
  border-color:transparent!important;
}
body.admin-sidebar-on .adminnav .btn.green::after,
body.admin-sidebar-on .adminnav .primary::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:3px!important;
  height:24px!important;
  transform:translateY(-50%)!important;
  border-radius:99px!important;
  background:#d4b473!important;
}
body.admin-sidebar-on .adminnav .btn.green::before{display:none!important}

/* Tabs en subnavigatie */
.material-tabs,.communication-tabs,.section-nav,.period-tabs,.goal-tabs-v3,.goal-mode-tabs,.view-switch,.tabs{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.material-tabs::-webkit-scrollbar,.communication-tabs::-webkit-scrollbar,.section-nav::-webkit-scrollbar,.period-tabs::-webkit-scrollbar,.goal-tabs-v3::-webkit-scrollbar,.goal-mode-tabs::-webkit-scrollbar,.view-switch::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.material-tabs a,.communication-tabs a,.section-nav a,.period-tabs a,.goal-tabs-v3 a,.goal-mode-tabs a,.view-switch a,.tabs a{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.material-tabs a.active,.communication-tabs a.active,.section-nav a.active,.period-tabs a.active,.goal-tabs-v3 a.active,.goal-mode-tabs a.active,.view-switch a.active{
  color:var(--sj-green-dark)!important;
}

/* Formulieren en actieblokken */
.actions,.inline-fields,.template-actions,.song-actions,.postit-footer,.student-card-actions,.calendar-provider-buttons,.toolbar-actions,.quick-actions{
  min-width:0;
}
form{min-width:0}
input[type="date"],input[type="time"],input[type="datetime-local"]{appearance:auto;min-width:0}
input[type="checkbox"],input[type="radio"]{width:20px!important;height:20px!important;min-height:20px!important;accent-color:var(--sj-green)}
.check-line{display:flex!important;align-items:flex-start!important;gap:10px!important;line-height:1.4}
.check-line input{flex:0 0 auto;margin-top:1px}
summary{cursor:pointer;min-height:42px;display:flex;align-items:center}
details[open]>summary{margin-bottom:10px}

/* Dashboard */
.today-dashboard,.dashboard-grid{align-items:stretch}
.today-dashboard article,.dashboard-grid article{min-width:0}
.today-dashboard article h3,.dashboard-grid article h3{margin-top:0}
.admin-dashboard-title p{max-width:64ch}

/* Agenda */
.calendar-card{isolation:isolate}
.calendar-card .weekdays{position:sticky;top:0;z-index:3}
.calendar-card .event{letter-spacing:0!important}
.calendar-card .event.confirmed{background:#365b42!important;color:#fff!important}
.calendar-card .event.confirmed:hover{background:#294b34!important}
.calendar-card .event.new,.calendar-card .event.awaiting_payment{background:#8d5929!important;color:#fff!important}
.calendar-card .event.external{background:#355c70!important;color:#fff!important}
.calendar-card .event.reserved{background:#604b79!important;color:#fff!important}
.calendar-card .event.cancelled{background:#8a3f3f!important;color:#fff!important}
.calendar-card .event:focus-visible{outline:3px solid #e7cd94!important;outline-offset:1px!important}
.calendar-period h2{min-width:0;overflow-wrap:anywhere}
.view-switch{flex:0 0 auto}

/* Leerlingen */
.student-head{align-items:flex-start}
.student-head>div{min-width:0}
.student-head strong,.student-card p,.student-card .small{overflow-wrap:anywhere}
.kebab .menu{max-width:min(290px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto}
.student-panel{min-width:0}
.student-info-grid>*{min-width:0}
.modern-postit-textarea{min-height:180px!important}

/* Lesmateriaal */
.material-header{align-items:center!important}
.lesson-card-grid,.lesson-grid,.materials-grid{gap:14px!important}
.lesson-card,.material-card{min-width:0;overflow:hidden}
.lesson-card img,.material-card img{object-fit:cover}
.thumbnail-editor canvas{max-width:100%;height:auto}
.lesson-distribution{min-width:0}
.distribution-chart{scrollbar-width:thin;scrollbar-color:#b9b5aa transparent}

/* Lesboek — centrale bibliotheek, bruikbaar op touch */
.lessonbook-folder-grid,.lessonbook-material-grid{gap:14px!important}
.lessonbook-folder,.lessonbook-card{min-width:0;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important}
.lessonbook-card button,.lessonbook-folder button,.lessonbook-card a,.lessonbook-folder a{min-height:44px}
.lessonbook-toolbar{gap:8px!important;min-width:0}
.lessonbook-toolbar .actions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.lessonbook-toolbar .actions::-webkit-scrollbar{display:none}
.lessonbook-toolbar .actions>*{flex:0 0 auto}
.lessonbook-stage{border-radius:14px!important;overflow:auto!important;overscroll-behavior:contain}
.lessonbook-stage iframe,.lessonbook-stage canvas,.lessonbook-stage img{max-width:100%}
.lessonbook-editor{min-width:0}

/* Lesmaker */
.lessonmaker-shell,.lessonmaker-frame{min-width:0!important}
.lessonmaker-frame{display:block;width:100%!important;border-radius:14px!important;border:1px solid var(--sj-line)!important;background:#fff!important}
.lessonmaker-settings-frame{max-width:100%;border-radius:14px!important}

/* Doelen */
.goals-v3,.combined-goals-grid,.goal-grid{gap:14px!important}
.goal-card{min-width:0}
.goal-card .actions{align-items:center}
.goal-action-menu,.goal-menu{max-height:min(72vh,560px);overflow:auto}

/* Spelletjes */
.games-admin-grid{align-items:stretch}
.game-card{min-width:0}
.game-card iframe{display:block;width:100%;max-width:100%;border:0;border-radius:12px;aspect-ratio:16/10}
.game-card img{max-width:100%;height:auto}

/* Communicatie */
.communication-grid{align-items:stretch}
.communication-link-card,.communication-card{min-width:0}
.communication-link-card a,.communication-link-card button{min-height:44px}
.communication-tabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
.communication-tabs a{flex:0 0 auto;white-space:nowrap}
.communication-settings-card{min-width:0}
.communication-settings-card form,.communication-card form{min-width:0}

/* Statistiek en financieel */
.stat,.financial-grid,.statistics-grid{align-items:stretch}
.stat .box,.financial-grid>*,.statistics-grid>*{min-width:0}
.bar{min-width:0}
.distribution-chart{max-width:100%}

/* Instellingen */
.settings-main{min-width:0}
.settings-jumpnav{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.settings-jumpnav a{min-width:0}
.settings-jumpnav strong,.settings-jumpnav small{display:block;overflow-wrap:anywhere}
.calendar-connections{align-items:stretch}
.connection-stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;gap:8px!important}
.connection-stats span{min-width:0}
.copy-field{display:flex;gap:8px;align-items:stretch}
.copy-field input{min-width:0}
.availability-week{min-width:0}
.branding-upload{min-width:0}
.branding-preview{width:auto!important;max-width:180px!important}
.lessonmaker-settings-frame{height:min(760px,75vh)!important}
.audit-summary{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
.audit-missing-details{margin:12px 0;padding:0 12px;border:1px solid var(--sj-line);border-radius:10px;background:#faf9f5}
.audit-missing-details ul{padding-left:20px}

/* Platformbeheer en slageromgeving */
.platform-grid,.butcher-dashboard-grid{gap:14px!important}
.platform-card,.butcher-dashboard-grid>*{min-width:0}
.user-row{gap:12px;align-items:center}

/* Openbare boekingspagina */
.booking-logo-pair{align-items:center!important}
.booking-logo-pair .company-logo{width:74px!important;height:74px!important;max-width:74px!important;max-height:74px!important;object-fit:contain!important;object-position:center!important;padding:0!important}
.booking-logo-pair .system-logo{object-fit:contain!important}
.booking-brand-hero .hero-inner>div:last-child{min-width:0}
.booking-brand-hero h1{overflow-wrap:anywhere}
.booking-page{align-items:start}
.booking-calendar,.booking-form-card{min-width:0}
.booking-form-card{position:sticky;top:18px}
.booking-page input,.booking-page select,.booking-page textarea{font-size:16px!important}

/* Terug-naar-bovenknop voor lange mobiele pagina's */
.systjem-back-to-top{
  position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:75;
  width:46px;height:46px;min-height:46px!important;padding:0!important;border-radius:50%!important;
  display:grid;place-items:center;background:#293128!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 12px 28px rgba(27,31,26,.2)!important;opacity:0;pointer-events:none;transform:translateY(8px)!important;
}
.systjem-back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)!important}

/* Tabletbreedte */
@media(max-width:1100px){
  .module-heading,.material-header,.lessonbook-head,.communication-heading,.planner-header,.page-head{flex-wrap:wrap}
  .calendar-connections,.communication-grid,.financial-grid,.statistics-grid{grid-template-columns:1fr 1fr!important}
  .lessonbook-folder-grid,.lessonbook-material-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .games-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Alle tabs op iPhone en smalle iPad */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-nav-open{touch-action:none}
  .admin-wrap{width:100%!important;max-width:100%!important;margin:0!important}
  .module-heading,.material-header,.lessonbook-head,.settings-title,.communication-heading,.planner-header,.page-head,.calhead,.calendar-toolbar{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;
  }
  .module-heading .actions,.material-header .actions,.lessonbook-head .actions,.communication-heading .actions,.planner-header .actions,.page-head .actions{
    display:grid!important;grid-template-columns:1fr!important;width:100%!important;
  }
  .module-heading .actions>.btn,.material-header .actions>.btn,.lessonbook-head .actions>.btn,.communication-heading .actions>.btn,.planner-header .actions>.btn,.page-head .actions>.btn{
    width:100%!important;
  }
  .two,.three,.layout,.settings-grid,.calendar-connections,.communication-grid,.dashboard-grid,.today-dashboard,.financial-grid,.statistics-grid,.planner-shell,.combined-goals-grid,.platform-grid,.butcher-dashboard-grid,.thumb-editor-grid{
    grid-template-columns:1fr!important;
  }
  .student-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .lessonbook-folder-grid,.lessonbook-material-grid,.lesson-card-grid,.materials-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .games-admin-grid{grid-template-columns:1fr!important}
  .material-tabs,.section-nav,.period-tabs,.goal-tabs-v3,.goal-mode-tabs,.view-switch,.tabs{
    display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .material-tabs>a,.section-nav>a,.period-tabs>a,.goal-tabs-v3>a,.goal-mode-tabs>a,.view-switch>a,.tabs>a,.tabs>button{
    flex:0 0 auto!important;scroll-snap-align:start;
  }
  .actions,.inline-fields,.template-actions,.song-actions,.student-card-actions,.postit-footer,.toolbar-actions,.quick-actions{
    gap:8px!important;
  }
  .systjem-table-scroll,.audit-table-wrap{border-radius:10px}
  .table th,.table td{padding:10px 9px!important}
  .calendar-card{margin-left:0!important;margin-right:0!important;border-radius:13px!important;padding:12px!important}
  .calendar-card .weekdays,.calendar-card .week{min-width:820px!important}
  .calendar-card.calendar-span-two .day{min-height:160px!important}
  .calendar-card.calendar-span-week .day{min-height:190px!important}
  .calendar-toolbar .view-switch{align-self:flex-start;max-width:100%}
  .calendar-period{width:100%;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center!important}
  .calendar-period h2{text-align:center!important;font-size:22px!important;margin:0!important}
  .lessonbook-toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .lessonbook-stage{min-height:58vh!important}
  .lessonmaker-frame{height:max(760px,78vh)!important}
  .communication-settings-card form,.communication-card form{display:grid!important;grid-template-columns:1fr!important}
  .copy-field{flex-direction:column}
  .copy-field .btn{width:100%}
  .availability-day,.availability-row{min-width:0}
  .availability-row .actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .user-row{flex-direction:column!important;align-items:stretch!important}
  .user-row .actions{display:grid!important;grid-template-columns:1fr!important}
  .booking-page{grid-template-columns:1fr!important}
  .booking-form-card{position:static!important}
  .booking-brand-hero .hero-inner{padding:22px 16px!important}
}

@media(max-width:620px){
  body{font-size:15px}
  .module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2,.communication-heading h2,.planner-header h2,.page-head h2{font-size:25px!important}
  .session-topbar{min-height:58px!important;padding:8px 10px!important;padding-top:max(8px,env(safe-area-inset-top))!important}
  .session-topbar .session-identity span:last-child{display:none!important}
  .session-actions{gap:6px!important}
  .session-actions .session-logout{font-size:12px!important;padding:8px 9px!important}
  .student-grid,.lessonbook-folder-grid,.lessonbook-material-grid,.lesson-card-grid,.materials-grid{grid-template-columns:1fr!important}
  .actions,.inline-fields,.template-actions,.song-actions,.student-card-actions,.postit-footer,.toolbar-actions,.quick-actions{
    display:grid!important;grid-template-columns:1fr!important;width:100%!important;
  }
  .actions>.btn,.actions>button,.inline-fields>.btn,.inline-fields>button,.template-actions>.btn,.song-actions>.btn,.student-card-actions>.btn,.postit-footer>.btn,.toolbar-actions>.btn,.quick-actions>.btn{
    width:100%!important;
  }
  input,select,textarea{font-size:16px!important;width:100%!important;max-width:100%!important}
  .calendar-card .weekdays,.calendar-card .week{min-width:760px!important}
  .calendar-card.calendar-span-two .day,.calendar-card.calendar-span-week .day{min-height:150px!important}
  .lessonbook-stage{min-height:64vh!important;border-radius:10px!important}
  .lessonmaker-frame{height:82vh!important;border-radius:10px!important}
  .settings-jumpnav{grid-template-columns:1fr!important}
  .booking-logo-pair .company-logo,.booking-logo-pair .system-logo{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important}
  .booking-brand-hero h1{font-size:27px!important}
  .booking-brand-hero p{font-size:15px!important}
  dialog,.modal{width:calc(100vw - 20px)!important;max-height:calc(100vh - 20px)!important;overflow:auto!important;margin:10px!important}
}

/* Mobiele bruikbaarheid consequent op alle muziekleraar-tabs */
@media(max-width:900px){
  .dashboard-grid,.student-dashboard-grid,.student-info-grid,.lesson-card-grid,
  .lessonbook-folder-grid,.lessonbook-material-grid,.combined-goals-grid,
  .goals-v3-stats,.emil-games-grid,.games-admin-grid,.communication-grid,
  .settings-grid,.calendar-connections,.platform-grid,.stat,
  .admin-slot-calendars,.butcher-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .module-heading,.students-hero,.material-header,.lessonbook-head,.communication-heading,
  .goals-v3-head,.game-admin-head,.calhead,.calendar-toolbar{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .module-heading>.actions,.students-primary-action,.material-header>.actions,
  .lessonbook-head>.actions,.communication-heading>.actions,.game-admin-head>.actions{
    width:100%!important;
  }
  .module-heading>.actions .btn,.students-primary-action .btn,.material-header>.actions .btn,
  .communication-heading>.actions .btn,.game-admin-head>.actions .btn{
    flex:1 1 160px!important;
  }
  .tabs,.material-tabs,.library-v2-tabs,.goal-mode-tabs,.goals-filter-v3,
  .students-status-tabs,.communication-tabs,.section-nav{
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap!important;
  }
  .tabs::-webkit-scrollbar,.material-tabs::-webkit-scrollbar,.library-v2-tabs::-webkit-scrollbar,
  .goal-mode-tabs::-webkit-scrollbar,.goals-filter-v3::-webkit-scrollbar,
  .students-status-tabs::-webkit-scrollbar,.communication-tabs::-webkit-scrollbar,
  .section-nav::-webkit-scrollbar{display:none!important}
  .tabs>* ,.material-tabs>* ,.library-v2-tabs>* ,.goal-mode-tabs>* ,
  .goals-filter-v3>* ,.students-status-tabs>* ,.communication-tabs>* ,.section-nav>*{
    flex:0 0 auto!important;white-space:nowrap!important
  }
  .lessonmaker-frame,.lessonmaker-settings-frame,.emil-game-frame{
    width:100%!important;min-height:70vh!important;border-radius:12px!important
  }
  .lessonbook-toolbar,.library-v2-toolbar,.quick-actions,.communication-quick-actions,
  .student-card-actions,.student-goal-actions,.approval-actions,.postit-actions{
    display:flex!important;flex-wrap:wrap!important;gap:8px!important
  }
  .lessonbook-toolbar button,.library-v2-toolbar .btn,.quick-actions .btn,
  .communication-quick-actions .btn,.student-card-actions .btn,.student-goal-actions .btn{
    flex:1 1 145px!important
  }
  .modal,dialog,.lesson-edit-panel,.student-add-panel{
    max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;overscroll-behavior:contain
  }
  .calendar-card,.planner-calendar-panel,.booking-calendar{
    max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch
  }
  .goal-edit-grid,.communication-form,.availability-week,.private-calendar-settings{
    min-width:0!important
  }
}
@media(max-width:620px){
  .dashboard-grid,.student-dashboard-grid,.student-info-grid,.lesson-card-grid,
  .lessonbook-folder-grid,.lessonbook-material-grid,.combined-goals-grid,
  .goals-v3-stats,.emil-games-grid,.games-admin-grid,.communication-grid,
  .settings-grid,.calendar-connections,.platform-grid,.stat,
  .admin-slot-calendars,.butcher-dashboard-grid{
    grid-template-columns:1fr!important
  }
  .student-grid{grid-template-columns:1fr!important}
  .student-card,.lesson-card,.lessonbook-folder,.lessonbook-card,.communication-card,
  .game-admin-card,.setting-card,.connection-card{min-width:0!important}
  .two,.goal-edit-grid,.song-grid,.calendar-provider-buttons,.connection-stats{
    grid-template-columns:1fr!important
  }
  .actions,.session-actions{gap:6px!important}
  .actions>.btn,.actions>button,.actions>form,.session-actions>*{
    flex:1 1 auto!important
  }
  .table td,.table th{padding:10px!important}
  .module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2{
    font-size:25px!important
  }
}