/*
 * SYSTJEM 11.21.0
 * Sprint 19: iPhone-shell en navigatie
 * Sprint 20: formulieren, tabellen en bediening
 * Sprint 21: agenda, leerlingdossier, lesmateriaal, lesboek en instellingen
 */

:root{
  --systjem-mobile-gutter:14px;
  --systjem-mobile-radius:16px;
  --systjem-mobile-header:64px;
  --systjem-mobile-bg:#f3f2ed;
  --systjem-mobile-card:#fff;
  --systjem-mobile-ink:#20251f;
  --systjem-mobile-muted:#6f766d;
  --systjem-mobile-line:#dedfd8;
  --systjem-mobile-green:#213d2d;
  --systjem-mobile-gold:#c8a86b;
}

/* Zorg dat verborgen ankers niet achter de vaste iPhone-header verdwijnen. */
[id]{scroll-margin-top:calc(var(--systjem-mobile-header) + 18px)}

@media (max-width:900px){
  html{
    min-width:0!important;
    width:100%!important;
    overflow-x:hidden!important;
    background:var(--systjem-mobile-bg)!important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:var(--systjem-mobile-bg)!important;
    color:var(--systjem-mobile-ink)!important;
    overscroll-behavior-y:auto;
  }
  body.mobile-nav-open{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas,iframe{max-width:100%}

  /* Sprint 19 — compacte, veilige iPhone-header. */
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-hero{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    z-index:500!important;
    width:100%!important;
    min-height:calc(var(--systjem-mobile-header) + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 0 0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    border-radius:0!important;
    background:linear-gradient(145deg,#1b2b21,#25382b)!important;
    box-shadow:0 8px 26px rgba(21,29,23,.18)!important;
    transform:none!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-hero-inner{
    width:100%!important;
    min-height:var(--systjem-mobile-header)!important;
    margin:0!important;
    padding:8px 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100% - 54px)!important;
    gap:9px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-logo-pair{
    display:grid!important;
    grid-template-columns:34px 34px!important;
    gap:5px!important;
    width:73px!important;
    min-width:73px!important;
    max-width:73px!important;
    flex:0 0 73px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-logo-pair .brand-logo{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    border-radius:9px!important;
    object-fit:contain!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-copy{
    display:block!important;
    min-width:0!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-copy strong{
    display:block!important;
    font-size:15px!important;
    line-height:1.05!important;
    letter-spacing:.015em!important;
    color:#fff!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-copy small{
    display:block!important;
    max-width:44vw!important;
    margin-top:3px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
    line-height:1.1!important;
    letter-spacing:.10em!important;
    color:#d1b67e!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .mobile-nav-toggle{
    display:grid!important;
    place-content:center!important;
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:10px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.08)!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .mobile-nav-toggle:active{
    background:rgba(255,255,255,.16)!important;
    transform:scale(.97)!important;
  }

  /* Volwaardige navigatielade met accountacties die op mobiel vroeger verborgen waren. */
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav{
    position:fixed!important;
    z-index:700!important;
    inset:0 auto 0 0!important;
    width:min(90vw,368px)!important;
    max-width:368px!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:calc(18px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    border:0!important;
    border-radius:0 22px 22px 0!important;
    background:linear-gradient(180deg,#17251c 0%,#223126 100%)!important;
    box-shadow:24px 0 70px rgba(8,14,10,.38)!important;
    transform:translate3d(-105%,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    transition:transform .26s cubic-bezier(.22,.8,.24,1)!important;
  }
  body.mobile-nav-open > #primaryAdminNav{transform:translate3d(0,0,0)!important}
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav::before{
    content:"Menu";
    display:block;
    padding:5px 8px 8px;
    color:#d7bd86;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav .nav-main{
    display:flex!important;
    flex:1 0 auto!important;
    flex-direction:column!important;
    gap:3px!important;
    min-height:auto!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav .nav-main>a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:48px!important;
    padding:11px 13px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#e8ebe5!important;
    box-shadow:none!important;
    font-size:15px!important;
    font-weight:760!important;
    line-height:1.25!important;
    text-align:left!important;
    text-decoration:none!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav .nav-main>a.green,
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav .nav-main>a.primary{
    background:rgba(215,189,134,.13)!important;
    color:#f1d9a6!important;
    box-shadow:inset 3px 0 0 #d7bd86!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav .nav-main>a:active{
    background:rgba(255,255,255,.10)!important;
  }
  .systjem-mobile-account{
    display:grid;
    gap:10px;
    margin-top:auto;
    padding:13px 8px 2px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .systjem-mobile-account-copy{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .systjem-mobile-account-copy span{
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.05);
  }
  .systjem-mobile-account-copy small,
  .systjem-mobile-account-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .systjem-mobile-account-copy small{
    margin-bottom:3px;
    color:#aeb7ae;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .systjem-mobile-account-copy strong{color:#fff;font-size:12px}
  .systjem-mobile-account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .systjem-mobile-account-actions a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:46px!important;
    padding:10px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    text-decoration:none!important;
  }
  .mobile-nav-overlay{
    z-index:650!important;
    background:rgba(9,14,10,.48)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }

  /* De inhoud gebruikt de volledige iPhone-breedte, zonder verborgen horizontale overflow. */
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-wrap,
  body.admin-sidebar-on:not(.butcher-original-layout).sidebar-collapsed .admin-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:16px var(--systjem-mobile-gutter) calc(32px + env(safe-area-inset-bottom))!important;
  }
  .admin-wrap>*,.wrap>*{min-width:0;max-width:100%}
  .module-heading,.settings-title,.lessonbook-head,.student-page-head,.goals-v3-head,.calhead,.calendar-toolbar{
    min-width:0!important;
  }
  .module-heading h1,.module-heading h2,.settings-title h2,.lessonbook-head h2{
    overflow-wrap:anywhere;
    text-wrap:balance;
  }

  /* Sprint 20 — alle bediening is met één duim bruikbaar. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:48px!important;
    margin:0!important;
    padding:12px 13px!important;
    border-radius:11px!important;
    font-size:16px!important; /* voorkomt Safari-zoom */
    line-height:1.35!important;
  }
  textarea{min-height:122px!important;resize:vertical}
  input[type=date],input[type=time],input[type=datetime-local],select{
    -webkit-appearance:none;
    appearance:none;
    background-color:#fff!important;
  }
  input[type=checkbox],input[type=radio]{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    flex:0 0 22px!important;
    margin:0!important;
  }
  label{line-height:1.4!important}
  .check-line,.toggle-line{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    min-height:46px!important;
    padding:10px 11px!important;
    border-radius:11px!important;
  }
  button,.btn,.primary,.section-nav a,.goal-mode-tabs a,.goal-tabs-v3 a{
    min-height:46px!important;
    max-width:100%;
    padding:11px 14px!important;
    border-radius:11px!important;
    font-size:15px!important;
    line-height:1.25!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  button:active,.btn:active,.primary:active{transform:scale(.985)}
  form,.two,.three,.layout,.settings-grid,.student-info-grid,.student-dashboard-grid,.combined-goals-grid,
  .calendar-connections,.private-calendar-row,.override-form,.dexxter-export-form,.student-goal-context,
  .student-goal-custom-grid,.accounting-summary,.backup-layout,.backup-summary{
    min-width:0!important;
  }
  .two,.three,.layout,.settings-grid,.student-info-grid,.student-dashboard-grid,.combined-goals-grid,
  .calendar-connections,.private-calendar-row,.override-form,.dexxter-export-form,.student-goal-context,
  .student-goal-custom-grid,.backup-layout,.backup-summary{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .actions,.dexxter-export-actions,.communication-quick-actions,.privacy-actions,.calendar-provider-buttons,
  .accounting-period-shortcuts,.lessonbook-head .actions,.settings-main .actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    width:100%!important;
  }
  .actions>*:not(input):not(select):not(textarea),
  .dexxter-export-actions>*,.communication-quick-actions>*,.privacy-actions>*,
  .accounting-period-shortcuts>*{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .actions form{width:100%!important;display:grid!important;gap:8px!important}
  .actions form button{width:100%!important}

  .card,.student-card,.student-panel,.setting-card,.connection-card,.private-calendar-settings,
  .communication-card,.backup-card,.accounting-card,.goals-v3,.lessonbook-shell{
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:16px!important;
    border-radius:var(--systjem-mobile-radius)!important;
    box-shadow:0 7px 22px rgba(25,32,27,.055)!important;
  }
  .card+.card,.setting-card+.setting-card,.student-panel+.student-panel{margin-top:13px!important}
  details{
    max-width:100%!important;
    border-radius:13px!important;
  }
  details>summary{
    min-height:48px!important;
    padding:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    cursor:pointer;
    touch-action:manipulation;
  }
  details[open]>summary{margin-bottom:8px!important}

  /* Horizontale tabbladen blijven één regel en tonen waar je kan vegen. */
  .section-nav,.communication-tabs,.goal-tabs-v3,.goal-mode-tabs,.view-switch,.settings-jumpnav{
    display:flex!important;
    width:calc(100% + (var(--systjem-mobile-gutter) * 2))!important;
    max-width:none!important;
    margin-left:calc(var(--systjem-mobile-gutter) * -1)!important;
    margin-right:calc(var(--systjem-mobile-gutter) * -1)!important;
    padding:7px var(--systjem-mobile-gutter)!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .section-nav::-webkit-scrollbar,.communication-tabs::-webkit-scrollbar,.goal-tabs-v3::-webkit-scrollbar,
  .goal-mode-tabs::-webkit-scrollbar,.view-switch::-webkit-scrollbar,.settings-jumpnav::-webkit-scrollbar{display:none}
  .section-nav a,.communication-tabs a,.goal-tabs-v3 a,.goal-mode-tabs a,.view-switch a,.settings-jumpnav a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    min-height:44px!important;
    scroll-snap-align:start;
    white-space:nowrap!important;
  }
  .settings-jumpnav a{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:185px!important;
    padding:10px 13px!important;
  }
  .settings-jumpnav a small{white-space:normal!important}

  /* Tabellen worden leesbare kaarten in plaats van miniatuurkolommen. JS vult data-label in. */
  table.systjem-mobile-card-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  table.systjem-mobile-card-table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  table.systjem-mobile-card-table tbody,
  table.systjem-mobile-card-table tr,
  table.systjem-mobile-card-table td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  table.systjem-mobile-card-table tbody{display:grid!important;gap:12px!important}
  table.systjem-mobile-card-table tr.systjem-mobile-generated-head{display:none!important}
  table.systjem-mobile-card-table tr{
    padding:7px 13px!important;
    overflow:hidden!important;
    border:1px solid var(--systjem-mobile-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(25,32,27,.045)!important;
  }
  table.systjem-mobile-card-table td{
    position:relative!important;
    min-height:43px!important;
    padding:10px 0!important;
    border:0!important;
    border-bottom:1px solid #ecece7!important;
    overflow-wrap:anywhere!important;
  }
  table.systjem-mobile-card-table td:last-child{border-bottom:0!important}
  table.systjem-mobile-card-table td:not(.systjem-mobile-full-cell)::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:#777e75;
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  table.systjem-mobile-card-table td.systjem-mobile-full-cell{padding:11px 0!important}
  table.systjem-mobile-card-table td .actions{margin-top:4px!important}
  table.systjem-mobile-card-table .bar{min-width:0!important;width:100%!important}

  /* Tabellen die expliciet niet als kaart kunnen, blijven comfortabel horizontaal veegbaar. */
  .table:not(.systjem-mobile-card-table),.systjem-mobile-scroll-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Dialogen als iOS-achtige bottom sheet, met voldoende ruimte boven het toetsenbord. */
  dialog,.modal,[role=dialog]:not(.calendar-provider-help-card){
    width:calc(100% - 16px)!important;
    max-width:640px!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 12px)!important;
    margin:auto 8px 0!important;
    padding:18px!important;
    overflow:auto!important;
    border-radius:20px 20px 0 0!important;
    overscroll-behavior:contain;
  }
  dialog::backdrop{background:rgba(13,18,14,.48);backdrop-filter:blur(4px)}

  .systjem-mobile-top-button{
    position:fixed;
    z-index:430;
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:46px;
    height:46px;
    min-height:46px!important;
    padding:0!important;
    display:grid;
    place-items:center;
    border:1px solid #cfd5cd;
    border-radius:50%!important;
    background:rgba(255,255,255,.94);
    color:#244331;
    box-shadow:0 8px 26px rgba(26,35,28,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.2s ease;
  }
  .systjem-mobile-top-button.is-visible{opacity:1;visibility:visible;transform:none}

  /* Sprint 21 — dashboard. */
  body.admin-view-overview .dashboard-intro{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:0 2px 8px!important;
  }
  body.admin-view-overview .dashboard-intro h1{
    margin:0!important;
    font-size:clamp(30px,10vw,42px)!important;
    line-height:1!important;
  }
  body.admin-view-overview .dashboard-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
  }
  body.admin-view-overview .dashboard-today .empty-state{
    min-height:0!important;
    margin-top:12px!important;
    padding:18px 14px!important;
  }
  body.admin-view-overview .dashboard-quick-actions a,
  body.admin-view-overview .quick-actions a{
    min-height:54px!important;
  }

  /* Agenda: toolbar blijft leesbaar; de kalender zelf veegt horizontaal in plaats van samen te drukken. */
  .calendar-card,.booking-calendar{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding:14px!important;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .calendar-card .calendar-toolbar,.booking-calendar .calhead{
    position:sticky!important;
    left:0!important;
    z-index:4!important;
    width:calc(100vw - (var(--systjem-mobile-gutter) * 2) - 28px)!important;
    min-width:0!important;
    margin-bottom:12px!important;
    padding:0 0 8px!important;
    background:var(--systjem-mobile-card)!important;
  }
  .calendar-card .calendar-period,.booking-calendar .calhead{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    align-items:center!important;
    gap:8px!important;
  }
  .calendar-card .calendar-period h2,.booking-calendar .calhead h2{
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
    text-align:center!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:20px!important;
  }
  .calendar-card .nav-arrow,.booking-calendar .calhead>a{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
  }
  .calendar-card .view-switch{
    position:sticky!important;
    left:0!important;
    width:calc(100vw - (var(--systjem-mobile-gutter) * 2) - 28px)!important;
    margin:8px 0 0!important;
    padding:0!important;
  }
  .calendar-card .weekdays,.calendar-card .week,
  .booking-calendar .weekdays,.booking-calendar .week{
    min-width:760px!important;
    scroll-snap-align:start;
  }
  .calendar-card .day,.booking-calendar .day{
    min-height:155px!important;
  }
  .calendar-card .event,.booking-calendar .slot{
    min-height:31px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .admin-slot-calendars{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .admin-slot-month{min-width:720px!important}

  /* Afspraken, leerlingen en dossiers. */
  .student-grid,.games-admin-grid,.emil-lessons-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
  }
  .student-card{overflow:hidden!important}
  .student-card h3{font-size:20px!important}
  .student-page-head,.panel-mini-head,.student-goal-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .student-dashboard-grid,.combined-goals-grid{display:grid!important;grid-template-columns:1fr!important}
  .student-goal-row{
    grid-template-columns:30px minmax(0,1fr)!important;
    padding:12px!important;
  }
  .student-goal-actions{grid-column:2!important}
  .student-extras-access .extra-access-grid{grid-template-columns:1fr!important}
  .privacy-status-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .privacy-status-grid span{min-width:0!important;padding:10px!important}

  /* Lesmateriaal: kaarten blijven ruim en titels breken correct af. */
  .material-header,.lesson-material-head,.lessonbook-group-title{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .material-grid,.lesson-grid,.extras-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
  }
  .material-card,.lesson-card,.extra-card{min-width:0!important;overflow:hidden!important}
  .material-card h3,.lesson-card h3,.extra-card h3{overflow-wrap:anywhere!important}
  .thumb-editor-grid{grid-template-columns:1fr!important}

  /* Lesboek: Voorvertoning-achtige editor past werkelijk op iPhone. */
  .lessonbook-shell{padding:14px!important}
  .lessonbook-head{padding-bottom:14px!important;margin-bottom:15px!important}
  .lessonbook-head h2{font-size:30px!important}
  .lessonbook-folder-grid,.lessonbook-material-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .lessonbook-folder-preview,.lessonbook-card-thumb{border-radius:12px!important}
  .lessonbook-folder strong,.lessonbook-card-body strong{font-size:13px!important}
  .lessonbook-folder small,.lessonbook-card-body small{font-size:11px!important}
  .lessonbook-editor{
    width:calc(100% + 8px)!important;
    margin-left:-4px!important;
    border-radius:13px!important;
  }
  .preview-titlebar{
    min-height:44px!important;
    padding:5px 8px!important;
  }
  .preview-window-controls{display:none!important}
  .preview-document-title{
    position:static!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    transform:none!important;
    text-align:left!important;
  }
  .preview-document-title strong,.preview-document-title small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .lessonbook-toolbar{
    position:sticky!important;
    top:calc(var(--systjem-mobile-header) + env(safe-area-inset-top))!important;
    z-index:10!important;
    width:100%!important;
    min-height:52px!important;
    padding:6px 8px!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .lessonbook-toolbar::-webkit-scrollbar{display:none}
  .lessonbook-toolbar button{flex:0 0 auto!important;min-width:46px!important;padding:9px 11px!important}
  .lessonbook-stage{
    height:calc(100dvh - 188px)!important;
    min-height:430px!important;
    max-height:760px!important;
    overscroll-behavior:contain!important;
  }
  .lessonbook-editor.presentation .lessonbook-stage{
    height:calc(100dvh - 58px - env(safe-area-inset-bottom))!important;
  }
  .lessonbook-help{padding:9px!important;font-size:11px!important}

  /* Doelen. */
  .goals-v3{padding:0!important;background:transparent!important;box-shadow:none!important}
  .goals-v3-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .goals-v3-stat{min-width:0!important;padding:11px!important}
  .goals-filter-v3{grid-template-columns:1fr!important;padding:12px!important}
  .goal-group-v3>summary{padding:14px!important;align-items:flex-start!important}
  .goal-progress{width:120px!important;max-width:32vw!important}
  .goal-item-v3{grid-template-columns:28px minmax(0,1fr)!important;padding:12px!important}
  .goal-menu-v3{grid-column:2!important}
  .goal-edit-v3{
    position:fixed!important;
    z-index:900!important;
    inset:auto 8px 0!important;
    width:auto!important;
    max-height:82dvh!important;
    padding:16px!important;
    overflow:auto!important;
    border-radius:20px 20px 0 0!important;
  }
  .goal-bulk-v3{
    left:var(--systjem-mobile-gutter)!important;
    right:var(--systjem-mobile-gutter)!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  /* Communicatie, instellingen, statistiek en back-up. */
  .communication-tabs{margin-bottom:12px!important}
  .communication-setup,.communication-empty{max-width:100%!important}
  .setup-head{display:flex!important;flex-direction:column!important;gap:10px!important}
  .setup-head h3{font-size:25px!important}
  .calendar-action-buttons{display:grid!important;grid-template-columns:1fr!important}
  .calendar-action-button{width:100%!important;min-height:48px!important}
  .settings-main{padding:14px!important}
  .settings-main section[id],.settings-main form[id],.settings-main div[id]{scroll-margin-top:calc(var(--systjem-mobile-header) + 18px)!important}
  .calendar-provider-buttons{grid-template-columns:1fr!important}
  .calendar-provider{min-height:70px!important;padding:13px!important}
  .copy-field{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .connection-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .connection-stats span{min-width:0!important;padding:9px 6px!important;text-align:center!important}
  .connection-stats strong{font-size:18px!important}
  .accounting-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .accounting-summary>div:last-child{grid-column:1/-1!important}
  .admin-storage-footer{margin-top:22px!important}
  .admin-storage-footer .autosave-footer-status{grid-template-columns:1fr!important;padding:11px!important}
  .admin-storage-footer .autosave-footer-status span{white-space:normal!important}

  /* Publieke boekingspagina. */
  .booking-page,.booking-main,.booking-side{min-width:0!important;max-width:100%!important}
  .booking-page{grid-template-columns:1fr!important;padding:0 var(--systjem-mobile-gutter) calc(28px + env(safe-area-inset-bottom))!important}
  .booking-brand-hero .hero-inner{padding:16px var(--systjem-mobile-gutter)!important}
  .booking-form-grid{grid-template-columns:1fr!important}
  .booking-calendar .slot{min-width:0!important;padding:6px!important}

  /* iOS-toetsenbord: het actieve veld blijft boven de onderrand zichtbaar. */
  .systjem-keyboard-open .systjem-mobile-top-button{display:none!important}
  .systjem-keyboard-open .admin-storage-footer{padding-bottom:24px!important}
}

/* Kleine iPhones: compact zonder onleesbaar te worden. */
@media (max-width:430px){
  :root{--systjem-mobile-gutter:10px;--systjem-mobile-header:60px}
  body.admin-sidebar-on:not(.butcher-original-layout) .admin-hero-inner{padding:7px 9px!important}
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-logo-pair{
    grid-template-columns:31px 31px!important;
    gap:4px!important;
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
    flex-basis:66px!important;
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-logo-pair .brand-logo{
    width:31px!important;height:31px!important;min-width:31px!important;max-width:31px!important
  }
  body.admin-sidebar-on:not(.butcher-original-layout) .brand-copy small{max-width:104px!important}
  .card,.student-card,.student-panel,.setting-card,.connection-card,.lessonbook-shell{padding:13px!important}
  .privacy-status-grid,.connection-stats,.accounting-summary{grid-template-columns:1fr!important}
  .accounting-summary>div:last-child{grid-column:auto!important}
  .lessonbook-folder-grid,.lessonbook-material-grid{gap:8px!important}
  .calendar-card .calendar-toolbar,.booking-calendar .calhead,
  .calendar-card .view-switch{width:calc(100vw - (var(--systjem-mobile-gutter) * 2) - 26px)!important}
}

/* iPad staand: benut ruimte, maar behoud dezelfde touch-ervaring. */
@media (min-width:680px) and (max-width:900px){
  :root{--systjem-mobile-gutter:20px}
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav{width:360px!important}
  .dashboard-grid,.student-dashboard-grid,.settings-grid,.calendar-connections,.backup-summary,
  .student-grid,.games-admin-grid,.material-grid,.lesson-grid,.extras-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .settings-grid>.full,.calendar-connections>.full,.student-dashboard-grid>.full{grid-column:1/-1!important}
  .actions:not(.privacy-actions):not(.dexxter-export-actions){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .lessonbook-folder-grid,.lessonbook-material-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .calendar-card .calendar-toolbar,.booking-calendar .calhead,
  .calendar-card .view-switch{width:calc(100vw - (var(--systjem-mobile-gutter) * 2) - 28px)!important}
  table.systjem-mobile-card-table tbody{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (prefers-reduced-motion:reduce){
  body.admin-sidebar-on:not(.butcher-original-layout) > #primaryAdminNav,
  .systjem-mobile-top-button{transition:none!important}
}

@media print{
  .systjem-mobile-account,.systjem-mobile-top-button{display:none!important}
}