/* Casa Pizza HOTFIX94 — phone / small-screen UI audit and responsive hardening.
   Loaded last on every public/staff page so narrow-screen fixes win without
   changing the desktop design. */

@media (max-width: 780px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body { min-width: 0; }

  /* Never let legacy fixed-width cards/panels become page-level horizontal scroll. */
  main, section, article, header, footer,
  .container, .panel, .card, .topbar, .cashier-topbar,
  .manager70-page, .manager70-panel, .manager70-table-wrap,
  .finance-shell, .finance-card, .finance-table-wrap,
  .payroll-shell, .payroll-card,
  .inventory-shell, .inventory-workspace, .inventory-browser, .inventory-detail,
  .costing-shell, .costing-workspace, .costing-panel,
  .delivery-zones-shell, .delivery-zones-toolbar, .delivery-zones-workspace,
  .hero-product-manager, .hero-product-manager__body,
  .combo-manager-panel, .combo-manager-grid, .combo-form, .combo-products-column,
  .combo-selection-preview, .combo-studio, .combo-studio-grid,
  .qr-page-grid, .layout-editor-shell,
  .delivery-app, .delivery-layout, .delivery-sidebar, .delivery-main, .delivery-workspace {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* iOS Safari does not zoom form fields when they are 16px or larger. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  button, .button, a.button, [role="button"] {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  dialog, .admin-modal, .admin-modal-card, .cash-sale-dialog,
  .notification-diagnostic-dialog, .quick-view-dialog, .combo-dialog {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
  }

  /* Manager header stays usable even with the title, back button, theme and stock warning. */
  .topbar, .cashier-topbar {
    min-width: 0;
    width: 100%;
  }
  .topbar .manager-title-row,
  .topbar .top-actions,
  .cashier-topbar .top-actions { min-width: 0; }
  .topbar .manager-title-row { flex: 1 1 auto; }
  .topbar .manager-title-row h1 {
    max-width: 100%;
    font-size: clamp(16px, 5vw, 19px) !important;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .topbar .top-actions, .cashier-topbar .top-actions {
    flex: 0 0 auto;
    gap: 6px !important;
  }
  .manager-stock-alert-button, .admin-theme-toggle, .manager-mobile-back {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  /* Wide reporting tables remain usable without widening the entire page. */
  .manager70-table-wrap,
  .finance-table-wrap,
  .finance-ledger-wrap,
  .payroll-table-wrap,
  .table-scroll,
  .qr-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .manager70-table, .finance-ledger, .payroll-table {
    max-width: none !important;
  }

  /* Mobile manager panels use the available width instead of old 400px/430px minima. */
  .manager-single .panel,
  .manager-single .manager70-panel,
  .manager-combos-page .combo-manager-panel,
  .manager-combos-page .combo-form,
  .manager-combos-page .combo-products-column,
  .manager-combos-page .combo-selection-preview,
  .hero-product-manager {
    width: 100% !important;
  }
  .manager-combos-page .combo-manager-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-inline: 8px !important;
  }
  .manager-combos-page .combo-panel-head,
  .manager-combos-page .combo-studio-head { min-width: 0 !important; }
  .manager-combos-page .combo-stage-toolbar,
  .manager-combos-page .combo-publish-grid,
  .manager-combos-page .combo-stage-actions {
    min-width: 0 !important;
  }

  /* Hero editor: preview, select and save button stack cleanly on 320px devices. */
  .hero-product-manager__body {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding-inline: 0 !important;
  }
  .hero-product-manager__preview {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    margin-inline: auto;
  }
  .hero-product-manager__controls {
    width: 100% !important;
    max-width: none !important;
  }
  .hero-product-manager__controls .button,
  .hero-product-manager__controls button { width: 100%; }
  .hero-copy-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* Costing filter controls were the one manager control row that could spill right. */
  .costing-filter-tabs,
  .costing-tabs,
  .costing-toolbar-actions {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .costing-filter-tabs > *, .costing-tabs > * { flex: 0 0 auto; }

  /* Delivery-zone editor: map and zone editor are fully contained on 320px phones. */
  .delivery-zones-shell { width: 100% !important; padding: 10px !important; }
  .delivery-zones-toolbar,
  .delivery-zones-workspace,
  .delivery-zone-map-panel,
  .delivery-zone-sidebar { width: 100% !important; }
  .delivery-zones-actions { width: 100%; }
  .delivery-zones-actions .button { min-width: 0; width: 100%; }
  .delivery-zone-map-head { flex-wrap: wrap; }
  .delivery-zone-map-head .button { width: 100%; }

  /* Floor plans intentionally use a large coordinate canvas. Keep that large canvas
     inside its viewport rather than letting it widen the page. */
  .manager-layout-page .canvas-scroll,
  .cashier-page .canvas-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .manager-layout-page .floor-canvas,
  .cashier-page .floor-canvas { max-width: none !important; }

  /* Customer confirmation + QR guest page had legacy desktop minimum geometry. */
  body[data-page="success"] .success-wrap {
    width: 100%;
    padding: 24px 0 calc(92px + env(safe-area-inset-bottom));
  }
  body[data-page="success"] .success-wrap > .container {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: auto !important;
  }
  body[data-page="success"] .success-card.success-card--clean {
    width: 100% !important;
    max-width: 100% !important;
    padding: 34px 18px !important;
    border-radius: 20px !important;
  }
  body[data-page="success"] .success-card .action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  body[data-page="success"] .success-card .action-row .button { width: 100%; }

  body[data-page="restaurant"] .restaurant-guest-page {
    width: 100%;
    padding: 20px 10px calc(88px + env(safe-area-inset-bottom));
  }
  body[data-page="restaurant"] .restaurant-guest-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    border-radius: 20px !important;
  }
  body[data-page="restaurant"] .restaurant-guest-card h1 {
    font-size: clamp(1.7rem, 9.5vw, 2.25rem) !important;
    overflow-wrap: anywhere;
  }
  body[data-page="restaurant"] .restaurant-guest-eyebrow { letter-spacing: .08em; }
  body[data-page="restaurant"] .restaurant-guest-id { padding: 16px 12px; }
  body[data-page="restaurant"] .restaurant-guest-id strong {
    font-size: clamp(2rem, 13vw, 3.25rem) !important;
    letter-spacing: .05em !important;
    overflow-wrap: anywhere;
  }

  /* Customer header/footer/nav: reserve space for the red cart and safe areas. */
  .site-header .header-inner { min-width: 0; gap: 7px !important; }
  .site-header .brand { min-width: 0; flex: 1 1 auto; }
  .site-header .brand-name { white-space: nowrap; }
  .site-header .header-actions { flex: 0 0 auto; gap: 6px !important; }
  .mobile-bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .toast[data-toast], .toast {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px;
    box-sizing: border-box;
  }

  /* Checkout/cart inputs and maps should never demand desktop width. */
  .checkout-layout, .cart-layout,
  .checkout-form, .checkout-summary, .cart-summary,
  .form-section, .delivery-map-picker, .delivery-map-stage,
  .delivery-schedule-grid, .choice-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .choice-grid { grid-template-columns: 1fr !important; }
  .delivery-map-stage, .delivery-map-canvas { min-height: 330px !important; height: 330px !important; }
  .summary-list li, .order-preview-item { min-width: 0; }
  .summary-list li > *, .order-preview-item > * { min-width: 0; overflow-wrap: anywhere; }

  /* Delivery phone app. */
  .delivery-topbar { gap: 7px !important; padding: 9px 10px !important; }
  .delivery-brand { min-width: 0; }
  .delivery-top-actions { min-width: 0; gap: 6px !important; }
  .delivery-notification-button { min-width: 0 !important; }
  .delivery-order-card { min-width: min(270px, calc(100vw - 42px)) !important; }
  .delivery-map-shell { min-height: 330px !important; height: min(58vh, 500px) !important; }
  .delivery-details { min-width: 0; }

  /* Login / phone launcher are frequently opened on the narrowest screens. */
  .staff-login-card, .phone-card, .phone-shell {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 430px) {
  .manager70-stats { grid-template-columns: 1fr !important; }
  .cashier-delivery-stats { grid-template-columns: 1fr !important; }
  .delivery-zones-actions { grid-template-columns: 1fr !important; }
  .printer-shell, .inventory-shell, .payroll-shell, .costing-shell { padding-inline: 10px !important; }

  .site-header .brand-logo-official { max-width: 98px; }
  .site-header .brand-name { font-size: .9rem; }
  .site-header .menu-toggle { padding-inline: 10px !important; }

  .finance-filterbar, .finance-range-buttons { min-width: 0; width: 100%; }
  .finance-range-buttons { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .finance-range-buttons button { min-width: 0 !important; padding-inline: 4px !important; font-size: 10px !important; }

  .combo-preview-strip { grid-template-columns: minmax(0,1fr) 86px !important; }
  .combo-studio-tools { grid-template-columns: 1fr !important; }
}

@media (max-width: 360px) {
  body[data-page="home"] .home-static-hero h1 {
    font-size: 2.35rem !important;
    line-height: .96 !important;
  }
  body[data-page="home"] .home-static-hero__copy { padding-inline: 16px !important; }
  .site-header .header-inner { width: calc(100% - 14px) !important; }
  .site-header .brand-logo-official { max-width: 88px; }
  .site-header .brand-name { font-size: .82rem; }
  .mobile-bottom-nav a { font-size: 10px !important; padding-inline: 3px !important; }
  .topbar, .cashier-topbar { padding-inline: 9px !important; }
  .topbar .manager-title-row h1 { font-size: 15px !important; }
  .delivery-notification-label::after { font-size: 11px !important; }
}

/* Narrow-screen follow-up from the visual pass. */
@media (max-width: 780px) {
  /* Admin toasts were centered with translate:-50%; once pinned to both phone
     edges that translation would move half the toast off-screen. */
  .manager-single .toast,
  .cashier-page .toast {
    left: 10px !important;
    right: 10px !important;
    translate: 0 20px !important;
    max-width: none !important;
    width: auto !important;
  }
  .manager-single .toast.show,
  .cashier-page .toast.show { translate: 0 0 !important; }

  .hero-product-picker {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero-product-picker > *,
  .hero-product-picker .hero-product-manager__controls,
  .hero-product-picker .hero-product-manager__controls label,
  .hero-product-picker .hero-product-manager__controls select {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .hero-product-picker .hero-product-manager__preview {
    width: min(100%, 250px) !important;
    max-width: 250px !important;
    justify-self: center !important;
  }

  .manager-combos-page .combo-stage-toolbar > *,
  .manager-combos-page .combo-stage-actions > *,
  .manager-combos-page .combo-stage-toolbar .button,
  .manager-combos-page .combo-stage-actions .button {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-page="success"] .success-card.success-card--clean h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 9.2vw, 2.35rem) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere;
  }
}

/* Final narrow-screen containment from the 320–430px audit. */
@media (max-width: 780px) {
  .hero-product-picker .hero-product-manager__controls {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }
  .hero-product-picker .hero-product-manager__controls > *,
  .hero-product-picker .hero-product-manager__controls label,
  .hero-product-picker .hero-product-manager__controls select,
  .hero-product-picker .hero-product-manager__controls button,
  .hero-product-picker .hero-product-manager__controls .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-product-picker .hero-product-manager__meta,
  .hero-product-picker .hero-product-manager__saved {
    overflow-wrap: anywhere;
  }

  body[data-page="success"] .success-card.success-card--clean h1 {
    font-size: clamp(1.65rem, 8vw, 2.1rem) !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 780px) {
  /* Keep every page-level toast inside the phone viewport, regardless of which
     legacy admin/customer toast implementation created it. */
  body > .toast {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    translate: 0 20px !important;
    box-sizing: border-box !important;
  }
  body > .toast.show { translate: 0 0 !important; }
}

@media (max-width: 340px) {
  /* On 320px-class phones the two quick filters fit better as a wrapping row
     than as a clipped horizontal strip. */
  .menu-inline-filters {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .menu-inline-filters .filter-chip {
    font-size: 12px !important;
    padding-inline: 9px !important;
  }
}

@media (max-width: 780px) {
  .hero-product-picker #saveHeroProduct {
    white-space: normal !important;
    line-height: 1.25 !important;
    min-height: 48px !important;
    height: auto !important;
    padding-block: 11px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* LTS7 staff UI consistency invariants */
.manager-single main,
.manager-single .manager-grid,
.manager-single .workspace,
.manager-single .panel,
.cashier-page main,
.cashier-page .cashier-grid,
.cashier-page .panel,
.delivery-app,
.delivery-layout,
.delivery-main{
  min-width:0;
}
.manager-single img,
.cashier-page img,
.delivery-app img{
  max-width:100%;
}
.manager-single .topbar h1,
.manager-single .panel-head h1,
.manager-single .panel-head h2,
.manager-single .panel-head h3,
.cashier-page .cashier-topbar h1,
.delivery-app h1,
.delivery-app h2,
.delivery-app h3{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media (hover:none){
  .manager-dashboard-page .manager-tool-card{
    transform:none!important;
    box-shadow:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .manager-dashboard-page .manager-tool-card{
    transition:none!important;
    transform:none!important;
  }
}