/* ============================================================================
   NTmart POS, the try-it till (assets/demo.js).
   Built from the site's own tokens, so it follows the light/dark toggle. The
   one exception is the receipt, which stays paper-coloured in both themes.
   ========================================================================= */

.ntd {
  --paper: #FFFDF6;
  --paper-ink: #16181A;
  --paper-line: #C9C5B8;
  --ntd-h: 680px;
  font-size: 14px;
  line-height: 1.45;
}
.ntd button, .ntd input, .ntd select { font: inherit; color: inherit; }
.ntd [hidden] { display: none !important; }
.ntd .ntd-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------- Tour --- */
.ntd-tour {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.ntd-tour li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 600; transition: all 0.25s var(--ease);
}
.ntd-tour li span {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12px;
}
.ntd-tour li.now { color: var(--ink); border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-dim), 0 10px 30px -18px var(--emerald-glow); }
.ntd-tour li.now span { border-color: var(--emerald); color: var(--emerald); }
.ntd-tour li.done { color: var(--ink-2); }
.ntd-tour li.done span { background: var(--emerald); border-color: var(--emerald); color: var(--on-accent); }
@media (max-width: 900px) { .ntd-tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ntd-tour li { font-size: 12px; padding: 8px 10px; } }

/* --------------------------------------------------------------- Frame --- */
.ntd-frame {
  position: relative; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.ntd-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.ntd-logo { font-weight: 800; font-size: 17px; letter-spacing: -0.03em; color: var(--ink); }
.ntd-logo b { color: var(--emerald); font-weight: 800; }
.ntd-shop { font-weight: 700; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.ntd-user { font-size: 12.5px; color: var(--ink-2); padding: 3px 10px; background: var(--surface-2); border: 1px solid var(--line); }
.ntd-bar-gap { flex: 1 1 auto; }
.ntd-biz { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }

.ntd-body { display: flex; min-height: 0; height: var(--ntd-h); }
.ntd-rail {
  flex: 0 0 76px; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.ntd-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.ntd-rail-btn svg { width: 22px; height: 22px; }
.ntd-rail-btn:hover { color: var(--ink); background: var(--surface-2); }
.ntd-rail-btn.on { color: var(--emerald); background: var(--emerald-dim); border-color: var(--emerald-dim); }
.ntd-view { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; }
.ntd-view > * { flex: 1 1 auto; min-width: 0; }

.ntd-status {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 6px 16px; font-size: 11.5px; color: var(--muted); font-family: var(--mono);
  background: var(--surface); border-top: 1px solid var(--line);
}
.ntd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); margin-right: 8px; box-shadow: 0 0 8px var(--emerald); }

/* ------------------------------------------------------------- Controls --- */
.ntd-input {
  width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 0; outline: none; transition: border-color 0.15s;
}
.ntd-input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-dim); }
.ntd-input.ntd-sm { width: auto; max-width: 170px; padding: 6px 8px; font-size: 13px; }
input.ntd-input.ntd-sm.ntd-num { width: 96px; }
.ntd-btn {
  padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.15s;
}
.ntd-btn:hover:not(:disabled) { border-color: var(--emerald); color: var(--emerald); }
.ntd-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ntd-ghost { background: transparent; }
.ntd-primary { background: var(--emerald); border-color: var(--emerald); color: var(--on-accent); }
.ntd-primary:hover:not(:disabled) { color: var(--on-accent); filter: brightness(1.08); }
.ntd-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--emerald);
  text-decoration: underline; text-underline-offset: 3px; font-size: 13px;
}
.ntd-empty { color: var(--muted); padding: 18px 4px; margin: 0; }
.ntd-note { margin: 0; font-size: 13px; color: var(--ink-2); padding: 10px 12px; background: var(--surface-2); border-left: 2px solid var(--emerald); }
.ntd-err { min-height: 0; margin: 0; color: var(--coral); font-size: 13px; font-weight: 600; }
.ntd-err:empty { display: none; }

