/* ========================================================================
   GaliVue V5.1.114 — MOBILE BOTTOM NAV CENTERING
   Presentation-only correction layered after V5.1.113.

   The five mobile dock destinations already use equal grid tracks, but the
   full-width button + external focus outline made the first Dashboard pill
   look crowded against the left edge of the dock. The issue is most visible
   on Dashboard because it is the left-most destination.

   Phone contract:
   - keep the existing fixed bottom dock geometry;
   - keep five equal navigation tracks;
   - center each tab control inside its own track with equal breathing room;
   - keep keyboard focus visible, but draw it inside the tab instead of outside
     the dock edge.

   No top-header, scroll, route, auth/session, API, D1/R2, payment, Client
   Selection, Final Delivery, Admin or HERO logic changes.
   ======================================================================== */

@media (max-width:767px) {
  /* Do not move the dock or change its five equal columns. Only inset each
     tab inside its own grid cell so Dashboard is visually centred like the
     middle destinations. */
  html body #dashboardPanel .gv39-mobile-nav button {
    width:min(64px, calc(100% - 4px))!important;
    max-width:100%!important;
    justify-self:center!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }

  /* The global focus outline sits outside the first/last tab and makes those
     edge destinations look off-centre. Keep an accessible focus indicator,
     but paint it inside the already-centred control. */
  html body #dashboardPanel .gv39-mobile-nav button:focus,
  html body #dashboardPanel .gv39-mobile-nav button:focus-visible {
    outline:0!important;
  }

  html body #dashboardPanel .gv39-mobile-nav button:focus-visible {
    box-shadow:inset 0 0 0 2px #8fbd00!important;
  }
}