/* ستون‌ها پویا هستند: به تعداد ویژگی‌های محصول (--vdims) ستونِ 1fr،
   بعد موجودی/خرید/فروش/حذف. --vdims را خودِ ردیف اینلاین می‌گذارد. */
.var-row{
  display:grid; grid-template-columns:repeat(var(--vdims,2),minmax(0,1fr)) 110px 130px 130px 40px; gap:var(--sp2);
  align-items:center; margin-bottom:var(--sp2);
}
.var-row .inp{min-height:40px; padding:7px 11px; font-size:.86rem}

/* وقتی کاربر دسترسی «دیدن سود» ندارد، ستون «خرید» رندر نمی‌شود
   و ردیف واریانت یک ستون کمتر دارد. */
.var-row.no-buy{grid-template-columns:repeat(var(--vdims,2),minmax(0,1fr)) 76px 84px 34px}

/* شبکهٔ «ساخت ترکیب‌ها» — یک ستون برای هر ویژگی و یک ستون دکمه */
.gen-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp3)}

/* ویژگی‌های محصول (dims) */
.dim-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.dim-chip{display:inline-flex; align-items:center; gap:2px; background:var(--surface2,#f4f1ee);
  border:1px solid var(--line,#e5e0da); border-radius:10px; padding:2px 4px 2px 8px}
.dim-chip .dim-name{border:0; background:transparent; min-height:32px; width:96px; padding:2px 4px; font-size:.86rem}
.dim-chip .dim-x{border:0; background:transparent; color:var(--muted,#9a8f83); cursor:pointer;
  display:inline-flex; padding:4px; border-radius:8px}
.dim-chip .dim-x:hover{background:var(--danger-bg,#fbe7e5); color:var(--danger,#a3211a)}
.dim-add{white-space:nowrap}

/* ---------- سرستون‌های قابل مرتب‌سازی ----------
   بدون نشانهٔ دیداری، کاربر نمی‌فهمد جدول بر چه اساسی چیده شده —
   و فکر می‌کند مرتب‌سازی کار نمی‌کند. */
table.tbl th.sortable{cursor:pointer; user-select:none; white-space:nowrap; transition:color .14s}
table.tbl th.sortable:hover{color:var(--navy)}
table.tbl th.sortable.on{color:var(--navy); font-weight:700}
.sort-ar{font-size:.7rem; opacity:.85; margin-inline-start:2px}
table.tbl th.sortable:not(.on):hover::after{
  content:"↕"; font-size:.7rem; opacity:.45; margin-inline-start:3px;
}

/* ---------- نوار «نیاز به شارژ انبار» ---------- */
.strip-head{display:flex; gap:6px; flex-wrap:wrap}
.strip-link{
  font:600 .76rem var(--fa); padding:4px 10px; border-radius:99px; cursor:pointer;
  border:1px solid currentColor; background:transparent; transition:background .14s, color .14s;
}
.strip-link.danger{color:var(--danger)}
.strip-link.warn{color:var(--warn)}
.strip-link:hover{background:var(--cream-2)}
.strip-link.danger.on{background:var(--danger); color:#fff; border-color:var(--danger)}
.strip-link.warn.on{background:var(--warn); color:#fff; border-color:var(--warn)}
.strip-more{
  cursor:pointer; border:1px dashed var(--line-strong); background:var(--paper);
  font-weight:700; color:var(--navy);
}
.strip-more:hover{background:var(--navy-mist)}
.strip-sec{font-size:.8rem; font-weight:700; color:var(--ink-2); margin:10px 0 8px}
.strip-sec:first-child{margin-top:0}

/* انتخاب نوع کالا (ساده/فله/تولیدی) */
.kind-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp2); margin-top:var(--sp2)}
.kind-seg .seg{display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;
  padding:10px 8px; border:1px solid var(--line,#e5e0da); border-radius:12px; background:var(--paper,#fff);
  cursor:pointer; font-size:.9rem; color:var(--ink,#2a1d15)}
.kind-seg .seg.on{border-color:var(--accent,#f39220); background:var(--accent-mist,#fff1df); font-weight:700}
.kind-seg .seg .tiny{font-weight:400}