/* S615 Gastro - Mobile UX 1.0 (mobile-first hardening) ===================== */
/* Loaded after 615-kit.css + team.css so these rules win on small screens.   */

/* ---- Global anti-overflow: never allow horizontal page scroll ------------ */
html, body { max-width: 100%; overflow-x: hidden; }
.content { max-width: 100%; }
.panel, .kpi, .p-body, .p-head { max-width: 100%; }
img { max-width: 100%; height: auto; }
/* Any wide inline-styled fl/grid blocks must wrap instead of overflow */
.content * { min-width: 0; }

/* ---- Table scroll containers stay inside the viewport -------------------- */
.tbl-scroll { max-width: 100%; }

/* ===== Phone breakpoint ==================================================== */
@media (max-width: 768px) {
  /* Comfortable base text */
  body { font-size: 14px; }

  /* Touch targets: all buttons at least 40px tall, easy to tap one-handed */
  .btn { min-height: 40px; padding: 9px 14px; font-size: 14px; }

  /* Forms go full width and large */
  input, select, textarea { font-size: 16px !important; } /* 16px stops iOS zoom */
  form input, form select, form textarea { width: 100%; }

  /* Panels edge-to-edge feel */
  .content { padding: 10px 10px 72px 10px; } /* bottom pad clears any sticky bars */

  /* KPI: 2-up, readable */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-v { font-size: 18px; }

  /* ---- TABLE -> CARD transform -----------------------------------------
     Applies to every standard table (thead/tbody). Each row becomes a card;
     each cell becomes a label:value line. The column label is taken from the
     cell's data-label when present, else the cell stacks without a label.    */
  table.cardify, table.cardify thead, table.cardify tbody,
  table.cardify tr, table.cardify th, table.cardify td { display: block; width: 100%; }
  table.cardify thead { display: none; } /* header row hidden; labels inline */
  table.cardify tr {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 8px; padding: 6px 10px;
  }
  table.cardify td {
    border: none; border-bottom: 1px solid var(--border);
    padding: 7px 2px; white-space: normal; text-align: left;
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  }
  table.cardify td:last-child { border-bottom: none; }
  table.cardify td::before {
    content: attr(data-label);
    color: var(--dim); font-size: 11px; text-transform: uppercase;
    letter-spacing: .4px; flex: 0 0 42%; font-weight: 600;
  }
  table.cardify td[data-label=""]::before,
  table.cardify td:not([data-label])::before { content: ""; flex: 0; }

  /* Default (non-cardify) tables: keep horizontal scroll but readable */
  .tbl-scroll table:not(.cardify) { font-size: 12px; min-width: 480px; }
  .tbl-scroll:not(.no-hint) { position: relative; }

  /* POS: big one-handed controls ----------------------------------------- */
  .pos-menu-item { min-height: 72px; }
  .pos-cat-btn { min-height: 40px; }
  .pos-seat-btn { min-height: 44px; padding: 10px 14px !important; font-size: 14px !important; }

  /* POS New Order: Dine-in / Takeaway must fit on a 320px screen.
     The buttons are inline-styled with min-width:200px + big padding; override
     so they stack and fill the row instead of overflowing. */
  #posDineIn, #posTakeaway {
    min-width: 0 !important; width: 100% !important;
    padding: 20px 12px !important; font-size: 17px !important;
  }
  /* The New Order button container is a flex row via inline style -> wrap it */
  #posDineIn, #posTakeaway { flex: 1 1 100% !important; }

  /* POS Menu+Cart layout: keep the menu full-width; the cart is a BOTTOM SHEET
     anchored inside the viewport (fixed), NOT a static block at the end of the
     long menu page. Studio FAIL 1: a static cart rendered at cartTop ~1998px. */
  #posMenuLayout { flex-direction: column !important; height: auto !important; }
  #posMenuLayout > div:first-child { width: 100% !important; min-width: 0 !important; }
  #posCartPanel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 80vh !important; height: auto !important;
    border-left: none !important; border-top: 1px solid var(--border) !important;
    border-radius: 14px 14px 0 0 !important;
    transform: translateY(100%); transition: transform .25s ease;
    z-index: 9999 !important; box-shadow: 0 -6px 24px rgba(0,0,0,.35) !important;
    display: flex !important; flex-direction: column !important;
  }
  #posCartPanel.open { transform: translateY(0) !important; }
  #posCartItems { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pos-cart-toggle { display: inline-flex !important; }
  .pos-cart-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.5); z-index: 9998; display: none; }
  .pos-cart-overlay.open { display: block !important; }

  /* POS Order details + Add Items: inline display:flex side-by-side -> stack.
     Target the two-pane order view and its right-side Add Items panel. */
  #content > div[style*="display:flex"][style*="100vh - 70px"],
  #content > div[style*="display:flex"][style*="calc(100vh"] {
    flex-direction: column !important; height: auto !important;
    /* The outer view starts at viewport top (top:0) and is overlapped by the
       fixed 48px top bar. Push its content below the bar so the Order Details
       heading is visible without manual scroll (Studio: headingTop >= 48). */
    padding-top: 56px !important;
  }
  #content > div[style*="display:flex"] > div[style*="width:320px"],
  #content > div[style*="display:flex"] > div[style*="width:340px"] {
    width: 100% !important; border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }
  /* Remove the left pane's own full-height scroll so the page (not an inner box)
     scrolls; keeps the heading reachable and below the header. */
  #content > div[style*="display:flex"] > div[style*="overflow-y:auto"][style*="padding:16px"] {
    overflow-y: visible !important; height: auto !important;
  }

  /* Quantity +/- buttons: 44x44 touch targets (were 24x24). */
  #posCartItems button[onclick^="posCartQty"] {
    width: 44px !important; height: 44px !important; font-size: 20px !important;
  }

  /* Order Details redesign (Block 4): the card wrapper starts at viewport top
     and must clear the fixed 48px bar so the Order # heading is visible. */
  .od-wrap { padding-top: 56px !important; }

  /* Tip screen buttons comfortable */
  .posTipBtn { min-height: 56px !important; }

  /* Table layout (seat map) scrolls and stays readable */
  #seatLayout > div[style*="position:relative"] { transform: none; overflow-x: auto; }

  /* Statistics: charts stack vertically, full width */
  .g2 { grid-template-columns: 1fr; }
  .chart-box { height: 160px; }
}

/* ===== Narrow phones ====================================================== */
@media (max-width: 414px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .kpi-row { grid-template-columns: 1fr; }
  .btn { padding: 9px 10px; }
}