/* Shop POS — web portal.
 *
 * Dark only, on purpose: this lives on a shop counter and on a phone at
 * 6am, and a white panel at either is a flashbang. No second palette to
 * keep in step and no toggle to get stuck half-applied.
 *
 * The look is deliberately quiet. A register is read at a glance, in a
 * hurry, often by someone mid-conversation with a customer — so the
 * chrome recedes and the numbers carry the weight. The only saturated
 * colour in the whole interface is the primary action and anything that's
 * gone wrong.
 *
 * GLASS. Surfaces are translucent and blur what's behind them, over a
 * background carrying a faint green wash for them to pick up. That's an
 * approximation of Apple's Liquid Glass, not the real thing: genuine
 * Liquid Glass refracts and throws specular highlights in real time, and
 * a browser can't do that — `backdrop-filter` blurs and tints, and stops
 * there. The native SwiftUI app gets the actual material for free with
 * `.glassEffect()`; this is the closest a web page gets.
 *
 * Because every blurring surface costs the compositor, glass is spent
 * where depth actually reads — the bar, panels, dialogs, the login card —
 * and nowhere else. It also degrades cleanly: browsers without
 * `backdrop-filter` fall back to opaque surfaces via @supports.
 *
 * Still sized for a front-desk iPad first: nothing needs a precise mouse,
 * and every target clears 44px.
 */

:root {
  color-scheme: dark;

  /* Four greys a step apart, so depth reads without outlines. The
     surfaces are translucent — the alpha is what lets the blur show. */
  --bg:        #08090b;
  --surface:   rgba(22, 25, 29, .72);
  --surface-solid: #16191d;
  --raised:    rgba(38, 43, 50, .55);
  --hover:     rgba(52, 58, 67, .68);

  --ink:       #f2f4f7;
  --ink-dim:   #a8b0bd;
  --ink-faint: #6b7482;

  --hairline:  rgba(255, 255, 255, .07);
  --hairline-strong: rgba(255, 255, 255, .13);

  /* Apple's system green. Dark ink on it, not white: white on this green
     is about 2:1 contrast and unreadable at a glance; near-black is 11:1. */
  --accent:      #30d158;
  --accent-deep: #28b84c;
  --accent-ink:  #06210e;
  --accent-glow: rgba(48, 209, 88, .22);

  --good: #3ddc9a;
  --bad:  #ff6b6b;
  --warn: #ffc457;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The lit top edge is what makes a translucent panel read as a pane of
     something rather than a flat transparent rectangle. */
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.07);
  --blur: saturate(180%) blur(22px);
}

* { box-sizing: border-box; }

/* An explicit `display` beats the browser's own `[hidden] {display:none}`,
   so `.login-wrap { display: grid }` would leave the login screen sitting
   on top of the signed-in app forever. Say it louder than the rule it's
   fighting. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* Glass needs something behind it or it just looks grey. Two very faint
     green washes, fixed so they don't slide around under scrolling
     panels. */
  background:
    radial-gradient(1100px 760px at 8% -12%, rgba(48,209,88,.09), transparent 62%),
    radial-gradient(900px 680px at 104% 4%, rgba(48,209,88,.055), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* Headings and totals in the rounded system face — SF Pro Rounded on
   Apple hardware, which is what this runs on. Softer than the text face
   without costing any legibility at a glance, and it needs no webfont, so
   nothing waits on a download or breaks when the shop is offline. */
h1, h2, h3, .stat.big .v, .login h1, nav button, .tile {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system,
               BlinkMacSystemFont, "Segoe UI Variable Display", system-ui,
               sans-serif;
}

/* Money and quantities line up in columns or they're useless at a glance. */
.mono, .amount, .stat .v, td.num, th.num,
input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

::selection { background: var(--accent-deep); color: #fff; }

/* ---- Top bar ---------------------------------------------------- */

header.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 56px;
  background: rgba(10, 12, 14, .62);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--glass-edge);
  position: sticky;
  top: 0;
  z-index: 30;
}

header.bar h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}

nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }

nav button {
  background: none;
  border: 0;
  padding: 7px 13px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
nav button:hover { background: var(--raised); color: var(--ink); }
nav button.on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(48,209,88,.3), 0 2px 12px var(--accent-glow);
}

.who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.who #whoami { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Signing out is the least important thing on screen and was the loudest
   button on it. Quiet until you go looking for it. */
.who button.btn {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}
.who button.btn:hover { background: var(--raised); color: var(--ink); border-color: transparent; }

