/* Consistent, light petrol treatment for the selected app section. */
@media(max-width:700px){
  :root .app .week{margin-bottom:16px!important;}
  :root .app .topbar{
    height:57px!important;
    min-height:57px!important;
    padding-top:0!important;
  }
  :root .app .topbar > :is(.mobile-brand,.header-actions){position:relative;top:3px!important;}
}
@supports (-webkit-touch-callout:none){
  @media(max-width:700px){
    :root .app .topbar{
      height:59px!important;
      min-height:59px!important;
      -webkit-backdrop-filter:none!important;
      backdrop-filter:none!important;
    }
    :root .app .topbar > :is(.mobile-brand,.header-actions){top:7px!important;}
  }
}
/* Touch tabs: the entire button is one target; decorative children cannot
   intercept taps. Avoid sticky iOS hover feedback before click activation. */
@media (hover:none) and (pointer:coarse){
  :root .app .bottom-nav{gap:0!important;}
  :root .app .bottom-nav button{
    position:relative;
    overflow:visible;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none;
    user-select:none;
    transition:none!important;
  }
  :root .app .bottom-nav button > *{pointer-events:none!important;}
  :root .app .bottom-nav button::after{
    content:"";
    position:absolute;
    inset:-3px 0 0;
    border-radius:inherit;
  }
  :root .app .bottom-nav button:not(.active):hover{
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  :root .app .bottom-nav button:not(.active):active,
  :root .app .bottom-nav button.active:active{
    background:#d5e9ed!important;
    box-shadow:inset 0 0 0 1px #82adb6!important;
    opacity:1!important;
    transition:none!important;
  }
  :root.dark-mode .app .bottom-nav button:not(.active):active,
  :root.dark-mode .app .bottom-nav button.active:active{
    background:#28515a!important;
  }
}
.app .nav-item.active,.app .bottom-nav .active{
  color:#1f2d36!important;
  border-color:#4c98a5!important;
  background:#e4f3f5!important;
  box-shadow:0 4px 12px rgba(37,112,126,.13)!important;
}
.app .nav-item.active>svg,.app .bottom-nav .active>svg,.app .bottom-nav .active .wallboard-nav-icon svg{color:#1f2d36!important}
:root.dark-mode .app .nav-item.active,:root.dark-mode .app .bottom-nav .active{
  color:#9bdae0!important;
  border-color:#4d929d!important;
  background:#193c43!important;
  box-shadow:none!important;
}
:root.dark-mode .app .nav-item.active>svg,:root.dark-mode .app .bottom-nav .active>svg,:root.dark-mode .app .bottom-nav .active .wallboard-nav-icon svg{color:#9bdae0!important}

/* Mobiele tablabels blijven op een klein scherm snel leesbaar. */
@media(max-width:700px){
  :root .app .bottom-nav{
    min-height:calc(61px + max(6px,env(safe-area-inset-bottom)))!important;
    align-items:center!important;
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  :root .app .bottom-nav button{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0;
    height:56px!important;
    min-height:56px!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent!important;
  }
  :root .app .bottom-nav button:active{
    color:#1f2d36!important;
    border-color:#4c98a5!important;
    background:#e4f3f5!important;
    transition:none!important;
  }
  :root .app .bottom-nav .active{
    transform:scaleX(1.035)!important;
    transform-origin:center;
  }
  :root .app .bottom-nav button>span:last-child{
    color:#27343c!important;
    font-size:12px!important;
    font-weight:650!important;
    letter-spacing:.01em!important;
  }
  :root .app .bottom-nav .active>span:last-child{color:#1f2d36!important}
  :root.dark-mode .app .bottom-nav button>span:last-child{color:#d8e8eb!important}
  :root.dark-mode .app .bottom-nav .active>span:last-child{color:#9bdae0!important}
  :root.dark-mode .app .bottom-nav button:active{color:#9bdae0!important;border-color:#4d929d!important;background:#193c43!important}
}
@media(max-width:370px){:root .app .bottom-nav button>span:last-child{font-size:11px!important}}
@media(max-width:340px){:root .app .bottom-nav button>span:last-child{font-size:10px!important}}

/* Mobiele browser en PWA: losse, afgeronde navigatie boven de toestelrand. */
@media(max-width:700px){
  :root .app .bottom-nav::before{
    content:"";
    position:absolute;
    top:calc(100% + 3px);
    z-index:-1;
    left:calc(-1 * max(12px,env(safe-area-inset-left)));
    right:calc(-1 * max(12px,env(safe-area-inset-right)));
    height:calc(env(safe-area-inset-bottom) + 24px);
    background:#f3f6f7;
    pointer-events:none;
  }
  :root.dark-mode .app .bottom-nav::before{background:#090a0c;}
}
@media(max-width:700px){
  :root .app .bottom-nav{
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(8px,calc(env(safe-area-inset-bottom) - 10px))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    min-height:66px!important;
    padding:4px 6px!important;
    border:1px solid #c9d3d8!important;
    border-radius:28px!important;
    background:#e9edef!important;
    box-shadow:0 8px 22px rgba(31,58,71,.14)!important;
  }
  :root .app .bottom-nav .active{border-radius:22px!important;}
}

/* Op een echte telefoon blijft de PWA-balk raakbaar, maar oogt hij compacter. */
@media(max-width:700px) and (pointer:coarse){
  :root .app .bottom-nav{
    min-height:60px!important;
    padding:3px 5px!important;
    border-radius:26px!important;
    bottom:max(8px,calc(env(safe-area-inset-bottom) - 14px))!important;
  }
  :root .app .bottom-nav button{height:52px!important;min-height:52px!important;}
  :root .app .bottom-nav button:first-child,:root .app .bottom-nav button:last-child{flex-grow:1.12!important;}
  :root .app .bottom-nav .active{border-radius:20px!important;}
  :root .app .bottom-nav button>span:last-child{font-size:11px!important;font-weight:600!important;letter-spacing:0!important;}
}