/**
 * HYDRA mobile fluid layout — not tied to F12 demo viewports (430×932).
 * Requires body.is-pwa-standalone | body.is-mobile-safari (index.html + app.js).
 * Load last among admin shell styles.
 */

@media (max-width: 900px) {
  body.use-new-ui {
    --mo-shell-max: 100%;
    --mo-pad-x: clamp(12px, 3.6vw, 20px);
    --mo-section-gap: clamp(8px, 2.2vw, 14px);
    --mo-card-pad: clamp(10px, 2.8vw, 16px);
    --mo-space: clamp(6px, 1.8vw, 10px);
    --mo-radius: clamp(12px, 3vw, 16px);
    --mo-radius-lg: clamp(14px, 3.5vw, 18px);
    --mobile-topbar-h: 44px;
    --mobile-bottom-nav-h: var(--hydra-bottom-nav-total-h, 60px);
    --bottom-nav-height: var(--hydra-bottom-nav-total-h, 60px);
    --mobile-scroll-bottom-pad: var(--hydra-mo-scroll-bottom-pad, calc(60px + 12px));
    --mobile-content-bottom-pad: var(--mobile-scroll-bottom-pad);
    --page-title-size: clamp(16px, 4.2vw, 20px);
  }

  /* Safe-area top lives on .topbar padding (polish-final), not in --mobile-topbar-h */
  body.use-new-ui.is-pwa-standalone {
    --mobile-topbar-h: 44px;
  }
}

/* Full-bleed shell — all phone widths */
@media (max-width: 640px) {
  body.use-new-ui .mobile-app-shell,
  body.use-new-ui #app,
  body.use-new-ui .app.app-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body.use-new-ui .topbar {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.use-new-ui .page-content,
  body.use-new-ui .mobile-page-content,
  body.use-new-ui #contentScroll.content-scroll {
    padding-left: clamp(12px, 4vw, 24px) !important;
    padding-right: clamp(12px, 4vw, 24px) !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui #mobileOwnerFab {
    right: max(clamp(12px, 4vw, 20px), env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
  }

  body.use-new-ui .page-title-text {
    font-size: var(--page-title-size) !important;
  }

  body.use-new-ui .order-mobile-card {
    padding: clamp(6px, 2vw, 10px) clamp(8px, 2.5vw, 12px);
    margin-bottom: clamp(4px, 1.2vw, 8px);
    max-height: clamp(108px, 28vw, 130px);
  }
}

/* Safari document-scroll block removed — pwa-ios-viewport.css owns locked flex shell + #contentScroll scroll. */

/* —— PWA standalone: 100dvh shell, scroll in main content —— */
@media (max-width: 900px) {
  body.use-new-ui.is-pwa-standalone {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.use-new-ui.is-pwa-standalone .mobile-app-shell,
  body.use-new-ui.is-pwa-standalone #app,
  body.use-new-ui.is-pwa-standalone .app.app-layout {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
  }

  body.use-new-ui.is-pwa-standalone .main-content {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }

  body.use-new-ui.is-pwa-standalone .mobile-page-content,
  body.use-new-ui.is-pwa-standalone #contentScroll.content-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: var(--mobile-scroll-bottom-pad) !important;
  }

  body.use-new-ui.is-pwa-standalone .page-content,
  body.use-new-ui.is-pwa-standalone .dashboard-layout,
  body.use-new-ui.is-pwa-standalone .mobile-dashboard,
  body.use-new-ui.is-pwa-standalone .app-content-shell {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.is-pwa-standalone .mobile-bottom-nav,
  body.use-new-ui.is-pwa-standalone .mobile-owner-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: calc(var(--z-mobile-nav, 200) + 100) !important;
  }

  body.use-new-ui.is-pwa-standalone #mobileOwnerFab {
    bottom: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + clamp(10px, 2.5vw, 14px)) !important;
  }
}

/* Real iPhone compact — fluid tokens tighten at ≤430px */
@media (max-width: 430px) {
  body.use-new-ui {
    --mo-pad-x: 12px;
    --mo-section-gap: 8px;
    --mo-card-pad: 14px;
    --mo-space: 8px;
    --mo-radius: 14px;
    --mo-radius-lg: 18px;
    --page-title-size: 15px;
    --hydra-mo-card-gap: 10px;
    --hydra-mo-btn-h: 42px;
  }
}