/* Build355: colorful function groups and F12 directly below cart items. */
body:has(#app:not(.hidden) main.posScreen),
body:has(#app:not(.hidden) main.posScreen) #app:not(.hidden) { background: linear-gradient(120deg, #eef5ff, #f5f0ff 55%, #edf9f4) !important; }
#app:not(.hidden):has(main.posScreen) > header { background: linear-gradient(100deg, #065f46, #0f766e) !important; }
#app main.posScreen .posHeading { border-color: #c7d2fe !important; border-left-color: #6366f1 !important; border-radius: 7px !important; background: #fff !important; }
#app main.posScreen .posHeading .pageTitle { color: #3730a3 !important; }
#app main.posScreen .posWorkspace355 .posControls351 { border-color: #bdc9ef !important; border-radius: 8px !important; }
#app main.posScreen .posWorkspace355 .posSideScroll351 { background: #f5f7ff; border-radius: 8px 8px 0 0; }
#app main.posScreen .posWorkspace355 .posControlSection351 { border-color: #ccd6f6 !important; border-radius: 6px !important; background: #fff !important; }
#app main.posScreen .posWorkspace355 .posProductFields352 { display: block !important; }
#app main.posScreen .posWorkspace355 .posScanSection352 { border-left: 3px solid #3b82f6 !important; }
#app main.posScreen .posWorkspace355 .posCustomerSelect352 { border-left: 3px solid #14b8a6 !important; }
#app main.posScreen .posWorkspace355 .posLoyaltyDock350 { border-color: #cfc3f3 !important; border-radius: 6px !important; background: #f9f6ff !important; }
#app main.posScreen .posWorkspace355 #posLoyaltyInfo350 { border-color: #d3c8f6; border-radius: 6px !important; background: #fff; }
#app main.posScreen .posWorkspace355 .posPoints350 { background: #ede9fe; border-color: #c4b5fd; border-radius: 6px; }
#app main.posScreen .posWorkspace355 .posPoints350 strong { color: #5b21b6; }
#app main.posScreen .posWorkspace355 .posPoints350 button,
#app main.posScreen .posWorkspace355 .posLoyaltyInput350 .primary { background: #6d28d9 !important; color: #fff !important; }
#app main.posScreen .posWorkspace355 .posControls351 .posCustomerActions351 button,
#app main.posScreen .posWorkspace355 .posControls351 .checkoutGroup .posBtn,
#app main.posScreen .posWorkspace355 .posControls351 .paymentChoice330 {
  background: var(--posButton355, #2563eb) !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(1) { --posButton355: #15803d; }
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(2) { --posButton355: #6d28d9; }
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(3) { --posButton355: #0f766e; }
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(4) { --posButton355: #1d4ed8; }
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(5) { --posButton355: #b45309; }
#app main.posScreen .posWorkspace355 .posCustomerActions351 button:nth-child(6) { --posButton355: #7c3aed; }
#app main.posScreen .posWorkspace355 .btnHold { --posButton355: #b45309; }
#app main.posScreen .posWorkspace355 .btnRecall { --posButton355: #0f766e; }
#app main.posScreen .posWorkspace355 .btnRetail { --posButton355: #2563eb; }
#app main.posScreen .posWorkspace355 .btnWholesale { --posButton355: #7c3aed; }
#app main.posScreen .posWorkspace355 .btnDeposit { --posButton355: #9a6700; }
#app main.posScreen .posWorkspace355 .btnInquiry { --posButton355: #0e7490; }
#app main.posScreen .posWorkspace355 .btnDisplay { --posButton355: #4338ca; }
#app main.posScreen .posWorkspace355 .btnDiscount { --posButton355: #be185d; }
#app main.posScreen .posWorkspace355 .btnExpense { --posButton355: #c2410c; }
#app main.posScreen .posWorkspace355 .btnLoad { --posButton355: #9d174d; }
#app main.posScreen .posWorkspace355 .btnClear { --posButton355: #dc2626; }
#app main.posScreen .posWorkspace355 .btnVoid { --posButton355: #991b1b; }
#app main.posScreen .posWorkspace355 .payCash330 { --posButton355: #047857; }
#app main.posScreen .posWorkspace355 .payOnline330 { --posButton355: #1d4ed8; }
#app main.posScreen .posWorkspace355 .payCredit330 { --posButton355: #6d28d9; }
#app main.posScreen .posWorkspace355 .posControls351 .checkoutGroup .posBtn small { color: #fff !important; opacity: .9; }
#app main.posScreen .posWorkspace355 .posControls351 .checkoutGroup .posBtn.selected { outline: 2px solid #fbbf24 !important; outline-offset: 0; }
#app main.posScreen .posWorkspace355 .posPaymentDock351 { background: #edf4ff; border-top-color: #93c5fd; border-radius: 0 0 8px 8px; }
#app main.posScreen .posWorkspace355 .posBackOffice351 { background: #475569 !important; color: #fff !important; border-radius: 5px !important; }
#app main.posScreen .posWorkspace355 .cartPanel { border-color: #a9bdec !important; border-radius: 8px !important; }
#app main.posScreen .posWorkspace355 .posCartHead351 { border-bottom-color: #60a5fa; }
#app main.posScreen .posWorkspace355 .posCartHead351 h2 { color: #1e40af; }
#app main.posScreen .posWorkspace355 .posCartHead351 span { background: #e0f2fe; color: #075985; border-radius: 4px; }
#app main.posScreen .posWorkspace355 .cartListHeader { background: #1e40af !important; border-radius: 4px !important; }
#app main.posScreen .posWorkspace355 .cartRow { border-bottom-color: #dbe6fa !important; }
#app main.posScreen .posWorkspace355 .cartRow:nth-child(even) { background: #f5f8ff !important; }
#app main.posScreen .posWorkspace355 .cartRow:last-child { background: #fff6cf !important; box-shadow: inset 3px 0 #f59e0b !important; }
#app main.posScreen .posWorkspace355 .cartQtyBtn { background: #e0f2fe !important; border-color: #7dd3fc !important; color: #075985 !important; border-radius: 4px !important; }
#app main.posScreen .posWorkspace355 .cartQtyInput255 { border-color: #93c5fd !important; border-radius: 4px !important; }
#app main.posScreen .posWorkspace355 .cartButtons button { background: #2563eb !important; color: #fff !important; border-color: transparent !important; border-radius: 3px !important; }
#app main.posScreen .posWorkspace355 .cartButtons button:nth-child(2) { background: #7c3aed !important; }
#app main.posScreen .posWorkspace355 .cartButtons button.danger { background: #dc2626 !important; }
#app main.posScreen .posWorkspace355 .cartSummary > span:nth-child(1) { background: #ecfdf5 !important; border-left-color: #10b981 !important; }
#app main.posScreen .posWorkspace355 .cartSummary > span:nth-child(2) { background: #fdf2f8 !important; border-left-color: #ec4899 !important; }
#app main.posScreen .posWorkspace355 .cartSummary > span:nth-child(3) { background: #fff7ed !important; border-left-color: #f59e0b !important; }
#app main.posScreen .posWorkspace355 .cartTotal { background: linear-gradient(105deg, #fde68a, #fcd34d) !important; border-radius: 6px !important; }
#app main.posScreen .posWorkspace355 .cartTotal strong { color: #1e3a8a !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 { margin: 0 0 7px; padding: 7px; border: 1px solid #a5c9fc; border-left: 4px solid #2563eb; border-radius: 6px; background: #eff6ff; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeDock { grid-area: auto !important; position: static !important; display: grid !important; grid-template-columns: 50px minmax(0, 1fr) !important; gap: 7px !important; align-items: start !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeShortcut { display: grid !important; place-items: center; width: 50px !important; min-width: 0 !important; min-height: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: #2563eb !important; color: #fff !important; font-size: 15px !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeInputWrap { position: relative !important; width: 100%; min-width: 0 !important; min-height: 0 !important; height: auto !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 input { width: 100% !important; min-width: 0 !important; min-height: 38px !important; height: 38px !important; padding: 7px 10px !important; border: 1px solid #93b8ed !important; border-radius: 5px !important; background: #fff !important; color: #17365c !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .2px !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 input:focus { outline: 2px solid #fbbf24 !important; outline-offset: 1px; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeInputWrap small { position: static !important; display: block !important; transform: none !important; width: auto !important; max-width: none !important; margin: 3px 0 0 !important; padding: 0 !important; color: #4b6590 !important; font-size: 9px !important; line-height: 1.2 !important; white-space: normal !important; overflow: visible !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeDock.scanSuccess input { border-color: #059669 !important; background: #ecfdf5 !important; }
#app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeDock.scanFailed input { border-color: #dc2626 !important; background: #fff1f2 !important; }
@media (min-width: 1000px) and (max-height: 650px) {
  #app main.posScreen .posWorkspace355 .posScanFooter355 { margin-bottom: 5px; padding: 5px; }
  #app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeShortcut,
  #app main.posScreen .posWorkspace355 .posScanFooter355 input { min-height: 30px !important; height: 30px !important; font-size: 12px !important; }
  #app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeInputWrap small { font-size: 8px !important; margin-top: 2px !important; }
  #app main.posScreen .posWorkspace355 .cartSummary > span { min-height: 30px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
}
@media (max-width: 600px) {
  #app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeDock { grid-template-columns: 42px minmax(0, 1fr) !important; gap: 5px !important; }
  #app main.posScreen .posWorkspace355 .posScanFooter355 .barcodeShortcut { width: 42px !important; }
  #app main.posScreen .posWorkspace355 .posScanFooter355 input { font-size: 12px !important; }
}