/*
 * MarketplaceAnalytics mobile shell V835
 * Clean mobile chrome around full-size data workspaces.
 * Dense content is panned; page chrome itself always fits the viewport.
 */

@media (max-width: 1120px) {
  :root {
    --ma-mobile-header-h: 56px;
    --ma-mobile-utility-h: 50px;
    --ma-mobile-drawer-w: min(320px, 86vw);
    --ma-mobile-page-pad: 12px;
  }

  html, body { max-width: 100%; overflow-x: hidden !important; }
  body.app-modern-shell { --gm-sidebar-width: 0px !important; --gm-sidebar-collapsed: 0px !important; }
  .app-modern-shell .site-shell { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

  /* Mobile header is a real top bar. It never becomes the drawer itself. */
  .app-modern-shell .app-header,
  .app-modern-shell.products-modern-body .app-header {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    top: 0 !important;
    z-index: 1340 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--ma-mobile-header-h) !important;
    min-height: var(--ma-mobile-header-h) !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
    transform: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gm-border) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 4px 18px rgba(20,24,31,.045) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .app-modern-shell.nav-open .app-header,
  .app-modern-shell.nav-open.products-modern-body .app-header { transform: none !important; }

  .app-modern-shell .brand,
  .app-modern-shell.products-modern-body .brand {
    width: auto !important;
    max-width: calc(100% - 54px) !important;
    height: var(--ma-mobile-header-h) !important;
    min-height: var(--ma-mobile-header-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
  }
  .app-modern-shell .brand-name,
  .app-modern-shell.products-modern-body .brand-name {
    max-width: 100% !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-modern-shell .nav-toggle,
  .app-modern-shell.products-modern-body .nav-toggle {
    position: static !important;
    inset: auto !important;
    z-index: 1 !important;
    order: 2 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--gm-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #29323c !important;
    box-shadow: none !important;
  }

  /* Only the navigation list is off-canvas. */
  .app-modern-shell .main-nav,
  .app-modern-shell.products-modern-body .main-nav {
    position: fixed !important;
    top: var(--ma-mobile-header-h) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1335 !important;
    width: var(--ma-mobile-drawer-w) !important;
    max-width: var(--ma-mobile-drawer-w) !important;
    height: calc(100dvh - var(--ma-mobile-header-h)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 9px max(14px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateX(calc(-100% - 18px)) !important;
    transition: transform .2s cubic-bezier(.22,.8,.24,1) !important;
    border: 0 !important;
    border-right: 1px solid var(--gm-border) !important;
    background: #fff !important;
    box-shadow: 18px 0 42px rgba(18,22,28,.13) !important;
  }
  .app-modern-shell .main-nav.is-open,
  .app-modern-shell.nav-open .main-nav,
  .app-modern-shell.products-modern-body .main-nav.is-open,
  .app-modern-shell.nav-open.products-modern-body .main-nav { transform: translateX(0) !important; }

  .app-modern-shell .main-nav-menu { width: 100% !important; flex: 0 0 auto !important; }
  .app-modern-shell .main-nav__link,
  .app-modern-shell .main-nav-menu > .main-nav__link,
  .app-modern-shell.products-modern-body .main-nav__link,
  .app-modern-shell.products-modern-body .main-nav-menu > .main-nav__link {
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  .app-modern-shell .main-nav__link > span { display: block !important; white-space: normal !important; }
  .app-modern-shell .main-nav-submenu,
  .app-modern-shell.products-modern-body .main-nav-submenu {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 3px 0 6px 18px !important;
    padding: 4px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f6f7f9 !important;
    box-shadow: none !important;
  }
  .app-modern-shell .main-nav-submenu a { min-height: 38px !important; padding: 8px 9px !important; font-size: 12px !important; }

  body.app-modern-shell.nav-open { overflow: hidden !important; }
  body.app-modern-shell.nav-open::after {
    content: "";
    position: fixed;
    inset: var(--ma-mobile-header-h) 0 0 0;
    z-index: 1328;
    background: rgba(18,20,24,.24);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
  }

  /* Compact utility rail directly under the top bar. */
  .app-modern-shell .workspace-utility-bar,
  .app-modern-shell.sidebar-collapsed .workspace-utility-bar {
    position: sticky !important;
    top: var(--ma-mobile-header-h) !important;
    z-index: 1200 !important;
    width: 100% !important;
    min-height: var(--ma-mobile-utility-h) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gm-border) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .app-modern-shell .workspace-section-search {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 auto 0 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .app-modern-shell .workspace-section-search__toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--gm-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .app-modern-shell .workspace-section-search__panel {
    position: fixed !important;
    top: calc(var(--ma-mobile-header-h) + var(--ma-mobile-utility-h) + 6px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68dvh, 560px) !important;
    overflow: auto !important;
    z-index: 1400 !important;
  }
  .app-modern-shell .workspace-utility-bar .header-actions,
  .app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
    order: 2 !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 44px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .app-modern-shell .workspace-utility-bar .header-actions::-webkit-scrollbar { display: none !important; }
  .app-modern-shell .workspace-utility-bar .header-actions > * { flex: 0 0 auto !important; }
  .app-modern-shell .header-store-picker summary,
  .app-modern-shell .header-profile-button,
  .app-language-switcher {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }
  .app-language-switcher { padding: 2px !important; }
  .app-language-switcher__button { min-width: 31px !important; height: 32px !important; padding: 0 7px !important; font-size: 10px !important; }
  .app-modern-shell .header-store-picker summary { padding-inline: 9px !important; gap: 5px !important; }
  .app-modern-shell .header-profile-button { padding-inline: 4px 7px !important; }
  .app-modern-shell .header-profile-avatar { width: 30px !important; height: 30px !important; }

  /* Page chrome fits the viewport; only data-dense children may overflow. */
  .app-modern-shell .page-container,
  .app-modern-shell.products-modern-body .page-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--ma-mobile-page-pad) var(--ma-mobile-page-pad) max(30px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }
  .app-modern-shell .page-container > * { max-width: 100%; }

  /* No extra toolbar above panning regions: touch swipe + a visible scrollbar is enough. */
  .app-mobile-scroll-toolbar { display: none !important; }
  .app-mobile-scroll-region,
  .app-mobile-wide-viewport,
  .app-responsive-table-wrap,
  .data-table-wrap,
  .products-modern-table-wrap,
  .pricing-table-wrap,
  .orders-table-wrap,
  .warehouse-stock-table-wrap,
  .progressive-table-card,
  .return-list-card,
  .wr-table-wrap,
  .wh-canvas-viewport,
  .dashboard-chart-mobile-viewport {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    scrollbar-color: #b8c0ca transparent;
  }
  .app-mobile-scroll-region::-webkit-scrollbar,
  .app-responsive-table-wrap::-webkit-scrollbar,
  .dashboard-chart-mobile-viewport::-webkit-scrollbar { height: 5px !important; }
  .app-mobile-scroll-region::-webkit-scrollbar-thumb,
  .app-responsive-table-wrap::-webkit-scrollbar-thumb,
  .dashboard-chart-mobile-viewport::-webkit-scrollbar-thumb { background: #b8c0ca; border-radius: 999px; }

  /* Dashboard: compact chrome, full-size plot only. */
  .dashboard-unified-body .dashboard-shell { gap: 10px !important; }
  .dashboard-unified-body .dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; }
  .dashboard-unified-body .metric-card {
    min-height: 138px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 7px 22px rgba(15,23,42,.035) !important;
  }
  .dashboard-unified-body .metric-card__header { min-height: 26px !important; margin-bottom: 6px !important; }
  .dashboard-unified-body .metric-card__header h2 { font-size: 11px !important; }
  .dashboard-unified-body .metric-card__main-value { margin: 8px 0 5px !important; font-size: 27px !important; }
  .dashboard-unified-body .orders-card-primary strong,
  .dashboard-unified-body .stock-values strong { font-size: 23px !important; }
  .dashboard-unified-body .dashboard-content-grid { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  .dashboard-unified-body .dashboard-panel { min-width: 0 !important; border-radius: 16px !important; }
  .dashboard-unified-body .dashboard-panel--chart { overflow: hidden !important; }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-panel__head {
    padding: 12px !important;
    gap: 8px !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-panel__head--wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 3px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    border-radius: 12px !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-tabs::-webkit-scrollbar { display: none !important; }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-tab {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .dashboard-panel__tools {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .period-select-trigger,
  .dashboard-unified-body .dashboard-panel--chart .period-select {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }
  .dashboard-unified-body .dashboard-panel--chart .chart-settings-button.column-settings-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
  }
  .dashboard-chart-mobile-viewport {
    width: calc(100% - 20px) !important;
    margin: 10px !important;
    border: 1px solid #edf1f4 !important;
    border-radius: 13px !important;
    background: #fff !important;
  }
  .dashboard-chart-mobile-viewport > .chart-stage {
    width: 680px !important;
    min-width: 680px !important;
    max-width: none !important;
    min-height: 300px !important;
    height: 300px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dashboard-unified-body .chart-legend { margin: 4px 12px 12px !important; gap: 6px !important; }
  .dashboard-unified-body .chart-legend > div { min-height: 36px !important; padding: 7px 9px !important; border-radius: 10px !important; }

  /* Tables retain data width but their surrounding card stays mobile-sized. */
  .app-responsive-table-wrap > table { width: max-content !important; max-width: none !important; }
  .data-table-wrap,
  .products-modern-table-wrap,
  .pricing-table-wrap,
  .orders-table-wrap,
  .warehouse-stock-table-wrap,
  .wr-table-wrap { border-radius: 12px !important; }

  /* Modals are sheets/cards, not scaled desktop windows. */
  :where(.modal-overlay,.profile-modal,.modal-backdrop) { padding: 8px !important; align-items: center !important; }
  :where(.modal-card,.profile-modal__card,.chart-settings-modal,.columns-modal-card) {
    width: min(100%, 680px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
    overflow: auto !important;
  }

  html[data-app-theme="dark"] body.app-modern-shell .app-header,
  html[data-app-theme="dark"] body.app-modern-shell .workspace-utility-bar,
  html[data-app-theme="dark"] body.app-modern-shell .main-nav { background: var(--dark-nav) !important; border-color: var(--dark-border-soft) !important; color: var(--dark-text) !important; }
  html[data-app-theme="dark"] body.app-modern-shell .nav-toggle,
  html[data-app-theme="dark"] body.app-modern-shell .workspace-section-search__toggle { background: var(--dark-surface-2) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; }
  html[data-app-theme="dark"] body.app-modern-shell .main-nav-submenu { background: rgba(255,255,255,.045) !important; }
  html[data-app-theme="dark"] .dashboard-chart-mobile-viewport { background: #16202a !important; border-color: #253240 !important; }
}

@media (max-width: 760px) {
  :root {
    --ma-mobile-header-h: 54px;
    --ma-mobile-utility-h: 48px;
    --ma-mobile-page-pad: 9px;
  }

  .app-modern-shell .app-header,
  .app-modern-shell.products-modern-body .app-header { padding: 0 9px 0 11px !important; }
  .app-modern-shell .brand-name,
  .app-modern-shell.products-modern-body .brand-name { font-size: 14px !important; }
  .app-modern-shell .nav-toggle,
  .app-modern-shell.products-modern-body .nav-toggle { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 11px !important; }

  .app-modern-shell .workspace-utility-bar,
  .app-modern-shell.sidebar-collapsed .workspace-utility-bar {
    min-height: var(--ma-mobile-utility-h) !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }
  .app-modern-shell .workspace-section-search__toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  .app-modern-shell .header-store-picker summary,
  .app-modern-shell .header-profile-button,
  .app-language-switcher { height: 36px !important; min-height: 36px !important; }
  .app-modern-shell .header-store-picker summary > span,
  .app-modern-shell .header-profile-button__text { display: none !important; }
  .app-modern-shell .header-store-picker summary { min-width: 64px !important; justify-content: center !important; }
  .app-modern-shell .header-profile-button { min-width: 42px !important; justify-content: center !important; padding: 0 4px !important; }
  .app-modern-shell .header-profile-button > svg { display: none !important; }
  .app-language-switcher__button { min-width: 29px !important; height: 30px !important; padding-inline: 6px !important; }

  .dashboard-unified-body .dashboard-hero-banner {
    height: 142px !important;
    min-height: 142px !important;
    border-radius: 15px !important;
  }
  .dashboard-unified-body .dashboard-hero-banner__content {
    width: 61% !important;
    max-width: 61% !important;
    padding: 0 12px !important;
  }
  .dashboard-unified-body .dashboard-hero-banner__content h1 { font-size: 25px !important; }
  .dashboard-unified-body .dashboard-hero-banner__content p { font-size: 9px !important; line-height: 1.3 !important; }
  .dashboard-unified-body .dashboard-hero-banner > img { width: 70% !important; right: -20% !important; }

  .dashboard-unified-body .dashboard-kpis { grid-template-columns: 1fr !important; gap: 8px !important; }
  .dashboard-unified-body .metric-card { min-height: 126px !important; padding: 12px 13px !important; }
  .dashboard-unified-body .orders-card-primary strong,
  .dashboard-unified-body .stock-values strong { font-size: 22px !important; }
  .dashboard-unified-body .metric-card__main-value { font-size: 26px !important; }

  .dashboard-chart-mobile-viewport > .chart-stage {
    width: 640px !important;
    min-width: 640px !important;
    min-height: 286px !important;
    height: 286px !important;
  }

  /* Compact action rows instead of full-width giant buttons. */
  :where(.page-heading--actions,.orders-page-heading,.warehouse-stocks-heading,.wr-wizard-heading) { gap: 9px !important; }
  :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) > :where(.button,button,a) {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 38px !important;
    padding-inline: 11px !important;
  }

  .page-heading h1,
  .orders-page-heading h1,
  .wr-wizard-heading h1 { font-size: 27px !important; line-height: 1.05 !important; }

  /* Keep toolbars compact: search can take a row, secondary controls don't. */
  .table-toolbar,
  .pricing-topline { gap: 6px !important; }
  .table-toolbar > *,
  .pricing-topline > * { width: auto !important; max-width: 100% !important; }
  .table-toolbar :is(.search-field,.products-modern-search),
  .pricing-topline :is(.pricing-search,.pricing-controls-parity__search) { width: 100% !important; flex: 1 1 100% !important; }

  .orders-modern-body .orders-metrics,
  body.warehouse-stocks-page .warehouse-stock-metrics { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Receiving stepper remains horizontally scrollable but compact. */
  .warehouse-receiving-page .wr-stepper > .wr-step { min-width: 138px !important; }
  .warehouse-receiving-page .wr-stepper > .wr-step span { min-width: 96px !important; }

  .app-mobile-top-button { width: 38px !important; height: 38px !important; right: 10px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; border-radius: 12px !important; }
}

@media (max-width: 380px) {
  .app-language-switcher__button { min-width: 27px !important; padding-inline: 5px !important; }
  .app-modern-shell .header-store-picker summary { min-width: 58px !important; padding-inline: 6px !important; }
  .app-modern-shell .workspace-utility-bar .header-actions { gap: 3px !important; }
  .dashboard-chart-mobile-viewport > .chart-stage { width: 600px !important; min-width: 600px !important; }
}