:root {
  --hpos-red: #a6193e;
  --hpos-ink: #14151A;
  --hpos-border: #E3E1DD;
  --hpos-bg: #F6F5F3;
}
#hpos-root {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--hpos-ink);
  color-scheme: light;
  box-sizing: border-box;
}
#hpos-root input, #hpos-root select { color: var(--hpos-ink); }
.hpos-modal, .hpos-modal input, .hpos-modal select { color: var(--hpos-ink); }
#hpos-root * { box-sizing: border-box; }
#hpos-root h1 { font-size: 20px; margin: 0 0 16px; }

.hpos-btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--hpos-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hpos-ink);
  cursor: pointer;
}
.hpos-btn:hover { background: var(--hpos-bg); }
.hpos-btn-primary { background: var(--hpos-red); border-color: var(--hpos-red); color: #fff; }
.hpos-btn-primary:hover { background: #8a1533; }
.hpos-btn-secondary { background: #fff; }
.hpos-btn-small { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.hpos-btn-danger { color: var(--hpos-red); border-color: var(--hpos-red); }
.hpos-btn-danger:hover { background: var(--hpos-red); color: #fff; }
.hpos-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hpos-empty { color: #777; padding: 16px 0; }
.hpos-form-error { color: var(--hpos-red); font-size: 13px; margin: 8px 0; }

/* --- POS screen layout --- */
.hpos-pos-page { display: flex; flex-direction: column; }
.hpos-stale-drawer-banner { background: var(--hpos-red); color: #fff; font-size: 13px; font-weight: 700; text-align: center; padding: 8px 14px; border-radius: 8px; margin-bottom: 10px; }
.hpos-brand-row { margin-bottom: 8px; }
.hpos-brand-row-wide { display: flex; align-items: center; gap: 10px; }
.hpos-brand-row img { height: 32px; width: auto; display: block; }
.hpos-brand-row span { display: block; font-size: 11px; font-weight: 600; color: var(--hpos-ink); margin-top: 3px; letter-spacing: .02em; }
/* No fixed/calculated height here on purpose \u2014 the shell (and the
   product grid / cart panels inside it) simply grows to whatever its
   content needs, on every screen size, and the page scrolls normally
   if that's taller than the screen. This used to be a fixed viewport
   height with the product grid and cart scrolling independently inside
   it, which kept being fragile in exactly the way nested scroll
   regions tend to be \u2014 see kiosk.css for the fuller explanation. */
.hpos-pos-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
}
.hpos-pos-left { display: flex; flex-direction: column; min-width: 0; }
.hpos-pos-right { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hpos-border); border-radius: 12px; padding: 14px; }

/* Floating "cart summary" bar — only ever appears on the stacked
   mobile/tablet-portrait layout (shown inside that breakpoint below),
   where the cart sits below a potentially long product list. Pinned in
   place so what's in the cart is always one glance away regardless of
   how far you've scrolled into the catalog, without changing the
   product grid itself in any way. Hidden here by default (both because
   there's nothing to show with an empty cart, and so it never appears
   at all on the side-by-side desktop/tablet-landscape layout, where
   the real cart is already sitting right there). */
.hpos-mobile-cart-bar {
  display: none;
  position: fixed;
  left: 10px; right: 10px; bottom: 10px;
  background: var(--hpos-ink);
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 500;
  cursor: pointer;
}
.hpos-mobile-cart-bar-left { display: flex; align-items: center; gap: 10px; }
.hpos-mobile-cart-count { background: var(--hpos-red); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
#hpos-mobile-cart-amount { font-size: 16px; font-weight: 800; }
.hpos-mobile-cart-bar-right { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hpos-mobile-cart-chevron { font-size: 12px; }

/* Tablet landscape (iPad and similar, typically ~1000-1200px) keeps the
   side-by-side desktop-style layout, where the cart is already visible
   next to the products \u2014 but the floating bar is still shown there
   too as a low-cost extra reminder of what's in the cart, in case the
   cart panel itself ever scrolls out of view on a shorter tablet
   screen. True desktop monitors (wider than this) don't get it, since
   the cart sitting directly on screen already makes it redundant there. */
@media (max-width: 1200px) {
  .hpos-mobile-cart-bar-visible { display: flex; }
  .hpos-pos-right { padding-bottom: 70px; }
}

.hpos-scan-row { display: flex; gap: 10px; margin-bottom: 12px; }
.hpos-scan-row input {
  flex: 1;
  min-height: 52px;
  font-size: 16px;
  padding: 10px 14px;
  border: 2px solid var(--hpos-border);
  border-radius: 8px;
}
#hpos-barcode-input { border-color: var(--hpos-red); }
.hpos-topbar-input {
  min-height: 34px;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--hpos-border);
  border-radius: 6px;
  width: 160px;
}
.hpos-topbar-input-group { display: flex; gap: 6px; min-width: 0; flex: 1 1 auto; }
.hpos-topbar-input-group .hpos-topbar-input { flex: 1 1 0; width: auto; min-width: 0; }

/* Hidden by default (the wide, single-row brand layout is the normal
   case); swapped in below the phone breakpoint instead of the wide one,
   which has no room to fit [logo][property name][Point of Sale] on one
   line at that width without pushing content off the right edge. */
.hpos-brand-row-narrow { display: none; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.hpos-brand-row-narrow-property { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--hpos-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpos-brand-row-narrow-mark { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.hpos-brand-row-narrow-mark img { height: 22px; width: auto; }
.hpos-brand-row-narrow-mark span { font-size: 11px; font-weight: 800; color: var(--hpos-ink); white-space: nowrap; }

.hpos-category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hpos-cat-tab {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--hpos-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hpos-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.hpos-cat-tab.active { background: var(--hpos-ink); color: #fff; border-color: var(--hpos-ink); }

.hpos-product-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  align-content: start;
  padding-top: 10px;
}
.hpos-product-tile {
  min-height: 90px;
  border: 1px solid var(--hpos-border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.hpos-product-tile:hover { border-color: var(--hpos-red); }
.hpos-product-tile-markdown { border-color: var(--hpos-red); }
.hpos-markdown-badge { position: absolute; top: -8px; right: 8px; background: var(--hpos-red); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; }
.hpos-alcohol-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: var(--hpos-ink); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.hpos-product-tile-price-was { display: block; text-decoration: line-through; color: #999; font-weight: 400; font-size: 11px; }
.hpos-product-tile-name { font-weight: 600; font-size: 14px; }
.hpos-product-tile-price { font-size: 15px; color: var(--hpos-red); font-weight: 700; margin-top: 8px; }

.hpos-cart-header { font-weight: 700; font-size: 16px; margin-bottom: 10px; background: var(--hpos-red); color: #fff; padding: 10px 12px; border-radius: 8px; }
.hpos-cart-header-count { display: none; align-items: center; justify-content: center; background: #fff; color: var(--hpos-red); border-radius: 50%; width: 24px; height: 24px; font-size: 12px; font-weight: 700; }
.hpos-cart-items { flex: 1; overflow-y: auto; min-height: 0; }
.hpos-cart-line { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--hpos-border); }
.hpos-cart-line:nth-child(odd) { background: #FAF6F0; }
.hpos-cart-line:nth-child(even) { background: #F3F0EA; }
.hpos-cart-line-name { font-size: 13px; }
.hpos-cart-line-discount-note { font-size: 11px; color: var(--hpos-red); margin-top: 2px; }
.hpos-cart-line-qty { display: flex; align-items: center; gap: 6px; }
.hpos-cart-line-qty button { min-width: 30px; min-height: 30px; border: 1px solid var(--hpos-border); border-radius: 6px; background: #fff; color: var(--hpos-ink); cursor: pointer; }
.hpos-cart-line-price { font-weight: 600; font-size: 13px; white-space: nowrap; }
.hpos-cart-line-discount-btn { min-width: 30px; min-height: 30px; border: 1px solid var(--hpos-border); border-radius: 6px; background: #fff; color: var(--hpos-ink); cursor: pointer; font-weight: 700; }
.hpos-cart-line-discount-btn:hover { border-color: var(--hpos-red); color: var(--hpos-red); }
.hpos-cart-line-remove { border: none; background: none; color: var(--hpos-red); font-size: 18px; cursor: pointer; min-width: 30px; min-height: 30px; }

.hpos-pos-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; min-width: 0; }
.hpos-drawer-badge { font-size: 12px; color: #276B41; background: #E1F0E4; padding: 6px 10px; border-radius: 6px; margin-right: auto; }
.hpos-drawer-gate { max-width: 360px; margin: 60px auto; background: #fff; border: 1px solid var(--hpos-border); border-radius: 12px; padding: 28px; text-align: center; }
.hpos-drawer-gate h2 { margin-top: 0; }
.hpos-drawer-gate .hpos-field { text-align: left; }
.hpos-drawer-gate .hpos-btn-primary { width: 100%; min-height: 52px; font-size: 15px; margin-top: 8px; }

.hpos-cart-totals { padding-top: 10px; border-top: 1px solid var(--hpos-border); }
.hpos-total-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.hpos-total-line-grand { font-weight: 700; font-size: 17px; padding-top: 8px; }

.hpos-payment-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.hpos-btn-pay { min-height: 52px; font-weight: 700; background: var(--hpos-ink); color: #fff; border: none; display: flex; align-items: center; justify-content: center; padding: 4px; }
.hpos-btn-pay-icon { font-size: 24px; line-height: 1; }
.hpos-btn-pay:hover { background: var(--hpos-red); }

/* --- Modals --- */
/* Every modal in this app is appended to document.body (so it can sit
   above everything regardless of where in the DOM it was triggered
   from), which puts it outside #hpos-root's own `* { box-sizing:
   border-box }` reset above — meaning every modal has been using the
   browser's default content-box sizing this whole time, where a
   field's padding adds ON TOP of its declared width instead of being
   included in it. On a wide desktop screen there's enough slack that
   this goes unnoticed; on a narrow phone it pushes inputs and their
   containing modal past the edge of the screen. */
.hpos-modal-overlay, .hpos-modal-overlay * { box-sizing: border-box; }
.hpos-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,21,26,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.hpos-modal { background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; }
.hpos-modal-wide { max-width: 760px; }
.hpos-modal h3 { margin: 0 0 16px; }
.hpos-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.hpos-field { margin-bottom: 12px; }
.hpos-field label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.hpos-field input, .hpos-field select {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--hpos-border); border-radius: 8px; font-size: 14px;
}
.hpos-readonly { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 18px; }
.hpos-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.hpos-split-row { display: flex; gap: 8px; margin-bottom: 8px; }
.hpos-split-row select { flex: 1; }
.hpos-split-row input { flex: 1; }

/* --- Admin lists --- */
.hpos-list { margin-top: 16px; }
.hpos-list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border: 1px solid var(--hpos-border); border-radius: 8px; margin-bottom: 8px; background: #fff;
}
.hpos-list-row-voided { opacity: 0.6; text-decoration: line-through; }

/* --- Dashboard --- */
.hpos-kiosk-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--hpos-border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 20px;
}
.hpos-dash-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.hpos-dash-card { background: #fff; border: 1px solid var(--hpos-border); border-radius: 12px; padding: 20px; min-width: 160px; }
.hpos-dash-card-value { font-size: 26px; font-weight: 700; color: var(--hpos-red); }
.hpos-dash-card-label { font-size: 13px; color: #555; margin-top: 4px; }

/* --- Refunds --- */
.hpos-refund-search { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.hpos-refund-search input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--hpos-border); border-radius: 8px; font-size: 14px; }
.hpos-refund-sale { background: #fff; border: 1px solid var(--hpos-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.hpos-refund-sale h3 { margin: 0 0 10px; font-size: 15px; }
.hpos-muted { color: #888; font-size: 13px; }

/* --- Tablet / phone ---
   Two tiers: :=900px is a tablet, still plenty of width for a 2-up
   product grid and readable buttons, just no room for a fixed 380px
   side cart anymore. :=560px is a phone-width screen (or a small
   tablet held in portrait), where controls that comfortably sat in one
   row on a tablet need to either wrap or drop to one column. */
@media (max-width: 900px) {
  .hpos-pos-shell { grid-template-columns: 1fr; height: auto; gap: 12px; }
  /* Products first, then cart — putting the cart above the product
     grid (as this used to) meant scrolling past an empty cart and five
     full-width payment buttons before reaching the one thing every
     visit starts with: finding a product to tap. The cart now follows
     naturally in reading order. It deliberately has no height cap here:
     an earlier attempt at capping it (so it wouldn't grow too tall)
     squeezed its scrollable item list down to a sliver — barely enough
     for one line — so a second cart line would need an unlabeled,
     easy-to-miss internal scroll just to see its own price and buttons.
     Letting the whole page scroll instead, the way a normal mobile web
     page does, is far more predictable. */
  .hpos-pos-left { min-height: 320px; }
  .hpos-form-grid { grid-template-columns: 1fr; }
  .hpos-topbar-input { min-width: 130px; }
  .hpos-product-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* Room at the bottom of both panels so the floating bar never sits
     on top of the last product row or the payment buttons underneath it. */
  .hpos-pos-left, .hpos-pos-right { padding-bottom: 70px; }
}
@media (max-width: 560px) {
  .hpos-brand-row-wide { display: none; }
  .hpos-brand-row-narrow { display: flex; }
  #hpos-camera-scan-btn { display: none; } /* the mobile brand row's own camera button replaces this one */
  .hpos-topbar-input-group { flex: 1 1 auto; }
  .hpos-topbar-input { width: auto; }
  .hpos-category-tabs { gap: 6px; }
  .hpos-cat-tab { padding: 6px 12px; font-size: 13px; min-height: 38px; }
  .hpos-product-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .hpos-product-tile { min-height: 74px; padding: 10px; }
  .hpos-payment-buttons { gap: 4px; }
  .hpos-btn-pay { min-height: 44px; }
  .hpos-btn-pay-icon { font-size: 18px; }
  .hpos-cart-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .hpos-cart-line-name { flex: 1 1 100%; }
  .hpos-pos-topbar { gap: 6px; }
  .hpos-drawer-gate { margin: 24px auto; padding: 20px; max-width: 320px; }
  .hpos-modal { padding: 16px; }
  .hpos-modal-actions { flex-wrap: wrap; }
}