:root {
  color-scheme: dark;
  --pink: #f72f9b;
  --teal: #3ed9c8;
  --lime: #a6e24c;
  --bg: #0a0a0a;
  --card: #171717;
  --border: #2e2e2e;
  --text: #f5f5f5;
  --muted: #9a9a9a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; font-family: -apple-system, system-ui, sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
  /* Safety net: nothing on the page (wide tables, long unbroken strings, etc.) should be able
     to push the whole page wider than the viewport and cause horizontal scroll/overlap on
     mobile — anything that needs to overflow should scroll inside its own container instead
     (see .table-wrap / .scroll-table below). */
  overflow-x: hidden;
  overflow-x: clip; /* clip (not hidden) so the pinned sale bar below can stick */
}
.app { max-width: 480px; margin: 0 auto; padding: 20px; }
.logo { display: block; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; object-fit: cover; }
h1 { font-size: 1.4rem; margin-bottom: 4px; text-align: center; }
.sub { color: var(--muted); margin-bottom: 20px; font-size: 0.9rem; }
input, button, select {
  width: 100%; padding: 14px; margin: 6px 0; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 1rem;
}
/* iOS Safari (and some Android WebViews) can render type="number"/autofilled text in the OS
   default color instead of the `color` above unless this is set explicitly too — most visible
   on the admin "Name"/"Price" fields since Price is a number input. Scoped to inputs/selects
   only — buttons set their own text color per variant (.accent, .danger, …) and shouldn't
   inherit this. */
input, select {
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}
button { background: var(--teal); color: #05201c; border: none; font-weight: 700; cursor: pointer; }
button:active { filter: brightness(0.9); }
button.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--pink); color: #2a0716; }
button.accent { background: var(--lime); color: #1c2b06; }
/* Outline variants for admin's product-row actions: no solid fill, just a colored border, so
   Delete/Mark out don't read as "confirmed danger" buttons at a glance in a dense table. */
button.btn-outline-pink { background: var(--card); color: var(--text); border: 1px solid var(--pink); }
button.btn-outline-warn { background: var(--card); color: var(--text); border: 1px solid #f5a623; }
/* Out-of-stock product rows: dim to gray instead of full white so they read as inactive at a glance. */
tr.row-inactive td, tr.row-inactive input { color: var(--muted) !important; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin: 12px 0; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hidden { display: none !important; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
.status-in { background: rgba(166,226,76,0.18); color: var(--lime); }
.status-out { background: rgba(247,47,155,0.15); color: var(--pink); }
.msg { padding: 10px; border-radius: 8px; margin: 10px 0; font-size: 0.9rem; }
.msg.error { background: rgba(247,47,155,0.15); color: var(--pink); }
.msg.ok { background: rgba(166,226,76,0.15); color: var(--lime); }
.msg.pink { background: rgba(247,47,155,0.15); color: var(--pink); font-weight: 700; }
.tabbar { display: flex; gap: 8px; margin: 16px 0; }
.tabbar button { flex: 1; }
.tabbar button.active { background: var(--teal); color: #05201c; }
.product { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-controls button { width: 36px; padding: 6px; }
a { color: var(--teal); }
.khr-amount { color: var(--text); font-weight: 700; }
table { border-collapse: collapse; }
/* Report tables grow without bound as more days/weeks come in — cap the height and scroll
   inside the card instead of letting the page stretch forever. Also scrolls sideways so a
   wide table (more columns than a phone screen fits) scrolls inside the card instead of
   pushing the whole page wider than the viewport. */
.scroll-table { max-height: 320px; overflow-y: auto; overflow-x: auto; }
.scroll-table table { width: 100%; min-width: 480px; }
.scroll-table thead th { position: sticky; top: 0; background: var(--card); }
/* Same idea for tables that don't need a height cap (staff/orders/products lists) — the table
   keeps a real minimum width so its columns stay readable (not crushed to one letter per line)
   and the *container* scrolls sideways on a narrow phone, instead of the columns themselves
   getting squeezed to fit. */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; min-width: 560px; }
table td, table th { white-space: nowrap; }
/* Breathing room between the Sales by day / Sales by week / Staff hours dropdowns — without
   this they sit flush against each other and read as one crowded block. */
#section-sales-day, #section-sales-week, #section-hours-day { margin-top: 18px; }
table td, table th { text-align: left; padding: 5px 6px; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
table th { color: var(--muted); font-weight: 600; }
.icon-btn {
  width: 40px; height: 40px; padding: 0; margin: 0; flex-shrink: 0;
  background: #262626; color: var(--pink); border: 1px dashed var(--pink);
  border-radius: 10px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
}

/* Narrower phones (most Android devices run 360-393 CSS px vs iPhone's 390-430) don't have
   room for logo + name + three header buttons on one line at the desktop-tuned sizes above —
   tighten spacing and let rows wrap instead of squeezing everything into one line. */
@media (max-width: 400px) {
  .app { padding: 14px; }
  .row { gap: 8px; row-gap: 10px; flex-wrap: wrap; }
  .logo { width: 64px; height: 64px; }
  h1 { font-size: 1.25rem; }
  .icon-btn { width: 36px; height: 36px; font-size: 1rem; }
  input, button, select { padding: 12px; }
  .card { padding: 13px; }
}

/* Open tab on the POS screen: pink like the "Add to TAB" button (2 Nov 2026) */
#active-tab-banner { background: var(--pink); border-color: var(--pink); }
#active-tab-banner, #active-tab-banner .sub, #active-tab-banner b, #active-tab-banner span { color: #2a0716; }
#active-tab-banner button { background: #2a0716; color: #ffffff; border: none; }
#active-tab-banner button.danger { background: #ffffff; color: #2a0716; }
#active-tab-banner button.secondary { background: transparent; color: #2a0716; border: 1px solid #2a0716; }
#active-tab-banner #btn-cancel-tab { color: #2a0716 !important; border-color: #2a0716 !important; opacity: 1 !important; }

/* POS: the sale total and pay buttons stay pinned to the bottom of the screen while the product list scrolls above (2 Nov 2026) */
#instant-sale-cart { position: sticky; bottom: 0; z-index: 20; margin-bottom: 0; border-top: 2px solid var(--pink); box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.55); }
#instant-sale-cart #cart-items { max-height: 24vh; overflow-y: auto; }
.cart-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cart-actions button { margin: 0; padding: 12px 4px; font-size: 0.82rem; line-height: 1.15; }

/* Tablets and larger (2 Nov 2026): wider page; on the POS the products sit on the left and the tab and sale total on the right */
#pos-left, #pos-right { display: contents; }
@media (min-width: 768px) {
  .app { max-width: 1040px; padding: 24px; }
  #panel-clock { max-width: 520px; margin: 0 auto; }
  #panel-pos:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 18px; align-items: start; }
  #panel-pos > .card:first-child { grid-column: 1 / -1; }
  #pos-left { display: block; grid-column: 1; }
  #pos-right { display: block; grid-column: 2; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
  #instant-sale-cart { position: static; box-shadow: none; }
  #instant-sale-cart #cart-items { max-height: 38vh; }
  .cart-actions button { padding: 16px 6px; font-size: 0.95rem; }
}