/**
 * iOS PWA viewport polish — native app feel (≤900px).
 * UNLAYERED — load last among admin shell mobile rules. Desktop ≥901px unchanged.
 *
 * Bottom-nav gap fix: single source for row height vs safe-area; one scroll container;
 * overrides double safe-area in mobile-admin-responsive §13 and document scroll in hydra-mobile-fluid.
 */

@media (max-width: 900px) {
  /* —— Canonical mobile shell tokens (single source; JS sets --app-height) —— */
  :root {
    --app-height: 100dvh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.use-new-ui {
    --app-bottom-nav-row-h: 50px;
    --hydra-bottom-nav-row-h: 50px;
    --app-safe-bottom: var(--safe-bottom);
    --app-bottom-nav-total-h: calc(var(--app-bottom-nav-row-h) + var(--app-safe-bottom));
    --app-scroll-bottom-pad: calc(var(--app-bottom-nav-row-h) + var(--app-safe-bottom) + 12px);
    /* TASK-615: row + FAB gap(12) + FAB(56) + safe once */
    --app-scroll-bottom-pad-fab: calc(var(--app-bottom-nav-row-h) + var(--app-safe-bottom) + 12px + 56px);
    --mobile-scroll-bottom-pad: var(--app-scroll-bottom-pad);
    --mobile-scroll-bottom-clearance: var(--app-scroll-bottom-pad);
    --mobile-scroll-bottom-clearance-fab: var(--app-scroll-bottom-pad-fab);
    --hydra-mo-scroll-bottom-pad: var(--app-scroll-bottom-pad);
    --hydra-mo-scroll-bottom-pad-fab: var(--app-scroll-bottom-pad-fab);
    --mobile-content-bottom-pad: var(--app-scroll-bottom-pad);
    --mobile-bottom-nav-h: var(--app-bottom-nav-row-h);
    --bottom-nav-height: var(--app-bottom-nav-row-h);
    --hydra-bottom-nav-total-h: var(--app-bottom-nav-total-h);
    --hydra-bottom-nav-h: var(--app-bottom-nav-row-h);
  }

  html.is-pwa {
    overscroll-behavior: none;
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
  }

  body.use-new-ui.is-pwa-standalone,
  body.use-new-ui.is-mobile-safari {
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
  }

  body.use-new-ui.is-pwa-standalone #app,
  body.use-new-ui.is-mobile-safari #app {
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
  }

  body.use-new-ui,
  body:not(.use-new-ui) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  /* —— Locked viewport: PWA standalone (all platforms) —— */
  body.use-new-ui.is-pwa-standalone {
    min-height: var(--app-height, 100dvh) !important;
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.is-pwa-standalone #app,
  body.use-new-ui.is-pwa-standalone .app.app-layout,
  body.use-new-ui.is-pwa-standalone .mobile-app-shell {
    min-height: 0 !important;
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !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;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.is-pwa-standalone #contentScroll.content-scroll,
  body.use-new-ui.is-pwa-standalone .content-scroll,
  body.use-new-ui.is-pwa-standalone .mobile-page-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: var(--app-scroll-bottom-pad) !important;
    box-sizing: border-box !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;
  }
}

/* iOS browser (Safari/Chrome): lock viewport — @supports skips Android is-mobile-safari */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    html.is-mobile-web {
      height: var(--app-height, 100dvh);
      min-height: var(--app-height, 100dvh);
      max-height: var(--app-height, 100dvh);
      overflow: hidden;
    }

    body.use-new-ui.is-mobile-safari {
      min-height: var(--app-height, 100dvh) !important;
      height: var(--app-height, 100dvh) !important;
      max-height: var(--app-height, 100dvh) !important;
      overflow: hidden !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    body.use-new-ui.is-mobile-safari #app,
    body.use-new-ui.is-mobile-safari .app.app-layout,
    body.use-new-ui.is-mobile-safari .mobile-app-shell {
      min-height: 0 !important;
      height: var(--app-height, 100dvh) !important;
      max-height: var(--app-height, 100dvh) !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }

    body.use-new-ui.is-mobile-safari .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;
      margin-bottom: 0 !important;
    }

    body.use-new-ui.is-mobile-safari #contentScroll.content-scroll,
    body.use-new-ui.is-mobile-safari .content-scroll,
    body.use-new-ui.is-mobile-safari .mobile-page-content {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      padding-bottom: var(--app-scroll-bottom-pad) !important;
      box-sizing: border-box !important;
    }

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

@media (max-width: 900px) {
  /* Bottom nav flush to physical bottom; safe-area only inside nav padding (TASK-614) */
  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-pwa-standalone nav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-pwa-standalone .mobile-owner-bottom-nav,
  body.use-new-ui.is-pwa-standalone .mobile-bottom-nav,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-mobile-safari nav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-mobile-safari .mobile-owner-bottom-nav,
  body.use-new-ui.is-mobile-safari .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* Tab items — terminal overrides in hydra-bottom-nav-hypercat.css */
  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui.is-pwa-standalone .mobile-owner-bottom-nav .mobile-owner-nav-item,
  body.use-new-ui.is-pwa-standalone button.mobile-owner-nav-item,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui.is-mobile-safari .mobile-owner-bottom-nav .mobile-owner-nav-item,
  body.use-new-ui.is-mobile-safari button.mobile-owner-nav-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 2px 0 !important;
    gap: 0 !important;
    justify-content: flex-end !important;
    margin-bottom: calc(4px - env(safe-area-inset-bottom, 0px)) !important;
  }

  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav .mobile-owner-nav-label,
  body.use-new-ui.is-pwa-standalone .mobile-owner-bottom-nav .mobile-owner-nav-label,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav .mobile-owner-nav-label,
  body.use-new-ui.is-mobile-safari .mobile-owner-bottom-nav .mobile-owner-nav-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav .mobile-owner-nav-item.active::before,
  body.use-new-ui.is-pwa-standalone .mobile-owner-bottom-nav .mobile-owner-nav-item.active::before,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav .mobile-owner-nav-item.active::before,
  body.use-new-ui.is-mobile-safari .mobile-owner-bottom-nav .mobile-owner-nav-item.active::before {
    top: 0 !important;
  }

  /* FAB — row + safe once (not total-h + safe) */
  body.use-new-ui.is-pwa-standalone #mobileOwnerFab:not([hidden]),
  body.use-new-ui.is-mobile-safari #mobileOwnerFab:not([hidden]),
  body.use-new-ui.is-pwa-standalone[data-owner-fab-route] #mobileOwnerFab:not([hidden]),
  body.use-new-ui.is-mobile-safari[data-owner-fab-route] #mobileOwnerFab:not([hidden]) {
    bottom: calc(var(--app-bottom-nav-row-h) + var(--app-safe-bottom) + 12px) !important;
  }

  /* Inventory FAB route — scroll pad only on container, not module wrapper */
  body.use-new-ui.is-pwa-standalone.route-inventory #contentScroll.content-scroll,
  body.use-new-ui.is-pwa-standalone.route-inventory .content-scroll,
  body.use-new-ui.is-pwa-standalone.route-products #contentScroll.content-scroll,
  body.use-new-ui.is-pwa-standalone.route-products .content-scroll,
  body.use-new-ui.is-mobile-safari.route-inventory #contentScroll.content-scroll,
  body.use-new-ui.is-mobile-safari.route-inventory .content-scroll,
  body.use-new-ui.is-mobile-safari.route-products #contentScroll.content-scroll,
  body.use-new-ui.is-mobile-safari.route-products .content-scroll {
    padding-bottom: var(--app-scroll-bottom-pad-fab) !important;
  }

  body.use-new-ui.is-pwa-standalone.route-inventory .inventory-module--mo-owner,
  body.use-new-ui.is-mobile-safari.route-inventory .inventory-module--mo-owner {
    padding-bottom: 0 !important;
  }

  /* Internal scroll regions — keep vertical pan, block double-tap zoom */
  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll,
  body.use-new-ui .mobile-page-content,
  #hydraToolsShell .hydra-tools-shell__main,
  #hydraToolsShell .pw-modal__body,
  #hydraToolsShell .pw-sheet__body,
  #hitModalHost .pw-modal__body,
  #modal .modal-content,
  #modal .modal-body {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* Tap targets — no double-tap zoom delay */
  body.use-new-ui button,
  body.use-new-ui a,
  body.use-new-ui [role="button"],
  body.use-new-ui .mobile-owner-nav-item,
  body.use-new-ui .tab-btn,
  body.use-new-ui .chip,
  body.use-new-ui .filter-chip,
  body.use-new-ui .mobile-order-card,
  body.use-new-ui .hti-gallery-card,
  #hydraToolsShell button,
  #hydraToolsShell a,
  #hydraToolsShell [role="button"],
  #hydraToolsShell .hti-gallery-card {
    touch-action: manipulation;
  }

  /* Image/QR viewers — pinch zoom allowed */
  .allow-pinch-zoom,
  .image-viewer,
  .qr-viewer,
  .barcode-viewer,
  .hti-img-lightbox,
  .hti-img-lightbox__img {
    touch-action: pinch-zoom pan-x pan-y;
  }

  /* iOS auto-zoom prevention — all form controls ≥16px on mobile */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  [contenteditable="true"],
  body.use-new-ui .input,
  body.use-new-ui .input-md,
  body.use-new-ui .topbar-search,
  #hydraToolsShell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  #hydraToolsShell select,
  #hydraToolsShell textarea,
  #hydraToolsShell [class*="__input"],
  #hydraToolsShell .pw-field__input,
  #hydraToolsShell .st-field__input,
  #hydraToolsShell .ht-rate-bar__input,
  #hydraToolsShell .ph-capture-form input,
  #hydraToolsShell .ph-capture-form textarea,
  #hitModalHost input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  #hitModalHost select,
  #hitModalHost textarea,
  #hydraLandingRoot input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  #hydraLandingRoot select,
  #hydraLandingRoot textarea {
    font-size: 16px !important;
  }

  /* Horizontal overflow guard */
  body.use-new-ui #app,
  body.use-new-ui .app.app-layout,
  body.use-new-ui .main-content,
  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll,
  body.use-new-ui .mobile-page-content,
  body.use-new-ui .page-content,
  body.use-new-ui .route-page,
  body.use-new-ui .card,
  body.use-new-ui .panel {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.use-new-ui #app,
  body.use-new-ui .app.app-layout,
  body.use-new-ui .main-content,
  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll,
  body.use-new-ui .mobile-page-content {
    overflow-x: hidden;
  }

  /* Modal / sheet — stay within dynamic viewport + safe area.
   * Exclude Acquisition Evaluation (.pw-acq-modal): intentional full-viewport
   * sheet; the subtracted safe-area+16px left a large bottom gap on iOS. */
  body.use-new-ui #modal.modal .modal-card,
  body.use-new-ui #modal.modal .modal-content,
  #hydraToolsShell .pw-modal:not(.pw-acq-modal),
  #hydraToolsShell .pw-modal--form:not(.pw-acq-modal),
  #hitModalHost .pw-modal--bulk-import {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
  }

  /* Bottom nav — lateral + bottom safe area (never add +8px here) */
  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav,
  body.use-new-ui .mobile-bottom-nav {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* iPhone widths — fluid gutter (390 / 393 / 430) */
@media (max-width: 430px) {
  body.use-new-ui {
    --hydra-mobile-page-x: 12px;
    --mo-pad-x: 12px;
  }
}

@media (max-width: 390px) {
  body.use-new-ui {
    --hydra-mobile-page-x: 10px;
    --mo-pad-x: 10px;
  }
}