/* ===================== MOBIELE BOTTOM-NAV =====================
   Outlook/WhatsApp-stijl duim-bereikbare tabbalk met de drie dagelijkse
   ouder-takken (Chat · Coach · Agenda). Base = mobiel; op desktop (>=768px)
   verborgen — daar staat de vaste sidebar in de flow. Component:
   BottomNavComponent (ouder-only, verborgen op de chat/coach-focusschermen).
   Apart bestand zodat application.css ongemoeid blijft (DRY-tokens hergebruikt). */
:root { --bottom-nav-h: 3.5rem; }

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40; /* boven de inhoud, onder de off-canvas sidebar (z-index 50) */
  display: flex;
  align-items: stretch;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.bottom-nav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav__item--active { color: var(--color-accent); }

.bottom-nav__icon { position: relative; display: flex; }
.bottom-nav__icon .icon { width: 1.5rem; height: 1.5rem; }

.bottom-nav__badge {
  position: absolute;
  top: -0.25rem; left: 55%;
  min-width: 1rem; height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.625rem; font-weight: 600;
  line-height: 1rem; text-align: center;
}

.bottom-nav__label { line-height: 1; }

/* Ruimte vrijhouden zodat de balk de inhoud niet overlapt — alleen waar de nav
   echt gerenderd is (dus niet op de chat/coach-focusschermen). Werkt zowel voor
   de scrollende body als voor de full-height agenda-kolom (die wordt korter). */
.app__main:has(> .bottom-nav) .app__body {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .bottom-nav { display: none; }
  .app__main:has(> .bottom-nav) .app__body { padding-bottom: 0; }
}