/* ===================== MOBIELE BOTTOM-NAV (footer-pil) =====================
   Lichte stijl (2026-09-26, bron `Blinco mobiel - licht.dc.html`): vier tabs in een witte
   pil die onderaan boven de inhoud zweeft. Erachter loopt een verloop naar de paginagrond,
   zodat inhoud onder de pil wegvalt. Op desktop (>=768px) verborgen — daar staat de vaste
   sidebar in de flow. Component: BottomNavComponent (ouder-only, verborgen op de
   chat/coach-focusschermen). */
/* Houder 18 + pil 64 + 10 = 92; de inhoud houdt 94 vrij. Onder de pil 10px: lager, maar met
   ruimte voor de schaduw (Jerry 2026-10-09, was 20). */
:root { --bottom-nav-h: 94px; }

/* Tijdelijke selectieacties gebruiken dezelfde pil; op desktop blijft deze bereikbaar. */
body:has(.is-selecting) #bottom-nav { display: none; }
.selection-bar[hidden], .selection-status[hidden], .selection-toolbar [hidden] { display: none; }
.selection-bar [hidden] { display: none; }
.selection-toolbar { margin-block: 8px 16px; }
.selection-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.selection-status > p { flex-basis: 100%; margin: 0; }
.selection-hint, .selection-summary { color: var(--color-text-muted); font-size: var(--text-sm); }
.selection-bar .bottom-nav__item { border: 0; background: none; font-family: inherit; color: var(--color-text); min-height: 44px; cursor: pointer; }
.selection-bar .bottom-nav__label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; }
.selection-bar .dropdown__option { overflow-wrap: normal; word-break: normal; }
.selection-bar .bottom-nav__item:disabled { color: var(--color-faint); cursor: default; }
.is-selecting [data-selection-id] { position: relative; padding-right: 44px; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.is-selecting [data-selection-id]::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 2px solid var(--color-control-border); border-radius: var(--radius-binnen); background: var(--color-surface); color: var(--color-on-btn); display: grid; place-items: center; }
.is-selecting [data-selection-id].is-selected::after { content: "✓"; border-color: var(--color-btn); background: var(--color-btn); }
.is-selecting [data-selection-id]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.is-selecting .doclist__kebab { display: none; }
.is-selecting .contact-fab { display: none; }
.selection-bar--drawer { position: fixed; left: 0; right: auto; padding-inline: 12px; width: 84%; max-width: 330px; box-sizing: border-box; }
dialog.mail-drawer.is-selecting .mail-drawer__panel { padding-bottom: var(--bottom-nav-h); transform: none; }
.mail-drawer__panel .selection-toolbar { margin-inline: 18px; }
@media (min-width: 768px) {
  .selection-bar:not([hidden]) { display: block; max-width: var(--page-max); left: 50%; right: auto; transform: translateX(-50%); width: 100%; }
  .selection-bar--drawer:not([hidden]) { left: 0; transform: none; width: 84%; max-width: 330px; }
  .app__body:has(.is-selecting) { padding-bottom: var(--bottom-nav-h); }
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40; /* boven de inhoud, onder de off-canvas sidebar (z-index 50) */
  padding: 18px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  /* Geen verloop meer achter de pil (testronde 2026-10-01): op de witte agenda gaf dat een
     grijze balk. De pil zweeft over de inhoud; tikken naast de pil raakt de inhoud. */
  background: none;
  pointer-events: none;
}

/* De pil: wit, 5px binnenrand, 4px tussen de tabs. Dit is de enige rustende schaduw in de
   app — de pil zweeft boven de inhoud. */
.bottom-nav__balk {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pil);
  pointer-events: auto;
}

/* De ouder kiest zelf welke vier tabs het zijn (E2, 2026-09-18), dus er kan
   "Ouderschapsplan" in staan: de tabs verdelen de breedte en een te lang label kapt af in
   plaats van over zijn buurman te lopen. */
.bottom-nav__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 7px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: background var(--dur-normal) ease;
  -webkit-tap-highlight-color: transparent;
}
/* Actief: een eigen pil in --color-selected met het label in inkt (kleurregel 1: gekozen is
   inkt, nooit terracotta). Het icoon blijft een lijn. */
.bottom-nav__item--active { background: var(--color-selected); color: var(--color-text); }
.bottom-nav__item:active { background: var(--color-card); }

.bottom-nav__icon { display: flex; }

/* Ongelezen is een stip, geen getal (§11): het aantal doet er in een tabbalk niet toe,
   alleen dát er iets ligt. 9px inkt met een witte rand van 2px. */
.bottom-nav__badge {
  position: absolute;
  top: 7px; left: calc(50% + 7px);
  width: 9px; height: 9px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-btn);
}

.bottom-nav__label {
  line-height: var(--leading-kop);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Ruimte vrijhouden zodat de pil 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));
}

/* De agenda loopt door tot de onderrand, achter de zwevende pil langs (testronde 2026-10-01):
   anders stopte het witte rooster 104px boven de rand en lag daaronder een grijze balk. De
   ruimte voor de pil zit dan ín het rooster/de lijst, zodat het laatste uur er nog boven komt. */
@media (max-width: 767px) {
  .app__main:has(> .bottom-nav) .app__body:has(.agenda-mobile) { padding-bottom: 0; }
  .app__main:has(> .bottom-nav) :is(.agenda-week, .agenda-month__grid, .agenda-list) {
    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; }
}

/* Dunne lijn-iconen (shared/_icon_line) op de icoon-ladder. */
.bottom-nav__licon { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.8; }