/* Mobile Safari zooms the page in whenever a focused field's text is
   under 16px, and then leaves it zoomed — so tapping the RO number on a
   phone left the counter looking at a magnified half of the register.
   The desktop keeps 15px, which is what the rest of the type is set to. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px; }
}

/* Narrow screens: the bar wraps rather than squashing the nav. */
@media (max-width: 620px) {
  header.bar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  header.bar h1 { font-size: 14px; }
  .who { font-size: 12px; gap: 8px; }
  .who #whoami { max-width: 130px; }
  nav { order: 3; width: 100%; }
  main { padding: 16px 14px 48px; }
  .panel { padding: 18px 16px; border-radius: 14px; }
  .row > * { flex: 1 1 100%; }
}

main { padding: 24px 20px 64px; max-width: 1180px; margin: 0 auto; }

/* ---- Panels ----------------------------------------------------- */

.panel {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge), 0 1px 3px rgba(0,0,0,.28);
  padding: 22px;
  margin-bottom: 18px;
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* The note directly under a heading is a subtitle, not a paragraph. */
.panel h2 + .note { margin: 0 0 18px; }
.panel h2:only-child, .panel h2:last-child { margin-bottom: 16px; }

.panel h3 {
  margin: 26px 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 170px; }

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- Controls --------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease);
}
input:hover, select:hover, textarea:hover { background: var(--hover); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select {
  appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7482' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }

button.btn {
  min-height: 44px;
  padding: 11px 18px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .08s var(--ease), opacity .16s var(--ease);
}
button.btn:hover { background: var(--hover); border-color: #3a4149; }
button.btn:active { transform: scale(.985); }

button.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  box-shadow: 0 2px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
button.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

button.btn.danger { color: var(--bad); border-color: rgba(255,107,107,.28); background: transparent; }
button.btn.danger:hover { background: rgba(255,107,107,.09); border-color: rgba(255,107,107,.45); }

button.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
button.btn.wide { width: 100%; }

/* A label and a tight group of buttons — not a form row, which would
   stretch and wrap them raggedly on a phone. */
.dl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.dl-row button.btn { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }

/* ---- Quick-item tiles ------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }

.tile {
  padding: 15px 14px;
  min-height: 68px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .08s var(--ease);
}
.tile:hover { background: var(--hover); border-color: var(--hairline-strong); }
.tile:active { transform: scale(.985); }
.tile .sub {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
}

/* ---- Tables ----------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  padding: 0 12px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }

tbody tr.click { cursor: pointer; transition: background .12s var(--ease); }
tbody tr.click:hover { background: var(--raised); }

.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* ---- Stat rows -------------------------------------------------- */

.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.stat:last-child { border-bottom: 0; }
.stat .k { color: var(--ink-dim); font-size: 14px; }
.stat .v { font-size: 15px; }

.stat.big {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 0;
}
.stat.big .k { font-size: 15px; color: var(--ink); font-weight: 550; }
.stat.big .v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

/* ---- Small bits ------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  background: var(--raised);
  color: var(--ink-dim);
  margin: 2px 4px 2px 0;
}
.pill.on    { background: rgba(48,209,88,.14);   color: #86e8a4; }
.pill.admin { background: rgba(255,196,87,.13);  color: var(--warn); }
.pill.bad   { background: rgba(255,107,107,.13); color: var(--bad); }
/* Something incomplete rather than something wrong — a deposit. */
.pill.warn  { background: rgba(255,196,87,.13);  color: var(--warn); }

.note { color: var(--ink-faint); font-size: 13px; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }

.msg {
  padding: 12px 15px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}
.msg.err { background: rgba(255,107,107,.09);  color: #ffb0b0; border-color: rgba(255,107,107,.24); }
.msg.ok  { background: rgba(61,220,154,.08);   color: #8ceac4; border-color: rgba(61,220,154,.22); }

/* ---- Login ------------------------------------------------------ */

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.login {
  width: 100%;
  max-width: 348px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: var(--glass-edge), var(--shadow);
}
.login h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login .note { margin: 0 0 22px; }

.pin-dots { display: flex; gap: 11px; justify-content: center; margin: 20px 0 22px; }
.pin-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--hover);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.pin-dots i.filled {
  background: var(--accent);
  transform: scale(1.15);
  box-shadow: 0 0 10px var(--accent-glow);
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button {
  padding: 0;
  height: 58px;
  font-size: 22px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.keypad button:hover { background: var(--hover); }
.keypad button:active { background: var(--hairline-strong); transform: scale(.95); }

/* ---- Receipt ---------------------------------------------------- */

.receipt-shot {
  max-width: 330px;
  width: 100%;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-sm);
  image-rendering: crisp-edges;
  /* The receipt genuinely is black ink on white paper, so it stays white
     — knocked back so it isn't a glare against everything else. */
  filter: brightness(.9) contrast(1.02);
  box-shadow: var(--shadow);
}

/* ---- Dialog ----------------------------------------------------- */

dialog {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 620px;
  width: 92%;
  background: rgba(26, 30, 35, .78);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  box-shadow: var(--glass-edge), 0 24px 70px rgba(0,0,0,.62);
}
dialog::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
dialog .body { padding: 24px; max-height: 86dvh; overflow-y: auto; }
dialog h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

.dialog-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

/* Without backdrop-filter the translucent surfaces would show the page
   straight through and turn to mush, so fall back to solid ones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --surface: var(--surface-solid);
    --raised:  #22262c;
    --hover:   #2b3037;
  }
  header.bar { background: #0d0f12; }
  dialog { background: #1a1e23; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The keypad rule, shown while typing: "5725" reads as $57.25. */
.amount-preview { min-height: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Card brands as marks to click, not a menu. */
.card-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.card-tile {
  min-height: 62px; padding: 8px 4px;
  background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r);
  color: var(--ink-dim); font-family: inherit; font-size: 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.card-tile.on { border-color: var(--accent); border-width: 2px; color: var(--ink); background: rgba(255,255,255,.09); }
.card-tile .mark { height: 24px; display: flex; align-items: center; justify-content: center; }
.mark-visa { font: italic 900 18px/1 system-ui, sans-serif; color: #1c4fd9; letter-spacing: .5px; }
.mark-mc { position: relative; width: 38px; height: 24px; }
.mark-mc i { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; }
.mark-mc i:first-child { left: 0; background: #eb001b; }
.mark-mc i:last-child { left: 14px; background: rgba(247,158,27,.92); }
.mark-disc { font: 900 12px/1 system-ui, sans-serif; color: var(--ink); display: flex; align-items: center; gap: 3px; }
.mark-disc i { width: 12px; height: 12px; border-radius: 50%; background: #f46f21; display: inline-block; }
.mark-amex { font: 900 12px/1 system-ui, sans-serif; color: #fff; background: #0070bf; padding: 4px 7px; border-radius: 4px; }

/* A split bill: each payment is its own block, numbered. */
.tender { padding: 12px 0 4px; }
.tender + .tender { border-top: 2px solid var(--hairline); margin-top: 8px; padding-top: 14px; }
.tender .n { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* Two-way switches and pick-one chips, for the drawer. */
.tabs { display: flex; background: var(--raised); border-radius: var(--r); padding: 3px; gap: 3px; }
.tab { flex: 1; min-height: 38px; border: 0; border-radius: calc(var(--r) - 3px); background: transparent;
       color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; }
.tab.on { background: var(--accent); color: #06210e; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--raised);
        color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.chip.on { background: var(--accent); color: #06210e; border-color: var(--accent); }
.num.good { color: #86e8a4; } .num.bad { color: var(--bad); }

/* A repair order is waiting at the counter. No words; the count is the message. */
.pending-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 0; background: var(--accent); color: #06210e; font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; margin-right: 10px; }
.pending-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #06210e; opacity: .8; }

/* Counting the drawer by bill. */
.bills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bill { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center;
        gap: 2px 8px; padding: 8px 10px; background: var(--raised); border-radius: var(--r); }
.bill .d { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.bill input { grid-column: 2; grid-row: 1; width: 100%; }
.bill .sub { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.bills .stat.big { grid-column: 1 / -1; }
.bill-est { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 8px 0; }
.est { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--r);
       background: var(--raised); }
.est .d { font-size: 11.5px; color: var(--ink-dim); }
.est .q { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.est.low { background: rgba(255,196,87,.13); } .est.low .q { color: var(--warn); }

/* One control split down the middle: a secondary action and a green one. */
.split-btn { display: flex; border-radius: var(--r); overflow: hidden; }
.split-btn .btn { flex: 1; border-radius: 0; }
.split-btn .btn + .btn { border-left: 1px solid rgba(0,0,0,.25); }

/* Which database the server is on — on every screen, always. */
.db-banner { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; margin-left: 10px; }
.db-banner.live { background: rgba(48,209,88,.16); color: var(--good, #30d158); }
.db-banner.test { background: rgba(255,179,71,.18); color: var(--warn, #ffb347); }
.db-table td.num { text-align: right; }