/* SYSTJEM 11.78.1 — iPhone polish: Doelen, kalender en navigatieknop */

@media (max-width:900px){
  /* Navigatieknop: verwijder oude/pseudo lagen en houd één zuivere knop. */
  #mobileNavToggle,
  .systjem-mobile-top-button{display:none!important}
  #mobileNavFixedToggle.mobile-nav-fixed-toggle{
    -webkit-appearance:none!important;
    appearance:none!important;
    background-image:none!important;
    outline:none!important;
    box-shadow:0 5px 14px rgba(0,0,0,.14)!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:14px!important;
  }
  #mobileNavFixedToggle::before,
  #mobileNavFixedToggle::after{content:none!important;display:none!important}

  /* Doelen: wanneer ontwikkelaarsknoppen verborgen zijn, mag er geen lege
     checkboxkolom overblijven. Dat was de oorzaak van tekst per letter. */
  body:not(.goals-developer-open) .goal-item-v3{
    display:block!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
  }
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3{
    display:block!important;
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
  }
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3 form,
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3 label{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3 label{
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    gap:11px!important;
    align-items:start!important;
  }
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3 strong{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.28!important;
  }
  body:not(.goals-developer-open) .goal-item-v3>.goal-title-v3 small{
    display:block!important;
    width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    margin:6px 0 0 37px!important;
    max-width:calc(100% - 37px)!important;
  }
}

@media (max-width:620px){
  /* Kalender: 7 ultradunne kolommen zijn wel 'passend', maar niet leesbaar.
     Week en 2-weken worden daarom echte mobiele dagkaarten in twee kolommen. */
  .calendar-card.calendar-span-week .weekdays,
  .calendar-card.calendar-span-two .weekdays{display:none!important}

  .calendar-card.calendar-span-week .week,
  .calendar-card.calendar-span-two .week{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:8px 0!important;
    border:0!important;
  }
  .calendar-card.calendar-span-week .weekno,
  .calendar-card.calendar-span-two .weekno{
    grid-column:1/-1!important;
    min-height:0!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:10px!important;
    background:#f0ede6!important;
    font-size:12px!important;
    font-weight:800!important;
    text-align:left!important;
  }
  .calendar-card.calendar-span-week .weekno::before,
  .calendar-card.calendar-span-two .weekno::before{content:'Week '!important}

  .calendar-card.calendar-span-week .day,
  .calendar-card.calendar-span-two .day{
    position:relative!important;
    min-width:0!important;
    width:100%!important;
    min-height:96px!important;
    padding:30px 9px 9px!important;
    border:1px solid #ddd9cf!important;
    border-radius:12px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .calendar-card.calendar-span-week .day strong,
  .calendar-card.calendar-span-two .day strong{
    position:absolute!important;
    top:8px!important;
    right:9px!important;
    font-size:13px!important;
    line-height:1!important;
  }
  .calendar-card.calendar-span-week .day::before,
  .calendar-card.calendar-span-two .day::before{
    position:absolute!important;
    top:7px!important;
    left:9px!important;
    color:#6b6b64!important;
    font-size:11px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }
  .calendar-card .week .day:nth-child(2)::before{content:'Ma'!important}
  .calendar-card .week .day:nth-child(3)::before{content:'Di'!important}
  .calendar-card .week .day:nth-child(4)::before{content:'Wo'!important}
  .calendar-card .week .day:nth-child(5)::before{content:'Do'!important}
  .calendar-card .week .day:nth-child(6)::before{content:'Vr'!important}
  .calendar-card .week .day:nth-child(7)::before{content:'Za'!important}
  .calendar-card .week .day:nth-child(8)::before{content:'Zo'!important}

  .calendar-card.calendar-span-week .event,
  .calendar-card.calendar-span-two .event{
    width:100%!important;
    max-width:100%!important;
    margin-top:4px!important;
    padding:6px 7px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    border-radius:9px!important;
  }
  .calendar-card.calendar-span-week .eventlink,
  .calendar-card.calendar-span-two .eventlink{display:block!important;width:100%!important}

  .calendar-period h2{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:16px!important;
    line-height:1.15!important;
    text-align:center!important;
  }
}