/* ---------------------------------------------------------------- Till --- */
.ntd-till {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px 300px; min-height: 0; height: 100%;
}
.ntd-till > section { min-height: 0; overflow-y: auto; padding: 14px; }
.ntd-catalog { display: flex; flex-direction: column; gap: 12px; }
.ntd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ntd-chip {
  padding: 5px 12px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.ntd-chip:hover { color: var(--ink); }
.ntd-chip.on { background: var(--emerald); border-color: var(--emerald); color: var(--on-accent); }
.ntd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: start; }
.ntd-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.ntd-item:hover:not(:disabled) { border-color: var(--emerald); transform: translateY(-1px); }
.ntd-item:active:not(:disabled) { transform: translateY(0); }
.ntd-item.in { border-color: var(--emerald); background: linear-gradient(var(--emerald-dim), var(--emerald-dim)), var(--surface); }
.ntd-item:disabled { opacity: 0.5; cursor: not-allowed; }
.ntd-item .nm { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.ntd-item .cd { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ntd-item .pr { font-family: var(--mono); font-weight: 600; color: var(--emerald); margin-top: 4px; }
.ntd-item em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ntd-item em.low, .ntd-item em.out { color: var(--coral); font-weight: 600; }

.ntd-cart { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ntd-lines { flex: 1 1 auto; }
.ntd-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "qty amt";
  gap: 6px 10px; padding: 10px 26px 10px 0; border-bottom: 1px solid var(--line); position: relative;
}
.ntd-line-main { grid-area: main; display: flex; flex-direction: column; }
.ntd-line-main b { font-size: 13.5px; }
.ntd-line-main span { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.ntd-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); justify-self: start; }
.ntd-qty button { width: 30px; height: 28px; background: none; border: 0; cursor: pointer; font-size: 16px; }
.ntd-qty button:hover { background: var(--emerald-dim); color: var(--emerald); }
.ntd-qty span { min-width: 34px; text-align: center; font-family: var(--mono); font-weight: 600; }
.ntd-line > .ntd-num { grid-area: amt; align-self: center; font-weight: 600; }
.ntd-x { position: absolute; top: 8px; right: 0; width: 22px; height: 22px; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; }
.ntd-x:hover { color: var(--coral); }
.ntd-due {
  margin-top: 12px; padding: 14px 16px; background: #04100A; color: #E9FFF3;
  display: flex; flex-direction: column; align-items: flex-end;
  border: 1px solid var(--emerald-dim);
}
.ntd-due span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #7FA894; }
.ntd-due b { font-family: var(--mono); font-size: 24px; color: #2BE08A; letter-spacing: -0.01em; }

.ntd-pay { display: flex; flex-direction: column; gap: 8px; }
.ntd-pay-head { text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ntd-pay-head b { display: block; font-size: 15px; }
.ntd-pay-head span { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.ntd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.ntd-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--emerald); }
.ntd-total { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: 17px; }
.ntd-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.ntd-method.on { background: var(--emerald); border-color: var(--emerald); color: var(--on-accent); }
.ntd-method.on:hover:not(:disabled) { color: var(--on-accent); }
.ntd-tender { display: flex; flex-direction: column; gap: 8px; }
.ntd-quicks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ntd-quick { padding: 6px 2px; font-size: 12px; font-family: var(--mono); }
.ntd-change { font-weight: 700; color: var(--ink); }
.ntd-change.short { color: var(--coral); }
.ntd-pay > .ntd-link { align-self: center; }
.ntd-complete {
  margin-top: 4px; padding: 14px; border: 0; cursor: pointer;
  background: var(--emerald); color: var(--on-accent); font-weight: 800; font-size: 15px;
  box-shadow: 0 14px 34px -16px var(--emerald-glow); transition: filter 0.15s, opacity 0.15s;
}
.ntd-complete:hover:not(:disabled) { filter: brightness(1.08); }
.ntd-complete:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.ntd-complete kbd { font-family: var(--mono); font-size: 11px; opacity: 0.7; margin-left: 6px; }

/* ------------------------------------------------- Dashboard and stock --- */
.ntd-dash, .ntd-stock { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ntd-dash-head { display: flex; align-items: baseline; gap: 12px; }
.ntd-dash-head b { font-size: 20px; }
.ntd-dash-head span { color: var(--muted); font-size: 13px; }
.ntd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ntd-kpi { padding: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ntd-kpi span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ntd-kpi b { font-family: var(--mono); font-size: 19px; color: var(--ink); }
.ntd-kpi small { font-size: 12px; color: var(--ink-2); }
.ntd-kpi:first-child b { color: var(--emerald); }
.ntd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ntd-card { padding: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ntd-card h4 { font-size: 13.5px; margin: 0 0 10px; letter-spacing: -0.01em; }
.ntd-card h4 small { font-weight: 500; color: var(--muted); }
.ntd-bar-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 8px; }
.ntd-track { height: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.ntd-track i { display: block; height: 100%; transition: width 0.5s var(--ease); }
.ntd-track .m-cash { background: var(--emerald); }
.ntd-track .m-mpesa { background: var(--emerald-deep); }
.ntd-track .m-card { background: var(--coral); }
.ntd-list { list-style: none; margin: 0; padding: 0; }
.ntd-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ntd-list li:last-child { border-bottom: 0; }
.ntd-list small { color: var(--muted); font-family: var(--mono); }
.ntd-low { color: var(--coral); font-weight: 600; }
.ntd-up { color: var(--emerald); font-weight: 600; }
.ntd-list .ntd-low { font-size: 11.5px; text-align: right; }
.ntd-scroll { overflow-x: auto; }
.ntd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.ntd-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 10px 8px 0; border-bottom: 1px solid var(--line-strong); }
.ntd-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.ntd-table th.ntd-num, .ntd-table td.ntd-num { text-align: right; }
.ntd-table tr.new td { background: var(--emerald-dim); animation: ntdFlash 1.6s var(--ease); }
@keyframes ntdFlash { from { background: var(--emerald-glow); } }

/* ------------------------------------------------- Modal layer & toast --- */
.ntd-layer {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto; background: rgba(4, 8, 6, 0.62); backdrop-filter: blur(3px);
}
.ntd-modal { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto; max-width: 100%; animation: ntdIn 0.25s var(--ease); }
@keyframes ntdIn { from { opacity: 0; transform: translateY(8px); } }
.ntd-done { margin: 0; color: #E9FFF3; font-weight: 600; text-align: center; }
.ntd-receipt {
  width: 300px; max-width: 100%; padding: 18px 16px; background: var(--paper); color: var(--paper-ink);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.ntd-receipt hr { border: 0; border-top: 1px dashed var(--paper-line); margin: 8px 0; }
.ntd-receipt .rc { text-align: center; }
.ntd-receipt .rr { display: flex; justify-content: space-between; gap: 10px; }
.ntd-receipt .rr span:last-child { text-align: right; }
.ntd-receipt .rl { font-weight: 600; }
.ntd-receipt .big { font-weight: 800; font-size: 13.5px; margin-top: 4px; }
.ntd-receipt small { color: #6B6A63; }
.ntd-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ntd-modal-actions .ntd-ghost { background: var(--surface); }
.ntd-stk {
  width: 340px; max-width: 100%; padding: 26px 22px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
}
.ntd-stk b { font-size: 16px; }
.ntd-stk p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.ntd-stk small { color: var(--muted); font-size: 12px; }
.ntd-stk code { font-family: var(--mono); color: var(--emerald); font-weight: 700; }
.ntd-spin { width: 38px; height: 38px; border: 3px solid var(--emerald-dim); border-top-color: var(--emerald); border-radius: 50%; animation: ntdSpin 0.8s linear infinite; }
@keyframes ntdSpin { to { transform: rotate(360deg); } }
.ntd-tick { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--emerald); color: var(--on-accent); font-size: 22px; font-weight: 800; }
.ntd-toast {
  position: absolute; left: 50%; bottom: 44px; z-index: 6; transform: translate(-50%, 12px);
  max-width: calc(100% - 32px); padding: 10px 16px; background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.25s var(--ease);
}
.ntd-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .ntd *, .ntd *::before { animation: none !important; transition: none !important; }
  .ntd-spin { border-top-color: var(--emerald); }
}

/* ---------------------------------------------------------- Responsive --- */
/* Below laptop width the fixed-height app gives way to a page that scrolls:
   items on top, cart and payment side by side, then stacked on a phone. */
@media (max-width: 1100px) {
  .ntd-body { height: auto; }
  .ntd-view { overflow: visible; }
  .ntd-till { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
  .ntd-catalog { grid-column: 1 / -1; max-height: 440px; border-bottom: 1px solid var(--line); }
  .ntd-cart { border-left: 0; }
  .ntd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ntd-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ntd-body { flex-direction: column; }
  .ntd-rail { flex: 0 0 auto; flex-direction: row; padding: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ntd-rail-btn { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 8px; font-size: 13px; padding: 8px 4px; }
  .ntd-rail-btn svg { width: 18px; height: 18px; }
  .ntd-till { grid-template-columns: minmax(0, 1fr); }
  .ntd-cart { border-right: 0; border-bottom: 1px solid var(--line); }
  .ntd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ntd-bar { gap: 8px 12px; padding: 10px 12px; }
  .ntd-user, .ntd-keys { display: none; }
  .ntd-bar-gap { display: none; }
  .ntd-biz { order: 5; flex: 1 1 100%; justify-content: space-between; }
  .ntd-dash, .ntd-stock { padding: 12px; }
  .ntd-layer { position: fixed; z-index: 300; }
  .ntd-toast { position: fixed; z-index: 301; bottom: 20px; }
}