/**
 * HYDRA admin — mobile responsive fixes (≤900px, HYDRA_MOBILE_BP).
 * UNLAYERED — load last. Beats style.css fixed topbar/sidebar offsets + desktop shells.
 */

@media (max-width: 900px) {
  /* —— 1. Viewport guard —— */
  html {
    overflow-x: hidden;
    max-width: 100%;
  }

  body.use-new-ui,
  body.use-new-ui #app {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  body.use-new-ui {
    --mo-shell-max: 100vw;
    --mo-pad-x: var(--hydra-mobile-page-x, 24px);
    --mobile-topbar-h: 44px;
  }

  /* —— 1b. Locked viewport — PWA standalone only (Safari uses natural scroll) —— */
  body.use-new-ui.is-pwa-standalone {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !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 {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.use-new-ui.is-pwa-standalone .main-content {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !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;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Safari / mobile browser: do not lock document height */
  body.use-new-ui.is-mobile-safari {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !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 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.use-new-ui.is-mobile-safari .main-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !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: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body.use-new-ui .route-page,
  body.use-new-ui .dashboard-page,
  body.use-new-ui .dashboard-layout {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Bottom nav — full bleed; safe-area via padding (TASK-614; terminal rules in hypercat) */
  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav,
  body.use-new-ui .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: calc(var(--z-mobile-nav, 200) + 100) !important;
  }

  /* —— 2. Full-width shell (no centered 430px card, no sidebar grid column) —— */
  body.use-new-ui .app,
  body.use-new-ui .app.app-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    background: var(--hydra-orange-bg-soft, #fffaf5) !important;
  }

  body.dark.use-new-ui .app.app-layout {
    background: #0f172a !important;
  }

  /* Sidebar: off-canvas fixed — does not consume layout column */
  body.use-new-ui .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(300px, 88vw) !important;
    max-width: 88vw !important;
    min-width: 0 !important;
    flex: none !important;
    transform: translate3d(-102%, 0, 0) !important;
    z-index: var(--z-mobile-nav, 200);
  }

  body.use-new-ui.mobile-owner-drawer-open .sidebar {
    transform: translate3d(0, 0, 0) !important;
  }

  body.use-new-ui .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui.sidebar-collapsed .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* —— 3. Topbar — full bleed, no desktop left offset —— */
  body.use-new-ui header.topbar,
  body.use-new-ui .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    height: auto !important;
    min-height: var(--mobile-topbar-h) !important;
    max-height: none !important;
    box-sizing: border-box !important;
    z-index: calc(var(--z-mobile-nav, 200) + 80) !important;
  }

  body.use-new-ui .topbar-inner,
  body.use-new-ui .topbar-inner--mobile-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px var(--mo-pad-x) !important;
    min-height: var(--mobile-topbar-h) !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .topbar-title-group {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    pointer-events: none;
  }

  body.use-new-ui .topbar-title-group .page-title-text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.use-new-ui .topbar-route-subtitle {
    display: block !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  body.use-new-ui .topbar-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  /* —— 4. Content area — compact top spacer (kill legacy style.css margin-top:70px double inset) —— */
  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: calc(var(--mobile-topbar-h) + 12px) !important;
    padding-left: var(--mo-pad-x) !important;
    padding-right: var(--mo-pad-x) !important;
  }

  body.use-new-ui .content-container,
  body.use-new-ui #appContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .app-content-shell,
  body.use-new-ui .page-shell.app-content-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 16px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .app-content-shell .page-content,
  body.use-new-ui .route-page,
  body.use-new-ui .dashboard-layout,
  body.use-new-ui .dashboard-premium-wrap,
  body.use-new-ui .dashboard-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .page-header,
  body.use-new-ui .toolbar,
  body.use-new-ui .compact-toolbar,
  body.use-new-ui .card,
  body.use-new-ui .panel,
  body.use-new-ui .table-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* —— 5. Pill tabs — horizontal scroll —— */
  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 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    max-width: 100% !important;
    padding-bottom: 4px !important;
    margin-bottom: 10px !important;
  }

  /* TASK-617: Inventory pill trailing gutter (Orders TASK-616 pattern) */
  body.use-new-ui .inventory-tabs--mo-pills,
  body.use-new-ui #inventoryTabs.inventory-tabs--mo-pills {
    padding-inline-end: 16px !important;
    scroll-padding-inline: 14px;
    scroll-padding-inline-end: 16px;
  }

  body.use-new-ui .inventory-tabs::-webkit-scrollbar,
  body.use-new-ui .inventory-tabs--mo-pills::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .inventory-tabs .btn,
  body.use-new-ui .inventory-tabs--mo .btn,
  body.use-new-ui .inventory-tabs--mo-pills .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 7px 13px !important;
    scroll-snap-align: start;
  }

  body.use-new-ui .orders-desk-chips,
  body.use-new-ui .chart-toggle-group,
  body.use-new-ui .dashboard-month-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    max-width: 100% !important;
    padding-bottom: 4px !important;
  }

  /* TASK-616: Orders chip row trailing gutter (do not apply to chart/dashboard toggles) */
  body.use-new-ui .orders-desk-chips {
    padding-inline-end: 16px !important;
    scroll-padding-inline: 14px;
    scroll-padding-inline-end: 16px;
  }

  body.use-new-ui .orders-desk-chips::-webkit-scrollbar,
  body.use-new-ui .chart-toggle-group::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .orders-desk-chip,
  body.use-new-ui .dashboard-month-chip,
  body.use-new-ui .chart-toggle-group .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* —— 6. Dashboard overview + KPI —— */
  body.use-new-ui .dashboard-overview-compact-wrap {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  body.use-new-ui .dashboard-overview-compact {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .dashboard-overview-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: 4px !important;
    margin: 0 -2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.use-new-ui .dashboard-overview-strip::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .dashboard-overview-strip-item {
    flex: 0 0 auto !important;
    min-width: 108px !important;
    max-width: 140px !important;
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: #ffffff !important;
    border-right: 1px solid rgba(226, 232, 240, 0.95) !important;
  }

  body.use-new-ui .dashboard-overview-strip-label,
  body.use-new-ui .dashboard-overview-strip-value {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
  }

  body.use-new-ui .dashboard-overview-strip-label {
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    white-space: nowrap !important;
  }

  body.use-new-ui .dashboard-overview-strip-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    word-break: break-word !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card:not(.mobile-kpi-card--compact) .premium-kpi-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .card-title,
  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .card-value {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.use-new-ui .dashboard-layout .quick-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.use-new-ui .dashboard-layout .quick-chip span,
  body.use-new-ui .dashboard-layout .quick-chip strong {
    display: block !important;
    width: 100% !important;
    line-height: 1.25 !important;
  }

  @media (max-width: 360px) {
    body.use-new-ui .dashboard-layout #hydraDashKpiMobile {
      grid-template-columns: 1fr !important;
    }
  }

  /* —— 7. Orders toolbar —— */
  body.use-new-ui .orders-desk-top,
  body.use-new-ui .orders-page .orders-desk-top {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .orders-toolbar-mo,
  body.use-new-ui #hydraOrdersToolbar.orders-toolbar-mo {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .orders-toolbar-mo .btn,
  body.use-new-ui #hydraOrdersToolbar .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .orders-search-mo,
  body.use-new-ui #hydraOrdersToolbar .orders-search-mo,
  body.use-new-ui #ordersSearch.orders-search-mo {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 46px !important;
    font-size: 15px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .orders-page #hydraOrdersMobileWrap,
  body.use-new-ui .orders-desk-chips-host,
  body.use-new-ui .orders-pager-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* —— 8. Storefront inquiries + generic toolbars —— */
  body.use-new-ui .sf-inq-page-head,
  body.use-new-ui .inventory-module--mo-owner,
  body.use-new-ui .customers-page .customers-toolbar,
  body.use-new-ui .reports-tools-page .toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .toolbar.compact-toolbar:not(.orders-toolbar-mo):not(.inventory-tabs) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  body.use-new-ui .toolbar.compact-toolbar input,
  body.use-new-ui .toolbar.compact-toolbar select,
  body.use-new-ui .toolbar.compact-toolbar .input {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* —— 9. User account menu (override mobile-owner hide) —— */
  body.use-new-ui .topbar-extras {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.use-new-ui .topbar-extras > *:not(.notification-wrap):not(.user-menu-wrap) {
    display: none !important;
  }

  body.use-new-ui .topbar-extras .user-menu-wrap {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    flex: 0 0 auto !important;
  }

  body.use-new-ui .user-avatar-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  body.use-new-ui .user-menu-dropdown.topbar-dropdown {
    position: fixed !important;
    top: calc(var(--mobile-topbar-h) + 6px) !important;
    right: var(--mo-pad-x) !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: min(280px, calc(100vw - 24px)) !important;
    min-width: 200px !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
    max-height: min(70vh, calc(100dvh - var(--mobile-topbar-h) - 24px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: calc(var(--z-mobile-nav, 200) + 120) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .user-menu-dropdown.topbar-dropdown.hidden {
    display: none !important;
  }

  body.use-new-ui .user-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: 52px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .user-menu-item__ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    color: #64748b !important;
    overflow: hidden !important;
  }

  body.use-new-ui .user-menu-item__label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.use-new-ui .user-menu-divider {
    height: 1px !important;
    margin: 4px 8px !important;
    background: #e2e8f0 !important;
    flex: 0 0 auto !important;
  }

  body.use-new-ui .user-menu-item.danger {
    color: #b91c1c !important;
  }

  body.use-new-ui .user-menu-item[data-user-action="density"],
  body.use-new-ui .user-menu-item[data-user-action="settings"] {
    display: none !important;
  }

  /* —— 10. Dashboard — KPI first, compact alerts —— */
  body.use-new-ui.route-dashboard .dashboard-premium-wrap,
  body.use-new-ui .dashboard-premium-wrap.dashboard-owner-v2 {
    display: flex !important;
    flex-direction: column !important;
  }

  body.use-new-ui.route-dashboard .dashboard-toolbar-premium,
  body.use-new-ui .dashboard-toolbar.dashboard-toolbar-premium {
    order: 99 !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-wrap {
    order: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-today {
    order: 1 !important;
    margin-top: 0 !important;
  }

  body.use-new-ui.route-dashboard #hydraDashKpiMobile,
  body.use-new-ui .dashboard-premium-wrap #hydraDashKpiMobile {
    order: unset !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui.route-dashboard .dashboard-overview-compact-wrap,
  body.use-new-ui .dashboard-premium-wrap .dashboard-overview-compact-wrap {
    order: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  body.use-new-ui.route-dashboard .dashboard-hero,
  body.use-new-ui .dashboard-premium-wrap .dashboard-hero {
    order: 3 !important;
  }

  body.use-new-ui .dashboard-overview-compact {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  body.use-new-ui .dashboard-overview-compact-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.use-new-ui .dashboard-overview-compact-title {
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  body.use-new-ui .dashboard-overview-compact-date {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  body.use-new-ui .hydra-daily-insight-summary {
    display: none !important;
  }

  body.use-new-ui .dashboard-overview-compact .dashboard-overview-strip {
    order: 2 !important;
    margin: 0 !important;
    padding-bottom: 2px !important;
  }

  body.use-new-ui .hydra-smart-insight-bar {
    order: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.use-new-ui .hydra-smart-insight-bar::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .hydra-smart-insight {
    flex: 0 0 auto !important;
    max-width: min(260px, 78vw) !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.use-new-ui .hydra-smart-insight__dot {
    width: 5px !important;
    height: 5px !important;
  }

  body.use-new-ui .dashboard-overview-strip-item {
    min-width: 96px !important;
    max-width: 120px !important;
    padding: 6px 8px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }

  body.use-new-ui .dashboard-overview-strip-label {
    font-size: 9px !important;
  }

  body.use-new-ui .dashboard-overview-strip-value {
    font-size: 12px !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card:not(.mobile-kpi-card--compact) {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .card-value:not(.mobile-kpi-value) {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .card-title {
    font-size: 11px !important;
  }

  body.use-new-ui .dashboard-toolbar-premium {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.use-new-ui .dashboard-period-filter-wrap,
  body.use-new-ui #hydraDashPeriodFilter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* —— 11. Form controls — mobile standard —— */
  body.use-new-ui {
    --mo-field-h: 48px;
    --mo-field-gap: 14px;
    --mo-label-size: 13px;
  }

  body.use-new-ui .modal-form-grid label,
  body.use-new-ui .grid.cols-2 label,
  body.use-new-ui .pos-head-grid label,
  body.use-new-ui .panel label:not(.inline-setting-row),
  body.use-new-ui .toolbar label,
  body.use-new-ui .accounts-filter-bar label,
  body.use-new-ui .compact-toolbar label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: var(--mo-label-size) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    position: static !important;
  }

  body.use-new-ui .modal-form-grid,
  body.use-new-ui .grid.cols-2,
  body.use-new-ui .pos-head-grid.compact {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mo-field-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.use-new-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  body.use-new-ui select,
  body.use-new-ui textarea,
  body.use-new-ui .input,
  body.use-new-ui .input-md,
  body.use-new-ui .topbar-search {
    min-height: var(--mo-field-h) !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  body.use-new-ui textarea {
    min-height: 96px !important;
  }

  body.use-new-ui .btn:not(.btn-xs):not(.chip):not(.mobile-owner-nav-item):not(.notification-bell):not(.user-avatar-btn) {
    min-height: 44px !important;
  }

  /* —— 12. Tables / cards overflow guard —— */
  body.use-new-ui .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  body.use-new-ui .table-wrap table {
    min-width: 0 !important;
  }

  body.use-new-ui .card,
  body.use-new-ui .panel {
    overflow: hidden !important;
    word-wrap: break-word !important;
  }

  body.use-new-ui .page-header h1,
  body.use-new-ui .page-title-text {
    word-break: break-word !important;
  }

  /* —— 13. Bottom inset — single layer on scroll container only —— */
  body.use-new-ui {
    --mobile-scroll-bottom-pad: var(--app-scroll-bottom-pad, calc(var(--mobile-bottom-nav-h, 50px) + env(safe-area-inset-bottom, 0px) + 12px));
    --mobile-content-bottom-pad: var(--mobile-scroll-bottom-pad);
  }

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

  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll,
  body.use-new-ui .mobile-page-content {
    padding-bottom: var(--mobile-scroll-bottom-pad) !important;
  }

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

  html.hydra-auth-pending #mobileOwnerBottomNav,
  html.hydra-auth-pending #mobileOwnerFab {
    display: none !important;
  }
}

/* Real iPhone compact — reinforce topbar nowrap */
@media (max-width: 430px) {
  body.use-new-ui .topbar-inner,
  body.use-new-ui .topbar-inner--mobile-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    column-gap: 6px !important;
  }

  body.use-new-ui .toolbar.compact-toolbar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.use-new-ui .toolbar.compact-toolbar::-webkit-scrollbar {
    display: none;
  }
}