/* 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-open__off { margin: 0; padding: 8px 12px; border-radius: var(--radius-xs, 8px); background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 14px; }

/* no internet: the till goes on and says so — the receipts waiting on the phone counted; one refused in the bad colour */
.pos-off { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm, 10px);
  background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 14px; line-height: 1.35; }
.pos-off span { flex: 1 1 200px; min-width: 0; }
.pos-off.is-bad { background: var(--bad-soft); color: var(--bad); }
.pos.is-offline .pos__cart-head .pos__client { opacity: .5; }

.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); }
/* the till's «not in the base»: what the code is, in the warning's colour */
.pos-unknown { display: grid; justify-items: center; gap: 6px; text-align: center; }
.pos-unknown__ic { color: var(--warn); }
.pos-unknown__name { font-size: 18px; }

/* a code field with its camera beside it; a phone's IMEIs with the camera under them */
.tr-code { display: flex; align-items: center; gap: 6px; }
.tr-code > .input { flex: 1; min-width: 0; }
.tr-imeis { display: grid; justify-items: start; gap: 6px; }
/* a delivery's line its code was read for again: one more, a flash */
.tr-line.is-hit { animation: tr-hit .7s ease-out; }
@keyframes tr-hit { from { background: var(--ok-soft); } }
@media (prefers-reduced-motion: reduce) { .tr-line.is-hit { animation: none; } }

/* the camera reading barcodes (js/trade/scanner.js): the picture with its frame; for many codes, what was read and a flash */
.scan-cam { display: grid; gap: 10px; }
/* the camera's picture: the video, and over it a canvas the video is drawn on (Safari on the iPhone shows no camera video
   inside a sheet, and draws it all the same) — both filling the view */
