/*
 * app.thenanogard.com — style overrides applied on top of the compiled bundle.
 *
 * The dealer app's Vue source no longer exists (GitHub and the server hold only
 * built assets), so fixes have to be layered over the shipped CSS rather than
 * made at source. Loaded from index.html after the app's own stylesheets.
 *
 * NOTE: the app's CSS files are precached by the service worker against a
 * revision hash, so editing one of them would keep serving the stale cached
 * copy. index.html is NOT precached, which is why this arrives as a new file
 * linked from there.
 */

/* ---------------------------------------------------------------------------
 * Bottom navigation should stay on screen, not scroll away with the content.
 *
 * Vuetify only pins v-bottom-navigation when the component is given the `app`
 * or `fixed` prop, which adds .v-bottom-navigation--fixed { position: fixed }.
 * The app renders it without either, so the bar sits in normal flow and is only
 * reachable at the very bottom of a long list. This applies the same rule the
 * component would have applied itself, including Vuetify's own z-index of 4 —
 * low enough that dialogs and overlays (z-index 200+) still cover it.
 * ------------------------------------------------------------------------- */
.v-item-group.v-bottom-navigation {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  /* Sit above the home indicator on phones that have one. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

/* With the bar pinned it now covers the foot of the page, so give the content
 * the clearance Vuetify's `app` prop would normally have reserved. Without
 * this the last table row and the paginator hide behind the bar. */
.v-application .v-main {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}