/* BUILD347: lighter repaint work and accessible controls on narrow/short screens. */
#app .posScreen,
#app .posScreen .posToolbar,
#app .posScreen .cartPanel,
#app .posScreen .cartRow,
#app .posScreen .cartFixedFooter,
#app .posScreen .checkoutGroup {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#modalRoot .modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#app .posScreen button, #app .posScreen .cartRow {
  transition: none !important; animation: none !important; filter: none !important;
}
#app .posScreen .posToolbar > *, #app .posScreen .posHeading > *, #modalRoot .form > * { min-width: 0 !important; }
#app .posScreen .cartItemName { overflow-wrap: anywhere; }
@media (max-width: 950px) {
  body:has(main.posScreen), body:has(main.posScreen) #app {
    height: auto !important; min-height: 100dvh !important; overflow: visible !important;
  }
  #app:has(main.posScreen) > header {
    height: auto !important; min-height: 54px !important; flex-wrap: wrap !important;
    gap: 8px !important; padding: 8px 10px !important;
  }
  #app .posScreen {
    height: auto !important; min-height: calc(100dvh - 54px) !important;
    overflow: visible !important; padding: 8px !important;
  }
  #app .posScreen .posToolbar {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important; padding: 8px !important;
  }
  #app .posScreen .posSearchWrap { grid-column: 1/-1 !important; width: 100% !important; min-width: 0 !important; }
  #app .posScreen .posToolbar > button, #app .posScreen .posToolbar > select {
    width: 100% !important; max-width: 100% !important; white-space: normal !important;
    min-height: 44px !important; padding: 8px !important; overflow-wrap: anywhere;
  }
  #app .posScreen .posGrid.posCartOnly {
    display: block !important; overflow: visible !important; flex: none !important;
  }
  #app .posScreen .cartPanel { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #app .posScreen .cartItemsScroll { min-height: 120px !important; max-height: 45dvh !important; overflow-y: auto !important; }
  #app .posScreen .cartFixedFooter { position: static !important; min-height: 0 !important; }
  #app .posScreen .checkoutActions { grid-template-columns: minmax(0,1fr) !important; }
  #app .posScreen .checkoutActions .posBtn { min-height: 44px !important; font-size: 11px !important; }
  #app .posScreen .checkoutGroup.utilityGroup { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  #modalRoot .modalBox { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; }
  #modalRoot .form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 580px) {
  #app .headerUser { justify-content: flex-start !important; gap: 6px !important; }
  #app .posScreen .cartRow { grid-template-columns: minmax(0,1fr) 100px !important; gap: 8px !important; padding: 10px !important; }
  #app .posScreen .cartItemInfo { grid-column: 1/-1 !important; }
  #app .posScreen .cartButtons { grid-column: 2 !important; }
  #app .posScreen .cartTotal strong { font-size: 24px !important; min-width: 0 !important; }
  #app .posScreen .barcodeDock input { font-size: 16px !important; }
  #app .posScreen .checkoutGroup.transactionGroup330 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  #app .posScreen .checkoutGroup.utilityGroup { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #app .posScreen .paymentChoice330 { min-height: 86px !important; }
  #modalRoot .form { grid-template-columns: minmax(0,1fr) !important; }
  #nav { flex-wrap: wrap !important; justify-content: center !important; }
  #nav > button { min-width: 0 !important; min-height: 44px !important; flex: 1 1 100px !important; }
}
@media (min-width: 951px) and (max-height: 760px) {
  #app .posScreen { overflow-y: auto !important; }
  #app .posScreen .posGrid.posCartOnly { min-height: 420px !important; flex-shrink: 0 !important; }
  #app .posScreen .checkoutActions .posBtn { font-size: 10px !important; min-height: 40px !important; }
}