/* 13-r203.css — v1.19.203: item tones on the sales screen, special price on a line, products page, returns list, groups, clearer stock screens. */

/* ── every item has its own tone (posTint in js/src/04b): same lightness, so the set stays calm ── */
.pt-0{--pc-tone:#e8b86d}.pt-1{--pc-tone:#f2917a}.pt-2{--pc-tone:#ef8fb0}.pt-3{--pc-tone:#cf9bf0}.pt-4{--pc-tone:#a99cf5}
.pt-5{--pc-tone:#8fa8f7}.pt-6{--pc-tone:#7cc4f5}.pt-7{--pc-tone:#62cfe0}.pt-8{--pc-tone:#d9c39a}.pt-9{--pc-tone:#a8b6c8}
html.light .pt-0{--pc-tone:#a8741c}html.light .pt-1{--pc-tone:#c2553b}html.light .pt-2{--pc-tone:#c04a7c}html.light .pt-3{--pc-tone:#8e4fc4}html.light .pt-4{--pc-tone:#6a55cf}
html.light .pt-5{--pc-tone:#3f63cf}html.light .pt-6{--pc-tone:#1d7dc2}html.light .pt-7{--pc-tone:#0e8799}html.light .pt-8{--pc-tone:#8a6f3c}html.light .pt-9{--pc-tone:#5b6b80}

#pg-pos .pos-card{ border-color:color-mix(in srgb,var(--pc-tone) 34%, var(--border)); }
.pc-art{ background:linear-gradient(150deg,color-mix(in srgb,var(--pc-tone) 34%, transparent),color-mix(in srgb,var(--pc-tone) 10%, transparent)); }
.pc-mono{ font-size:29px; line-height:1; font-weight:700; color:var(--pc-tone); letter-spacing:0; }
html.silk .pc-mono{ font-weight:400; }
#pg-pos .pos-card-badge{ top:7px; inset-inline-end:7px; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; background:rgba(8,10,12,.62); color:#fff; box-shadow:none; font-size:9.5px; font-weight:700; }
#pg-pos .pos-card-badge svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html.light #pg-pos .pos-card-badge{ background:rgba(255,255,255,.92); color:#20242a; }
#pg-pos .pos-card-price{ color:var(--pc-tone); }
html.silk #pg-pos .pos-card-price{ color:var(--gold2); }
#pg-pos .inv-row[class*="pt-"], .inv-row[class*="pt-"]{ border-inline-start:3px solid var(--pc-tone); }

/* ── special price on a line ── */
.inv-price-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:7px; padding-top:7px; border-top:1px dashed var(--border); font-size:11px; color:var(--cream2); }
.inv-price-row label{ white-space:nowrap; }
.ipr-box{ position:relative; display:inline-flex; align-items:center; }
.ipr-box .qinp{ width:92px; padding:3px 24px 3px 7px; font-size:13px; }
html[dir="rtl"] .ipr-box .qinp{ padding:3px 7px 3px 24px; }
.ipr-box i{ position:absolute; inset-inline-end:7px; font-style:normal; font-size:10.5px; color:var(--muted); pointer-events:none; }
.ipr-was{ color:var(--muted); font-size:10.5px; }
.ipr-reset,.ipr-warn{ display:none; }
.inv-price-row.edited .ipr-box .qinp{ border-color:var(--gold2); font-weight:700; }
.inv-price-row.edited .ipr-reset{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--cream2); cursor:pointer; font-size:13px; }
.inv-price-row.below .ipr-warn{ display:inline; color:var(--red); font-weight:700; }
html.silk .inv-price-row.below .ipr-warn{ color:var(--s-bad); }
.inv-unit-sel{ background:var(--bg2); color:var(--cream); border:1px solid var(--border); border-radius:7px; padding:3px 6px; font-size:12px; font-family:inherit; }

/* ── the empty debtors and lists on the home page used a fixed green picture ── */
html.silk #pg-dashboard .qa-subcard td[colspan]::before,
html.silk #pg-dashboard .qa-debtor-empty::before{ background:var(--cream2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3.3 7.5L12 12.5l8.7-5M12 22V12.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3.3 7.5L12 12.5l8.7-5M12 22V12.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── shared parts of the clearer screens ── */
.r3-help{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; margin-bottom:12px; border:1px solid var(--border); border-radius:12px; background:var(--bg2); font-size:12.5px; line-height:1.75; color:var(--cream2); }
.r3-help svg{ width:17px; height:17px; flex-shrink:0; margin-top:3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.r3-help b{ color:var(--cream); }
.r3-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
.r3-card{ padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--bg2); min-width:0; }
.r3-card .k{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.r3-card .v{ font-size:17px; font-weight:700; color:var(--cream); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.r3-card .h{ font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.r3-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.r3-chip{ padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--cream2); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.r3-chip b{ font-weight:600; opacity:.65; margin-inline-start:4px; }
.r3-chip.on{ background:var(--gold2); border-color:transparent; color:#080f0d; }
html.silk .r3-chip.on{ background:var(--s-ink); color:var(--s-on-ink); }
.r3-tag{ display:inline-block; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; background:var(--bg3); color:var(--cream2); white-space:nowrap; }
.r3-tag.kg,.r3-tag.g{ color:#c98a1e; background:rgba(232,184,109,.15); }
.r3-tag.piece{ color:#2d8fd0; background:rgba(124,196,245,.15); }
.r3-tag.packaging{ color:#8a7a5a; background:rgba(217,195,154,.18); }
.r3-tag.mixture{ color:#7f63dc; background:rgba(169,156,245,.16); }
.r3-tag.group{ color:#c9527f; background:rgba(239,143,176,.16); }
.r3-tag.sale{ color:#2d8fd0; background:rgba(124,196,245,.15); }
.r3-tag.purchase{ color:#c98a1e; background:rgba(232,184,109,.15); }
.r3-state{ display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px; margin-inline-start:4px; }
.r3-state.low{ color:var(--s-warn,#b97f12); background:rgba(232,184,109,.16); }
.r3-state.out{ color:var(--red); background:rgba(220,70,70,.13); }
html.silk .r3-state.out{ color:var(--s-bad); }
.r3-acts{ display:flex; gap:4px; justify-content:flex-end; }
.r3-acts .btn{ padding:3px 8px; }
.r3-foot td{ font-weight:700; background:var(--bg2); }
.r3-wide.ax-panel{ max-width:1120px!important; }

/* products page */
#pg-products .stats-row.r3-stats{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
#pg-products .stat .hint{ font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.5; }
.prod-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.prod-bar .grow{ flex:1; }
.prod-tbl td{ vertical-align:middle; }
.prod-tbl .nm{ font-weight:700; }
.prod-tbl .sb{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.prod-tbl .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* returns list */
#pg-returns .ret-actions{ display:flex; gap:5px; flex-wrap:wrap; }

/* groups */
.grp-card{ border:1px solid var(--border); border-radius:14px; padding:13px; margin-bottom:10px; background:var(--bg2); }
.grp-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.grp-name{ font-size:15px; font-weight:700; color:var(--cream); }
.grp-parts{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.grp-part{ font-size:11px; padding:2px 8px; border-radius:20px; background:var(--bg3); color:var(--cream2); }
.grp-part.short{ color:var(--red); }
.grp-nums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:8px; margin:8px 0; }
.grp-nums .k{ font-size:10.5px; color:var(--muted); }
.grp-nums .v{ font-size:14px; font-weight:700; color:var(--cream); }
.grp-acts{ display:flex; flex-wrap:wrap; gap:6px; }
.grp-pick{ max-height:290px; overflow:auto; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; }
.grp-row{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:13px; }
.grp-row:last-child{ border-bottom:0; }
.grp-row .n{ flex:1; min-width:0; }
.grp-row .fc{ width:74px; padding:4px 6px; }
.grp-row input[type=checkbox]{ width:17px; height:17px; flex-shrink:0; accent-color:var(--gold2); }
.grp-sum{ padding:10px 12px; border-radius:10px; background:var(--bg3); font-size:12.5px; line-height:1.8; margin-bottom:10px; }

/* stock count */
.sc-progress{ height:6px; border-radius:6px; background:var(--bg3); overflow:hidden; margin-bottom:12px; }
.sc-progress i{ display:block; height:100%; background:var(--gold2); }
html.silk .sc-progress i{ background:var(--s-ink); }
#sc-box input.sc-in{ width:96px; padding:5px 7px; border-radius:7px; border:1px solid var(--border); background:var(--bg2); color:var(--cream); font-family:inherit; }
#sc-box .sc-same{ padding:3px 8px; font-size:11px; }

/* price lists */
.prl-card{ border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin-bottom:9px; background:var(--bg2); }
.prl-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.prl-row input[type=text]{ flex:1; min-width:150px; }
.prl-meta{ font-size:11.5px; color:var(--muted); margin:6px 0 8px; }
.prl-grid td,.prl-grid th{ padding:6px 8px; font-size:12.5px; }
.prl-grid input{ width:104px; }
.prl-grid .under{ color:var(--red); font-weight:700; }

@media (max-width:768px){
  .r3-cards{ grid-template-columns:repeat(2,1fr); }
  .inv-price-row{ font-size:10.5px; }
}
@media print{ .r3-help,.r3-chips{ display:none; } }

/* the type bar holds five choices now: on a phone it scrolls, and the sort list takes its own line */
@media (max-width:768px){
  #pg-pos .pos-filters{ flex-wrap:wrap; }
  #pg-pos #pos-type-filter-bar{ flex-wrap:nowrap; overflow-x:auto; width:100%; max-width:100%; scrollbar-width:none; }
  #pg-pos #pos-type-filter-bar .cbtn{ flex-shrink:0; }
}