/* Growthmerce mobile pass v8 — list pages + leftover cramped chrome.
   Desktop ≥768 untouched. Public tracking excluded. */

@media (max-width: 767.98px) {
  html:not([data-gm-public="1"]) main img,
  html:not([data-gm-public="1"]) main svg:not([class*="h-3"]):not([class*="h-4"]) {
    max-width: 100%;
  }

  html:not([data-gm-public="1"]) main pre,
  html:not([data-gm-public="1"]) main code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Call Center / queues: show the Full order link that native hides until sm */
  html:not([data-gm-public="1"]) main a[href^="/orders/"][class*="sm:flex"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    height: auto !important;
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Message orders / draft / abandoned / recovery: table → stacked cards */
  html[data-gm-order-list="1"] main .overflow-x-auto:has(> table),
  html[data-gm-order-list="1"] main div:has(> table) {
    overflow: visible !important;
  }
  html[data-gm-order-list="1"] main table thead {
    display: none !important;
  }
  html[data-gm-order-list="1"] main table:not(.hidden),
  html[data-gm-order-list="1"] main table:not(.hidden) tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html[data-gm-order-list="1"] main tbody tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid hsl(var(--border) / 0.8) !important;
    border-radius: 14px !important;
    background: hsl(var(--card)) !important;
    box-shadow: none !important;
  }
  html[data-gm-order-list="1"] main tbody td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  html[data-gm-order-list="1"] main tbody td:first-child {
    font-size: 16px !important;
    font-weight: 900 !important;
    padding-bottom: 8px !important;
  }
  html[data-gm-order-list="1"] main tbody td a[href^="/orders/"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
  }
  html[data-gm-order-list="1"] main table th:first-child,
  html[data-gm-order-list="1"] main table td:first-child {
    position: static !important;
    background: transparent !important;
  }

  html:not([data-gm-public="1"]) main .flex.flex-col.gap-2.lg\:flex-row > *,
  html:not([data-gm-public="1"]) main .flex.flex-col.gap-3.lg\:flex-row > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) main [class*="lg:w-44"],
  html:not([data-gm-public="1"]) main [class*="lg:w-40"],
  html:not([data-gm-public="1"]) main [class*="lg:w-52"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  html:not([data-gm-public="1"]) .recharts-wrapper,
  html:not([data-gm-public="1"]) .recharts-legend-wrapper {
    max-width: 100% !important;
    overflow: hidden;
  }

  html:not([data-gm-public="1"]) [role="dialog"] {
    max-width: calc(100vw - 16px) !important;
    width: min(100vw - 16px, 560px) !important;
  }
}