/* ============================================================================
   Bottom tab bar — the mobile navigation shell
   ----------------------------------------------------------------------------
   ONE component, THREE shells: base.html (light app), report_base.html (light
   report) and src/map/leaflet_app.html (dark map). The map page loads only
   map.css, so putting the layout here — in its own stylesheet all three link —
   is what keeps a single source of truth instead of two drifting copies.

   Theming is token-driven: the light shells inherit report.css's --ink/--line
   family, and .tabbar--dark remaps the same four custom properties onto the
   map's --aha-* palette. No layout rule is ever repeated per theme.

   Aesthetic contract (report.css header): hairline-driven, flat, tabular mono
   micro-labels. No shadows, no glows, no bounce, no side-tab borders — the
   active tab is marked by a 2px rule on its top edge, nothing more.
   ========================================================================== */

.tabbar {
  /* Themable surface — overridden wholesale by .tabbar--dark below. */
  --tabbar-surface: #fbfbf8;
  --tabbar-rule: #d7d6cd;
  --tabbar-ink: #17181c;
  --tabbar-muted: #696d75;
  --tabbar-active: #1e3a5f;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200; /* above Leaflet panes (400) and the map overlays (1000) */
  display: none; /* mobile-only; the media query below turns it on */
  grid-template-columns: repeat(var(--tabbar-cols, 6), 1fr);
  background: var(--tabbar-surface);
  border-top: 1px solid var(--tabbar-rule);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* iOS momentum scrolling can drag the bar; pin it visually. */
  transform: translateZ(0);
}

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 44px is the floor for a touch target; the icon+label stack lands at 54. */
  min-height: 54px;
  padding: 7px 2px 8px;
  color: var(--tabbar-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tabbar__item:hover,
.tabbar__item:focus-visible {
  color: var(--tabbar-ink);
  text-decoration: none;
}

.tabbar__icon {
  display: block;
  width: 20px;
  height: 20px;
  /* currentColor everywhere → the icon follows the active/muted state. */
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.tabbar__label {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* "Afmelden" (logout, family-accounts T017) is a POST form, not a link —
   display:contents removes the <form> from the box model so its <button>
   becomes the actual grid cell, laid out identically to its <a> siblings. */
.tabbar__form {
  display: contents;
}
button.tabbar__item {
  background: none;
  border: none;
  font: inherit;
  width: 100%;
  cursor: pointer;
}

/* Active tab: ink label + a hairline rule on the top edge. Deliberately NOT a
   pill, a glow or a filled background — see the aesthetic contract above. */
.tabbar__item.is-active {
  color: var(--tabbar-ink);
}
.tabbar__item.is-active::before {
  content: "";
  position: absolute;
  top: -1px; /* sit ON the bar's own 1px top border, not below it */
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tabbar-active);
}

/* Dark shell (the Leaflet map page) — colours only. */
.tabbar--dark {
  --tabbar-surface: rgba(8, 12, 20, 0.97);
  --tabbar-rule: rgba(200, 155, 90, 0.42);
  --tabbar-ink: #ede5d2;
  --tabbar-muted: #8c8e9a;
  --tabbar-active: #c89b5a;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── phone: full-width bar, every tab an equal 1fr column ────────────────
   620px matches app.css's existing breakpoint. */
@media (max-width: 620px) {
  .tabbar {
    display: grid;
  }
  /* Clear the bar so it never covers the last row of content. The bar is
     54px + the safe-area inset; 20px of air on top of that. */
  .has-tabbar {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ── desktop/laptop (feedback 2026-07-28 #1): the same bar, centered with
   compact fixed-width tabs instead of stretching 1fr across a wide screen.
   The masthead top-nav is gone (nav-map-ux, FR-101) — see
   .specify/features/nav-map-ux/spec.md. */
/* 620.02px, not 621px: `max-width: 620` and `min-width: 621` leave a gap at
   fractional viewport widths (browser zoom, fractional DPR), where NEITHER
   query matches and the bar disappears. Harmless while the report shell
   carried its own link row; that row is gone as of this change, so the gap
   would be a page with no navigation at all. Found in review. */
@media (min-width: 620.02px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(var(--tabbar-cols, 6), 108px);
    justify-content: center;
  }
  .has-tabbar {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar__item {
    transition: none;
  }
}