/* ServX responsive safety patch — small screens only (tablet & mobile).
   Scoped to <=1024px so the laptop/large-screen layout is never affected.
   Loaded after the app stylesheet so these rules win. v16
   (new filename to bypass any stale browser/proxy cache).

   v16 change: on tablet (768–1023px) restore the SIDE-BY-SIDE POS layout —
   items/menu on one side, Current Order panel on the other — like the
   laptop view. Below 1024px the app stacks the panels vertically inside a
   fixed-height flex column; because the order panel's content is taller
   than the viewport, the menu column (flex-1, basis:0) collapses to zero
   height and the items disappear. Forcing the row layout + a fixed-width
   order panel brings the items back. */
@media (max-width: 1024px) {
  /* 1) Never let any element force the page wider than the screen. */
  html, body, #root { max-width: 100% !important; overflow-x: hidden !important; }

  /* 2) Current Order items list — fixed, scrollable height. */
  .cart-scroll {
    position: static !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 2b) Bigger, more readable item rows in the Current Order panel
         (name + price are text-xs/12px by default — too small). */
  .cart-scroll .text-xs { font-size: 1rem !important; line-height: 1.35 !important; }
  .cart-scroll .text-\[10px\] { font-size: 0.8rem !important; }

  /* 3) Fixed / minimum widths become flexible. */
  [class*="min-w-["] { min-width: 0 !important; }

  /* 4) Media never overflows its container. */
  img, video, canvas, svg { max-width: 100% !important; height: auto; }

  /* 5) Wide tables scroll horizontally. */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* 6) POS menu cards: 3 large columns + 3:2 image + bigger name/price text. */
  .grid.grid-cols-2.overflow-y-auto.no-scrollbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid.grid-cols-2.overflow-y-auto.no-scrollbar .aspect-square { aspect-ratio: 3 / 2 !important; }
  .grid.grid-cols-2.overflow-y-auto.no-scrollbar .text-sm { font-size: 1.05rem !important; line-height: 1.3 !important; }
  .grid.grid-cols-2.overflow-y-auto.no-scrollbar .text-\[10px\] { font-size: 0.72rem !important; }
}

/* ── Tablet: restore the side-by-side POS layout (menu + Current Order). ──
   Targets the POS split container by the fact that it directly contains the
   dark Current Order panel (.bg-[#002045].rounded-3xl). */
@media (min-width: 768px) and (max-width: 1023px) {
  /* POS split container → horizontal (it is flex-col below lg by default) */
  .flex.flex-col.gap-6:has(> .bg-\[\#002045\].rounded-3xl) {
    flex-direction: row !important;
    align-items: stretch !important;
  }
  /* Current Order panel → fixed comfortable width instead of full width */
  .flex.flex-col.gap-6:has(> .bg-\[\#002045\].rounded-3xl) > .bg-\[\#002045\].rounded-3xl {
    width: 20rem !important;
    flex: 0 0 20rem !important;
  }
  /* Menu column → grows to fill the rest and shows the items grid again */
  .flex.flex-col.gap-6:has(> .bg-\[\#002045\].rounded-3xl) > .flex-1.min-w-0.overflow-hidden {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 560px) {
  .grid.grid-cols-2.overflow-y-auto.no-scrollbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}