/* FLIP · Supply module (products, suppliers, purchase orders) */
.sup-kpis{margin-bottom:16px}
.sup-sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:400;line-height:1.35}
.sup-link,.sup-doc{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--orange-tint)}
.sup-doc{white-space:nowrap;font-family:var(--display);letter-spacing:.01em;color:var(--orange);border-bottom-color:transparent}
.sup-link:hover,.sup-doc:hover{border-bottom-color:var(--orange);color:var(--orange)}
.sup-danger{color:var(--danger)!important}
.nowrap{white-space:nowrap}
.sup-zero{color:var(--muted)!important;font-weight:500}
.sup-low{color:var(--warn-text)!important}
.sup-neg{color:var(--danger)!important}
.sup-pos{color:var(--ok)!important}
.sup-strong{font-weight:800}
.sup-detail > *{min-width:0}
.sup-table-card td:first-child{min-width:240px}
.sup-supname{display:inline-block;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}

/* list toolbar */
.sup-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sup-filter{width:auto;height:36px;min-width:150px;max-width:220px}
.sup-tools .chip{height:36px;border-radius:10px}
.sup-tools .chip svg{width:13px;height:13px}
.sup-seg{height:36px;align-items:stretch}
.sup-seg button{display:flex;align-items:center;padding:0 12px;border:0;background:transparent;font:inherit;font-weight:600}
.sup-seg button.on{background:var(--navy);color:#fff}
.sup-table-card .table-tools{flex-wrap:wrap;padding:14px 16px}

/* product cell + swatches */
.sup-prod{display:inline-flex;align-items:center;gap:10px;min-width:0}
.sup-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.18);flex:none}
.sup-swatches{display:flex;flex:none}
.sup-swatches .sup-swatch{margin-left:-4px;box-shadow:0 0 0 2px #fff}
.sup-swatches .sup-swatch:first-child{margin-left:0}
.sup-stars{display:inline-flex;gap:1px;color:#D8CFC4}
.sup-stars svg.on{color:var(--orange);fill:var(--orange)}

/* detail */
.sup-detail{align-items:start}
.sup-detail .table tfoot td{border-top:2px solid var(--line);border-bottom:0;background:#FCFAF8}
.sup-barcode{color:var(--ink);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px;display:flex;justify-content:center}
.sup-barcode svg{max-width:100%;height:auto}
.sup-list{display:flex;flex-direction:column}
.sup-list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.sup-list-row:first-child{border-top:0;padding-top:0}
.sup-list-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.sup-variants{display:flex;flex-wrap:wrap;gap:6px}
.sup-variant{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--body);text-decoration:none;background:#fff}
.sup-variant:hover{border-color:var(--orange)}
.sup-variant .num{font-weight:700;color:var(--ink)}
.sup-more{padding:10px 16px;font-size:12px}
.sup-trail{list-style:none;margin:0;padding:0}
.sup-note{font-size:12px;color:var(--body);margin-top:3px;background:var(--field);border-radius:6px;padding:4px 8px;display:inline-block}
.sup-contact .sup-ci{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);text-decoration:none}
.sup-contact .sup-ci svg{color:var(--orange);flex:none}
.sup-callout{margin-bottom:16px}

/* variant generator */
.sup-gen .span-2{grid-column:1/-1}
.sup-chips{display:flex;flex-wrap:wrap;gap:6px}
.sup-chips .chip{min-width:44px;justify-content:center}
.sup-size-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sup-preview{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--paper)}
.sup-preview-head{font-size:13px;margin-bottom:8px}
.sup-preview .table-wrap{background:#fff;border-radius:8px;border:1px solid var(--line)}
tr.sup-dup td{opacity:.55}

/* PO form */
.sup-po-form .form-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sup-po-head .span-2{grid-column:span 2}
.sup-picker{position:relative}
.sup-picker-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sup-picker-search{position:relative;flex:1;min-width:220px}
.sup-picker-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.sup-picker-search input{width:100%;padding-left:36px}
.sup-only{font-size:12.5px;white-space:nowrap}
.sup-picker-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop-shadow);max-height:340px;overflow:auto;padding:6px}
.sup-picker-results[hidden]{display:none}
.sup-picker-item{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:9px 10px;border:0;background:transparent;border-radius:8px;cursor:pointer;font:inherit;color:var(--body)}
.sup-picker-item:hover,.sup-picker-item:focus{background:var(--orange-tint)}
.sup-picker-item b{color:var(--ink)}
.sup-picker-item .right{text-align:right}
.sup-picker-empty{padding:14px;color:var(--muted);font-size:13px}
.sup-lines{border:1px solid var(--line);border-radius:10px;max-height:320px}
.sup-lines .input-sm{height:32px}
.sup-qty{width:80px;text-align:right}
.sup-cost{width:130px;margin-left:auto}
.sup-cost input{text-align:right}
.sup-lines-empty{display:flex;align-items:center;gap:10px;justify-content:center;padding:22px;color:var(--muted)}
.sup-po-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sup-apr-hint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--body);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.sup-apr-hint.owner{background:var(--orange-tint);border-color:transparent;color:var(--ink)}
.sup-apr-hint svg{color:var(--orange)}
.sup-total-box{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sup-total{font-family:var(--display);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em}

/* PO progress */
.sup-prog{display:flex;align-items:center;gap:10px;min-width:120px}
.sup-prog .progress{flex:1;min-width:60px}
.sup-prog .num{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}

/* PO status steps */
.sup-steps{display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;overflow-x:auto}
.sup-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;flex:1}
.sup-step:not(:last-of-type)::after{content:"";flex:1;height:2px;background:var(--line);margin:0 10px;min-width:16px}
.sup-step .dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);font-size:11px;background:#fff;flex:none}
.sup-step.done{color:var(--ink)}
.sup-step.done .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.sup-step.done::after{background:var(--navy)}
.sup-step.cur{color:var(--ink)}
.sup-step.cur .dot{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 4px var(--orange-tint)}
.sup-steps.dead .sup-step{opacity:.45}
.sup-step-dead{margin-left:12px}

