/* v17: center the restaurant logo above the text on the printed thermal receipt.
   The logo <img> is display:block (Tailwind preflight), so the parent text-align:center
   does not center it. margin auto centers it. Global rule (applies in print too). */
.thermal-receipt .tr-center img { display:block !important; margin-left:auto !important; margin-right:auto !important; }

/* 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.

   v19 changes (fix collateral damage from the earlier blanket rules):
     • Charts/maps: the old `svg { height:auto !important }` rule overrode the
       fixed pixel height Recharts sets on its <svg>, so every chart stretched
       into a giant solid rectangle. Media clamping now targets img/video only —
       SVG (Recharts, Leaflet) manages its own size.
     • Tables: the old `table { display:block !important }` rule (applied to the
       whole <=1024px range) collapsed table column layout, clustering cells to
       one side with a big empty gap. Tablets (768–1023px) are wide enough to
       show the normal desktop table, so the block-scroll hack is now scoped to
       phones (<=767px) only, where horizontal scroll is genuinely needed. */
@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) Images/videos never overflow their container. SVG is intentionally
        excluded — Recharts and Leaflet set explicit sizes on their <svg>,
        and forcing height:auto distorts them. */
  img, video { max-width: 100% !important; height: auto; }
}

/* 5) Wide tables scroll horizontally — phones only. Making a <table>
      display:block is the only pure-CSS way to get horizontal scroll on a
      bare table, but it breaks column distribution, so limit it to widths
      that actually need it. Tablets keep the normal desktop table. */
@media (max-width: 767px) {
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── 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;
  }
}

/* ── Desktop (lg ≥1024px): keep the "Current Order" panel at its ORIGINAL height
   so the taller items block (POS fill-to-bottom change) does not stretch it and
   leave a big empty navy gap. Anchor it to the top with the pre-change height. ── */
@media (min-width: 1024px) {
  .flex.flex-col.gap-6:has(> .bg-\[\#002045\].rounded-3xl) > .bg-\[\#002045\].rounded-3xl {
    align-self: flex-start !important;
    height: calc((100vh - 9rem) / var(--app-zoom)) !important;
  }
}