/**
 * BazaarVerse POS — mobile-only layout polish
 * Breakpoint matches existing shell: md = 768px (bottom nav / drawer).
 * Desktop / tablet (≥768px) is intentionally untouched.
 */

/* -------------------------------------------------------------------------- */
/* Phones (portrait + landscape under md)                                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #root {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Main shell already uses p-3 + bottom-nav padding; keep content in viewport */
  main.flex-1 {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Many modules use -mx-6 assuming desktop p-6.
   * App main is p-3 on mobile → -mx-6 causes horizontal page scroll.
   */
  main .-mx-6 {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
  }
  main .-mt-6 {
    margin-top: -0.75rem !important;
  }
  main .px-6.-mx-6,
  main [class*="-mx-6"][class*="px-6"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Touch scrolling for internal lists */
  .overflow-y-auto,
  .overflow-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Unobtrusive scrollbars where supported */
  .overflow-y-auto,
  .overflow-auto {
    scrollbar-width: thin;
  }

  /* Wide tables: keep page fixed; scroll inside table wrappers */
  .overflow-x-auto {
    max-width: 100%;
  }

  table {
    max-width: none;
  }

  /* 12-col list headers/rows (Inventory etc.): swipe inside parent, not the page */
  div:has(> .grid.grid-cols-12) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: thin;
  }
  .grid.grid-cols-12 {
    min-width: 42rem;
  }

  /* Forms: avoid fields wider than viewport */
  input,
  select,
  textarea {
    max-width: 100%;
  }

  /* ------------------------------------------------------------------ */
  /* Dialogs / modals — stay in viewport, scroll body when tall         */
  /* ------------------------------------------------------------------ */
  .fixed.inset-0.flex.items-center,
  .fixed.inset-0.flex.items-end,
  .fixed.inset-0[class*="items-center"],
  .fixed.inset-0[class*="justify-center"] {
    padding: 0.5rem !important;
    align-items: center;
  }

  .fixed.inset-0.flex.items-center > div,
  .fixed.inset-0[class*="items-center"] > div,
  .fixed.inset-0[class*="justify-center"] > div {
    max-width: min(100%, 100vw - 1rem) !important;
    max-height: min(92dvh, 100%) !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Full-screen mobile cart / similar panels keep flex column + internal scroll */
  .bv-sales-cart-panel {
    max-height: 100dvh !important;
    height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* ------------------------------------------------------------------ */
  /* Sales — denser adaptive product grid                               */
  /* ------------------------------------------------------------------ */
  .bv-sales-product-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 5.5rem !important; /* room for View Cart + bottom nav */
    scrollbar-width: thin;
  }

  .bv-sales-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
    gap: 0.5rem !important;
  }

  @media (min-width: 380px) {
    .bv-sales-product-grid {
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    }
  }

  @media (min-width: 430px) {
    .bv-sales-product-grid {
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    }
  }

  .bv-sales-product-grid > button {
    min-height: 0;
    border-radius: 0.875rem !important;
  }

  .bv-sales-product-img {
    height: clamp(44px, 16vw, 68px) !important;
  }

  .bv-sales-product-img img {
    padding: 4px !important;
  }

  .bv-sales-product-img svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  .bv-sales-product-grid > button > div:last-child {
    padding: 0.4rem 0.35rem 0.55rem !important;
  }

  .bv-sales-product-grid h4 {
    font-size: 0.6875rem !important;
    margin-bottom: 0.15rem !important;
  }

  .bv-sales-product-grid > button span.text-sm {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Cart lines: keep remove control visible without hover */
  .bv-sales-cart-panel .opacity-0 {
    opacity: 1 !important;
  }

  .bv-sales-cart-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* Slightly larger qty / remove hit areas in cart */
  .bv-sales-cart-panel button.p-1 {
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Floating View Cart sits above bottom nav */
  .bv-sales-view-cart-fab {
    bottom: 4.75rem !important;
  }

  /* ------------------------------------------------------------------ */
  /* Invoice preview picker — keep usable without redesign              */
  /* ------------------------------------------------------------------ */
  #bv-invoice-format-modal > div {
    max-width: min(100vw - 0.75rem, 36rem) !important;
    max-height: min(90dvh, 880px) !important;
  }

  #bv-selected-invoice-print {
    transform: scale(0.28) !important;
    margin-bottom: -520px !important;
  }

  /* ------------------------------------------------------------------ */
  /* Charts / dashboard cards                                           */
  /* ------------------------------------------------------------------ */
  .recharts-responsive-container,
  .recharts-wrapper {
    max-width: 100% !important;
  }

  /* Avoid clipped sticky headers eating space */
  .sticky.top-0 {
    max-width: 100%;
  }

  /* Tab strips: keep swipeable, reduce oversized gaps */
  .tab-scroll {
    gap: 1rem !important;
  }
}

/* Very narrow phones */
@media (max-width: 359.98px) {
  .bv-sales-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
  }

  main.flex-1 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Landscape phones: use width-based columns already; free vertical space */
@media (max-width: 767.98px) and (orientation: landscape) {
  .bv-sales-product-img {
    height: clamp(36px, 12vh, 56px) !important;
  }

  .bv-sales-product-scroll {
    padding-bottom: 4.25rem !important;
  }

  .bv-sales-view-cart-fab {
    bottom: 4.25rem !important;
  }
}

/* Prefer always-visible hover-only controls on coarse pointers (phones) */
@media (max-width: 767.98px) and (hover: none) {
  .group\/row .opacity-0,
  .group .opacity-0.group-hover\:opacity-100 {
    opacity: 1 !important;
  }
}