/* Growthmerce mobile pass v7 — last stylesheet on phones.
   Density + comfort + clean chrome. Desktop ≥768px untouched.
   Public customer tracking is excluded from staff shell rules. */

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

@media (max-width: 767.98px) {
  html:not([data-gm-public="1"]),
  html:not([data-gm-public="1"]) body,
  html:not([data-gm-public="1"]) #root {
    overflow-x: clip !important;
    max-width: 100%;
  }

  /* ---- Kill v5 leftover: hidden chip rail no longer needs 64px gutter ---- */
  html:not([data-gm-public="1"]) main.app-scroll-viewport,
  html:not([data-gm-public="1"]) main[data-gm-spa-main],
  html:not([data-gm-public="1"]) #root main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* In-flow phone header: menu + store + locale + bell + theme, then search.
     No position:fixed, no Bosta/Print shortcuts. */
  html:not([data-gm-public="1"]) header.premium-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions,
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-meta {
    display: contents !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions > button[data-sidebar="trigger"],
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions > button:first-child {
    order: 1 !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    flex: none !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--background) / 0.8) !important;
    z-index: auto !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-meta > div:first-child,
  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger {
    order: 2 !important;
    position: static !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .store-switcher-trigger .text-muted-foreground {
    display: none !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale,
  html:not([data-gm-public="1"]) [dir="rtl"] header.premium-header .mobile-account-locale {
    order: 3 !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    inset-inline-end: auto !important;
    inset-inline-start: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale > *,
  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale .mobile-header-user,
  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale > button:first-child {
    position: static !important;
    inset: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    z-index: auto !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale .gm-language-unified,
  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale [data-gm-native-lang],
  html:not([data-gm-public="1"]) header.premium-header .mobile-account-locale .gm-lang-toggle,
  html:not([data-gm-public="1"]) #gm-header-lang {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 40px !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding-inline: 8px !important;
    border-radius: 10px !important;
    z-index: auto !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions .mobile-notification-shell,
  html:not([data-gm-public="1"]) header.premium-header button[aria-label="Notifications"] {
    order: 4 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions .mobile-notification-shell > button,
  html:not([data-gm-public="1"]) header.premium-header button[aria-label="Notifications"] {
    position: relative !important;
    inset: auto !important;
    overflow: visible !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  html:not([data-gm-public="1"]) header.premium-header button[aria-label="Notifications"] > span.absolute,
  html:not([data-gm-public="1"]) header.premium-header .mobile-notification-shell span.absolute {
    position: absolute !important;
    top: -6px !important;
    inset-inline-end: -6px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions .mobile-theme-toggle {
    order: 5 !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    z-index: auto !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-search-row {
    order: 10 !important;
    flex: 1 1 100% !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-search-row .global-search-desktop,
  html:not([data-gm-public="1"]) header.premium-header .mobile-search-row .global-search-desktop > div {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  html:not([data-gm-public="1"]) header.premium-header .mobile-live-sync,
  html:not([data-gm-public="1"]) header.premium-header .mobile-search-host,
  html:not([data-gm-public="1"]) header [data-gm-bosta-print-nav],
  html:not([data-gm-public="1"]) header [data-gm-bosta-header],
  html:not([data-gm-public="1"]) header [title="Bosta Print"],
  html:not([data-gm-public="1"]) header [aria-label="Bosta Print"],
  html:not([data-gm-public="1"]) header [title="طباعة بوسطة"],
  html:not([data-gm-public="1"]) header [aria-label="طباعة بوسطة"],
  html:not([data-gm-public="1"]) header button:has(svg polyline[points="6 9 6 2 18 2 18 9"]),
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions > [data-gm-bosta-print-nav],
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions > a,
  html:not([data-gm-public="1"]) header.premium-header .mobile-header-actions > button:not(:first-child):not([data-sidebar="trigger"]):not(.mobile-theme-toggle):not([aria-label="Notifications"]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -100vw !important;
    top: auto !important;
  }

  html:not([data-gm-public="1"]) main nav[class*="section-workspace-nav"] a {
    min-height: 32px !important;
    font-size: 12px !important;
    padding-inline: 8px !important;
  }

  html:not([data-gm-public="1"]) main.app-scroll-viewport > div {
    padding-inline: 10px !important;
    max-width: 100% !important;
  }

  /* ---- Neutralize v5 auto-fit smash; KPI walls stay 2-col, forms stay stacked */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .grid {
    gap: 10px;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .grid:not(.gm-ord-kpis) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .grid:has(> :nth-child(3)):not(:has(input, select, textarea, table, [role="combobox"])):not(.gm-ord-kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html:not([data-gm-public="1"]) main .gm-ord-ops .gm-ord-kpis.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  /* Page chrome: titles + action rows wrap instead of overflowing */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) h1 {
    font-size: clamp(1.15rem, 4.6vw, 1.4rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    max-width: 100%;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) h2 {
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
    line-height: 1.25 !important;
  }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex.items-center.justify-between,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex.flex-row.items-center.gap-2,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex.flex-row.items-center.gap-3,
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .flex.flex-row.items-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100%;
  }

  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="p-8"] { padding: 14px !important; }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="p-7"] { padding: 13px !important; }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="gap-8"] { gap: 12px !important; }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="gap-6"] { gap: 10px !important; }
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [class*="rounded-3xl"] { border-radius: 18px !important; }

  /* Filter / tab strips: swipe, never clip labels */
  html:not([data-gm-public="1"]) main [class*="overflow-x-auto"],
  html:not([data-gm-public="1"]) main nav[class*="section-workspace-nav"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  html:not([data-gm-public="1"]) main [role="tablist"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html:not([data-gm-public="1"]) main [role="tab"] {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding-inline: 12px !important;
  }

  /* Tables swipe; first column sticks */
  html:not([data-gm-public="1"]) main div:has(> table),
  html:not([data-gm-public="1"]) .orders-desktop-scroll,
  html:not([data-gm-public="1"]) [data-layout="fit-product-performance"] {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  html:not([data-gm-public="1"]) .orders-desktop-scroll table,
  html:not([data-gm-public="1"]) [data-layout="fit-product-performance"] table {
    min-width: 640px !important;
    width: max-content !important;
  }
  html:not([data-gm-public="1"]) main table th,
  html:not([data-gm-public="1"]) main table td {
    white-space: nowrap;
  }

  /* Touch + iOS zoom lock */
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) button:not([role="checkbox"]):not([role="switch"]):not([class*="h-4"]):not([class*="h-5"]),
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) [role="button"]:not([data-gm="bosta-rate"]) {
    min-height: 44px;
  }
  html:not([data-gm-public="1"]) main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html:not([data-gm-public="1"]) main select,
  html:not([data-gm-public="1"]) main textarea,
  html:not([data-gm-public="1"]) main [role="combobox"] {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Sidebar sheet uses the full phone, with home-indicator room */
  html:not([data-gm-public="1"]) [data-sidebar="sidebar"][data-mobile="true"],
  html:not([data-gm-public="1"]) [data-mobile="true"][data-sidebar="sidebar"] {
    width: min(360px, 88vw) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  [role="dialog"],
  [data-radix-dialog-content],
  [data-radix-alert-dialog-content] {
    max-width: calc(100vw - 16px) !important;
    width: min(100vw - 16px, 560px) !important;
    max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }

  /* Charts hug the screen */
  html:not([data-gm-public="1"]) .recharts-wrapper,
  html:not([data-gm-public="1"]) .recharts-surface,
  html:not([data-gm-public="1"]) .recharts-legend-wrapper {
    max-width: 100% !important;
  }
  html:not([data-gm-public="1"]) .recharts-legend-wrapper {
    position: relative !important;
    inset: auto !important;
  }

  /* Overlay hosts: no dead space for a rail that is gone */
  html[data-gm-wa] #gm-wa-host {
    height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 8px calc(12px + 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 textarea { min-width: 0; flex: 1 1 160px; font-size: 16px !important; }
  #gm-wa .btn, #gm-wa .kpi, #gm-wa .chip { min-height: 44px; }

  html[data-gm-tpl] #gm-tpl-host {
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gm-tpl .rail { position: static !important; max-height: none !important; }
  #gm-tpl .searchbar { position: sticky; top: 0; z-index: 8; }
  #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: 44px; }

  html[data-gm-track] #gm-track-host,
  #gm-track-host {
    padding-inline: 10px !important;
    padding-bottom: calc(16px + 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; }

  /* Bosta Print / report studio */
  #gm-report-studio,
  [data-gm-bosta-print],
  main:has([data-gm-bosta-header]) {
    max-width: 100% !important;
  }
  #gm-report-studio {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
  }

  .gm-spa-chip-rail,
  #gm-bosta-print-chip,
  #gm-bosta-print-tab {
    display: none !important;
  }

}

@media (max-width: 359.98px) {
  html:not([data-gm-public="1"]) main:not(:has(.order-details-page)) .grid:has(> :nth-child(3)):not(:has(input, select, textarea, table, [role="combobox"])):not(.gm-ord-kpis) {
    grid-template-columns: 1fr !important;
  }
  html:not([data-gm-public="1"]) main .gm-ord-ops .gm-ord-kpis.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #gm-tpl .kpis { grid-template-columns: 1fr !important; }
}

/* Landscape phones: reclaim vertical space */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  html:not([data-gm-public="1"]) 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;
  }
}

/* Public customer tracking: readable form, no staff chrome */
@media (max-width: 767.98px) {
  html[data-gm-public="1"] #gm-public-track,
  #gm-public-track {
    padding-inline: 16px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #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; }
}

@media (pointer: coarse) and (hover: none) and (max-width: 1279.98px) {
  html:not([data-gm-public="1"]) header [data-gm-bosta-print-nav],
  html:not([data-gm-public="1"]) header [data-gm-bosta-header],
  html:not([data-gm-public="1"]) header [title="Bosta Print"],
  html:not([data-gm-public="1"]) header [aria-label="Bosta Print"],
  html:not([data-gm-public="1"]) header [title="طباعة بوسطة"],
  html:not([data-gm-public="1"]) header [aria-label="طباعة بوسطة"],
  html:not([data-gm-public="1"]) header button:has(svg polyline[points="6 9 6 2 18 2 18 9"]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -100vw !important;
    top: auto !important;
  }
}