/* A shop (module trade; docs/niches/trade/02-trade-tech.md): the till — the goods as big tiles a finger hits (the quick
   ones first, what runs out marked), the receipt to the right on a desk and below on a phone with its sum always in
   sight; the return mode painted in the signal colour; the payment's big figures; today's home, the goods, the debts'
   book, the purchases, the orders' board and the report. Sizes and bars set from the scripts (--w, --h). */

/* ---------- the till ---------- */
.pos-page { padding-bottom: 96px; }
.pos-open { max-width: 460px; margin: 24px auto; display: grid; justify-items: start; gap: 10px; }
.pos-open__title { font: var(--display-weight, 700) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.pos-open__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; width: 100%; }
.pos-open__form .field { flex: 1 1 180px; }

.pos { display: grid; gap: 14px; }
@media (min-width: 980px) { .pos { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.pos__main { min-width: 0; display: grid; gap: 10px; }
.pos__bar { display: flex; gap: 8px; align-items: center; }
.pos__scan { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; position: relative; }
.pos__scan-ic { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.pos__code { flex: 1; min-width: 0; height: 52px; padding-left: 40px; font-size: 17px; }
.pos__ret { height: 52px; flex: none; }
.pos__ret[aria-pressed="true"] { background: var(--signal, #e8590c); border-color: var(--signal, #e8590c); color: #fff; }
.pos__ret-note { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--signal, #e8590c);
  background: color-mix(in srgb, var(--signal, #e8590c) 10%, transparent); }
.pos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pos-tile { position: relative; display: grid; align-content: space-between; gap: 6px; min-height: 92px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: transform .08s, border-color .15s; }
.pos-tile:hover { border-color: var(--line-strong); }
.pos-tile:active { transform: scale(.97); }
.pos-tile.is-quick { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.pos-tile__name { font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-tile__meta { display: flex; align-items: baseline; gap: 2px; }
.pos-tile__meta b { font-size: 16px; color: var(--ink); }
.pos-tile__unit { font-size: 12px; color: var(--ink-3); }
.pos-tile__qty { font-size: 11.5px; color: var(--ink-3); }
.pos-tile.is-low .pos-tile__qty { color: var(--danger, #d6336c); font-weight: 600; }

.pos__cart { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-height: 320px; }
@media (min-width: 980px) { .pos__cart { position: sticky; top: 12px; max-height: calc(100dvh - 120px); } }
.pos__cart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pos__cart-title { font-weight: 700; }
.pos__client { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; padding: 6px 10px; border-radius: 99px; font-size: 13px;
  background: var(--surface); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos__client-meta { padding: 8px 14px 0; font-size: 12.5px; color: var(--ink-2); }
.pos__lines { flex: 1; overflow-y: auto; padding: 4px 0; list-style: none; }
.pos__empty { padding: 28px 16px; text-align: center; font-size: 14px; }
.pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; }
.pos-line + .pos-line { border-top: 1px solid var(--line-soft); }
.pos-line__main { display: grid; min-width: 0; }
.pos-line__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line__sub { font-size: 12px; }
.pos-line__qty { display: inline-flex; align-items: center; gap: 2px; }
.pos-line__qty .icon-btn { width: 30px; height: 30px; }
.pos-line__qty span { min-width: 22px; text-align: center; font-weight: 600; }
.pos-line__sum { font-size: 14.5px; min-width: 64px; text-align: right; }
.pos-line__del { width: 30px; height: 30px; color: var(--ink-3); }
.pos-line.is-return { background: color-mix(in srgb, var(--signal, #e8590c) 7%, transparent); }
.pos-line.is-return .pos-line__name::before { content: "↩ "; color: var(--signal, #e8590c); }
.pos-line.is-return .pos-line__sum { color: var(--signal, #e8590c); }
.pos__foot { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.pos__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.pos__sum b { font: 700 30px/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.pos__pay { height: 56px; font-size: 17px; }
.pos.is-return .pos__cart { border-color: color-mix(in srgb, var(--signal, #e8590c) 50%, var(--line)); }

/* a phone: the receipt's sum always in sight above the tab bar */
.pos__mini { display: none; }
@media (max-width: 979px) {
  .pos__mini:not([hidden]) { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2); }
  .pos__mini b { margin-left: auto; font-size: 18px; }
  .pos__mini-go { padding: 6px 12px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .pos__grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .pos-tile { min-height: 84px; }
}
.pos-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos-shift { font-size: 12.5px; color: var(--ink-2); padding: 4px 10px; border-radius: 99px; background: var(--ok-soft, #e6f6ec); color: var(--ok, #2b8a3e); }
@media (max-width: 640px) { .pos-actions .btn span { display: none; } .pos-shift { display: none; } }

/* weighing, picking, paying, done, closing */
.input--xl { height: 56px; font-size: 24px; font-weight: 600; }
.pos-weigh { display: grid; gap: 10px; }
.pos-weigh__keys { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-weigh__sum { font: 700 28px/1 var(--font-display); text-align: right; min-height: 28px; }
.pos-pick { display: grid; gap: 6px; }
.pos-pick__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-weight: 600; }
.pos-pick__row:hover { border-color: var(--accent); }
.pos-pick__form { margin-bottom: 10px; }
.pay { display: grid; gap: 12px; }
.pay__how { width: 100%; }
.pay__how button[disabled] { opacity: .4; cursor: not-allowed; }
.pay__notes { display: flex; flex-wrap: wrap; gap: 6px; }
.pay__change { font: 700 26px/1.1 var(--font-display); color: var(--ok, #2b8a3e); min-height: 28px; }
.pay__mix { display: grid; gap: 8px; }
.pay__warn { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--danger, #c92a2a); background: var(--danger-soft, #fdecec); }
.pos-done { display: grid; justify-items: center; gap: 8px; padding-top: 22px; text-align: center; }
.pos-done__ic { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--ok-soft, #e6f6ec); color: var(--ok, #2b8a3e); }
.pos-done__title { font: var(--display-weight, 700) 22px/1.2 var(--font-display); }
.pos-done__change { font: 700 30px/1.1 var(--font-display); }
.pos-close { display: grid; gap: 12px; }
.pos-close__result { padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; }
.pos-close__result.is-ok { background: var(--ok-soft, #e6f6ec); color: var(--ok, #2b8a3e); }
.pos-close__result.is-bad { background: var(--danger-soft, #fdecec); color: var(--danger, #c92a2a); }
.pos-cam { position: relative; display: grid; gap: 10px; }
.pos-cam__video { width: 100%; max-height: 60dvh; border-radius: var(--radius-sm); background: #000; object-fit: cover; }
.pos-cam__frame { position: absolute; left: 12%; right: 12%; top: 30%; height: 22%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; pointer-events: none; }

/* the client at the till */
.trade-client { display: grid; gap: 10px; }
.trade-client__list { display: grid; gap: 6px; }
.trade-client__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.trade-client__row:hover { border-color: var(--accent); }
.trade-client__name { font-weight: 600; }
.trade-client__meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.trade-client__meta:empty { display: none; }
.trade-client__new { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- shared: a page's head, its numbers, the lists ---------- */
.tr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.tr-head__title { font: var(--display-weight, 700) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.tr-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-kpis { margin-bottom: 14px; }
@media (min-width: 900px) { .tr-kpis { grid-template-columns: repeat(4, 1fr); } }
.tr-kpis dd { font: 700 22px/1.15 var(--font-display); letter-spacing: -.01em; }
.tr-kpis dt { font-size: 12.5px; color: var(--ink-2); }
.tr-grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-card { padding: 14px 16px; min-width: 0; }
.tr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tr-card__title { font-weight: 700; font-size: 15px; }
.tr-card__link { font-size: 13px; color: var(--accent-text, var(--accent)); }
.tr-list { display: grid; list-style: none; padding: 0; }
.tr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; }
.tr-item + .tr-item { border-top: 1px solid var(--line-soft); }
.tr-item__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-item__sub { grid-column: 1; font-size: 12.5px; color: var(--ink-2); }
.tr-item__end { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-weight: 600; }
.tr-item__end small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.tr-item.is-bad .tr-item__sub, .tr-item.is-bad .tr-item__end { color: var(--danger, #c92a2a); }
.tr-item.is-warn .tr-item__sub { color: var(--warn, #e8590c); }
.tr-none { padding: 10px 0; font-size: 13.5px; color: var(--ink-3); }
.tr-week { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 120px; }
.tr-week__day { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; text-align: center; font-size: 11px; color: var(--ink-3); }
.tr-week__bar { align-self: end; height: calc(var(--h, 0) * 100%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.tr-week__day.is-today .tr-week__bar { background: var(--accent); }
.tr-shift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tr-shift__state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tr-shift__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.tr-shift.is-open .tr-shift__dot { background: var(--ok, #2b8a3e); box-shadow: 0 0 0 4px var(--ok-soft, #e6f6ec); }
.tr-tabs { margin-bottom: 12px; }
.tr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tr-filters .input { flex: 1 1 220px; }
.tr-table { display: grid; }
.tr-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 10px 14px; font-size: 14px; text-align: left; width: 100%; }
.tr-row + .tr-row { border-top: 1px solid var(--line-soft); }
.tr-row > :not(:first-child) { text-align: right; }
.tr-row--head { font-size: 12px; font-weight: 600; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.tr-row__name { display: grid; min-width: 0; }
.tr-row__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row__name small { color: var(--ink-3); font-size: 12px; }
.tr-row.is-low .tr-row__qty { color: var(--danger, #c92a2a); font-weight: 700; }
a.tr-row:hover, button.tr-row:hover { background: var(--surface); }
@media (max-width: 640px) { .tr-row { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); } .tr-row > .tr-hide-sm { display: none; } }
.tr-bars { display: grid; gap: 8px; }
.tr-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.tr-bar__track { height: 10px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.tr-bar__track i { display: block; height: 100%; width: calc(var(--w, 0) * 1%); background: var(--accent); border-radius: 6px; }
.tr-bar b { font-weight: 600; }
.tr-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8px, 1fr); align-items: end; gap: 3px; height: 140px; }
.tr-days i { display: block; height: calc(var(--h, 0) * 100%); min-height: 2px; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.tr-sheet-form { display: grid; gap: 12px; }
.tr-lines { display: grid; gap: 8px; }
.tr-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tr-line__name { font-weight: 600; font-size: 14px; align-self: center; }
.tr-line__extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.tr-line__extra:empty { display: none; }
@media (max-width: 640px) { .tr-line { grid-template-columns: 1fr 1fr auto; } .tr-line__name { grid-column: 1 / -1; } }
.tr-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.tr-total b { font: 700 24px/1 var(--font-display); color: var(--ink); }
.tr-search-results { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.tr-search-results button { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs); text-align: left; }
.tr-search-results button:hover { background: var(--surface); }

/* the orders' board */
.ord-board { display: grid; gap: 12px; }
@media (min-width: 1100px) { .ord-board { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } }
.ord-col { display: grid; gap: 8px; align-content: start; }
.ord-col__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; padding: 4px 2px; }
.ord-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.ord-card__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ord-card__name { font-weight: 700; font-size: 14px; }
.ord-card__items { font-size: 13px; color: var(--ink-2); }
.ord-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-3); }
.ord-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ord-card__ch { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface); color: var(--ink-2); }
.ord-couriers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ord-courier { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.ord-courier b { font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .pos-tile { transition: none; } .pos-tile:active { transform: none; } }

/* the debts' book, the receipts, the suppliers */
.debt-row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.debt-row b { font-size: 15px; }
.debt-row.is-old .tr-row__name small, .debt-row.is-old span:nth-child(2) { color: var(--warn, #e8590c); }
.debt-row.is-over b { color: var(--danger, #c92a2a); }
.debts-kpis { grid-template-columns: repeat(2, 1fr); }
.rcpt-row.is-voided { opacity: .5; text-decoration: line-through; }
.sup-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.sup-row__actions { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) { .sup-row { grid-template-columns: minmax(0, 1fr) auto; } .sup-row > :nth-child(3) { display: none; } }
.tr-item.is-ok .tr-item__end { color: var(--ok, #2b8a3e); }
.tr-item.is-muted { opacity: .6; }
.tr-line--order { grid-template-columns: minmax(0, 1fr) 90px auto auto; align-items: center; }