.scan-cam__view { position: relative; height: min(55dvh, 460px); overflow: hidden; border-radius: var(--radius-sm); background: #000; }
.scan-cam__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-cam__frame { position: absolute; left: 10%; right: 10%; top: 32%; height: 36%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); transition: border-color .2s; }
.scan-sheet.is-hit .scan-cam__frame { border-color: var(--ok); animation: scan-hit .45s ease-out; }
@keyframes scan-hit { 0% { transform: scale(1.04); } 100% { transform: scale(1); } }
.scan-cam__count { font-weight: 700; }
.scan-cam__count:empty, .scan-cam__list:empty { display: none; }
.scan-cam__list { display: grid; gap: 4px; max-height: 22dvh; margin: 0; padding: 0 0 0 22px; overflow-y: auto; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .scan-sheet.is-hit .scan-cam__frame { animation: 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; }
/* the shop's list rows (scoped: the dental protocol has a .tr-item of its own in pages.css) */
.tr-list > .tr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border: 0; border-radius: 0; scroll-margin: 0; }
.tr-list > .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; } }
/* «Qaiməni çək» (js/trade/qaime.js): the button, the invoice read, a line's name on it, the rows not found */
.tr-qaime-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tr-qaime-btn:hover { border-style: solid; }
.tr-qaime-btn > .ic { width: 28px; height: 28px; color: var(--accent); flex: none; }
.tr-qaime-btn__text { display: grid; gap: 2px; }
.tr-qaime-btn__text b { font-size: 15px; }
.tr-qaime-btn__text small { color: var(--ink-2); font-size: 13px; }
.tr-qaime-btn.is-busy { opacity: .7; pointer-events: none; }
.tr-qaime { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tr-qaime__top { display: flex; gap: 12px; align-items: flex-start; }
.tr-qaime__img { width: 86px; max-width: 30%; border-radius: 6px; border: 1px solid var(--line); background: #fff; flex: none; }
.tr-qaime__info { display: grid; gap: 3px; min-width: 0; font-size: 14px; }
.tr-qaime__sum { font-size: 13px; color: var(--ink-2); }
.tr-qaime__sum.is-off { color: var(--warn); font-weight: 600; }
.tr-qaime__note:empty { display: none; }
.tr-qaime__miss { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tr-qaime__miss-title { font-weight: 600; font-size: 14px; color: var(--warn); }
.tr-qaime-miss { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.tr-qaime-miss__name { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.tr-qaime-miss__acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-from-qaime { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ink-2); font-size: 12px; }
.tr-from-qaime.is-guess { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.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; }

/* the auto-order: its switch's line, each supplier's order as a card (a draft's quantities set with − and +), the goods
   nobody is set to bring; the supplier's weekdays as chips */
.ao-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ao-bar__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.ao-bar.is-on .ao-bar__dot { background: var(--ok, #2b8a3e); box-shadow: 0 0 0 4px var(--ok-soft, #e6f6ec); }
.ao-bar__text { flex: 1 1 220px; display: grid; min-width: 0; }
.ao-bar__text small { font-size: 12.5px; color: var(--ink-2); }
.ao-bar__actions { display: flex; align-items: center; gap: 6px; }
.ao-card { display: grid; gap: 10px; align-content: start; }
[data-part="aoOrders"] { align-items: start; }
.ao-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ao-card__who { display: grid; min-width: 0; }
.ao-card__who small { font-size: 12.5px; }
.ao-chip { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.ao-chip.is-due { background: color-mix(in srgb, var(--signal, #e8590c) 14%, transparent); color: var(--signal, #e8590c); }
.ao-chip.is-sent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text, var(--accent)); }
.ao-chip.is-received { background: var(--ok-soft, #e6f6ec); color: var(--ok, #2b8a3e); }
.ao-lines { display: grid; list-style: none; padding: 0; }
.ao-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 0; }
.ao-line + .ao-line { border-top: 1px solid var(--line-soft); }
.ao-line__name { display: grid; min-width: 0; }
.ao-line__name b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-line__name small { font-size: 12px; color: var(--ink-3); }
.ao-line.is-urgent .ao-line__name small { color: var(--danger, #c92a2a); }
.ao-qty { display: inline-flex; align-items: center; gap: 2px; }
.ao-qty .icon-btn { width: 36px; height: 36px; }
.ao-qty__btn { font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink-2); }
.ao-qty__input { width: 64px; height: 36px; padding: 0 6px; text-align: center; font-weight: 600; }
.ao-line__qty { font-weight: 600; text-align: right; }
.ao-line__qty small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.ao-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ao-card__sum b { font-size: 17px; }
.ao-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ao-card.is-received { opacity: .75; }
.ao-loose { margin-top: 12px; }
.ao-loose__hint { font-size: 13px; margin-bottom: 6px; }
.tr-receive-from { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-row__name { text-align: left; cursor: pointer; }
.sup-row__name:hover b { text-decoration: underline; }
.sup-days { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-width: 0; }
.sup-days__list { flex-wrap: wrap; overflow: visible; }
.sup-day { position: relative; cursor: pointer; min-height: 40px; min-width: 48px; justify-content: center; }
.sup-day input { position: absolute; opacity: 0; pointer-events: none; }
.sup-day:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sup-day:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tr-item.is-link { cursor: pointer; }
.tr-item.is-link:hover .tr-item__name { text-decoration: underline; }

/* a food shop: today's flags (a price gone up, the pay day's debtors), the rises' sheet and its banner, yesterday's goods
   given back with a delivery, the pay day's debtors on top of the book, the price tags (A4 to cut, small or big) */
.shop-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-flags:empty { display: none; }
.shop-flag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.shop-flag.is-warn { border-color: color-mix(in srgb, var(--signal, #e8590c) 40%, var(--line)); background: color-mix(in srgb, var(--signal, #e8590c) 8%, var(--bg)); }
.shop-flag.is-warn > .ic:first-child { color: var(--signal, #e8590c); }
.shop-flag.is-ok > .ic:first-child { color: var(--ok, #2b8a3e); }
.rise-banner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; margin-bottom: 12px; text-align: left; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--signal, #e8590c) 40%, var(--line)); background: color-mix(in srgb, var(--signal, #e8590c) 8%, var(--bg)); }
.rise-banner > .ic:first-child { color: var(--signal, #e8590c); flex: none; }
.rise-banner__text { flex: 1; display: grid; min-width: 0; }
.rise-banner__text small { font-size: 12.5px; color: var(--ink-2); }
.rise-list { display: grid; list-style: none; padding: 0; }
.rise { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; }
.rise + .rise { border-top: 1px solid var(--line-soft); }
.rise__pick { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.rise__pick input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.rise__name { display: grid; min-width: 0; }
.rise__name small { font-size: 12px; color: var(--ink-3); }
.rise__facts { grid-column: 1; padding-left: 28px; font-size: 12.5px; color: var(--signal, #e8590c); }
.rise__price { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 2px; }
.rise__price .input { width: 96px; text-align: right; font-weight: 700; }
.rise__price > span { font-size: 12px; }
.rise__keep { font-size: 11.5px; color: var(--ok, #2b8a3e); }
.rise.is-low .rise__keep { color: var(--danger, #c92a2a); }
.tr-returns { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.tr-returns__list { display: grid; gap: 6px; }
.tr-return { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.tr-return__name { display: grid; min-width: 0; }
.tr-return__name small { font-size: 12px; color: var(--ink-3); }
.tr-returns__sum { font-size: 13px; color: var(--ok, #2b8a3e); text-align: right; }
.tr-returns__sum:empty { display: none; }
.payday { margin-bottom: 12px; border-color: color-mix(in srgb, var(--ok, #2b8a3e) 35%, var(--line)); }
.payday__sub { font-size: 13px; margin-bottom: 4px; }
.payday__row { cursor: pointer; }
.payday__end { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px; }
.tr-card__note { font-size: 12.5px; margin: -4px 0 6px; }

.ptags { display: grid; grid-template-columns: repeat(auto-fill, 58mm); gap: 4mm; justify-content: start; }
.ptags--big { grid-template-columns: repeat(auto-fill, 90mm); }
.ptag { display: flex; flex-direction: column; width: 58mm; height: 40mm; padding: 2.5mm 3mm;
  border: 1px dashed #9a9a9a; background: #fff; color: #111; overflow: hidden; break-inside: avoid; }
.ptags--big .ptag { width: 90mm; height: 60mm; padding: 4mm 5mm; }
.ptag__shop { font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptag__name { font-size: 10pt; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptags--big .ptag__name { font-size: 14pt; }
.ptag__sub { font-size: 8pt; color: #555; }
.ptag__sub:empty, .ptag__old:empty { display: none; }
.ptag__old { margin-top: auto; font-size: 9pt; color: #777; text-decoration: line-through; }
.ptag__price { margin-top: auto; display: flex; align-items: baseline; gap: 1mm; }
.ptag__old:not(:empty) + .ptag__price { margin-top: 0; }
.ptag__price b { font-size: 22pt; line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.ptags--big .ptag__price b { font-size: 36pt; }
.ptag.is-markdown .ptag__price b { color: #c92a2a; }
.ptag__price small { font-size: 9pt; color: #444; }
.ptag__code { display: block; height: 7mm; margin-top: 1mm; }
.ptags--big .ptag__code { height: 10mm; }
.ptag__bars { display: block; width: 32mm; height: 100%; fill: #111; }
.ptags--big .ptag__bars { width: 44mm; }
.ptag__foot { display: flex; justify-content: space-between; gap: 2mm; font-size: 6.5pt; color: #555; }
@media print {
  @page { size: A4; margin: 8mm; }
  .sidebar, .topbar, .tabbar, .no-print, .demo-bar, .fab, .pay-bar { display: none !important; }
  .main, .view, .ptags-page { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .ptag { border-color: #bbb; }
}

/* a clothes shop: the markdown's tab (what lies unsold, the percent, the bar to take it), the arrivals in a regular's
   size, her sizes as chips */
.md-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.md-head__kpi { display: grid; }
.md-head__kpi b { font: 700 26px/1.1 var(--font-display); }
.md-head__kpi small { font-size: 12.5px; }
.md-head__pct { display: grid; gap: 4px; justify-items: start; }
.md-head__pct > span { font-size: 12.5px; }
.md-active-box { margin-bottom: 12px; }
.md-all { font-size: 13px; }
.md-hint { font-size: 12.5px; margin: -4px 0 6px; }
.md-list { display: grid; list-style: none; padding: 0; }
.md-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; }
.md-row + .md-row { border-top: 1px solid var(--line-soft); }
.md-row__pick { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.md-row__pick input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.md-row__name { display: grid; min-width: 0; }
.md-row__name b { font-size: 14px; }
.md-row__name small { font-size: 12px; color: var(--ink-3); }
.md-row__money { display: grid; justify-items: end; gap: 2px; }
.md-row__money small { font-size: 11.5px; }
.md-row__prices { display: flex; gap: 8px; align-items: baseline; }
.md-row__prices b { color: var(--danger, #c92a2a); font-size: 15px; }
.md-active__end { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px; }
.md-bar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.18)); }
@media (min-width: 900px) { .md-bar { bottom: 16px; } }
.arr-list { display: grid; gap: 12px; }
.arr-card__models { font-size: 13px; margin: -4px 0 6px; }
.arr-card__none { font-size: 13px; }
.arr-client__name { text-align: left; cursor: pointer; }
.arr-client__name:hover { text-decoration: underline; }
.arr-client__end { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px; }
.arr-client__told { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ok, #2b8a3e); }
.arr-client.is-told .tr-item__name, .arr-client.is-told .tr-item__sub { opacity: .6; }
.sz-groups { display: grid; gap: 12px; }
.sz-group { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-width: 0; }
.sz-group__list { flex-wrap: wrap; overflow: visible; }
.pos__sizes { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
.pcard { display: grid; gap: 10px; justify-items: center; }
.pcard__tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.pcard__photo { cursor: pointer; }
.pcard__img { width: min(100%, 300px); aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.18)); background: var(--surface); }
.pcard__foot { display: flex; gap: 8px; }
.pcard__foot > * { flex: 1; }
.arr-card__more { margin-top: 6px; }

/* a phones shop: the payment's taksit (the down payment, the months, the schedule) and a card's taksit plan */
.pay__card, .pay__taksit { display: grid; gap: 10px; }
.pay__months { flex-wrap: wrap; }
.pay__schedule { display: grid; gap: 2px; padding-left: 22px; font-size: 13.5px; color: var(--ink-2); }
.wa-sheet__text { white-space: pre-line; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }

/* a phones shop: the taksit's plans (a bar of the months paid), the repairs' board, the used phone's sheet and its act */
.tk-groups { display: grid; gap: 18px; }
.tk-group__title { font: 700 16px/1.2 var(--font-display); margin-bottom: 8px; }
.tk-group.is-late .tk-group__title { color: var(--danger, #c92a2a); }
.tk-plan { display: grid; gap: 8px; align-content: start; }
.tk-plan__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tk-plan__who { display: grid; min-width: 0; }
.tk-plan__next { display: grid; justify-items: end; }
.tk-plan__next b { font-size: 17px; }
.tk-plan__next small { font-size: 12px; color: var(--ink-2); }
.tk-plan.is-late .tk-plan__next b, .tk-plan.is-late .tk-plan__next small { color: var(--danger, #c92a2a); }
.tk-plan__items { font-size: 13px; }
.tk-bar { height: 8px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.tk-bar i { display: block; height: 100%; width: calc(var(--w, 0) * 1%); background: var(--accent); border-radius: 6px; }
.tk-plan__progress { font-size: 12.5px; color: var(--ink-2); }
.tk-months { display: grid; gap: 2px; list-style: none; padding: 0; font-size: 13px; }
.tk-month { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 4px 0; }
.tk-month.is-paid { color: var(--ok, #2b8a3e); }
.tk-month.is-late { color: var(--danger, #c92a2a); font-weight: 600; }
.tk-month__state { min-width: 80px; text-align: right; font-size: 12px; }
.tk-plan__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rp-card.is-late { border-color: color-mix(in srgb, var(--danger, #c92a2a) 45%, var(--line)); }
.rp-problems { flex-wrap: wrap; overflow: visible; margin-bottom: 6px; }
.usd-chip { font-weight: 600; }
.bb-checks, .bb-seller { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.bb-check, .bb-grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.bb-battery { max-width: 160px; }
.bb-must.is-missing { color: var(--danger, #c92a2a); font-weight: 600; }
.bb-act { max-width: 720px; margin: 0 auto; padding: 28px 32px; background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 14px; }
.bb-act__title { font: 700 22px/1.25 var(--font-display); text-align: center; }
.bb-act__place { text-align: center; font-size: 13px; color: #555; }
.bb-act__rows { display: grid; gap: 0; }
.bb-act__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6e6e6; font-size: 14px; }
.bb-act__row dt { color: #555; }
.bb-act__row dd { font-weight: 600; }
.bb-act__words { font-size: 13.5px; line-height: 1.55; }
.bb-act__signs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; font-size: 13px; }
.bb-act__signs > div { display: grid; gap: 6px; }
.bb-act__signs i { display: block; height: 36px; border-bottom: 1px solid #111; }
@media print {
  .bb-act { border: 0; padding: 0; max-width: none; }
  .buyback-page { margin: 0 !important; padding: 0 !important; }
}

/* an Instagram shop: a risky client's card, the refusals' line, the store's link and QR */
.ord-card.is-risky { border-color: color-mix(in srgb, var(--danger, #c92a2a) 45%, var(--line)); }
.ord-card__warn, .ord-warn { margin: 0; padding: 6px 10px; border-radius: var(--radius-xs); font-size: 12.5px; font-weight: 600;
  color: var(--danger, #c92a2a); background: color-mix(in srgb, var(--danger, #c92a2a) 8%, transparent); }
.ord-refused { font-size: 13px; margin-bottom: 8px; }
.ord-reasons { flex-wrap: wrap; overflow: visible; }
.store-link { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); }
.store-link__url { font-size: 14px; font-weight: 600; word-break: break-all; }
.store-link__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.store-link__qr svg { width: 140px; height: 140px; }
.pr-photo { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.pr-photo__img { width: 88px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; display: grid; place-items: center; color: var(--ink-3); }
.pr-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.pr-photo__acts { display: flex; flex-wrap: wrap; gap: 6px; }