/**
 * Hydra mobile — page spacing contract (≤900px).
 * Load LAST among admin owner-route sheets (after page-specific mobile CSS).
 * Prevents tab/filter/chip rows from sticking to the topbar after KPI/card tweaks.
 */

@media (max-width: 900px) {
  body.use-new-ui {
    --hydra-mobile-below-header: 16px;
    --hydra-mobile-filter-gap: 12px;
    --hydra-mobile-top-gap: var(--hydra-mobile-below-header);
    --mobile-dash-below-header: var(--hydra-mobile-below-header);
  }

  /* Scroll shell: clear fixed topbar + minimum breathing room below header */
  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll,
  body.use-new-ui .mobile-page-content.content-scroll,
  body.use-new-ui.route-dashboard #contentScroll.content-scroll,
  body.use-new-ui.route-dashboard .content-scroll,
  body.use-new-ui.route-orders #contentScroll.content-scroll,
  body.use-new-ui.route-orders .content-scroll,
  body.use-new-ui.route-inventory #contentScroll.content-scroll,
  body.use-new-ui.route-inventory .content-scroll,
  body.use-new-ui.route-cashflow #contentScroll.content-scroll,
  body.use-new-ui.route-cashflow .content-scroll,
  body.route-cashflow #contentScroll.content-scroll,
  body.route-cashflow .content-scroll,
  body.use-new-ui.route-storefront-inquiries #contentScroll.content-scroll,
  body.use-new-ui.route-storefront-inquiries .content-scroll,
  body.use-new-ui.route-customers #contentScroll.content-scroll,
  body.use-new-ui.route-customers .content-scroll {
    padding-top: calc(var(--mobile-topbar-stack-h) + var(--hydra-mobile-below-header)) !important;
    scroll-padding-top: calc(var(--mobile-topbar-stack-h) + var(--hydra-mobile-below-header));
  }

  /* In-scroll page bodies — no extra top pad (scroll already clears header) */
  body.use-new-ui .mobile-page-body,
  body.use-new-ui .owner-mobile-content,
  body.use-new-ui #appContent > .route-page:not([hidden]),
  body.use-new-ui .page-content:not(#contentScroll):not(.content-scroll) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* First-row filter / tab / chip clusters — never flush to scroll top */
  body.use-new-ui .mobile-dash-period-wrap,
  body.use-new-ui .dashboard-filter-shell,
  body.use-new-ui .dashboard-period-tabs,
  body.use-new-ui .dashboard-month-strip,
  body.use-new-ui .inventory-tabs,
  body.use-new-ui .inventory-tabs--mo,
  body.use-new-ui .inventory-tabs--mo-pills,
  body.use-new-ui #inventoryTabs,
  body.use-new-ui .mobile-tabs,
  body.use-new-ui .filter-chips,
  body.use-new-ui .orders-desk-chips-host,
  body.use-new-ui .orders-desk-chips,
  body.use-new-ui .orders-mobile-filter-row,
  body.use-new-ui .cashflow-period-bar,
  body.use-new-ui #hydraCashflowPeriodFilter,
  body.use-new-ui .sf-inq-mo-filter-card,
  body.use-new-ui .customers-filter-trigger {
    margin-top: var(--hydra-mobile-filter-gap) !important;
    margin-bottom: 12px !important;
    transform: none !important;
    top: auto !important;
    position: static !important;
  }

  /* Wrap shells: one gap above the whole period+month block */
  body.use-new-ui.route-dashboard .mobile-dash-period-wrap,
  body.use-new-ui.route-dashboard .dashboard-filter-shell {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-scroll,
  body.use-new-ui.route-dashboard .dashboard-filter-tabs,
  body.use-new-ui.route-dashboard .mobile-dash-month-row,
  body.use-new-ui.route-dashboard .dashboard-month-tabs {
    margin-top: 0 !important;
    margin-inline: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  body.use-new-ui.route-inventory .inventory-module--mo-owner > .inventory-tabs--mo-pills:first-child,
  body.use-new-ui.route-inventory .inventory-tabs--mo-pills {
    margin-top: var(--hydra-mobile-filter-gap) !important;
  }

  /* Page toolbars (Nhập hàng title + FAB row, etc.) */
  body.use-new-ui.route-inventory .inv-mo-toolbar,
  body.use-new-ui.route-inventory .inventory-mo-page-head,
  body.use-new-ui.route-orders .orders-desk-top,
  body.use-new-ui.route-orders .orders-mobile-toolbar,
  body.use-new-ui.route-cashflow .cashflow-mobile-page--classic > .finance-toolbar.cashflow-mo-toolbar:first-child,
  body.use-new-ui.route-cashflow .cashflow-period-bar:first-child,
  body.use-new-ui.route-cashflow #hydraCashflowPeriodFilter:first-child {
    margin-top: var(--hydra-mobile-filter-gap) !important;
  }

  body.use-new-ui.route-storefront-inquiries .sf-inq-filter-chips--mobile {
    margin-top: 0 !important;
  }

  /* Inner dashboard rows sit inside .mobile-dash-period-wrap — no extra top margin */
  body.use-new-ui .mobile-dash-period-scroll,
  body.use-new-ui .dashboard-filter-tabs,
  body.use-new-ui .mobile-dash-month-row,
  body.use-new-ui .dashboard-month-tabs {
    margin-top: 0 !important;
    margin-inline: 0 !important;
    transform: none !important;
    top: auto !important;
  }

  /* Orders — chip lọc sát toolbar + danh sách (tránh margin chồng 12+14+12px) */
  body.use-new-ui.route-orders .orders-desk-top {
    margin-bottom: 0 !important;
  }

  body.use-new-ui.route-orders .orders-desk-chips-host,
  body.use-new-ui.route-orders .orders-desk-chips {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  body.use-new-ui.route-orders #hydraOrdersMobileWrap,
  body.use-new-ui.route-orders .orders-mobile-wrap {
    margin-top: 0 !important;
  }

}