html.web-shell .pub-menu-page,
html.web-shell .pub-menu-header,
html.web-shell .pub-platforms,
html.web-shell .pub-menu-search-wrap,
html.web-shell .pub-cats,
html.web-shell .pub-menu-grid {
  max-width: none;
  width: 100%;
}

html.web-shell,
html.web-shell body {
  width: 100%;
  max-width: none;
}

/* Staff hub — full browser width on web */
html.web-shell .home-page {
  max-width: none;
  width: 100%;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
}

html.web-shell .home-header,
html.web-shell .home-status,
html.web-shell .home-nav,
html.web-shell .home-footer {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

html.web-shell .home-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.85rem;
}

html.web-shell .customer-home-page {
  max-width: none;
}

/* Admin / accountant — use full viewport width */
html.web-shell .accountant-main {
  max-width: none;
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

html.web-shell .web-admin-page {
  max-width: none !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 1rem clamp(1rem, 2vw, 2rem) 2rem;
}

html.web-shell .web-admin-inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* Manager / garson / kitchen — full width when opened in browser (not Capacitor) */
html.web-shell .mgr-app {
  max-width: none;
  margin: 0;
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

html.web-shell .inv-page {
  max-width: none;
  margin: 0;
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

html.web-shell .waiter-page-title,
html.web-shell .call-banner {
  max-width: none;
}

/* Garson — browser/desktop: wider table order panel + modals (stacked layout, not side column) */
html.web-shell body.waiter-page {
  padding: 1rem clamp(1rem, 2.5vw, 2rem) 2rem;
}

html.web-shell body.waiter-page .waiter-detail-panel {
  max-width: min(52rem, 96vw);
}

html.web-shell body.waiter-page .max-w-3xl {
  max-width: min(48rem, 96vw);
}

@media (min-width: 768px) {
  html.web-shell body.waiter-page .staff-modal {
    align-items: center;
    padding: 1.5rem;
  }

  html.web-shell body.waiter-page .staff-modal-panel {
    width: min(36rem, 94vw);
    max-height: min(92vh, 52rem);
  }

  html.web-shell body.waiter-page .staff-modal-panel--wide,
  html.web-shell body.waiter-page #menu-modal .staff-modal-panel--wide {
    width: min(64rem, 96vw);
    max-height: min(92vh, 56rem);
  }

  html.web-shell body.waiter-page .staff-modal-panel--order,
  html.web-shell body.waiter-page #item-modal .staff-modal-panel--order {
    width: min(56rem, 96vw);
    max-height: min(92vh, 52rem);
  }

  html.web-shell body.waiter-page .staff-modal-body,
  html.web-shell body.waiter-page #menu-modal-body.staff-modal-body,
  html.web-shell body.waiter-page #item-modal-body.staff-modal-body {
    max-height: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.35rem 1.35rem;
  }

  html.web-shell body.waiter-page #menu-modal-body.staff-modal-body {
    overflow-y: auto;
  }

  html.web-shell body.waiter-page #item-modal-body .item-modal-layout {
    flex: 1;
    min-height: min(68vh, 38rem);
    max-height: min(82vh, 46rem);
  }

  html.web-shell body.waiter-page #item-modal-body .item-modal-scroll {
    max-height: none;
    flex: 1;
    min-height: 12rem;
  }

  html.web-shell body.waiter-page .item-modal-hero .item-modal-photo {
    max-height: min(28vw, 16rem);
  }

  html.web-shell body.waiter-page .waiter-menu-cat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.5rem 1rem;
    align-items: start;
  }

  html.web-shell body.waiter-page .waiter-menu-cat-title {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
  }

  html.web-shell body.waiter-page .waiter-menu-item {
    padding: 0.85rem 1rem;
    min-height: 3.25rem;
    margin-bottom: 0;
  }

  html.web-shell body.waiter-page .waiter-menu-item-name {
    font-size: 1rem;
  }

  html.web-shell body.waiter-page .waiter-menu-item-price {
    font-size: 0.95rem;
  }

  html.web-shell body.waiter-page .mod-option-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }

  html.web-shell body.waiter-page .chip.opt-btn {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
  }

  html.web-shell body.waiter-page #item-modal-body .item-modal-footer {
    padding: 1rem 1.35rem 1.25rem;
  }

  html.web-shell body.waiter-page #item-modal-body .item-modal-footer .btn-primary {
    min-height: 3rem;
    font-size: 1.05rem;
  }

  html.web-shell body.waiter-page .waiter-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  html.web-shell body.waiter-page .waiter-qa-btn {
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
  }

  html.web-shell body.waiter-page .waiter-order-line-meta {
    font-size: 0.8rem;
  }
}

@media (min-width: 1024px) {
  html.web-shell body.waiter-page .staff-modal-panel--wide,
  html.web-shell body.waiter-page #menu-modal .staff-modal-panel--wide {
    width: min(72rem, 94vw);
  }

  html.web-shell body.waiter-page .staff-modal-panel--order,
  html.web-shell body.waiter-page #item-modal .staff-modal-panel--order {
    width: min(60rem, 94vw);
  }

  html.web-shell body.waiter-page .waiter-menu-cat {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

html.app-shell body.waiter-page .waiter-detail-panel,
html.mobile-shell body.waiter-page .waiter-detail-panel {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* Garson APK / Capacitor — WebView often blocks document scroll; enable page + detail scroll */
html.app-shell,
html.app-shell body.waiter-page {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.app-shell body.waiter-page.modal-open {
  overflow: hidden;
}

html.app-shell body.waiter-page #detail.waiter-detail-panel:not(.hidden) {
  max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 6rem));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.app-shell body.waiter-page .waiter-order-lines {
  max-height: none;
  overflow: visible;
}

/* Customer QR pages — centered phone column even on desktop */
html.mobile-shell .home-page,
html.mobile-shell .customer-home-page {
  max-width: 28rem;
  margin: 0 auto;
}

html.mobile-shell .screen-inner {
  max-width: 28rem;
}

/* Native Capacitor apps — phone-width layout */
html.app-shell .mgr-app {
  max-width: 32rem;
  margin: 0 auto;
}

html.app-shell .home-page {
  max-width: 32rem;
  margin: 0 auto;
}

html.app-shell .inv-page {
  max-width: 32rem;
  margin: 0 auto;
}

html.app-shell .customer-home-page {
  max-width: 28rem;
  margin: 0 auto;
}