/* Growthmerce mobile pass v10 — second full-system phone review.
   Desktop ≥768 untouched. Public tracking excluded.
   Must load after v9, before order-details mobile. */

@media (max-width: 767.98px) {
  /* Store chip was collapsing to ~80px ("T...") because native w-[min(100%,168px)]
     plus a language toggle (~92px) ate the header row. Give the name real width. */
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-meta > div:first-child {
    flex: 1 1 110px !important;
    min-width: 96px !important;
    max-width: 128px !important;
    width: auto !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    align-items: center !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger .text-muted-foreground,
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger [class*="text-[10"],
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger [class*="text-xs"],
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger [class*="text-[11"] {
    display: none !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger > span.min-w-0 > span:nth-child(2),
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger > span.min-w-0 > div {
    display: none !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger span.truncate,
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger .block.truncate {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not([data-gm-public="1"]) header.premium-header button.gm-lang-toggle,
  html:not([data-gm-public="1"]) header.premium-header .gm-lang-toggle {
    width: auto !important;
    min-width: 0 !important;
    max-width: 54px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px !important;
    gap: 0 !important;
  }
  html:not([data-gm-public="1"]) header.premium-header button.gm-lang-toggle .gm-lang-opt,
  html:not([data-gm-public="1"]) header.premium-header .gm-lang-opt {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 10px !important;
    padding: 0 !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale {
    gap: 4px !important;
  }

  /* v7 forced every [role=tablist] to display:flex, which un-hid
     .settings-desktop-tabs.hidden.sm:flex and clipped "Notifications". */
  html:not([data-gm-public="1"]) main .settings-desktop-tabs,
  html:not([data-gm-public="1"]) main [role="tablist"].hidden,
  html:not([data-gm-public="1"]) main .hidden[role="tablist"] {
    display: none !important;
  }

  /* Search + warehouse / filter combos: stack instead of clipping placeholders */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex:has(> input):has(select),
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex:has(input[placeholder]):has([role="combobox"]) {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) input[placeholder] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* KPI / ops cards: never split words letter-by-letter */
  html:not([data-gm-public="1"]) main p,
  html:not([data-gm-public="1"]) main [class*="card"] p,
  html:not([data-gm-public="1"]) main [class*="Card"] p {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }

  /* Integrations shipping table actions stay on the swipe scroller */
  html:not([data-gm-public="1"]) main div:has(> table) {
    padding-bottom: 4px;
  }

  /* Telegram configure sheet on phones */
  #gm-tg-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #gm-tg-modal .gm-tg-sheet-connect {
    width: 100% !important;
    max-height: min(96vh, 100%) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #gm-tg-modal .gm-tg-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #gm-tg-modal .gm-tg-tab {
    min-height: 40px !important;
    font-size: 11px !important;
  }
  #gm-tg-modal .gm-tg-grid,
  #gm-tg-modal .gm-tg-stats,
  #gm-tg-modal .gm-tg-flow {
    grid-template-columns: 1fr !important;
  }
  #gm-tg-modal input,
  #gm-tg-modal select,
  #gm-tg-modal textarea {
    font-size: 16px !important;
  }

  /* WhatsApp compose row */
  #gm-wa .row,
  #gm-wa-host .row {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  #gm-wa .row input,
  #gm-wa-host input[placeholder] {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: 16px !important;
  }
}

@media (max-width: 359.98px) {
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-meta > div:first-child {
    min-width: 96px !important;
  }
  html:not([data-gm-public="1"]) header.premium-header .gm-lang-toggle {
    max-width: 56px !important;
  }
}