/* approval box */
.sup-apr{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;background:var(--warn-tint)}
.sup-apr.approved{background:var(--ok-tint)}
.sup-apr.rejected{background:var(--danger-tint)}
.sup-apr-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--warn-text);flex:none}
.sup-apr.approved .sup-apr-icon{color:var(--ok)}
.sup-apr.rejected .sup-apr-icon{color:var(--danger)}

/* print */
.sup-print-preview{background:var(--paper);padding:16px;border-radius:10px}
.sup-print-preview .print-doc{box-shadow:var(--card-shadow)}
.sup-print .doc-head{border-bottom-color:#141414}
.sup-print .doc-title{color:#141414;font-size:20px;letter-spacing:.04em}
.sup-print-brand{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--body)}
.sup-print-brand b{color:var(--ink);font-size:13px}
.sup-print-logo{height:52px;width:auto}
.sup-print-wordmark{font-family:var(--display);font-weight:900;font-style:italic;font-size:38px;color:#fff;-webkit-text-stroke:2px #141414;text-shadow:3px 3px 0 #141414;line-height:1}
.sup-print-parties{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:18px;font-size:12.5px;line-height:1.5}
.sup-print-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:3px}
.sup-print .totals .grand{border-top-color:#141414}
.sup-print-notes{margin-top:14px;font-size:12.5px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.sup-print-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.sup-print-sign .line{border-bottom:1px solid #141414;height:22px;font-size:12px;color:var(--ink);padding-bottom:2px}
.sup-print-host{position:fixed;left:-10000px;top:0;width:800px}
@media print{
  .sup-print-host{position:static;left:auto;width:auto}
  .sup-print-preview{display:none!important}
}

/* phones */
@media (max-width:700px){
  .sup-filter{min-width:0;flex:1 1 140px;max-width:none}
  .sup-po-form .form-row.cols-3{grid-template-columns:1fr}
  .sup-po-head .span-2{grid-column:auto}
  .sup-step{flex:none}
  .sup-step span:not(.dot){display:none}
  .sup-step.cur span:not(.dot){display:inline}
  .sup-print-parties,.sup-print-sign{grid-template-columns:1fr}
  .sup-total-box{align-items:flex-start}
  .sup-cost{width:110px}
}

/* page-level containment (no horizontal scroll on phones) */
.sup-page{min-width:0;max-width:100%}
.sup-page .page-header{flex-wrap:wrap;gap:12px}
.sup-page .page-actions{flex-wrap:wrap;min-width:0}
.sup-steps{max-width:100%;min-width:0}
.sup-detail .table td:first-child{min-width:170px}
@media (max-width:700px){
  .sup-page .page-actions{width:100%}
  .sup-page .page-actions .btn{flex:1 1 auto}
  .sup-picker-search{min-width:0}
}
.sup-tools > *{max-width:100%}
.sup-lines td:first-child{min-width:170px}
.modal:has(.sup-po-form) .modal-foot,.modal:has(.sup-gen) .modal-foot{flex-wrap:wrap}
@media (max-width:700px){
  .sup-tools .sup-filter{flex:1 1 40%}
  .sup-picker-search{flex:1 1 100%}
  .modal:has(.sup-po-form) .modal-foot .btn{flex:1 1 auto}
}

/* ===== Round 2: sneaker catalog ===== */
.sup-thumb{display:inline-flex;align-items:center;justify-content:center;width:46px;height:34px;border-radius:9px;background:var(--paper);border:1px solid var(--line);color:var(--ink);flex:none;position:relative;overflow:hidden}
.sup-thumb svg{width:38px;height:20px}
.sup-thumb.shoe::after{content:"";position:absolute;left:6px;right:6px;bottom:5px;height:3px;border-radius:2px;background:var(--sw,#D7CFC4);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sup-cond{font-weight:700;letter-spacing:.02em}
.sup-run{display:flex;flex-wrap:wrap;gap:4px;max-width:420px}
.sup-run-cell{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:34px;padding:3px 4px 2px;border-radius:7px;border:1px solid var(--line);background:#fff;text-decoration:none;line-height:1.05}
.sup-run-cell .sz{font-size:10.5px;color:var(--muted);font-weight:600}
.sup-run-cell .q{font-size:12.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sup-run-cell:not(.zero){border-color:#D9C3AC;background:var(--orange-tint)}
.sup-run-cell.zero{opacity:.5}
.sup-run-cell.zero .q{color:var(--muted);font-weight:600}
.sup-run-cell:hover{border-color:var(--orange);opacity:1}

/* product hero */
.sup-hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius,14px);padding:16px 20px;margin-bottom:16px}
.sup-hero-art{width:120px;height:84px;border-radius:14px;background:linear-gradient(135deg,var(--paper),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;overflow:hidden}
.sup-hero-art span{display:block;width:96px;height:48px}
.sup-hero-art svg{width:100%;height:100%}
.sup-hero-art::after{content:"";position:absolute;left:14px;right:14px;bottom:12px;height:5px;border-radius:3px;background:var(--sw,#D7CFC4);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sup-hero-brand{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:700}
.sup-hero-model{font-family:var(--display);font-size:24px;font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
.sup-hero-cw{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--body);margin-top:3px}
.sup-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.sup-code{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--navy);color:#fff;letter-spacing:.04em}
.sup-size{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;border:1.5px solid var(--ink);color:var(--ink)}
.sup-hero-price{text-align:right}
.sup-hero-price .sup-total{font-size:26px}

/* size run matrix */
.sup-matrix th.cur,.sup-matrix td.cur{background:var(--orange-tint)}
.sup-matrix th a{color:var(--ink);text-decoration:none;font-weight:800}
.sup-matrix th.cur a{color:var(--orange)}
.sup-matrix td:first-child{min-width:90px!important}
.sup-mx{display:inline-block;min-width:24px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted)}
.sup-mx.on{font-weight:800;color:var(--ink)}

/* intake picker */
.sup-pick-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.sup-pick{display:flex;gap:12px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:var(--body)}
.sup-pick b{color:var(--ink)}
.sup-pick .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.sup-pick.on{border-color:var(--orange);background:var(--orange-tint)}
.sup-pick.on .dot{border-color:var(--orange);box-shadow:inset 0 0 0 3px #fff;background:var(--orange)}

/* payouts */
.sup-paybar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0}
.sup-paid-ic{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;background:var(--ok-tint);color:var(--ok)}
.sup-pay-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:12px 14px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.sup-pay-head .right{text-align:right}
.sup-method{height:38px}
.sup-method button{padding:0 14px}
.sup-stmt-sum{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}

@media (max-width:900px){
  .sup-hero{grid-template-columns:auto 1fr}
  .sup-hero-price{grid-column:1/-1;text-align:left}
}
@media (max-width:700px){
  .sup-hero{grid-template-columns:1fr;padding:14px}
  .sup-hero-art{width:100%;height:90px}
  .sup-hero-model{font-size:20px}
  .sup-run{max-width:none}
  .sup-stmt-sum{grid-template-columns:repeat(2,1fr)}
}
@media print{ .sup-stmt-sum{grid-template-columns:repeat(7,1fr)} }
.sup-run{gap:3px}
.sup-run-cell{min-width:31px}
@media (min-width:1200px){ .sup-run.compact{flex-wrap:nowrap} }
.sup-full{margin-bottom:16px;min-width:0}
@media (max-width:700px){ .sup-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px} .sup-kpis .kpi-value{font-size:22px} }