/* Growthmerce mobile pass v5 — last stylesheet on phones.
   Covers 320–767px (SE, Android compact, iPhone, Plus) and 768–1023 (phablet).
   Desktop ≥1024 untouched. Safe-area for notched iOS. Loaded after unified-header. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1023.98px) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }
  #root, #root > div {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  html, body, #root {
    overflow-x: clip !important;
  }

  /* ---- Header: beat unified-header 64px lock -------------------------------- */
  header.premium-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }
  header.premium-header .mobile-header-meta {
    position: static !important;
    order: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 96px 0 48px !important;
    overflow: hidden !important;
    flex: none !important;
  }
  [dir="rtl"] header.premium-header .mobile-header-meta {
    padding: 0 48px 0 96px !important;
  }
  header.premium-header .mobile-header-meta > div:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  header.premium-header .mobile-header-meta > div:first-child > button,
  header.premium-header .store-switcher-trigger {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  header.premium-header .mobile-live-sync,
  header.premium-header .mobile-search-host {
    display: none !important;
  }
  header.premium-header .mobile-account-locale {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  header.premium-header .mobile-account-locale .mobile-header-user {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  header.premium-header .mobile-search-row {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
  }
  header.premium-header .mobile-search-row .global-search-desktop,
  header.premium-header .mobile-search-row .global-search-desktop > div {
    width: 100% !important;
    min-height: 40px !important;
  }
  header.premium-header .mobile-header-actions {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 30 !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    gap: 0 !important;
  }
  header.premium-header .mobile-header-actions > * { pointer-events: auto !important; }
  header.premium-header .mobile-header-actions > button:first-child,
  header.premium-header .mobile-header-actions > button[data-sidebar="trigger"],
  header.premium-header .mobile-header-actions .mobile-notification-shell,
  header.premium-header .mobile-header-actions .mobile-theme-toggle {
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    z-index: 40 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  header.premium-header .mobile-header-actions > button:first-child,
  header.premium-header .mobile-header-actions > button[data-sidebar="trigger"] {
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
  }
  header.premium-header .mobile-header-actions .mobile-notification-shell {
    inset-inline-end: 58px !important;
    inset-inline-start: auto !important;
  }
  header.premium-header .mobile-header-actions .mobile-theme-toggle {
    inset-inline-end: 10px !important;
    inset-inline-start: auto !important;
  }
  header.premium-header .mobile-header-actions > a,
  header.premium-header .gm-dash-chip,
  header.premium-header [data-gm-dash-chip],
  header.premium-header .gm-guide-page-btn {
    display: none !important;
  }

  /* Bottom quick rail: labels off, pad page so it does not cover lists */
  .gm-spa-chip-rail {
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline: 10px !important;
    height: 48px !important;
    z-index: 35 !important;
  }
  .gm-spa-chip-rail .gm-dash-chip span { display: none !important; }
  main.app-scroll-viewport,
  main[data-gm-spa-main],
  #root main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Page content ------------------------------------------------------- */
  main { min-width: 0 !important; max-width: 100% !important; }
  main .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)) !important;
  }
  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 [class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  main div:has(> table),
  .orders-desktop-scroll,
  [data-layout="fit-product-performance"] {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .orders-desktop-scroll table,
  [data-layout="fit-product-performance"] table {
    min-width: 640px !important;
    width: max-content !important;
  }
  main table th, main table td { white-space: nowrap; }
  main button:not([role="checkbox"]):not([role="switch"]),
  main [role="button"] {
    min-height: 40px;
  }
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea,
  main [role="combobox"] {
    min-height: 42px;
    font-size: 16px !important; /* iOS: no auto-zoom */
  }

  /* Dialogs / sheets */
  [role="dialog"],
  [data-radix-dialog-content] {
    max-width: calc(100vw - 16px) !important;
    width: min(100vw - 16px, 560px) !important;
    max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    overflow: auto !important;
  }

  /* Charts */
  .recharts-wrapper, .recharts-surface, .recharts-legend-wrapper {
    max-width: 100% !important;
  }
  .recharts-legend-wrapper {
    position: relative !important;
    inset: auto !important;
  }

  /* Overlay hosts */
  html[data-gm-wa] #gm-wa-host {
    height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 8px calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gm-wa .composer {
    flex-wrap: wrap;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  #gm-wa .composer select { width: 100%; }
  #gm-wa .composer textarea { min-width: 0; flex: 1 1 160px; font-size: 16px !important; }
  #gm-wa .btn, #gm-wa .kpi, #gm-wa .chip { min-height: 40px; }
  #gm-wa .chead { gap: 8px; }
  #gm-wa h1 { font-size: 18px; }

  html[data-gm-tpl] #gm-tpl-host {
    padding: 8px 10px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gm-tpl .rail { position: static !important; max-height: none !important; }
  #gm-tpl .searchbar { position: sticky; top: 0; }
  #gm-tpl .searchbar input, #gm-tpl .searchbar select { font-size: 16px !important; min-width: 0 !important; width: 100%; }
  #gm-tpl .count-chip { margin-inline-start: 0; }
  #gm-tpl .btn { min-height: 40px; }
  #gm-tpl h1 { font-size: 20px; }

  html[data-gm-track] #gm-track-host,
  #gm-track-host {
    padding-inline: 10px !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gm-track .grid { grid-template-columns: 1fr !important; }
  #gm-track .colors { grid-template-columns: 1fr 1fr !important; }
  #gm-track .preview { min-height: 0 !important; position: static !important; }
  #gm-track input, #gm-track select, #gm-track textarea { font-size: 16px !important; }

  .gm-dash-shell {
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .gm-dash-home span { display: none !important; }
  .gm-dash-chips { order: 3; flex: 1 1 100%; }
  .gm-dash-chip span { display: none !important; }

  .gm-guide-page-btn {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Public customer tracking */
  #gm-public-track form { flex-direction: column !important; }
  #gm-public-track .submit { width: 100% !important; min-height: 48px !important; }
  #gm-public-track input { font-size: 16px !important; min-height: 48px !important; }
  #gm-public-track h1 { font-size: 26px !important; }
}

/* Very small phones (iPhone SE / 320–359) */
@media (max-width: 359.98px) {
  header.premium-header .mobile-header-meta {
    padding: 0 88px 0 44px !important;
  }
  [dir="rtl"] header.premium-header .mobile-header-meta {
    padding: 0 44px 0 88px !important;
  }
  header.premium-header .store-switcher-trigger { font-size: 12px !important; }
  main .grid:has(> :nth-child(4)):not(:has(input, select, textarea, table, [role="combobox"])) {
    grid-template-columns: 1fr !important;
  }
  #gm-wa .kpis { gap: 4px; }
  #gm-tpl .kpis { grid-template-columns: 1fr !important; }
}

/* Landscape phones */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  header.premium-header { padding-block: 4px !important; gap: 4px !important; }
  html[data-gm-wa] #gm-wa-host {
    height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
  }
  .gm-spa-chip-rail { display: none !important; }
}