/* Growthmerce mobile pass (< 768px). Generic, page-agnostic rules that fix the
   recurring problems on phones: squeezed chip rows, unreadable micro text,
   single-column stat walls, oversized inline badges, cramped card padding.
   Desktop is untouched. Loaded after index-gm-mobile.css. */
@media (max-width: 767.98px) {
  /* --- Content width & spacing ------------------------------------------ */
  main.app-scroll-viewport {
    padding-inline: 0 !important;
    /* room for the fixed install banner */
    padding-bottom: 24px !important;
  }
  main.app-scroll-viewport > div {
    padding-inline: 10px !important;
  }
  main.app-scroll-viewport [class*="rounded-2xl"],
  main.app-scroll-viewport [class*="rounded-xl"] {
    border-radius: 14px !important;
  }
  main.app-scroll-viewport [class*="p-6"] {
    padding: 14px !important;
  }
  main.app-scroll-viewport [class*="p-5"] {
    padding: 12px !important;
  }

  /* --- Typography floor -------------------------------------------------- */
  main [class*="text-[7px]"],
  main [class*="text-[8px]"],
  main [class*="text-[9px]"] {
    font-size: 10px !important;
  }
  main [class*="text-[10px]"] {
    font-size: 11px !important;
  }
  main [class*="text-[11px]"] {
    font-size: 12px !important;
  }

  /* --- Horizontal rows (chips, tab strips, quick filters) --------------- */
  main [class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  main [class*="overflow-x-auto"]::-webkit-scrollbar {
    display: none;
  }
  main [class*="overflow-x-auto"] > :is(a, button, span, div) {
    flex-shrink: 0 !important;
  }
  main [class*="overflow-x-auto"] > :is(a, button) svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
  }
  main nav[aria-label] [class*="overflow-x-auto"] > a {
    min-height: 40px !important;
  }
  /* Section tab strip: fade the trailing edge so a half-visible tab reads as
     "swipe for more" instead of a cut label. */
  main nav[class*="section-workspace-nav"] > [class*="overflow-x-auto"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  [dir="rtl"] main nav[class*="section-workspace-nav"] > [class*="overflow-x-auto"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }

  /* --- Stat walls -> two columns ---------------------------------------- */
  /* Grids with 4+ card children and no form controls/tables (KPI blocks). */
  main .grid:has(> :nth-child(4)):not(:has(input, select, textarea, table, [role="combobox"])) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  main .grid:has(> :nth-child(4)):not(:has(input, select, textarea, table, [role="combobox"])) > * {
    min-width: 0;
  }

  /* --- Tables: always swipeable, never clipped --------------------------- */
  main div:has(> table) {
    overflow-x: auto !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  main table th,
  main table td {
    white-space: nowrap;
  }
  main table th:first-child,
  main table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: hsl(var(--card, var(--background)));
    z-index: 1;
  }

  /* --- Inline badges injected by the order enhancements ------------------ */
  [data-gm="bosta-rate"] {
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    line-height: 1.15 !important;
  }
  [data-gm="bosta-rate"] span[style*="font-size: 15px"] {
    font-size: 12px !important;
  }
  [data-gm="bosta-rate"] > div + div {
    font-size: 10px !important;
  }

  /* --- Touch targets ----------------------------------------------------- */
  main button:not([class*="h-4"]):not([class*="h-5"]):not([class*="h-6"]):not([role="checkbox"]):not([role="switch"]):not([role="tab"]),
  main [role="button"]:not([data-gm="bosta-rate"]) {
    min-height: 36px;
  }
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main [role="combobox"] {
    min-height: 42px !important;
    font-size: 15px !important;
  }

  /* --- Sheet / dialog polish ----------------------------------------------- */
  [data-sidebar="sidebar"][data-mobile="true"] {
    width: min(320px, 86vw) !important;
  }
  [role="dialog"] {
    border-radius: 16px !important;
  }

  /* --- Orders list (/orders) ---------------------------------------------- */
  /* KPI wall: 3 compact tiles per row, value + label only. */
  main .gm-ord-ops section > button + div:has(+ .gm-ord-kpis) {
    display: none !important;
  }
  main .gm-ord-ops section .gm-ord-kpis.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button {
    min-height: 0 !important;
    padding: 9px 8px 8px !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button > div:first-child {
    align-items: center !important;
    gap: 6px !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button > div:first-child > span:first-child {
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button > div:first-child > span:first-child svg {
    width: 12px !important;
    height: 12px !important;
  }
  main .gm-ord-ops .gm-ord-kpi-val {
    font-size: 15px !important;
    line-height: 1 !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button > p {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  main .gm-ord-ops .gm-ord-kpis > button > div:last-child {
    display: none !important;
  }
  main .gm-ord-ops .gm-ord-kpis + div {
    padding: 6px 10px !important;
    gap: 2px 10px !important;
    font-size: 10px !important;
  }

  /* Status filter: 2-column pill grid with counts (Aseel-style) instead of a
     14-item underline strip that hid everything past "No Answer". */
  main .gm-ord-ops > .overscroll-x-contain.snap-x {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    border-bottom: 0 !important;
    padding: 2px 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  main .gm-ord-ops > .overscroll-x-contain.snap-x > button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 6px 10px !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 11px !important;
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: start !important;
    white-space: normal !important;
    overflow: hidden !important;
  }
  main .gm-ord-ops > .overscroll-x-contain.snap-x > button > span {
    order: 2 !important;
    flex: none !important;
    height: 22px !important;
    min-width: 26px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }
  main .gm-ord-ops > .overscroll-x-contain.snap-x > button.border-primary {
    border-color: hsl(var(--primary)) !important;
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: 0 6px 18px hsl(var(--primary) / 0.35) !important;
  }
  main .gm-ord-ops > .overscroll-x-contain.snap-x > button.border-primary > span {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
  }

  /* Smart select: one swipeable row instead of a 3-line wrap. */
  main .gm-ord-ops > div.min-h-9.flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding-bottom: 8px !important;
  }
  main .gm-ord-ops > div.min-h-9.flex-wrap::-webkit-scrollbar {
    display: none;
  }
  main .gm-ord-ops > div.min-h-9.flex-wrap > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Filter buttons row: proper touch height. */
  main .gm-ord-ops > .flex-col > .grid-cols-2 > * {
    min-height: 42px !important;
  }

  /* Order cards: tighter chrome, bigger customer + amount. */
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl {
    border-radius: 14px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:first-child {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div.p-3 {
    padding: 10px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl p.text-\[15px\] {
    font-size: 16.5px !important;
    line-height: 1.25 !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl p.font-mono.text-\[12px\] {
    font-size: 13px !important;
    letter-spacing: 0.02em;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl p.text-sm.font-black.tabular-nums {
    font-size: 16px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl span.text-\[7px\] {
    font-size: 10px !important;
    padding: 1px 7px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > *,
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child button {
    height: 42px !important;
    min-height: 42px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > a,
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > div,
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > button {
    width: 42px !important;
    border-radius: 11px !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > div:first-child {
    width: auto !important;
  }
  main .gm-ord-ops .space-y-2\.5 > div.rounded-xl > div:last-child > div:first-child > button {
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* --- Page-level guards ---------------------------------------------------- */
  main.app-scroll-viewport {
    overflow-x: hidden !important;
  }
  main.app-scroll-viewport > div {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* injected bulk bar has 8px side margins on top of a 100% width */
  main.app-scroll-viewport > #gm-meta-bulk-bar {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
  }
  /* shadcn badges are forced to 10px by index-gm-orders-compact.css */
  main .inline-flex.rounded-full.border.font-semibold {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  /* icon-only buttons squeezed to ~24px wide */
  main button:has(> svg:only-child) {
    min-width: 36px !important;
  }
  /* headings clipped to "Message ..." / "Total Or..." read as bugs on phones */
  main h1.truncate,
  main h2.truncate,
  main h3.truncate,
  main .gm-hover-lift span.truncate,
  main button.rounded-2xl span.truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }
  /* charts must never exceed their card */
  main .recharts-responsive-container,
  main .recharts-wrapper {
    max-width: 100% !important;
  }
  /* --- Dashboard KPI tiles ------------------------------------------------- */
  main .metric-help-trigger {
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0.7;
  }
  main .gm-hover-lift {
    min-height: 0 !important;
    padding: 12px !important;
  }
  main .gm-hover-lift > div:first-child {
    gap: 6px !important;
  }
  main .gm-hover-lift > div:first-child > .space-y-1 > p:first-child,
  main .gm-hover-lift > div:first-child p.text-sm.font-extrabold {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  /* long explanatory sub-lines under a KPI value are desktop copy */
  main .gm-hover-lift > div:first-child > .space-y-1 > p:nth-child(n + 2),
  main .gm-hover-lift > .space-y-1 > p:nth-child(n + 2),
  main .gm-hover-lift > p.text-\[10px\],
  main .gm-hover-lift > p.text-\[9px\] {
    display: none !important;
  }
  main .gm-hover-lift > p.text-2xl,
  main .gm-hover-lift > p.text-\[26px\] {
    margin-top: 8px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  main .gm-hover-lift > p.truncate {
    white-space: normal !important;
    overflow: visible !important;
    font-size: 10.5px !important;
  }

  /* --- Data tables: denser rows, real touch targets ------------------------ */
  /* long selector chain on purpose: index-gm-tables.css pads cells to 18px
     with a more specific rule */
  main table {
    --gm-tbl-pad-y: 9px;
    --gm-tbl-pad-x: 10px;
    --gm-tbl-row-min: 52px;
    --gm-tbl-row-gap: 4px;
  }
  html body main table thead tr th,
  html body main table tbody tr td {
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  html body main table thead tr th {
    font-size: 10.5px !important;
    letter-spacing: 0.04em;
  }
  main table [role="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }
  main table td:first-child:has([role="checkbox"]),
  main table th:first-child:has([role="checkbox"]) {
    min-width: 44px;
  }

  /* --- WhatsApp workspace: the sticky tab strip -------------------------- */
  main .gm-wa-pagehead {
    gap: 0 !important;
    padding: 6px 4px !important;
    scrollbar-width: none;
  }
  main .gm-wa-pagehead::-webkit-scrollbar {
    display: none;
  }
  /* the API badge/actions collapse to a 27px column next to the strip and are
     repeated in the panel right below */
  main .gm-wa-pagehead > .flex-wrap {
    display: none !important;
  }
  main .gm-wa-pagehead .gm-wa-nav {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }
  main .gm-wa-pagehead .gm-wa-nav button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
  }

  /* --- Order details: journey as a 3-column stage grid ------------------- */
  main [data-gm="journey"] .snap-x {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  main [data-gm="journey"] .snap-x > div {
    width: auto !important;
    min-width: 0 !important;
    min-height: 84px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 6px !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 14px !important;
    background: hsl(var(--card)) !important;
    text-align: center !important;
  }
  main [data-gm="journey"] .snap-x > div[data-done="1"] {
    border-color: hsl(var(--primary) / 0.7) !important;
    background: hsl(var(--primary) / 0.14) !important;
  }
  main [data-gm="journey"] .snap-x > div[data-done="1"] .gm-journey-label {
    color: hsl(var(--primary)) !important;
  }
  /* the next pending stage after the last completed one */
  main [data-gm="journey"] .snap-x > div[data-done="1"] + div[data-done="0"] {
    border-style: dashed !important;
    border-color: hsl(var(--primary) / 0.55) !important;
  }
  main [data-gm="journey-line"] {
    display: none !important;
  }
  main [data-gm="journey-dot"] {
    width: 26px !important;
    height: 26px !important;
    margin: 0 auto !important;
    border-width: 1.5px !important;
  }
  main [data-gm="journey-dot"] svg {
    width: 13px !important;
    height: 13px !important;
  }
  main [data-gm="journey-dot"][data-done="0"] {
    background: transparent !important;
    opacity: 0.7;
  }
  main [data-gm="journey"] .snap-x > div > div:last-child {
    padding: 0 !important;
    width: 100% !important;
  }
  main [data-gm="journey"] .gm-journey-label {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  main [data-gm="journey"] .snap-x > div > div:last-child p + p {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    white-space: normal !important;
  }
}

/* --- Order details: confirmation right under customer details ------------
   Below lg the page is one column and the sidebar column (customer, address,
   info, tags, notes, comments...) is rendered before the main column, so the
   "Order confirmation" card sat 10 cards down. Flattening both columns into
   the grid lets `order` interleave them: Customer details -> Order
   confirmation -> Confirmation & contact log -> the rest. Desktop keeps its
   two-column layout (they already sit side by side there). */
@media (max-width: 1023.98px) {
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-1.lg\:order-2.lg\:sticky,
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-2.lg\:order-1.lg\:col-span-2 {
    display: contents !important;
  }
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-1.lg\:order-2.lg\:sticky > *,
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-2.lg\:order-1.lg\:col-span-2 > * {
    margin-top: 0 !important; /* the grid gap replaces space-y-4 */
    min-width: 0;
    order: 3;
  }
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-1.lg\:order-2.lg\:sticky > :first-child {
    order: 0; /* Customer details */
  }
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-2.lg\:order-1.lg\:col-span-2 > :first-child {
    order: 1; /* Order confirmation */
  }
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-2.lg\:order-1.lg\:col-span-2 > :nth-child(2) {
    order: 2; /* Confirmation & contact log stays with its section */
  }
  main .grid.grid-cols-1.lg\:grid-cols-3 > .order-2.lg\:order-1.lg\:col-span-2 > :nth-child(n + 3) {
    order: 4;
  }
}

/* --- Select menus: bottom sheet on phones ---------------------------------
   Radix Select renders a popper next to the trigger. On a phone that floats
   over the header, clips the list and relies on hover-to-scroll arrows, so
   long lists (order status) could not be reached. Pin it to the bottom edge
   as a sheet with large rows and native touch scrolling. */
@media (max-width: 767.98px) {
  [data-radix-popper-content-wrapper]:has(> [role="listbox"]) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 1000 !important;
  }
  [data-radix-popper-content-wrapper] > [role="listbox"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: min(72vh, 72dvh) !important;
    margin: 0 !important;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -16px 48px rgba(2, 6, 23, 0.45) !important;
    animation: none !important;
    transform: none !important;
  }
  [data-radix-popper-content-wrapper] > [role="listbox"]::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: hsl(var(--muted-foreground) / 0.35);
  }
  [data-radix-popper-content-wrapper] > [role="listbox"] [data-radix-select-viewport] {
    max-height: calc(min(72vh, 72dvh) - 44px - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 0 !important;
  }
  /* hover-driven scroll arrows are useless on touch */
  [data-radix-popper-content-wrapper] > [role="listbox"] > div[aria-hidden="true"] {
    display: none !important;
  }
  [data-radix-popper-content-wrapper] > [role="listbox"] [role="option"] {
    min-height: 48px !important;
    padding: 12px 12px 12px 40px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  [dir="rtl"] [data-radix-popper-content-wrapper] > [role="listbox"] [role="option"] {
    padding: 12px 40px 12px 12px !important;
  }
  [data-radix-popper-content-wrapper] > [role="listbox"] [role="option"][data-state="checked"] {
    background: hsl(var(--primary) / 0.14) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 700 !important;
  }
  [data-radix-popper-content-wrapper] > [role="listbox"] [role="option"] + [role="option"] {
    margin-top: 2px;
  }
  /* dim the page behind the sheet; a tap on it closes the menu */
  body:has([data-radix-popper-content-wrapper] > [role="listbox"][data-state="open"])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(2, 6, 23, 0.5);
  }
}