/* ElviBiz POS — mobile first. Calm neutral ground, one teal for actions,
   amber for money owed, green for payments, red only for negative stock and voids.
   System fonts only: nothing to download on a slow connection. */

:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --sunk: #f2f4f7;
  --ink: #101828;
  --muted: #475467;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --primary: #0f766e;
  --primary-ink: #ffffff;
  --primary-tint: #e6f4f1;
  --owed: #b54708;
  --owed-tint: #fff4e5;
  --paid: #027a48;
  --paid-tint: #ecfdf3;
  --danger: #b42318;
  --danger-tint: #fef3f2;
  --shadow: 0 10px 30px -18px rgba(16, 24, 40, .45);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.icon { width: 22px; height: 22px; flex: none; }
.muted { color: var(--muted); }
.num, .amount { text-align: right; font-variant-numeric: tabular-nums; }
.owed { color: var(--owed); }
.paid { color: var(--paid); }
.negative { color: var(--danger); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- shell */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em; text-decoration: none;
}
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand img { border-radius: 8px; flex: none; }
.topbar .brand { margin-right: auto; }   /* the rest sits at the right */
/* who is signed in, always in view */
.topbar-who {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 40vw; min-height: 40px; padding: 0 12px 0 10px; border-radius: 99px;
  background: var(--primary-tint); color: var(--primary); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-who .icon { width: 18px; height: 18px; flex: none; stroke-width: 2.2; }
/* the top bar's Sign out is just its icon, leaving room for the name */
.topbar-signout .signout { padding: 0 12px; }
.topbar-signout .signout span { display: none; }
/* Sign out: red, so anyone can find it */
.signout {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid #f6c9c4; border-radius: 12px; background: var(--danger-tint); color: var(--danger);
  font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.signout:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.signout .icon { width: 18px; height: 18px; stroke-width: 2.2; }

.main {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 6px 16px calc(96px + env(safe-area-inset-bottom));
}

/* phones: a bottom bar within thumb reach */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.nav-link {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 6px 0;
  font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.nav-link.is-current { color: var(--primary); font-weight: 700; }
.nav-link.is-current::before {
  content: ""; position: absolute; top: -1px; left: 25%; right: 25%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
}
.badge {
  position: absolute; top: 6px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.nav-brand, .nav-foot, .nav-subs, .nav-wide-only { display: none; }

/* laptops: a sidebar */
@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .topbar { display: none; }
  .nav {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    flex-direction: column; gap: 2px;
    padding: 24px 14px;
    border-top: 0; border-right: 1px solid var(--line);
  }
  .nav-brand { display: inline-flex; margin: 0 8px 24px; }
  .nav-link {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px;
  }
  .nav-link:hover { background: var(--sunk); color: var(--ink); }
  .nav-link.is-current { background: var(--primary-tint); }
  .nav-link.is-current::before { inset: 10px auto 10px 0; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .badge { position: static; margin-left: auto; }
  .nav-wide-only { display: flex; }
  .nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px; }
  .nav-sub {
    display: flex; align-items: center; min-height: 36px; padding: 0 12px 0 46px; border-radius: 8px;
    font-size: 14px; color: var(--muted); text-decoration: none;
  }
  .nav-sub:hover { background: var(--sunk); color: var(--ink); }
  .nav-sub.is-current { color: var(--primary); font-weight: 600; }
  .nav-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding: 12px; border-top: 1px solid var(--line);
    font-size: 14px; font-weight: 600;
  }
  .nav-foot small { display: block; font-weight: 400; color: var(--muted); }
  .main { max-width: 1120px; margin: 0; padding: 32px 40px 56px; gap: 20px; }
}

/* ---------------------------------------------------------------- page furniture */

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.page-sub { color: var(--muted); margin-top: -10px; }
.back {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-bottom: -6px; padding: 6px 8px 6px 0;
  color: var(--muted); font-weight: 600; text-decoration: none;
}
.back .icon { width: 18px; height: 18px; }
.optional { font-weight: 400; color: var(--muted); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.panel > h2 { margin-bottom: 8px; }

/* ---------------------------------------------------------------- lists */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line); }
.rows-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 16px;
  text-decoration: none; color: inherit; text-align: left;
}
.row-button { border: 0; background: none; cursor: pointer; }
a.row:active, .row-button:active { background: var(--sunk); }
@media (hover: hover) { a.row:hover, .row-button:hover { background: var(--sunk); } }
/* The search result picked with ↓ ↑ from a search box (app.js), marked as at the till. */
a.row.is-picked, tr:has(> td:first-child a.is-picked) > td { background: var(--primary-tint); }
a.row.is-picked { box-shadow: inset 3px 0 0 var(--primary); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: 600; }
.row-meta { font-size: 13px; color: var(--muted); }
.row-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row > .icon { color: var(--muted); }
.is-hidden { opacity: .6; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 16px; text-align: center; color: var(--muted); }

.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.table thead th { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.table tbody th { font-weight: 500; }
.table .num { text-align: right; white-space: nowrap; }
.table tfoot th, .table tfoot td { font-weight: 800; border-bottom: 0; }
.tick { width: 22px; height: 22px; accent-color: var(--primary); }
.roles-table td.num { width: 90px; text-align: center; }
.roles-table thead th.num { text-align: center; }
.roles-table + .btn, .table-wrap + .btn { margin-top: 16px; }

/* ---------------------------------------------------------------- forms */

.form { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 560px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
legend { padding: 0; margin-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
/* A red asterisk on every field that must be filled in (the input carries `required`). */
.field:has([required]) > .label::after { content: "*"; content: "*" / ""; margin-left: -5px; color: var(--danger); }
.hint { font-size: 13px; color: var(--muted); }

.input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font-size: 17px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
textarea.input { min-height: 0; resize: vertical; line-height: 1.4; }
.reveal { position: relative; display: block; }
.reveal .input { padding-right: 52px; }
.reveal-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 0 12px 12px 0; color: var(--muted); cursor: pointer;
}
.reveal-btn:hover, .reveal-btn[aria-pressed="true"] { color: var(--ink); }
.reveal-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.input-small { min-height: 44px; padding: 6px 10px; font-size: 15px; width: auto; }
.input-money { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--surface);
  font-weight: 500; cursor: pointer;
}
.choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }

/* the main action of a page: stuck above the bottom bar on phones */
.savebar {
  position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 900px) { .savebar { bottom: 20px; } }

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form .input { flex: 1; min-width: 0; }
.stack-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.stack-form .btn { align-self: flex-start; }
.warn-text { color: var(--danger); font-weight: 600; }

.notice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 12px; background: var(--sunk); color: var(--muted); font-weight: 500;
}
.notice-owed { background: var(--owed-tint); color: var(--owed); }
.alert { padding: 12px 14px; border-radius: 12px; background: var(--danger-tint); color: var(--danger); font-weight: 500; }
.alert p + p { margin-top: 4px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: 12px;
  font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .08s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-quiet { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.form > .btn, .panel > .btn { align-self: flex-start; }
.linkish { padding: 0; border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: underline; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* staff */
.row-static { display: flex; }
.person-row .row-static { padding: 12px 16px 6px; }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 6px 16px 14px 68px; }
.person-actions details[open] { flex-basis: 100%; }
.person-actions details[open] summary { margin-bottom: 8px; }
.avatar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary); font-weight: 800; font-size: 17px;
}
.add-person > summary { width: 100%; }
.add-person[open] > summary { display: none; }
.add-person .form { max-width: none; }

/* ---------------------------------------------------------------- sign in, signup */

