/* ============================================================================
   responsive.css — phone & tablet comfort layer (loaded AFTER transiq.css)
   Breakpoints: ≤1100px tablet-ish, ≤900px small tablet / large phone,
   ≤600px phone. Philosophy: nothing horizontal ever overflows the page —
   wide things scroll inside their own container; tap targets ≥ 40px.
   ========================================================================== */

/* ---------- global guards ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* Flex items default to min-width:auto and refuse to shrink below their
   content (wide tables) — this made the whole layout 2x the viewport. */
.tq-main, .tq-content { min-width: 0; max-width: 100%; }

/* Wide tables always scroll inside their card, never the page */
.tq-section-card__body--flush,
.tq-section-card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1100px) {
  /* Two-column inline grids collapse (operator cards, schedule footer, etc.) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  /* ---------- shell ---------- */
  .tq-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    width: min(280px, 82vw);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  .tq-content { padding: 14px 12px 40px; }
  .tq-topbar { padding: 0 10px; gap: 6px; }
  .tq-crumb span:not(.tq-crumb__current) { display: none; }

  /* ---------- page furniture ---------- */
  .tq-page-head { flex-wrap: wrap; gap: 10px; }
  .tq-page-head__actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .tq-page-head h1 { font-size: 21px; }
  .tq-toolbar { flex-wrap: wrap; gap: 8px; }
  .tq-toolbar__left, .tq-toolbar__right { flex-wrap: wrap; }
  .tq-filter-input { min-width: 0; }
  .tq-page-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }

  /* Wide data tables get a floor width so columns stay readable and the
     CARD scrolls (page never does) */
  .table-list { min-width: 640px; }

  /* ---------- touch targets ---------- */
  .tq-btn { min-height: 40px; }
  .tq-btn--sm { min-height: 36px; }
  .tq-row-action { width: 36px; height: 36px; }
  .tq-nav-link { padding-top: 11px; padding-bottom: 11px; }
  input, select, textarea { font-size: 16px !important; } /* stop iOS zoom */

  /* ---------- forms ---------- */
  .tq-form-row { grid-template-columns: 1fr !important; display: grid; gap: 12px; }

  /* ---------- POS ---------- */
  /* .pos-container is display:flex in style.css — force a vertical stack */
  .pos-container { display: flex !important; flex-direction: column !important;
                   grid-template-columns: 1fr; }
  .pos-left, .pos-right { width: 100% !important; max-width: 100% !important;
                          flex: none !important; }
  .pos-right { position: static; }
  /* Current Order stays reachable: sticky mini-summary handled by layout;
     tiles get comfortable */
  .pos-cat-tile, .pos-product-card { min-height: 84px; }

  /* ---------- assistant chat ---------- */
  .aiw { height: calc(100dvh - 190px); min-height: 340px; }
  .aiw__msg { max-width: 92%; }

  /* ---------- KDS ---------- */
  .kds-board { grid-template-columns: 1fr !important; }

  /* ---------- operator tables ---------- */
  .tq-kpi-grid { gap: 10px; }
}

@media (max-width: 600px) {
  /* Topbar: drop the language switcher so avatar + Log out always fit
     (language stays available on the login/public pages and on tablet+) */
  .tq-topbar__right .tq-iconbtn { display: none; }
  .tq-topbar__right { flex-shrink: 0; }
  .tq-topbar__left { min-width: 0; overflow: hidden; }

  .tq-content { padding: 10px 8px 40px; }
  .tq-section-card__body { padding-left: 12px; padding-right: 12px; }
  .tq-page-head h1 { font-size: 19px; }
  .tq-page-head__sub { font-size: 12.5px; }
  /* Topbar: keep language + avatar tight */
  .tq-topbar__right { gap: 4px; }
  .tq-topbar__right .tq-iconbtn { padding: 6px 8px; }
  /* Modals / size chooser fill more of the screen */
  .pos-size-modal, .tq-modal { width: 92vw !important; max-width: 92vw !important; }
  /* Schedule grid cells */
  .sched-grid th, .sched-grid td { padding: 4px 5px; }
}

/* ---------- sidebar backdrop on mobile (JS toggles .is-open) ---------- */
@media (max-width: 900px) {
  .tq-shell::before {
    content: ""; position: fixed; inset: 0; background: rgba(15,23,42,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 999;
  }
  .tq-shell.nav-open::before { opacity: 1; pointer-events: auto; }
}

/* ---------- "Hide menu": collapse the app sidebar on demand ----------
   The POS runs on tablets where the nav is wasted space during service, so a
   control on that screen collapses it and gives the till the full width.
   Deliberately the SAME off-canvas mechanic the <=900px rules already use —
   translate the sidebar out, drop .tq-main's gutter — so the two never fight:

     * >900px  the sidebar slides away and the content reclaims the gutter
     * <=900px it is already off-canvas; the class just keeps it that way and
       the topbar hamburger (.is-open) still wins, so nav is never unreachable

   State lives in localStorage per terminal (see pos.html). */
.tq-shell.tq-nav-collapsed .tq-sidebar:not(.is-open) {
  transform: translateX(-100%);
  transition: transform .2s ease;
}
.tq-shell.tq-nav-collapsed .tq-main { margin-left: 0; transition: margin-left .2s ease; }