/* MasterForce Mobile UI V2 — fluid width contract.
   Mobile only (<768px). 390px is a reference viewport, not a maximum app width.
   Standard content keeps 8px from the real device edge; forms/dialogs keep 12px.
   This file changes horizontal geometry only: no heights, typography, colors or business logic. */
@media (max-width: 767px) {
  :root {
    --mf-mobile-page-gutter: 8px;
    --mf-mobile-form-gutter: 12px;
    --mf-mobile-section-width: calc(100vw - 16px);
    --mf-mobile-form-width: calc(100vw - 24px);
  }

  /* 390/374 are reference dimensions from the design, never runtime max-width caps. */
  html body #root [class~="max-w-[390px]"],
  html body #root [class~="max-w-[374px]"] {
    max-width: none !important;
  }

  html body #root [class~="w-[390px]"] {
    width: 100% !important;
    max-width: none !important;
  }

  /* Legacy 16px page gutters become 8px. Existing px-2 owners are already correct. */
  html body #root [class~="max-w-[390px]"][class~="px-4"],
  html body #root [class~="w-[390px]"][class~="px-4"],
  html body #root [data-mobile-ui="menu"],
  html body #root header[data-mobile-ui="top-bar"] {
    padding-left: var(--mf-mobile-page-gutter) !important;
    padding-right: var(--mf-mobile-page-gutter) !important;
  }

  /* Full-width legacy 358px owners now fill their parent instead of staying fixed. */
  html body #root [class~="w-[358px]"]:not(form):not([role="dialog"]),
  html body #root [class~="max-w-[358px]"]:not(form):not([role="dialog"]) {
    width: 100% !important;
    max-width: none !important;
  }

  /* Absolute 16px + 358px layouts used by old mobile owners become 0 + 100%. */
  html body #root [class~="left-4"][class~="w-[358px]"],
  html body #root [class~="left-4"][class~="max-w-[358px]"] {
    left: 0 !important;
  }

  /* Forms/dialogs remain slightly narrower: 12px from each physical viewport edge. */
  html body #root form[class~="max-w-[358px]"],
  html body #root section[role="dialog"][aria-modal="true"]:not([data-mobile-dealer="more-sheet"]):not([data-mobile-dealer-material^="viewer-"]):not([data-mobile-dealer-support^="chat-"]) {
    width: min(100%, var(--mf-mobile-form-width)) !important;
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Dealer page-width sheets/viewers use the normal 8px mobile gutter, not form gutters. */
  html body #root section[role="dialog"][aria-modal="true"][data-mobile-dealer="more-sheet"],
  html body #root section[role="dialog"][aria-modal="true"][data-mobile-dealer-material^="viewer-"],
  html body #root section[role="dialog"][aria-modal="true"][data-mobile-dealer-support^="chat-"] {
    width: min(100%, var(--mf-mobile-section-width)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto;
  }

  /* Checkout: only outer width/gutters are changed. */
  html body #root [data-mobile-ui="checkout-shell"] .page-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--mf-mobile-page-gutter) !important;
    padding-right: var(--mf-mobile-page-gutter) !important;
  }

  html body #root [data-mobile-ui="checkout-shell"] .page-container > .mb-8.grid,
  html body #root [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:first-child,
  html body #root [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:first-child > .bg-card,
  html body #root [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:last-child,
  html body #root [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:last-child > .bg-card {
    width: 100% !important;
    max-width: none !important;
  }

  /* Order/payment result flows use the same device-edge rule. */
  html body #root [data-mobile-ui="order-flow-shell"] .page-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--mf-mobile-page-gutter) !important;
    padding-right: var(--mf-mobile-page-gutter) !important;
  }

  html body #root [data-mobile-ui="order-flow-shell"] .page-container > .mx-auto,
  html body #root [data-mobile-ui="order-flow-shell"] .page-container > .mx-auto > div {
    width: 100% !important;
    max-width: none !important;
  }

  /* Account order list outer margin follows the same 8px device gutter. */
  html body #root [data-mobile-orders-content="ready"] > div {
    margin-left: var(--mf-mobile-page-gutter) !important;
    margin-right: var(--mf-mobile-page-gutter) !important;
  }

  /* App-owned 404/system state: only horizontal geometry. */
  html body #root [data-mobile-ui="root-layout"] main > .page-container.py-20.text-center > h1,
  html body #root [data-mobile-ui="root-layout"] main > .page-container.py-20.text-center > p:nth-of-type(1) {
    left: var(--mf-mobile-page-gutter) !important;
    width: var(--mf-mobile-section-width) !important;
  }

  /* Dealer shell is fluid too. Its main already has px-2 = 8px device gutters. */
  html body #root [data-mobile-dealer="shell"],
  html body #root nav[data-mobile-dealer="bottom-nav"] {
    width: 100% !important;
    max-width: none !important;
  }

  html body #root [data-mobile-dealer="shell"] > main {
    width: 100% !important;
    max-width: none !important;
  }

  html body #root [data-mobile-dealer-dashboard="content"] {
    width: 100% !important;
    max-width: none !important;
  }

  html body #root [data-mobile-dealer-dashboard="content"] [class~="left-4"][class~="w-[358px]"],
  html body #root [data-mobile-dealer-dashboard="content"] [class~="left-4"][class~="max-w-[358px]"] {
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}