body.bare { min-height: 100vh; background: linear-gradient(180deg, #0f766e 0, #0b5c56 100%); }
.login {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  min-height: 100vh; max-width: 440px; margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 16px 32px;
}
.login-head { color: #f0fdfa; text-align: center; }
.login-head img { display: block; margin: 0 auto 12px; border-radius: 14px; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5); }
.login-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.login-head p { margin-top: 4px; color: rgba(240, 253, 250, .8); font-size: 17px; }
.login-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
}
.login-alt { text-align: center; color: rgba(240, 253, 250, .85); font-size: 15px; }
.login-alt a, .login-alt .linkish { color: #fff; font-weight: 700; }
.input-secret { letter-spacing: .2em; }

/* ---------------------------------------------------------------- loading */

/* Covers the page while the next one loads: blocks taps straight away, shows
   the bar at once and the spinner only if loading takes a moment. */
.busy { position: fixed; inset: 0; z-index: 1000; display: none; cursor: progress; }
body.is-busy .busy { display: block; }
.busy::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  opacity: 0; animation: busy-fade .2s .35s forwards;
}
.busy-bar {
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--primary);
  transform-origin: left; transform: scaleX(0);
  animation: busy-bar 10s cubic-bezier(.1, .7, .2, 1) forwards;
}
.busy-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 14px 20px; border-radius: 14px;
  background: var(--ink); color: #fff; font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0; animation: busy-fade .2s .35s forwards;
}
.spinner {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--primary-tint);
  animation: spin .8s linear infinite;
}
.btn.is-loading .icon { display: none; }
.btn.is-loading::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes busy-bar { 0% { transform: scaleX(0); } 8% { transform: scaleX(.4); } 100% { transform: scaleX(.92); } }
@keyframes busy-fade { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; z-index: 50; left: 50%; top: calc(12px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: toast 4.5s ease forwards;
}
.toast .icon { color: #5eead4; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  6%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .toast { animation-name: toast-still; }
  .busy-bar { animation: none; transform: scaleX(.6); }
  .spinner, .btn.is-loading::before { animation-duration: 2s; }
  @keyframes toast-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}

@media print {
  .nav, .topbar, .toast, .busy, .no-print { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
}

/* ---------------- reports ---------------- */

.summary-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-filter .field:nth-of-type(3), .summary-filter-go { grid-column: 1 / -1; }
.summary-filter-go { display: flex; gap: 8px; }
.summary-filter .input[type="date"] { min-width: 0; }

/* Cash in hand and M-Pesa in are what the owner counts against, so they come first and big. */
.summary-hero { display: grid; gap: 12px; }
.summary-tile { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.summary-tile h2 { font-size: 15px; color: var(--muted); }
.tile-cash, .tile-mpesa { background: var(--paid-tint); border-color: color-mix(in srgb, var(--paid) 25%, transparent); }
.summary-big { margin: 4px 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--paid); font-variant-numeric: tabular-nums; }
.summary-parts { margin: 0; display: flex; flex-direction: column; }
.summary-parts > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.summary-parts > div + div { border-top: 1px solid var(--line); }
.summary-parts dt { color: var(--muted); }
.summary-parts dd { margin: 0; font-weight: 600; }
.summary-parts .owed dt, .summary-parts .owed dd { color: var(--owed); }
.panel .summary-parts + .hint { margin-top: 10px; }

.activity-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.activity-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.activity-change { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.activity-change > div { display: flex; gap: 8px; }
.activity-change dt { flex: none; width: 48px; color: var(--muted); }
.activity-change dd { margin: 0; overflow-wrap: anywhere; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (min-width: 640px) {
  .summary-filter { grid-template-columns: 1fr 1fr 1.4fr auto; align-items: end; }
  .summary-filter .field:nth-of-type(3), .summary-filter-go { grid-column: auto; }
  .summary-hero { grid-template-columns: 1fr 1fr; }
}
/* ---------------- platform ---------------- */

.status { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--sunk); color: var(--muted); }
.status-trial { background: var(--owed-tint); color: var(--owed); }
.status-active { background: var(--paid-tint); color: var(--paid); }
.status-suspended { background: var(--danger-tint); color: var(--danger); }
.admin-table td, .admin-table th { vertical-align: top; }
.admin-table tr.is-suspended th a { color: var(--danger); text-decoration: line-through; }
.admin-table th a { color: var(--primary); font-weight: 700; }
/* ---------------- sales & customers ---------------- */

.list-head { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: -8px; }
.debtors-link { align-self: flex-start; }
.money-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* the customer's account (mockup statement.html, left) */
.cust-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.balance-card {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid #f5c27a; border-radius: 14px; background: var(--owed-tint); color: var(--ink);
}
.balance-card b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--owed); font-variant-numeric: tabular-nums; }
.balance-card small { font-size: 13px; color: var(--muted); }
.balance-card.is-credit { border-color: #abefc6; background: var(--paid-tint); }
.balance-card.is-credit b { color: var(--paid); }
.balance-card.is-clear { border-color: var(--line); background: var(--surface); }
.balance-card.is-clear b { color: var(--ink); }
.cust-actions { display: flex; gap: 8px; }
.cust-actions .btn { flex: 1; min-width: 0; padding: 0 6px; font-size: 14px; line-height: 1.15; white-space: normal; text-align: center; }
.cust-more { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* sales list and one sale; a void is struck through in red */
.day-nav { display: flex; align-items: center; gap: 8px; }
.day-nav .input { flex: 1; max-width: 220px; }
.day-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.day-totals > div { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.day-totals > .day-total { grid-column: 1 / -1; }
.day-totals span { font-size: 13px; color: var(--muted); }
.day-totals b { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .day-totals { grid-template-columns: 2fr 1fr 1fr 1fr; } .day-totals > .day-total { grid-column: auto; } }
.void-tag {
  display: inline-block; padding: 1px 8px; border-radius: 6px; vertical-align: middle;
  background: var(--danger-tint); color: var(--danger); font-size: 12px; font-weight: 700; text-decoration: none;
}
.is-void .row-amount, .is-void .row-meta, .page-title.is-void, .sale-detail.is-void .row-amount, .sale-detail.is-void dd { color: var(--danger); text-decoration: line-through; }
.sale-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.sale-sums { margin: 8px 0 0; padding-top: 8px; border-top: 2px solid var(--ink); }
.sale-sums > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.sale-sums dt { color: var(--muted); }
.sale-sums dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sale-sums .owed dt, .sale-sums .owed dd { color: var(--owed); }
.sale-sums .sale-total dt { color: var(--ink); font-weight: 700; }
.sale-sums .sale-total dd { font-size: 20px; font-weight: 800; }
.void-box[open] > summary { display: none; }

/* account history, newest first, a day at a time (mockup statement.html, left) */
.btn-whatsapp { background: #25d366; color: #fff; }
.history { display: flex; flex-direction: column; gap: 6px; }
.history-day { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.entry {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: inherit; text-decoration: none;
}
a.entry:active { background: var(--sunk); }
.entry-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.entry-items { font-size: 14px; color: var(--muted); }
.entry-items s { color: var(--muted); }
.entry-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; margin: 0 4px 2px 0; padding: 1px 7px; border-radius: 6px; background: var(--sunk); color: var(--ink); font-size: 12px; }
.tag-credit { background: var(--owed-tint); color: var(--owed); }
.entry-pay { background: var(--paid-tint); border-color: #abefc6; }
.entry-pay .entry-head { color: var(--paid); }
.entry-pay .tag { background: #fff; }
.entry-void { background: var(--danger-tint); border-color: #fecdca; }
.entry-void .entry-head { color: var(--danger); }

/* the statement on screen */
.range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.table-panel { padding: 4px 16px; }
.statement-table td small { display: block; color: var(--muted); font-size: 12.5px; }
.statement-table .is-pay td:first-child + td { color: var(--paid); }
.statement-table .is-void-row td { color: var(--danger); }
/* ---------------- stock & items ---------------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.filter {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--surface);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.filter.is-current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.qty { display: inline-flex; align-items: center; gap: 4px; min-width: 3ch; justify-content: flex-end; }
.qty .icon { width: 18px; height: 18px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-pair > .field { min-width: 0; }
.input-cat { width: auto; max-width: 220px; }
/* a folded group of optional fields, e.g. the item's eTIMS details */
.form-more { border: 1px solid var(--line); border-radius: 12px; }
.form-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; cursor: pointer; list-style: none; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.form-more > summary small { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.form-more > summary .icon { flex: none; color: var(--muted); transition: transform .15s; }
.form-more[open] > summary .icon { transform: rotate(90deg); }
.form-more-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 14px; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check .hint { display: block; font-weight: 400; }
.cost-choice { gap: 8px; padding: 14px; border-radius: 12px; background: var(--owed-tint); }
.cost-choice legend { float: left; width: 100%; margin-bottom: 4px; color: var(--owed); }
.draft-line { min-height: 0; padding: 10px 0; gap: 10px; }
.alert-row .row-static { padding-bottom: 4px; }
.alert-row .person-actions { padding-left: 16px; }
.value-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.value-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.value-tile .label { color: var(--muted); font-weight: 500; font-size: 13px; }
.value-tile strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wide-only { display: none; }
@media (min-width: 600px) { .table .wide-only { display: table-cell; } }
.import-table small { display: block; font-weight: 400; }
.import-table tr.has-error { background: var(--danger-tint); }
.row-error { display: block; font-size: 13px; }
/* ---------------- scan ---------------- */

.scan {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 16px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: #000; color: #fff;
}
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: absolute; top: 50%; left: 50%; width: min(80vw, 340px); height: min(45vw, 190px);
  transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.scan-message { position: relative; margin: 0; font-weight: 600; text-align: center; }
.scan-close { position: relative; min-width: 140px; }
.scan.is-error { justify-content: center; }
.scan.is-error .scan-frame, .scan.is-error .scan-video { display: none; }
.scan-btn { flex: none; min-width: 44px; padding: 0 12px; font-size: 20px; }
/* ---------------- payment reversal ---------------- */

.reversed-note { color: var(--danger); font-weight: 600; }
.entry-reverse { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--danger); }

/* ---------------- pos: the till (mockup pos-mockup.html) ---------------- */

/* Laptops: search and a ruled sale sheet on the left, the buttons that finish the sale on
   the right. Phones: search with the sale sheet under it, then Pay (data-step), with a bottom bar. */
.pos { display: flex; flex-direction: column; gap: 12px; padding-bottom: 76px; }
.pos-find, .pos-review, .pos-side, .pos-settle, .pos-tender { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pos.is-done .pos-find, .pos.is-done .pos-review, .pos.is-done .pos-side { display: none; }
.pos-grow { flex: 1; }
.pos kbd, .pos-key {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 5px; border-radius: 5px;
  background: rgba(16, 24, 40, .06); color: var(--muted);
}
.pos-key { display: none; }
.btn-primary kbd, .btn-primary .pos-key { padding: 3px 7px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; }

/* search */
.pos-searchbar { display: flex; align-items: center; gap: 8px; }
.pos-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
  background: var(--surface); border: 1.5px solid var(--primary); border-radius: 14px;
}
.pos-search:focus-within { box-shadow: 0 0 0 4px var(--primary-tint); }
.pos-search .icon { flex: none; width: 20px; height: 20px; color: var(--muted); }
.pos-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); }
.pos-icon-btn {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--ink);
}
.pos-icon-btn .icon { width: 22px; height: 22px; }
/* the till's capsule: who is selling, by first name (or, offline, a warning) */
.pos-online {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 220px; padding: 0 16px 0 12px; border-radius: 99px; flex: none;
  background: var(--primary-tint); color: var(--primary); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
}
.pos-online > span { overflow: hidden; text-overflow: ellipsis; }
.pos-end-day { flex: none; }
.pos-online .icon { width: 20px; height: 20px; flex: none; stroke-width: 2.2; }
.pos-online.is-offline { flex: 0 1 auto; max-width: none; white-space: normal; background: var(--owed-tint); color: var(--owed); font-size: 13px; font-weight: 600; }
/* phones: the till's capsule already says who is signed in */
body:has(.pos-online) .topbar-who { display: none; }
.pos-note { font-size: 14px; color: var(--muted); }
.pos-none { padding: 12px; color: var(--muted); }

/* items: search results and quick add */
.pos-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pos-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px;
  text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.pos-item:active { background: var(--sunk); }
.pos-item-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pos-item-name { font-weight: 600; }
.pos-item small { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pos-item small b { color: var(--ink); font-size: 14px; }
.pos-item.is-negative .pos-stock { color: var(--danger); }
.pos-mono {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; background: var(--primary-tint); color: var(--primary);
}
.pos-mono[data-tone="1"] { background: #eef4ff; color: #3538cd; }
.pos-mono[data-tone="2"] { background: #fef6ee; color: #b93815; }
.pos-mono[data-tone="3"] { background: #f4f3ff; color: #5925dc; }
.pos-mono[data-tone="4"] { background: #fdf2fa; color: #c11574; }
.pos-mono[data-tone="5"] { background: #f0f9ff; color: #026aa2; }
.pos-add, .pos-in-cart {
  display: grid; place-items: center; flex: none; min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 99px; font-weight: 800; font-size: 14px;
}
.pos-add { background: var(--sunk); color: var(--muted); }
.pos-in-cart { background: var(--primary); color: var(--primary-ink); }

.pos-quickadd { display: flex; flex-direction: column; gap: 6px; }
.pos-sub { margin: 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pos-quickadd .pos-items { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-quickadd .pos-item { width: auto; min-height: 44px; padding: 0 8px 0 14px; gap: 8px; border-radius: 99px; }
.pos-quickadd .pos-mono, .pos-quickadd .pos-stock, .pos-quickadd .pos-add { display: none; }
.pos-quickadd .pos-item-main { flex-direction: row; align-items: baseline; gap: 6px; }
.pos-quickadd .pos-item-name { font-size: 14px; font-weight: 500; white-space: nowrap; }
.pos-quickadd .pos-item small b { color: var(--muted); font-weight: 600; }
.pos-quickadd .pos-in-cart { min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; }
.pos-quickadd .pos-item:not(:has(.pos-in-cart)) { padding-right: 14px; }

/* the sale sheet: ruled lines, the line touched last highlighted */
.pos-sheet { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pos-cols { display: none; }
.pos-lines { list-style: none; margin: 0; padding: 0; }
.pos-line {
  position: relative; display: grid; align-items: center; gap: 4px 10px; padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name total" "price step del";
  border-bottom: 1px solid var(--line);
}
/* rows shaded in turn, white and pale blue-grey; the line being worked on is pale green */
.pos-line:nth-child(even) { background: #eef2f6; }
.pos-line.is-current { background: #dcf3d5; }
.pos-line.is-current::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--paid); }
.pos-n { display: none; color: var(--muted); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.pos-line-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.pos-line-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-name small { font-size: 12px; color: var(--muted); }
.pos-line-name small:empty { display: none; }
.pos-line-name small.is-warn { color: var(--owed); font-weight: 600; }
.pos-line-price { grid-area: price; justify-self: start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-edit {
  min-height: 40px; padding: 0 10px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); white-space: nowrap;
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 8px; font-variant-numeric: tabular-nums;
}
.pos-edit:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }
.pos-edit s, .pos-price s { margin-right: 5px; font-size: 12px; font-weight: 400; color: var(--muted); }
.pos-edit.is-cut, .pos-price.is-cut { color: var(--owed); font-weight: 700; }
.pos-step { grid-area: step; justify-self: center; display: inline-flex; align-items: center; height: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pos-step button { width: 44px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 19px; font-weight: 700; color: var(--muted); }
.pos-step button:hover { background: var(--sunk); color: var(--ink); }
.pos-step span { min-width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-line-total { grid-area: total; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-del {
  grid-area: del; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted);
}
.pos-del:hover { background: var(--danger-tint); color: var(--danger); }
.pos-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.pos-empty-tip { display: none; }
.pos-sheet-foot { display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-top: 1px solid #d5dbe2; background: #e9edf1; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-sheet-foot b { color: var(--ink); }
.pos-sheet-foot kbd { background: rgba(255, 255, 255, .8); }
.pos-disc { color: var(--owed); font-weight: 600; }
.pos-keys { display: none; gap: 14px; font-size: 12px; }
.pos-keys kbd + kbd { margin-left: 2px; }

/* the side: customer, total, how they pay, tools, complete */
.pos-panel { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.pos-cust {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 8px 14px;
  text-align: left; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.pos-cust > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cust .icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--muted); }
.pos-link { color: var(--primary); white-space: nowrap; font-weight: 600; }
.pos-cust-card { justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; }
.pos-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--owed-tint); color: var(--owed); font-size: 14px; font-weight: 800;
}
.pos-avatar.is-walkin { background: var(--sunk); color: var(--muted); }
.pos-avatar .icon { margin: 0; width: 20px; height: 20px; }
.pos-cust-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pos-cust-text b, .pos-cust-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cust-text small { font-size: 13px; font-weight: 500; color: var(--muted); }

.pos-total-card { padding: 16px; background: var(--ink); border-color: var(--ink); color: #fff; }
.pos-total-card small { font-size: 13px; color: rgba(255, 255, 255, .65); }
.pos-total-card b { display: block; margin-top: 2px; font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pos-total-card p { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .65); }
.pos-total-card .pos-disc { color: #fcd9a6; }

.pos-label { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pos-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-method {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 64px; padding: 8px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
}
.pos-method span { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.pos-method .icon { width: 18px; height: 18px; color: var(--muted); }
.pos-method[data-method="mpesa"] .icon { color: var(--paid); }
.pos-method small { font-size: 12px; color: var(--muted); }
.pos-method kbd { position: absolute; top: 8px; right: 8px; }
.pos-method.is-on { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.pos-method.is-on span { color: #0b4f4a; }

.pos-amount {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
}
.pos-amount > span { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pos-amount input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 22px; font-weight: 700; color: var(--ink); }
.pos-amount input::placeholder { color: #98a2b3; font-weight: 600; }
.pos-amount:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.pos-amount:has(.is-invalid) { border-color: var(--danger); background: var(--danger-tint); }
.pos-amount input.is-invalid { color: var(--danger); }
.pos-credit { justify-content: space-between; background: var(--sunk); border-color: transparent; }
.pos-credit b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pos-credit.is-owed { background: var(--owed-tint); }
.pos-credit.is-owed b, .pos-credit.is-owed > span { color: var(--owed); }
.pos-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pos-chip { min-height: 44px; padding: 0 4px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--sunk); font-variant-numeric: tabular-nums; }
.pos-chip:hover { background: var(--line); }
.pos-chip.is-on { background: var(--ink); color: #fff; }
.pos-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.pos-code .input { flex: 1; width: auto; min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pos-change { padding: 12px 14px; border-radius: 12px; background: var(--paid-tint); color: var(--paid); font-weight: 600; }
.pos-tender .pos-change { display: flex; justify-content: space-between; align-items: baseline; }
.pos-tender .pos-change b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos-newbal { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 13px; }
.pos-newbal b { color: var(--owed); }
.pos-hint { font-size: 13px; color: var(--owed); font-weight: 600; }
.pos-msg { padding: 12px 14px; border-radius: 12px; background: var(--danger-tint); color: var(--danger); font-weight: 600; }
.pos-msg.is-retry { cursor: pointer; text-align: center; text-decoration: underline; }
.pos-failed { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pos-startover-note { text-align: center; font-size: 14px; }
.pos-startover-note .btn { display: flex; margin: 8px auto 0; }

.pos-tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pos-tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.pos-tool:hover { border-color: var(--line-strong); color: var(--ink); }
.pos-tool .icon { width: 20px; height: 20px; color: var(--ink); }
.pos-tool-danger .icon { color: var(--danger); }
.pos-tool kbd { position: absolute; top: 6px; right: 6px; }
.pos-method:disabled, .pos-chip:disabled, .pos-tool:disabled, .pos-edit:disabled, .pos-step button:disabled, .pos-del:disabled,
.pos-item:disabled, .pos-cust:disabled { opacity: .45; cursor: not-allowed; }

.pos-printer { align-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--muted); }
.pos-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--primary); transition: background .15s; }
.pos-switch::after { content: ""; position: absolute; top: 2px; left: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.pos-printer.is-off .pos-switch { background: var(--line-strong); }
.pos-printer.is-off .pos-switch::after { left: 2px; }
.pos-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

.pos-bar {
  position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 15;
  display: flex; gap: 8px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pos-bar .btn { min-height: 52px; }
.pos-bar .pos-next, .pos-bar .pos-complete { flex: 1; }
.pos-bar .pos-complete { font-size: 17px; }
.pos-back:disabled { opacity: 1; background: transparent; border-color: transparent; color: var(--muted); cursor: default; }
@media print { .pos-bar { display: none; } }

/* the sale just saved, on the empty sheet: its number and the change to give */
.pos-saved {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--paid-tint); border: 1px solid #a6e9c5; border-radius: 14px; color: var(--paid);
}
.pos-saved-tick { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--paid); color: #fff; }
.pos-saved-tick .icon { width: 20px; height: 20px; }
.pos-saved-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-saved-text > b { color: var(--ink); }
.pos-saved-change { font-weight: 600; }
.pos-saved-change b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* a retry that came back as an earlier sale */
.pos-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; text-align: center; }
.pos-done-tick {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--paid-tint); color: var(--paid); font-size: 32px; font-weight: 800;
}
.pos-done-actions { display: grid; gap: 8px; width: 100%; max-width: 360px; margin-top: 8px; }
.pos-replay-mark { background: var(--danger-tint); color: var(--danger); }
.pos-replay .page-title { color: var(--danger); font-size: 22px; max-width: 32ch; }

/* dialogs: customer, price, held sales */
.pos-dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 16px;
  border: 0; border-radius: 16px; box-shadow: var(--shadow); color: var(--ink);
}
.pos-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.pos-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pos-cust-list { list-style: none; margin: 8px 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.pos-cust-list > li + li { border-top: 1px solid var(--line); }
.pos-cust-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 4px;
  border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.pos-cust-pick:active { background: var(--sunk); }
.pos-held-row { display: flex; align-items: center; gap: 8px; }
.pos-quick, .pos-price-form { display: flex; flex-direction: column; gap: 8px; }
.pos-quick { padding-top: 12px; border-top: 1px solid var(--line); }
.pos-quick .btn { align-self: flex-start; }
.pos-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* an amount the server would refuse; the cart locked while a save is unsure */
.input.is-invalid { border-color: var(--danger); background: var(--danger-tint); }

/* phones: search and the sale sheet on one screen, then Pay; taking payment is a focused step,
   so the menu bar steps aside. No quick add: the search is the way in. */
@media (max-width: 899px) {
  .pos[data-step="settle"] .pos-find, .pos[data-step="settle"] .pos-review,
  .pos[data-step="find"] .pos-side > :not(.pos-bar) { display: none; }
  .pos[data-step="find"] .pos-complete, .pos[data-step="settle"] .pos-next { display: none; }
  .pos-quickadd, #pos-start { display: none; }
  .pos-side > .pos-grow { display: none; }
  /* who is selling and End day on a row of their own, so the search gets the full width */
  .pos-searchbar { flex-wrap: wrap; }
  .pos-online { margin-right: auto; }
  .pos-search, .pos-scan { order: 1; }
  .pos-search { flex-basis: calc(100% - 60px); }
  body:has(.pos[data-step="settle"]) .nav { display: none; }
  .pos[data-step="settle"] { padding-bottom: 24px; }
  .pos[data-step="settle"] .pos-bar { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
}

@media (min-width: 900px) {
  /* the till gets the room: the menu shrinks to a rail of icons */
  body:has(.pos) .main { max-width: none; padding: 16px 20px; }
  body:has(.pos) .shell { grid-template-columns: 84px minmax(0, 1fr); }
  body:has(.pos) .nav { padding: 16px 8px; align-items: stretch; }
  body:has(.pos) .nav-brand span, body:has(.pos) .nav-subs, body:has(.pos) .nav-foot > span { display: none; }
  /* the till's rail keeps Sign out, as an icon at the foot */
  body:has(.pos) .nav-foot { justify-content: center; padding: 12px 0 0; }
  body:has(.pos) .signout { width: 52px; height: 52px; padding: 0; }
  body:has(.pos) .signout span { display: none; }
  body:has(.pos) .nav-brand { margin: 0 auto 16px; }
  body:has(.pos) .nav-link { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; font-size: 11px; font-weight: 600; text-align: center; }
  body:has(.pos) .nav-link.is-current::before { display: none; }
  body:has(.pos) .badge { position: absolute; top: 4px; right: 10px; margin: 0; }

  .pos {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 400px); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "find side" "review side"; gap: 12px 16px; height: calc(100vh - 32px); padding-bottom: 0;
  }
  .pos.is-done { display: flex; height: auto; }
  .pos-key { display: inline; }
  .pos-find { grid-area: find; position: relative; }
  .pos-review { grid-area: review; min-height: 0; }
  /* over the empty sheet, above its "start typing" line */
  .pos-saved { grid-area: review; z-index: 2; align-self: center; justify-self: center; width: min(480px, calc(100% - 48px)); box-shadow: var(--shadow); }
  .pos:has(.pos-saved:not([hidden])) .pos-empty { visibility: hidden; }
  .pos-side { grid-area: side; min-height: 0; overflow-y: auto; }
  .pos-cust-find, #pos-start { display: none; }

  /* search results drop down over the sheet */
  .pos-results {
    position: absolute; top: 60px; left: 0; right: 0; z-index: 30; max-height: min(60vh, 520px); overflow-y: auto;
    gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(16, 24, 40, .4);
  }
  .pos-results .pos-item { border-color: transparent; border-radius: 10px; }
  .pos-results .pos-item:hover { background: var(--sunk); }
  .pos-results .pos-item.is-active { background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }

  /* quick add: one row that scrolls sideways */
  .pos-quickadd { flex-direction: row; align-items: center; gap: 8px; }
  .pos-quickadd .pos-sub { flex: none; font-weight: 500; }
  .pos-quickadd .pos-items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pos-quickadd .pos-items > li { flex: none; }
  .pos-quickadd .pos-item { min-height: 36px; }
  .pos-quickadd .pos-item:hover { border-color: var(--primary); }

  /* the sheet fills the column; empty ruled lines keep going under the last item */
  .pos-sheet { height: 100%; }
  .pos-cols, .pos-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) 128px 124px 104px 40px; grid-template-areas: none; gap: 12px; padding: 0 12px 0 4px; }
  .pos-cols { flex: none; align-items: center; height: 40px; border-bottom: 1px solid #d5dbe2; background: linear-gradient(#f7f9fb, #e9edf1); font-size: 12px; font-weight: 600; color: #344054; text-transform: uppercase; letter-spacing: .05em; }
  .pos-cols > span:first-child { text-align: center; }
  .pos-r { text-align: right; }
  .pos-c { text-align: center; }
  .pos-lines {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    background: repeating-linear-gradient(to bottom, #fff 0 56px, #eef2f6 56px 112px);
    background-attachment: local;
  }
  .pos-line { height: 56px; border-bottom: 0; }
  .pos-n { display: block; }
  .pos-line-name, .pos-line-price, .pos-step, .pos-line-total, .pos-del { grid-area: auto; }
  .pos-line-price { justify-self: end; }
  .pos-edit { min-height: 34px; padding: 0 8px; }
  .pos-step { height: 36px; }
  .pos-step button { width: 36px; font-size: 17px; }
  .pos-del { width: 32px; height: 32px; font-size: 20px; }
  .pos-empty { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); pointer-events: none; }
  .pos-keys { display: flex; }
  .pos-empty-tip { display: block; margin-top: 6px; font-size: 13px; }

  /* the bar is just the Complete button */
  .pos-bar { position: static; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pos-bar .pos-back, .pos-bar .pos-next { display: none; }
  .pos-bar .pos-complete { min-height: 64px; font-size: 18px; border-radius: 16px; box-shadow: 0 10px 24px -12px rgba(15, 118, 110, .7); }
  .pos-done-actions { grid-template-columns: repeat(3, 1fr); max-width: 560px; }
}

/* ---------------- printable receipt (?p=receipt): 80 mm, for the browser's print dialog ---------------- */

body.bare:has(.receipt-page) { background: var(--bg); }
.receipt-page { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.receipt-actions { display: flex; gap: 8px; width: 100%; max-width: 80mm; justify-content: space-between; }
.receipt {
  width: 100%; max-width: 80mm; padding: 4mm 3mm; background: #fff; color: #111;
  font-size: 12px; line-height: 1.35; border: 1px solid var(--line);
}
.receipt-58 { max-width: 58mm; font-size: 11px; }
.receipt-shop { margin: 0; font-size: 16px; text-align: center; }
.receipt-foot { margin-top: 8px; }
.receipt-c { text-align: center; }
.receipt-sub { color: #444; font-size: 11px; }
.receipt-meta { margin: 6px 0; }
.receipt-void { color: #b42318; font-weight: 700; text-align: center; }
.receipt-lines { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.receipt-lines td { padding-top: 2px; padding-bottom: 2px; vertical-align: top; }
.receipt-lines tr:first-child td { border-top: 1px dashed #111; border-bottom: 1px dashed #111; padding-top: 3px; padding-bottom: 3px; font-size: 10px; text-transform: uppercase; }
.receipt-item { width: 100%; }
.receipt-n { text-align: right; white-space: nowrap; padding-left: 10px; }
.receipt-rule td { border-top: 1px dashed #111; }
.receipt-total td { border-top: 1px solid #111; font-weight: 700; font-size: 14px; padding-top: 3px; }
/* The stock list (?p=stock_print): smaller, nothing bold, long names wrapped. */
.receipt-stock { font-size: 10px; line-height: 1.25; }
.receipt-stock.receipt-58 { font-size: 9px; }
.receipt-stock .receipt-shop { font-size: 12px; font-weight: inherit; }
.receipt-stock .receipt-lines td { padding-top: 1px; padding-bottom: 1px; }
.receipt-stock .receipt-lines tr:first-child td { font-size: 9px; }
.receipt-stock .receipt-item { overflow-wrap: anywhere; }
.receipt-stock .receipt-n { padding-left: 6px; }
/* On paper the page has no margin (the browser then prints no date, title, page number or
   address in it); the receipt's own padding keeps the print off the edges. */
@media print {
  body.bare:has(.receipt-page), body.bare:has(.receipt-preview) { background: #fff; }
  .receipt-page, .receipt-preview { padding: 0; display: block; }
  .receipt, .receipt-preview .receipt { max-width: none; border: 0; padding: 2mm 3mm 3mm; box-shadow: none; }
  /* A thermal printer prints every grey edge pixel of a letter as a black dot, so normal text
     comes out bold; a light weight prints as normal. */
  .receipt { font-weight: 300; }
  .receipt-shop, .receipt-total td { font-weight: 700; }
  .receipt-stock .receipt-shop { font-weight: 300; }
}
/* ---------------- receipt setup: the form, and a preview that follows it ---------------- */

.receipt-setup { display: grid; gap: 18px; }
.receipt-setup-preview { display: flex; flex-direction: column; gap: 10px; }
.receipt-setup-head { display: flex; align-items: center; justify-content: space-between; }
.receipt-setup-head h2 { font-size: 16px; }
.receipt-setup-preview iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunk); }
body.bare:has(.receipt-preview) { min-height: 0; background: var(--sunk); }
.receipt-preview { display: flex; justify-content: center; padding: 16px 8px; }
.receipt-preview .receipt { box-shadow: 0 8px 24px -14px rgba(16, 24, 40, .45); }
@media (min-width: 1100px) {
  .receipt-setup { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .receipt-setup .settings-section { grid-template-columns: 200px minmax(0, 1fr); }
  .receipt-setup .settings .savebar { max-width: none; }
  .receipt-setup-preview { position: sticky; top: 24px; }
}

/* ---------------- review fixes ---------------- */
.item-moves > li { padding: 12px 16px; gap: 12px; align-items: center; }
.item-moves .row-meta { overflow-wrap: anywhere; }
.move-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.move-after { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-stock { margin-top: 16px; }
/* ---------------- owner dashboard (home) ---------------- */

.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dash-head .muted { font-size: 14px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
}
.kpi:hover { border-color: var(--line-strong); }
.kpi-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--muted); }
.dash-grid { display: grid; gap: 12px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-link { font-size: 14px; font-weight: 600; color: var(--primary); }
.panel .table a { text-decoration: none; }
.dash-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: -6px; }
.dash-row h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dash-row span { font-size: 13px; color: var(--muted); }
.dash-row .panel-link { margin-left: auto; font-size: 14px; }
.dash-row .panel-link + .dash-row-more { margin-left: 0; }
.kpi .up { color: var(--paid); font-weight: 700; }
.kpi .down { color: var(--danger); font-weight: 700; }
.kpis-month .kpi { background: linear-gradient(180deg, #f8fcfb, var(--surface)); }
.kpi-meter { display: block; height: 6px; margin: 6px 0 2px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.kpi-meter > span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.month-bars { list-style: none; margin: 0; padding: 10px 0 0; display: flex; align-items: flex-end; gap: 3px; height: 180px; border-bottom: 1px solid var(--line); }
.month-bars li { position: relative; flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: #b9e2da; }
.month-bars li.is-today { background: var(--primary); }
.month-bars li.is-future { height: 100%; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--sunk) 0 4px, var(--surface) 4px 8px); opacity: .7; }
.month-bars li[data-v]:hover { background: #7cc9b9; }
.month-bars li.is-today:hover { background: #0b5f58; }
.month-bars li[data-v]:hover::after {
  content: attr(data-v); position: absolute; bottom: 100%; left: 50%; z-index: 2; transform: translateX(-50%); margin-bottom: 4px;
  padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.month-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.month-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.month-legend b { color: var(--ink); }
.mix { display: flex; height: 12px; margin: 2px 0 12px; border-radius: 99px; overflow: hidden; background: var(--sunk); }
.mix-cash { background: var(--primary); }
.mix-mpesa { background: #12b76a; }
.mix-credit { background: #f79009; }
.mix-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f2f5; font-size: 14px; }
.mix-list dt { display: flex; align-items: center; gap: 8px; }
.mix-list dt i { width: 10px; height: 10px; border-radius: 3px; }
.mix-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.mix-list small { margin-left: 6px; color: var(--muted); }
@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .kpi { padding: 16px 18px; }
  .kpi-value { font-size: 24px; }
  .dash-grid { grid-template-columns: 2fr 1fr; gap: 14px; }
  .dash-grid-even { grid-template-columns: 1fr 1fr; }
}
/* ---------------- products list: a worksheet (mockup: "Products") ---------------- */

.table-card { overflow-x: auto; }
.item-name { display: block; font-weight: 600; color: var(--ink); text-decoration: none; }
a.item-name:hover { color: var(--primary); }
.item-code { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.pg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pg-search { flex: 1 1 100%; }
.pg-filters { margin: 0; flex: 1 1 auto; }
.pg-cols { position: relative; margin-left: auto; }
.pg-cols .btn { min-height: 38px; }
.pg-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.pg-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.pg-menu label:hover { background: var(--sunk); }
.pg-menu label.is-fixed { color: var(--muted); cursor: default; }
.pg-menu input { width: 16px; height: 16px; accent-color: var(--primary); }
.pg-menu-reset { width: 100%; margin-top: 4px; padding: 8px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--primary); font: 600 13px var(--font); text-align: left; cursor: pointer; }

.pg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.pg-scroll { overflow: auto; max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); min-height: 240px; }
.pg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.pg-table th, .pg-table td { padding: 0 12px; height: 38px; border-bottom: 1px solid var(--line); border-right: 1px solid #f0f2f5; white-space: nowrap; text-align: left; }
.pg-table th:last-child, .pg-table td:last-child { border-right: 0; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table .num { text-align: right; }
.pg-table thead th { position: sticky; top: 0; z-index: 3; padding: 0; background: #f9fafb; font-size: 12px; font-weight: 600; color: var(--muted); }
.pg-sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 5px; width: 100%; height: 38px; padding: 0 12px; cursor: pointer; }
.pg-table th.num .pg-sort { justify-content: flex-end; }
.pg-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pg-sort:hover { color: var(--ink); }
.pg-arrow { font-size: 9px; color: var(--primary); }
.pg-lock .icon { width: 12px; height: 12px; color: #98a2b3; }
.pg-table .pg-num { position: sticky; left: 0; z-index: 2; width: 1%; padding: 0 10px; background: #fcfcfd; color: #98a2b3; font-size: 12px; text-align: right; }
.pg-table thead .pg-num { z-index: 4; background: #f9fafb; padding: 0 10px; }
.pg-table tbody tr:hover td { background: #fcfcfd; }
.pg-table tbody tr.is-negative td { background: #fff6f5; }
.pg-table tbody tr.is-low td { background: #fffaf2; }
.pg-table tbody tr.is-negative .pg-num { box-shadow: inset 3px 0 0 var(--danger); }
.pg-table tbody tr.is-low .pg-num { box-shadow: inset 3px 0 0 #f79009; }
.pg-table tbody tr.is-selected td { background: #f0faf8; }
.pg-table td { position: relative; outline: none; }
.pg-table td.pg-edit { cursor: cell; }
.pg-table td.is-focus { box-shadow: inset 0 0 0 2px var(--primary); background: var(--surface) !important; }
.pg-table td.is-saving { opacity: .5; }
.pg-table td.is-saved { animation: pg-saved 1.4s ease; }
@keyframes pg-saved { from { background: var(--paid-tint); } }
.pg-table td[data-col="name"] { min-width: 200px; padding-right: 34px; }
.pg-name { font-weight: 600; }
/* At the cell's far edge, so clicking the name to edit it never opens the product. */
.pg-open { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; padding: 3px; border-radius: 6px; color: #98a2b3; opacity: 0; }
.pg-open .icon { width: 14px; height: 14px; }
tr:hover .pg-open, .pg-open:focus-visible { opacity: 1; }
.pg-open:hover { color: var(--primary); background: var(--primary-tint); }
.pg-none { color: #c0c6d0; }
.pg-qty { display: inline-block; min-width: 3ch; margin-left: 6px; }
.pg-qty.is-low { color: var(--owed); }
.pg-qty.is-negative { color: var(--danger); }
.pg-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0 12px; border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--primary); background: var(--surface); color: var(--ink); font: inherit; text-align: inherit; outline: none;
}
select.pg-input { padding: 0 8px; }
.pg-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 9px 14px; border-top: 1px solid var(--line); background: #f9fafb; font-size: 12.5px; color: var(--muted); }
.pg-keys kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--ink); font: 600 11px var(--font); }
@media (pointer: coarse) { .pg-keys { display: none; } .pg-open { opacity: 1; } }

.pg-pop {
  position: fixed; z-index: 40; width: 300px; max-width: calc(100% - 16px); padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(16, 24, 40, .5);
}
.pg-pop-title { font-weight: 700; }
.pg-pop-diff { font-size: 22px; font-weight: 800; margin: 2px 0 4px; }
.pg-pop-diff.is-up { color: var(--paid); }
.pg-pop-diff.is-down { color: var(--danger); }
.pg-pop-note { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.pg-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.pg-dialog { width: min(440px, calc(100% - 32px)); padding: 18px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .6); }
.pg-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.pg-dialog form { display: flex; flex-direction: column; gap: 10px; }
.pg-dialog-head { display: flex; justify-content: space-between; align-items: center; }
.pg-dialog-head h2 { font-size: 18px; }
.pg-x { width: 34px; height: 34px; border: 0; border-radius: 99px; background: var(--sunk); color: var(--ink); cursor: pointer; }
.pg-picks-label { margin-top: 4px; }
.pg-picks { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.pg-picks label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.pg-picks label:last-child { border-bottom: 0; }
.pg-picks input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.pg-picks small { margin-left: auto; color: var(--muted); font-size: 12px; }
.pg-error { color: var(--danger); font-size: 13px; min-height: 1em; }
.pg-error:empty { display: none; }
.pg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (min-width: 760px) { .pg-search { flex: 1 1 520px; } }
/* Phones: the products list is for a quick check, so only the name and what's in stock show
   (the selling price for people who can't see stock), whatever columns are chosen; the
   whole sheet is for a laptop. Long names wrap. */
@media (max-width: 640px) {
  #pg .pg-num, #pg [data-col]:not([data-col="name"]):not([data-col="qty"]) { display: none; }
  #pg [data-col="qty"][hidden] { display: table-cell; }
  #pg .pg-table:not(:has([data-col="qty"])) [data-col="price"] { display: table-cell; }
  #pg .pg-table td[data-col="name"] { width: 100%; min-width: 0; white-space: normal; padding-top: 8px; padding-bottom: 8px; height: auto; }
  .pg-cols { display: none; }
}
/* ---------------- customer account (mockup: POS UI redesign, "Customer account") ---------------- */

.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.cust-head { align-items: center; gap: 12px 16px; justify-content: flex-start; }
.cust-who { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-who .muted { font-size: 14px; }
.cust-who a { color: inherit; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.avatar-owed { background: var(--owed-tint); color: var(--owed); }
.cust-head .cust-actions { flex: 1 1 100%; }
.wa { display: inline-flex; color: #128c4a; }
.cust-stats { display: grid; gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.stat span { font-size: 13px; color: var(--muted); }
.stat b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat small { font-size: 12px; color: var(--muted); }
.ledger-card { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips .tag { margin: 0; padding: 2px 8px; font-weight: 600; }
.tag-paid { background: var(--paid-tint); color: var(--paid); }
.ledger td { vertical-align: top; padding: 14px 12px; }
.ledger th { background: #f9fafb; padding: 10px 12px; }
.ledger .num { white-space: nowrap; }
.ledger-date { width: 84px; color: var(--muted); white-space: nowrap; }
.ledger-date small { display: block; font-size: 12px; }
.ledger-title { display: block; font-weight: 700; color: var(--ink); text-decoration: none; }
a.ledger-title:hover { color: var(--primary); }
.ledger-items { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ledger-opening td { background: #fcfcfd; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger-act { width: 48px; padding: 6px 8px !important; }
.row-menu { position: relative; }
.row-menu summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--muted); font-size: 18px; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--sunk); }
.menu-pop {
  position: absolute; right: 0; top: 44px; z-index: 5; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.menu-pop a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--danger); font-weight: 600; text-decoration: none; }
.menu-pop a:hover { background: var(--danger-tint); }
@media (min-width: 900px) {
  .cust-head .cust-actions { flex: 0 0 auto; }
  .cust-head .cust-actions .btn { flex: none; padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .cust-stats { grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
  .ledger-card { display: block; overflow: visible; }
  .ledger-card + .history { display: none; }
}
/* phones: page headers wrap their buttons onto their own row; small stats sit side by side */
.page-head { flex-wrap: wrap; }
@media (max-width: 599px) {
  .page-head > .dash-actions { flex: 1 1 100%; }
  .page-head > .dash-actions .btn { flex: 1; }
}
.cust-stats { grid-template-columns: 1fr 1fr; }
.cust-stats .balance-card { grid-column: 1 / -1; }
.stat b { font-size: 19px; }
@media (min-width: 900px) {
  .cust-stats { grid-template-columns: 2fr 1fr 1fr; }
  .cust-stats .balance-card { grid-column: auto; }
  .stat b { font-size: 22px; }
}
/* ---------------- shared page furniture for the redesigned pages ---------------- */

.data-table th, .data-table td { padding: 12px 14px; vertical-align: middle; }
.data-table thead th { background: #f9fafb; font-size: 12px; }
.data-table tbody tr:hover { background: #f9fafb; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table tbody th { font-weight: 600; }
.data-table tfoot th, .data-table tfoot td { padding: 12px 14px; background: #f9fafb; border-top: 1px solid var(--line); }
.table-card .table a { text-decoration: none; }
.is-void-row td { color: var(--muted); }
.strike { text-decoration: line-through; }
.show-narrow { display: block; }
/* sales list: WhatsApp a receipt from its row */
.sale-share { width: 1%; white-space: nowrap; text-align: right; }
.sale-share .wa { margin: 0; }
.sale-share .wide-text { display: none; margin-left: 6px; }
@media (min-width: 600px) { .sale-share .wide-text { display: inline; } }
@media (min-width: 600px) { .show-narrow { display: none; } }
.kpis-3 { grid-template-columns: 1fr 1fr; }
.kpis-3 .kpi:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis-3 .kpi:first-child { grid-column: auto; } }
.kpis .kpi:only-child { grid-column: 1 / -1; }
.page-title .status { vertical-align: middle; margin-left: 6px; font-size: 13px; letter-spacing: 0; }
.day-nav { flex-wrap: nowrap; }
.day-nav .input { max-width: 170px; }

/* stock hub */
.job-cards { display: grid; gap: 10px; }
.job-card {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
}
.job-card:hover { border-color: var(--primary); }
.job-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.job-card small { font-size: 13px; color: var(--muted); }
.job-card > .icon { color: var(--muted); }
.job-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); }
@media (min-width: 900px) { .job-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* receive: what to do when nothing is added yet */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-weight: 800; font-size: 14px;
}
.steps span { font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* one sale: items left, payment and people right */
.sale-grid { display: grid; gap: 14px; align-items: start; }
.sale-aside { display: flex; flex-direction: column; gap: 14px; }
.sale-aside .panel h2 { margin-bottom: 4px; }
.sale-aside .sale-sums { border-top: 0; margin-top: 0; padding-top: 0; }
.sale-aside .sale-sums dd a { color: var(--primary); font-weight: 600; }
.danger-zone > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.danger-zone > summary > span { flex: 1; display: flex; flex-direction: column; }
.danger-zone > summary b { color: var(--danger); }
.danger-zone > summary small { font-size: 13px; color: var(--muted); }
.danger-zone[open] > summary { display: flex; margin-bottom: 12px; }
.danger-zone[open] > summary > .icon { transform: rotate(90deg); }
@media (min-width: 900px) { .sale-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; } }

/* statement */
.range-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.range-bar .filters { margin: 0; }
.statement-stats { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .statement-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.statement-table .ledger-items { margin-top: 2px; }
.statement-table tfoot th { text-align: left; }

/* settings: what each section is for on the left, its fields on the right */
.settings { display: flex; flex-direction: column; gap: 18px; }
.settings-section { display: grid; gap: 10px; }
.settings-intro h2 { font-size: 16px; }
.settings-intro .hint { margin-top: 4px; }
.settings-fields { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .settings-section { grid-template-columns: 260px minmax(0, 620px); gap: 24px; }
  .settings .savebar { max-width: 904px; }
}
@media (max-width: 599px) {
  .statement-table th, .statement-table td { padding: 10px 8px; }
  .statement-table .ledger-items { font-size: 12px; }
}

/* ---------------- the app's dialog, in place of the browser's confirm() and alert() ---------------- */

.app-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .45); color: var(--ink); background: var(--surface);
}
.app-dialog::backdrop { background: rgba(16, 24, 40, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.app-dialog[open] { animation: app-dialog-in .18s cubic-bezier(.22, 1, .36, 1); }
@keyframes app-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.app-dialog form { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 22px 20px; text-align: center; }
.app-dialog-mark {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary); font-size: 22px; font-weight: 800;
}
.app-dialog.is-danger .app-dialog-mark { background: var(--danger-tint); color: var(--danger); }
.app-dialog h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.app-dialog p { color: var(--muted); font-size: 15px; }
.app-dialog-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.app-dialog-actions .btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .app-dialog[open] { animation: none; } }

/* ---------------------------------------------------------------- my account */

.acct-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.acct-avatar { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.acct-who { flex: 1; min-width: 0; }
.acct-who h2 { font-size: 21px; overflow-wrap: anywhere; }
.acct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; color: var(--muted); }
.acct-pill { padding: 2px 10px; border-radius: 99px; background: var(--primary-tint); color: var(--primary); font-size: 13px; font-weight: 700; }
.acct-signed { width: 100%; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.acct-signed b { display: flex; align-items: center; gap: 6px; color: var(--paid); font-size: 14px; }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; }

.acct-cols { display: grid; gap: 16px; align-items: start; }
.acct-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.acct-card-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 16px; }
.acct-card-head .icon { width: 18px; height: 18px; color: var(--primary); }

.acct-list > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f0f2f5; }
.acct-list > div:last-child { border-bottom: 0; }
.acct-list dt { color: var(--muted); font-size: 14px; }
.acct-list dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.acct-list dd small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.acct-shops { margin: 0; padding: 0; list-style: none; }
.acct-shops li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; }
.acct-shops li + li { margin-top: 4px; }
.acct-shops span { color: var(--muted); font-size: 14px; font-weight: 400; }
.acct-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: #fcfcfd; color: var(--muted); font-size: 13px; }

.acct-form { max-width: none; gap: 14px; padding: 18px; }
.acct-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--owed-tint); color: #93370d; font-size: 13px; }
.acct-note .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.acct-pair { display: grid; gap: 14px; }
@media (min-width: 480px) { .acct-pair { grid-template-columns: 1fr 1fr; gap: 12px; } }
.acct-form .hint { margin-top: -6px; }
.acct-form.is-pin .input { font-size: 20px; letter-spacing: .4em; }

@media (min-width: 900px) {
  .acct-hero { padding: 22px 24px; }
  .acct-signed { width: auto; margin-left: auto; padding-top: 0; border-top: 0; text-align: right; }
  .acct-signed b { justify-content: flex-end; }
  .acct-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  .acct-list > div { grid-template-columns: 130px 1fr; padding: 13px 20px; }
}

/* ---------------- receipts list and voiding items off a sale ---------------- */
.receipt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.receipt-filters .field { gap: 4px; }
.receipt-filters .label { font-size: 12px; color: var(--muted); }
.receipt-find { flex: 1 1 200px; }
.receipt-items { max-width: 320px; font-size: 13px; line-height: 1.4; }
.return-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.return-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.return-line .input { width: 80px; text-align: center; }
.return-plan { display: flex; flex-direction: column; gap: 10px; }

/* Customers table: the Products grid's frame, taller rows, a sticky name and row actions. */
.ct-table td { height: 56px; }
.ct-table thead th a.pg-sort { color: inherit; text-decoration: none; }
.ct-table .ct-who { position: sticky; left: 0; z-index: 2; min-width: 220px; max-width: 320px; background: var(--surface); }
.ct-table thead th:first-child { left: 0; z-index: 4; }
.ct-table tbody tr:hover .ct-who { background: #fcfcfd; }
.ct-name { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.ct-name:hover b { color: var(--primary); text-decoration: underline; }
.ct-name .avatar { width: 32px; height: 32px; font-size: 14px; }
.ct-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ct-name b { overflow: hidden; text-overflow: ellipsis; }
.ct-notes { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.ct-phone { color: var(--ink); text-decoration: none; }
.ct-phone:hover { color: var(--primary); text-decoration: underline; }
.ct-actions-head { width: 1%; }
.ct-actions > * { vertical-align: middle; }
.ct-actions { text-align: right; }
.ct-actions form { display: inline; }
.ct-act {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted);
  font: 600 13px var(--font); text-decoration: none; cursor: pointer;
}
.ct-act .icon { width: 18px; height: 18px; }
.ct-act:hover { border-color: var(--line); background: var(--sunk); color: var(--ink); }
.ct-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ct-act-danger:hover { border-color: #fecdca; background: var(--danger-tint); color: var(--danger); }
.ct-act.is-off { color: #d0d5dd; cursor: not-allowed; }
.ct-act.is-off:hover { border-color: transparent; background: none; }
.ct .pager { align-items: center; }
/* Phones: only the name (with the phone under it) and balance; the name opens the account. */
.ct-narrow { display: none; }
@media (max-width: 640px) {
  .ct-table .ct-wide, .ct-table .ct-actions, .ct-table .ct-actions-head { display: none; }
  .ct-narrow { display: block; }
  .ct-table .ct-who { width: 100%; min-width: 0; max-width: none; white-space: normal; position: static; }
  .ct-table td { height: auto; padding-top: 8px; padding-bottom: 8px; }
}

/* ---------------- receipt setup: the printer on this computer ---------------- */
.printer-help { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.printer-help h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.printer-help h2 .icon { width: 20px; height: 20px; }
.printer-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.printer-steps b { display: block; }
.printer-cmd { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.printer-cmd code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--sunk); font-size: 12px; overflow-wrap: anywhere; }