/* ==========================================================================
   A Doggie Do — booking app (App.dc.html) mobile patch
   --------------------------------------------------------------------------
   PART OF THE "LOCAL LAYER". Re-apply after every Claude Design re-import.

   The booking app is ALREADY responsive (real isMobile breakpoint at 760px,
   its own bottom nav), so it deliberately does NOT load the marketing site's
   mobile.css — those overrides broke it (the universal
   `img[style*="width:"]{width:100%}` rule inflated the login logo to fill its
   card and pushed the sign-in panel off screen).

   This file is the small, surgical exception: only genuine defects in the
   export get patched here. Keep it minimal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix: login card overflows a 390px viewport by ~17px.

   The card is `width:100%; max-width:420px` inside a parent with
   `padding:32px 20px`. Without border-box sizing the card's own padding is
   added on top of the 420px cap, so it demands ~460px on a 390px screen and
   forces a horizontal scrollbar on the sign-in screen.
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

@media (max-width: 460px) {
  /* Let the card shrink below its max-width on narrow phones. */
  [style*="max-width: 420px"],
  [style*="max-width:420px"] {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Fix: mobile bottom tab bar hidden behind the browser's own toolbar.

   The app shell is inline `height:100vh; overflow:hidden`. On phones, 100vh
   is the LARGE viewport (URL bar collapsed), so with the URL bar visible the
   bottom ~60-100px of the shell — including the Home/Book/Pets/Visits/You
   tab bar — sits below the visible screen. Because the document itself never
   scrolls (all scrolling is inside the shell), the browser chrome never
   collapses either, so the nav is permanently unreachable: sidebar hidden by
   design at <760px, tab bar clipped by the bug = no navigation at all.

   100dvh tracks the *visible* viewport dynamically. The compound selector
   (height + overflow) matches only the app shell — the sign-in screen uses
   min-height:100vh without overflow:hidden and must keep scrolling normally.
   Both spaced and unspaced forms are needed: the DC runtime re-serializes
   style attributes with spaces after `:`.
   -------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  [style*="height: 100vh"][style*="overflow: hidden"],
  [style*="height:100vh"][style*="overflow:hidden"] {
    height: 100dvh !important;
  }
}