/* ============================================================
   base.css — design tokens, reset, 1920x1080 stage scaling,
   shared button system, toasts, panels, inputs
   ============================================================ */

:root {
  --bg:            #E9EEF5;   /* stage background */
  --chrome:        #0F2340;   /* top bar, dark navy */
  --chrome-text:   #FFFFFF;
  --panel:         #FFFFFF;
  --panel-border:  #C9D3E0;
  --text:          #0F172A;
  --text-muted:    #5B6B82;

  --key-num:       #FFFFFF;   /* number keys */
  --key-num-text:  #0F172A;
  --key-num-edge:  #B8C4D4;   /* 4px bottom border = "raised" look */

  --key-fn:        #4F46E5;   /* function keys, indigo */
  --key-fn-edge:   #3730A3;
  --key-fn-text:   #FFFFFF;

  --go:            #16A34A;   /* CASH, YES, ADD */
  --go-edge:       #15803D;
  --card:          #2563EB;   /* CARD */
  --card-edge:     #1D4ED8;
  --stop:          #DC2626;   /* cancel sale, refund mode */
  --stop-edge:     #B91C1C;
  --warn:          #F59E0B;   /* clear, warnings */
  --warn-edge:     #B45309;
  --neutral:       #64748B;   /* NO buttons */
  --neutral-edge:  #475569;

  --cat-1:         #16A34A;   /* category colours, in order */
  --cat-2:         #EAB308;
  --cat-3:         #0891B2;
  --cat-4:         #DB2777;
  --cat-1-edge:    #128B3F;   /* ~15% darker */
  --cat-2-edge:    #C79807;
  --cat-3-edge:    #067B97;
  --cat-4-edge:    #BA2165;

  --radius:        18px;
  --gap:           12px;
  --pad:           16px;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg); /* letterbox colour */
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
  font-family: inherit;
}

button { font-family: inherit; color: inherit; }

.num, .amt, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- the 1920 x 1080 stage ---------- */
#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  margin-left: -960px; margin-top: -540px;
  transform-origin: 50% 50%;   /* scale set by js/app.js fit() */
  background: var(--bg);
  overflow: hidden;
}

#screen, #modals, #toasts { position: absolute; inset: 0; }
#modals { pointer-events: none; }
#modals .overlay { pointer-events: auto; }
#toasts { pointer-events: none; z-index: 90; }

.screen { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden; }

/* ---------- buttons (shared recipe) ----------
   Press feedback uses a translucent ::after overlay instead of a CSS
   filter — filters force re-rasterisation of every button on weaker
   kiosk GPUs and can make rapid tapping feel laggy. */
.btn {
  --btn-bg: var(--neutral);
  --btn-edge: var(--neutral-edge);
  --btn-fg: #fff;
  --ic: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius);
  border-bottom: 6px solid var(--btn-edge);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 60ms ease;
  padding: 8px;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, .10);
  opacity: 0;
  transition: opacity 60ms ease;
  pointer-events: none;
}

.btn:active,
.btn.pressed {
  transform: translateY(4px);
  border-bottom-width: 2px;
}
.btn:active::after,
.btn.pressed::after { opacity: 1; }

.btn.is-disabled {
  opacity: .35;
  cursor: default;
}
.btn.is-disabled:active,
.btn.is-disabled.pressed {
  transform: none;
  border-bottom-width: 6px;
}
.btn.is-disabled:active::after,
.btn.is-disabled.pressed::after { opacity: 0; }

.btn .ic { width: var(--ic); height: var(--ic); flex: none; }
.btn .ic svg { width: 100%; height: 100%; display: block; }

/* colour variants */
.btn-go      { --btn-bg: var(--go);      --btn-edge: var(--go-edge); }
.btn-card    { --btn-bg: var(--card);    --btn-edge: var(--card-edge); }
.btn-stop    { --btn-bg: var(--stop);    --btn-edge: var(--stop-edge); }
.btn-warn    { --btn-bg: var(--warn);    --btn-edge: var(--warn-edge); }
.btn-neutral { --btn-bg: var(--neutral); --btn-edge: var(--neutral-edge); }
.btn-fn      { --btn-bg: var(--key-fn);  --btn-edge: var(--key-fn-edge); }
.btn-num     { --btn-bg: var(--key-num); --btn-edge: var(--key-num-edge); --btn-fg: var(--key-num-text); }

.btn-cat-1 { --btn-bg: var(--cat-1); --btn-edge: var(--cat-1-edge); }
.btn-cat-2 { --btn-bg: var(--cat-2); --btn-edge: var(--cat-2-edge); }
.btn-cat-3 { --btn-bg: var(--cat-3); --btn-edge: var(--cat-3-edge); }
.btn-cat-4 { --btn-bg: var(--cat-4); --btn-edge: var(--cat-4-edge); }

/* white tile button (manager menu / settings) */
.btn-tile {
  --btn-bg: #FFFFFF; --btn-edge: var(--panel-border); --btn-fg: var(--chrome);
  border: 3px solid var(--panel-border);
}

/* outline button (PRINT RECEIPT on done screen) */
.btn-outline {
  --btn-bg: #FFFFFF; --btn-edge: var(--chrome); --btn-fg: var(--chrome);
  border: 4px solid var(--chrome);
  border-bottom: 6px solid var(--chrome);
}

/* selected pill (toggles in settings) */
.btn.is-selected { outline: 6px solid var(--key-fn); outline-offset: -2px; }

/* red count badge (HELD SALES) */
.badge {
  position: absolute;
  top: -10px; right: -10px;
  min-width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--stop);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
  border: 3px solid #fff;
}

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 3px solid var(--panel-border);
  border-radius: var(--radius);
}

/* ---------- inputs (Settings only) ---------- */
input[type="text"], input[type="password"], input[type="tel"] {
  height: 72px;
  border: 3px solid var(--panel-border);
  border-radius: 12px;
  padding: 0 18px;
  font-size: 28px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
input:focus { outline: 4px solid var(--key-fn); border-color: var(--key-fn); }

/* ---------- toasts / hint bar ---------- */
.toast {
  position: absolute;
  left: 652px;                 /* centred over the 560px middle column */
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  min-height: 88px;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  border-radius: 18px;
  font-size: 26px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px;
}

/* ---------- screen / modal transitions (opacity + transform only: GPU-cheap, no reflow) ---------- */
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
.screen { animation: screenIn 110ms ease-out; }

/* ---------- shake animation ---------- */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}
.shake { animation: shakeX 200ms ease; }

/* ---------- scrollbars (item list only place that scrolls) ---------- */
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 12px; }
.scroll-y::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: #C9D3E0; border-radius: 6px; }

/* ---------- misc ---------- */
.hr-dash { border-top: 3px dashed #CBD5E1; }