/* Growthmerce mobile pass v9 — full-staff shell.
   Desktop ≥768 untouched. Public tracking excluded.
   Does not flatten .order-details-page (that file stays last). */

@media (max-width: 767.98px) {
  html:not([data-gm-public="1"]) {
    overflow-x: clip;
  }

  /* Any table wrapper — including overflow-hidden cards — can swipe */
  html:not([data-gm-public="1"]) main :has(> table) {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Page toolbars that only become a row on large screens */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="lg:flex-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="md:grid-cols-3"],
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="lg:grid-cols-3"],
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="lg:grid-cols-4"],
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="xl:grid-cols"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Compact native icon / sm buttons become finger-sized, not KPI tiles */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) button.h-6,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) button.h-7,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) button.h-8,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) a.h-8,
  html:not([data-gm-public="1"]) main table button,
  html:not([data-gm-public="1"]) main table a {
    min-height: 40px !important;
    min-width: 40px !important;
  }
  html:not([data-gm-public="1"]) main .gm-ord-ops .gm-ord-kpis button {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  html:not([data-gm-public="1"]) main input.h-8,
  html:not([data-gm-public="1"]) main input.h-9,
  html:not([data-gm-public="1"]) main select.h-8,
  html:not([data-gm-public="1"]) main select.h-9 {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* Menus / calendars stay on-screen */
  html:not([data-gm-public="1"]) [data-radix-popper-content-wrapper],
  html:not([data-gm-public="1"]) [role="menu"],
  html:not([data-gm-public="1"]) [data-radix-select-content],
  html:not([data-gm-public="1"]) [data-radix-calendar] {
    max-width: calc(100vw - 12px) !important;
  }

  html:not([data-gm-public="1"]) [data-sonner-toaster],
  html:not([data-gm-public="1"]) ol[tabindex="-1"][class*="toast"] {
    inset-inline: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* Charts: legend wraps under the plot */
  html:not([data-gm-public="1"]) .recharts-legend-wrapper {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  html:not([data-gm-public="1"]) .recharts-default-legend,
  html:not([data-gm-public="1"]) .recharts-legend-item {
    flex-wrap: wrap !important;
  }
  html:not([data-gm-public="1"]) .recharts-wrapper {
    max-width: 100% !important;
  }

  /* Overlay WhatsApp inbox — never a 28k-px flex row */
  #gm-wa,
  #gm-wa .stage,
  #gm-wa .list,
  #gm-wa .contacts,
  #gm-wa .row,
  #gm-wa .who {
    min-width: 0 !important;
    max-width: 100%;
  }
  #gm-wa .contacts,
  #gm-wa .list {
    overflow-x: hidden !important;
  }
  #gm-wa .chips {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  #gm-wa .btn,
  #gm-wa .kpi,
  #gm-wa .chip {
    min-height: 44px !important;
  }

  html[data-gm-tpl="1"] #gm-tpl-host {
    padding-inline: 10px !important;
  }
  #gm-tpl .btn,
  #gm-tpl .acts button,
  #gm-tpl button {
    min-height: 40px;
  }

  html:not([data-gm-public="1"]) main [class*="min-w-"] {
    max-width: 100%;
  }
}

@media (max-width: 359.98px) {
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="md:grid-cols-3"],
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="lg:grid-cols-4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}