/* LiGri LTS8 — project-wide responsive + interaction consistency layer.
   Loaded last on every entry page. Keeps desktop design intact and hardens
   laptop/tablet/phone layouts, especially 320–430px devices. */

/* Grid/flex items should be allowed to shrink instead of forcing page overflow. */
.shell > main,
.topbar > *, .cashier-topbar > *,
.panel-head > *, .manager70-panel-head > *,
.finance2-toolbar > *, .finance2-toolbar-actions > *,
.bridge-card > *, .device-card > *,
.delivery-topbar > *, .delivery-contact-row > *,
.product-title-block > *, .combo-product__copy,
.site-header .header-inner > * { min-width:0; }

img, picture, video { max-width:100%; }

/* Hover should never make content unreadable; touch devices should not retain
   desktop hover transforms. */
@media (hover:none), (pointer:coarse) {
  .manager-single a:hover, .manager-single button:hover,
  .cashier-page a:hover, .cashier-page button:hover,
  .delivery-app a:hover, .delivery-app button:hover,
  .product-card:hover, .category-card:hover,
  .home-showcase-arrow:hover, .menu-slideshow__control:hover {
    transform:none!important;
    box-shadow:none!important;
  }
}

@media (max-width:900px) {
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body{min-width:0}
  main, main > *, section, article, form, fieldset{min-width:0;max-width:100%;box-sizing:border-box}
  h1,h2,h3,h4,p,strong,span,label{max-width:100%}
  h1,h2,h3,h4{word-break:normal;overflow-wrap:break-word}

  /* Staff headers can wrap instead of pushing controls off-screen. */
  .topbar,.cashier-topbar,.delivery-topbar{min-width:0;max-width:100%;box-sizing:border-box}
  .topbar,.cashier-topbar{flex-wrap:wrap!important;gap:8px!important}
  .topbar .top-actions,.cashier-topbar .top-actions{min-width:0;max-width:100%;flex-wrap:wrap!important}
  .manager70-panel-head,.panel-head,.finance2-card-head,.finance2-toolbar,
  .inventory-detail-head,.costing-detail-head,.bridge-card,.qr-system-intro{
    min-width:0;max-width:100%;
  }

  /* Every overlay must fit dynamic mobile browser height and scroll internally. */
  dialog,.admin-modal,.payroll-modal,.inventory-modal,.finance2-modal,
  .device-modal,.token-modal,.delivery-notification-sheet,.casa-unsaved-modal{
    max-width:100vw!important;max-height:100dvh!important;box-sizing:border-box!important;
  }
  .cash-sale-dialog,.phone-order-dialog,.payroll-dialog,.inventory-dialog,
  .finance2-dialog,.device-modal-card,.token-card,.delivery-notification-card,
  .casa-unsaved-modal section{
    width:min(calc(100vw - 16px),100%)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }

  /* Device cards had a 310px minimum which could overflow a padded 320px phone. */
  .device-grid,.device-form-grid,.device-facts{grid-template-columns:minmax(0,1fr)!important}
  .devices-shell{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .detected-item,.job-item,.device-card header{min-width:0;flex-wrap:wrap}
  .detected-item > *,.job-item > *,.device-card header > *{min-width:0;overflow-wrap:anywhere}

  /* QR / layout tools remain usable on small screens. */
  .qr-manager-grid,.qr-page-grid,.qr-table-grid,.layout-manager-grid{grid-template-columns:minmax(0,1fr)!important}
  .qr-system-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%}
  .qr-system-flow span{min-width:0!important}
  .layout-room-bar,.layout-room-actions,.layout-toolbar,.layout-add-tools,.layout-edit-tools{min-width:0;max-width:100%;flex-wrap:wrap!important}
  .manager-layout-page .canvas-scroll,.cashier-page .canvas-scroll{
    width:100%!important;max-width:100%!important;overflow:auto!important;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
  }

  /* Manual order modal: no desktop-height assumptions. */
  .phone-order-dialog{height:auto!important;max-height:calc(100dvh - 12px)!important}
  .phone-order-basket{max-height:none!important}
  .phone-order-map-head{align-items:flex-start;flex-wrap:wrap}
  .phone-order-map-head span{text-align:left!important}
  .phone-order-grand-total{min-width:0;gap:10px}

  /* Wide data is intentionally horizontally scrollable inside its panel only. */
  .manager70-table-wrap,.finance-ledger-wrap,.payroll-table-wrap,.table-scroll,.qr-table-wrap{
    max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Delivery app should not create fixed-width page overflow. */
  .delivery-layout,.delivery-main,.delivery-workspace,.delivery-details,.delivery-sidebar{min-width:0!important;max-width:100%!important}
  .delivery-order-list{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .delivery-order-alert{width:auto!important;left:10px!important;right:10px!important;transform:none!important;max-width:none!important}

  /* Customer page containment. */
  .site-header,.header-inner,.container,.product-card,.category-card,.cart-layout,.checkout-layout,
  .product-page-shell,.combo-page__shell,.product-detail-layout,.combo-product,
  .order-status-panel,.success-card,.restaurant-guest-card{min-width:0;max-width:100%;box-sizing:border-box}
  .product-card .product-title,.product-card .product-description,
  .cart-item strong,.summary-list strong{overflow-wrap:break-word;word-break:normal}
}

@media (max-width:780px) {
  /* Comfortable tap targets on phones/tablets. */
  button,.button,a.button,[role="button"],select,
  input[type="button"],input[type="submit"]{min-height:44px}
  .icon-button,.delivery-icon-button,.cash-sale-close,.delivery-notification-close{min-width:44px!important;min-height:44px!important}
  .home-showcase-dots button,.menu-slideshow__dots button{min-height:8px!important;height:8px!important}

  /* Admin pages missing newer body classes now use the same mobile shell rules. */
  .manager-single .shell{display:block!important}
  .manager-single .sidebar{display:none!important}
  .manager-single main{width:100%!important;max-width:100%!important}
  .manager-single .manager70-page,.manager-single .manager-grid,.manager-single .workspace{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  }

  /* Keep modal catalog readable instead of squeezing two dense cards into 320px. */
  .cash-sale-products{grid-template-columns:minmax(0,1fr)!important}
  .cash-sale-product{grid-template-columns:52px minmax(0,1fr) 36px!important}
  .cash-sale-product img{width:52px!important;height:52px!important}

  /* Toolbar/action rows collapse instead of spilling. */
  .bridge-actions,.device-card footer,.inventory-detail-actions,.costing-actions,
  .finance2-toolbar-actions,.finance2-dialog-actions,.payroll-dialog footer,
  .casa-unsaved-modal section>div{max-width:100%;flex-wrap:wrap}
}

@media (max-width:520px) {
  /* Single-column KPI cards on the narrowest phones. */
  .payroll-stats,.costing-metrics,.costing-actions,
  .finance2-secondary-metrics,.finance2-accounting-metrics,.finance2-sales-metrics,
  .inventory-kpis,.inventory-detail-metrics,.manager70-stats,
  .cashier-delivery-stats{grid-template-columns:minmax(0,1fr)!important}

  .payroll-shell,.costing-app,.inventory-shell,.finance2-page,.devices-shell,
  .manager70-page{padding-left:10px!important;padding-right:10px!important}

  .phone-order-map{height:240px!important;min-height:240px!important}
  .phone-order-summary>div,.phone-order-grand-total{align-items:flex-start;flex-wrap:wrap}

  .delivery-notification-sheet-actions{display:grid!important;grid-template-columns:1fr!important}
  .delivery-notification-sheet-actions button{width:100%!important}

  .phone-card,.manager-qr-legacy-page main{width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important}
  .manager-qr-legacy-page main{margin:24px auto!important;padding:8px!important}
  .manager-qr-legacy-page .panel{padding:18px!important}
}

@media (max-width:380px) {
  .topbar .top-actions,.cashier-topbar .top-actions{width:100%;justify-content:flex-start!important}
  .finance2-toolbar-actions{grid-template-columns:1fr!important}
  .finance2-toolbar-actions>*{width:100%!important;min-width:0!important}
  .inventory-dialog footer,.finance2-dialog-actions{grid-template-columns:1fr!important}
  .qr-system-flow{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{scroll-behavior:auto!important}
  .product-card,.category-card,.manager-tool-card,.delivery-order-card{transition:none!important}
}