/* SYSTJEM 11.78.0 — iPhone/mobile fixes: navigatie, Doelen en Kalender */

@media (max-width:900px){
  /* 1. Navigatieknop: één nette vaste knop, zonder dubbele/lege knop erachter. */
  #mobileNavToggle{display:none!important}
  .systjem-mobile-top-button{display:none!important}
  #mobileNavFixedToggle.mobile-nav-fixed-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:fixed!important;
    top:calc(env(safe-area-inset-top, 0px) + 12px)!important;
    right:12px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:12px!important;
    background:#2d4135!important;
    box-shadow:0 4px 14px rgba(0,0,0,.16)!important;
    z-index:2147483000!important;
  }
  #mobileNavFixedToggle>span{
    font-size:0!important;
    position:relative!important;
    width:22px!important;
    height:16px!important;
    display:block!important;
  }
  #mobileNavFixedToggle>span::before,
  #mobileNavFixedToggle>span::after{
    content:''!important;
    position:absolute!important;
    left:0!important;
    width:22px!important;
    height:2px!important;
    border-radius:99px!important;
    background:#fff!important;
    transition:transform .18s ease,top .18s ease,bottom .18s ease!important;
  }
  #mobileNavFixedToggle>span::before{top:2px!important;box-shadow:0 6px 0 #fff!important}
  #mobileNavFixedToggle>span::after{bottom:2px!important}
  body.mobile-nav-open #mobileNavFixedToggle>span::before{
    top:7px!important;
    transform:rotate(45deg)!important;
    box-shadow:none!important;
  }
  body.mobile-nav-open #mobileNavFixedToggle>span::after{
    bottom:7px!important;
    transform:rotate(-45deg)!important;
  }

  /* 2. Doelen per leerling: deze variant heeft maar één kolom/child.
     Oud mobiel CSS zette die per ongeluk in de 28px checkbox-kolom. */
  .goal-item-v3:has(> .goal-title-v3:only-child){
    display:block!important;
    grid-template-columns:none!important;
  }
  .goal-item-v3>.goal-title-v3:first-child:last-child{
    width:100%!important;
    min-width:0!important;
    grid-column:1/-1!important;
  }
  .goal-item-v3>.goal-title-v3:first-child:last-child form,
  .goal-item-v3>.goal-title-v3:first-child:last-child label{
    width:100%!important;
    min-width:0!important;
  }
  .goal-item-v3>.goal-title-v3:first-child:last-child label{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
  }
  .goal-item-v3>.goal-title-v3:first-child:last-child strong,
  .goal-title-v3 strong,
  .goal-title-v3 small{
    min-width:0!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    white-space:normal!important;
  }

  /* 3. Kalender: oudere mobiele styles dwongen 760-820px af.
     Op telefoon moet een volledige week binnen het scherm passen. */
  .calendar-card{
    overflow:hidden!important;
    width:100%!important;
    max-width:100%!important;
  }
  .calendar-card .weekdays,
  .calendar-card .week{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:34px repeat(7,minmax(0,1fr))!important;
    gap:2px!important;
  }
  .calendar-card .weekdays span{
    min-width:0!important;
    padding:7px 1px!important;
    font-size:10px!important;
  }
  .calendar-card .weekno{
    min-width:0!important;
    padding:4px 2px!important;
    font-size:10px!important;
  }
  .calendar-card .day{
    min-width:0!important;
    min-height:118px!important;
    padding:5px 3px!important;
    overflow:hidden!important;
  }
  .calendar-card .day strong{font-size:12px!important}
  .calendar-card .event{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:4px 3px!important;
    font-size:10px!important;
    line-height:1.18!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .calendar-card .eventlink{min-width:0!important;display:block!important}
}

@media (max-width:620px){
  .calendar-card{padding:10px!important}
  .calendar-period{grid-template-columns:42px minmax(0,1fr) 42px!important}
  .calendar-period h2{
    font-size:18px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .calendar-card .view-switch{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
  }
  .calendar-card .view-switch a{
    flex:1 1 0!important;
    min-width:0!important;
    text-align:center!important;
    padding:9px 6px!important;
  }
  .calendar-card .weekdays,
  .calendar-card .week{
    grid-template-columns:30px repeat(7,minmax(0,1fr))!important;
  }
  .calendar-card .day{
    min-height:108px!important;
    padding:4px 2px!important;
  }
  .calendar-card .event{font-size:9.5px!important;padding:4px 2px!important}
}