/* =========================================================
   ContainerBooking — app shell.

   The bottom tab bar, and the phone tuning that goes with it:
   once the tab bar owns the bottom of the screen the footer has
   no place there, and every page needs room to scroll past it.
   ========================================================= */

/* ---------- Bottom tab bar ---------- */

.appnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(248, 246, 240, .94);
  border-top: 1px solid var(--line);
  /* Clears the iPhone home indicator and Android's gesture bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (backdrop-filter: blur(10px)) {
  .appnav { backdrop-filter: blur(12px); background: rgba(248, 246, 240, .82); }
}

.appnav__tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  /* 56px keeps every tab a comfortable tap target on the smallest phone. */
  min-height: 56px; padding: 8px 2px 7px;
  color: var(--ink-soft); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.appnav__tab:active .appnav__icon { transform: scale(.88); }
.appnav__icon {
  width: 23px; height: 23px; display: block;
  transition: transform .15s var(--ease);
}
.appnav__label {
  font-family: "Space Grotesk", sans-serif; font-size: .66rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1;
}

.appnav__tab.is-current { color: var(--accent-d); }
.appnav__tab.is-current .appnav__icon { stroke-width: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .appnav__icon { transition: none; }
  .appnav__tab:active .appnav__icon { transform: none; }
}

/* ---------- What the tab bar displaces ---------- */

/* The footer is the bottom of a web page; the tab bar is the bottom of an
   app. They never both apply. */
html[data-appnav] .footer { display: none; }

/* Nor do the tab bar and the header's nav links: whenever the bar is up it is
   the navigation, and the header keeps just the brand, Log in / out and the
   theme toggle (so it fits any width the bar shows at, up to 1100 px). */
html[data-appnav] .header .nav { display: none; }

/* Room to scroll clear of the bar, plus the device's own bottom inset. */
html[data-appnav] body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* The floating install/update bar sits above the tab bar, not under it. */
html[data-appnav] .cb-pwa-bar {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Phone tuning ---------- */

@media (max-width: 760px) {
  /* The page header is sticky and the tab bar is fixed — between them they
     were eating most of a small screen. */
  .header__inner { height: 60px; }
  .brand__type { font-size: 1.06rem; }

  .wrap { padding: 0 16px; }

  .mgmt { padding: 26px 0 40px; }
  .mgmt__head { margin-bottom: 24px; }
  .mgmt__head h1 { font-size: 1.65rem; }
  .mgmt__back { margin-bottom: 18px; }

  /* Rows carry four values; stacked (manage.css does that at 640px) they
     read as one block. The status pill must not stretch to the full row
     width with it — a pill that wide stops reading as a pill. */
  .mgmt__row { padding: 13px 15px; gap: 4px; }
  .mgmt__row-title { font-size: .98rem; }
  .mgmt__row .pill { justify-self: start; margin: 2px 0; }

  .filter-bar { gap: 8px; margin-bottom: 16px; }
  .filter-chips { gap: 6px; }
  .filter-chip { font-size: .8rem; padding: .45em .9em; }

  /* Sign-in and other page-level buttons are easier to hit full width. */
  .btn--lg { width: 100%; }
}

/* The top nav is already hidden below 940px, so on a phone the header's
   Log in / Log out button is the only one left — it stays. Losing it would
   leave the installed app with no way to sign out at all, since the tab bar
   has no Account tab (Account is reached from the dashboard). */
@media (max-width: 760px) {
  .header__push { padding: .55em 1em; font-size: .88rem; }
  /* "Get a quote" duplicates the dashboard's own New booking action. */
  #nav-quote-btn { display: none; }
}