/* Short, non-blocking feedback for touch, mouse and keyboard cashier actions. */
@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled):active { translate: 0 1px; }
  .modal-root .dialog { animation: pos-dialog-enter 140ms ease-out; }
  .pos-status-changed { animation: pos-status-flash 320ms ease-out; }
}
.pos-click-wave {
  position: fixed;
  z-index: 2147483646;
  border-radius: 50%;
  background: rgba(32, 148, 110, .24);
  pointer-events: none;
  contain: strict;
  animation: pos-click-wave 280ms ease-out forwards;
}
button.pos-feedback-static { outline: 2px solid rgba(32, 148, 110, .45); outline-offset: 2px; }
@keyframes pos-click-wave {
  from { transform: scale(.25); opacity: .8; }
  to { transform: scale(1); opacity: 0; }
}
@keyframes pos-dialog-enter {
  from { opacity: .75; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pos-status-flash {
  from { background-color: rgba(32, 148, 110, .16); }
  to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pos-click-wave { display: none; }
  .modal-root .dialog, .pos-status-changed { animation: none; }
}
@media print { .pos-click-wave { display: none !important; } }

.pos-effects-controls { display: inline-flex; gap: 4px; align-items: center; }
.pos-effects-control { min-height: 30px; padding: 3px 7px; border: 1px solid #d8ded7; border-radius: 5px; background: #fff; color: #506057; font-size: 11px; white-space: nowrap; }
.pos-effects-control[aria-pressed="true"] { border-color: #20946e; color: #20764f; }
.pos-effects-control:disabled { opacity: .45; }
  html:not([data-pos-effects="off"]) :is(.rail-button, .category-button, .floor-tab, .admin-tab, .toolbar-actions .toolbar-button, .login-footer-actions button, .pos-effects-control):focus-visible {
  outline: 2px solid #20946e;
  outline-offset: 2px;
  box-shadow: inset 0 -2px #20946e;
}
@media (hover: hover) {
  html:not([data-pos-effects="off"]) :is(.rail-button, .category-button, .floor-tab, .admin-tab, .toolbar-actions .toolbar-button, .login-footer-actions button, .pos-effects-control):not(:disabled):hover {
    outline: 1px solid rgba(32, 148, 110, .65);
    outline-offset: -1px;
    background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.06));
    box-shadow: inset 0 1px rgba(255,255,255,.85), inset 0 -2px rgba(32,148,110,.55), 0 3px 0 rgba(32,90,66,.20), 0 6px 10px rgba(36,39,34,.17);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-pos-effects="off"]) :is(.rail-button, .category-button, .floor-tab, .admin-tab, .toolbar-actions .toolbar-button, .login-footer-actions button, .pos-effects-control):not(:disabled):hover { translate: 0 -2px; }
  html:not([data-pos-effects="off"]) :is(.rail-button, .category-button, .floor-tab, .admin-tab, .toolbar-actions .toolbar-button, .login-footer-actions button, .pos-effects-control):not(:disabled):active { translate: 0 1px; box-shadow: inset 0 2px 3px rgba(36,39,34,.14), 0 1px 0 rgba(32,90,66,.20); }
}
html[data-pos-effects="off"] .rail-button:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .rail-button:hover { transform: none; } }
html[data-pos-effects="off"] .modal-root .dialog,
html[data-pos-effects="off"] .pos-status-changed { animation: none; }
html[data-pos-effects="off"] button:active { translate: none; }
@media print { .pos-effects-controls { display: none !important; } }
/* Backend: light feedback on ordinary controls, raised feedback on navigation tiles. */
html[data-feedback-surface="backend"] .pos-effects-controls { position: fixed; right: 16px; bottom: 12px; z-index: 1100; padding: 5px; border-radius: 7px; background: #fff; box-shadow: 0 2px 9px #0002; }
html[data-feedback-surface="backend"]:not([data-pos-effects="off"]) :is(button, .back-to-pos, .login-return-link):focus-visible { outline: 2px solid #20946e; outline-offset: 2px; }
@media (hover: hover) {
  html[data-feedback-surface="backend"]:not([data-pos-effects="off"]) button:not(:disabled):hover { filter: brightness(1.04); outline: 1px solid #20946e66; outline-offset: -1px; }
  html[data-feedback-surface="backend"]:not([data-pos-effects="off"]) :is(.nav-item, .inventory-hub-card, .report-hub-card, .page-actions .button.primary, .login-panel .button.primary):not(:disabled):hover { background-image: linear-gradient(180deg, #ffffff40, #0000000a); box-shadow: inset 0 1px #ffffffbb, inset 0 -2px #20946e66, 0 3px 0 #205a4233, 0 6px 10px #2427222b; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-feedback-surface="backend"]:not([data-pos-effects="off"]) :is(.nav-item, .inventory-hub-card, .report-hub-card, .page-actions .button.primary, .login-panel .button.primary):not(:disabled):hover { translate: 0 -2px; }
  html[data-feedback-surface="backend"]:not([data-pos-effects="off"]) :is(.nav-item, .inventory-hub-card, .report-hub-card, .page-actions .button.primary, .login-panel .button.primary):not(:disabled):active { translate: 0 1px; box-shadow: inset 0 2px 3px #24272224; }
}