/* HBB POS — app-wide commercial UI refinement. */
:root { --ui-radius: 10px; --ui-radius-sm: 8px; }
.shell { grid-template-columns: 216px minmax(0,1fr); }
.nav { gap: 12px; padding: 12px 10px; background: color-mix(in srgb,var(--bg-2) 92%,var(--panel)); }
.nav__brand { min-height: 48px; padding: 4px 8px 12px; border-bottom: 1px solid var(--line-soft); }
.nav__mark, .avatar { border-radius: 8px; }
.nav__list { gap: 3px; }
.nav__btn { min-height: 42px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; font-weight: 550; }
.nav__btn:hover { border-color: var(--line-soft); background: var(--panel); }
.nav__btn.is-active { border-color: var(--line); background: var(--panel); font-weight: 650; }
.nav__btn.is-active::before { left: 3px; top: 10px; bottom: 10px; border-radius: 99px; }
.nav__badge { border-radius: 999px; }
.top { height: 56px; padding: 0 14px; background: color-mix(in srgb,var(--bg-2) 92%,var(--panel)); }
.top__who { min-height: 38px; border-radius: 10px; }
.pill { min-height: 30px; padding: 0 9px; border-radius: 999px; }
.page { gap: 18px; padding: 22px 24px 44px; }
.page__title { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.page__sub { max-width: 800px; line-height: 1.5; }
.panel, .stat, .order, .up, .notice { border-radius: var(--ui-radius); }
.btn { min-height: 38px; border-radius: var(--ui-radius-sm); font-weight: 600; }
.input { min-height: 40px; border-radius: var(--ui-radius-sm); }
.btn:focus-visible, .input:focus-visible, .nav__btn:focus-visible, .cats__btn:focus-visible, .quickPick:focus-visible, .top__who:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 1px; }
.table tbody tr { transition: background-color .1s ease; }
.table tbody tr:hover { background: color-mix(in srgb,var(--panel-2) 78%,transparent); }
table.table th { padding: 11px 13px; } table.table td { padding: 10px 13px; }
.searchMeta { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); display: none; padding: 3px 6px; border-radius: 999px; background: var(--panel-2); color: var(--ink-3); font: 10px/1.2 var(--mono); pointer-events: none; }
.searchWrap.has-value .searchMeta { display: inline-flex; }
.payCta__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.payCta__key { flex: none; padding: 3px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; font: 700 10px/1.2 var(--mono); }
.ticket > .btn--block.btn--primary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket > .btn--block.btn--primary:disabled { background: color-mix(in srgb,var(--ink-3) 28%,var(--panel)); border-color: transparent; color: var(--ink-3); }
.modal__card { border-radius: 16px; }
.modal__head, .modal__foot { background: color-mix(in srgb,var(--panel) 92%,var(--bg-2)); }
.toast { border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.13); }
.payscreen__top { height: 58px; }
.pay__due { border-radius: 12px; background: var(--panel); }
.pay__method, .keypad__key { border-radius: 10px; }
.pay__method:hover { transform: translateY(-1px); }

@media (max-width:1120px) {
  .shell { grid-template-columns: 72px minmax(0,1fr); }
  .nav { padding-inline: 8px; }
  .nav__brandText, .nav__label, .nav__hint { display:none; }
  .nav__brand, .nav__btn { justify-content:center; padding-inline:0; }
  .nav__badge { position:absolute; top:3px; right:4px; }
}
@media (max-width:700px) {
  .shell { grid-template-columns: 58px minmax(0,1fr); }
  .nav { padding-inline:5px; }
  .top { padding-inline:9px; }
  .top__whoName { display:none; }
  .page { padding: 16px 14px 32px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } }