/*item/index页面css*/
:root {
  --bg: #f4f8fb;
  --card: #ffffff;
  --primary: #10a37f;
  --primary-light: #e8f7f2;
  --primary-dark: #0b7a5e;
  --text: #16283d;
  --text-sub: #5f7a94;
  --border: #e8f0f7;
  --danger: #e35d51;
  --danger-light: #fef1ef;
  --warn: #e8a33d;
  --warn-light: #fdf5e6;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(20, 60, 100, 0.05);
  --shadow-hover: 0 8px 24px rgba(20, 60, 100, 0.1);
}
.openboxs-cont{width:800px;}
/* ===== 表格容器 ===== */
.table-wrap {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

table.material-table {
  width: 100%;
  border-collapse: collapse;
}

.material-table thead th {
  text-align: left;
  font-weight: 700;
  color: #5f7a94;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 18px;
  background: #f8fbfe;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.material-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f5fa;
  color: var(--text);
  vertical-align: middle;
}

.material-table tbody tr {
  transition: background 0.15s;
}

.material-table tbody tr:hover {
  background: #f8fbfe;
}

.material-table tbody tr:last-child td {
  border-bottom: none;
}

/* 物料名称列 */
.cell-name {
  font-weight: 600;
  color: var(--text);
}

.cell-name .sub {
  display: block;
  font-weight: 500;
  color: #9aacbd;
  margin-top: 2px;
}

/* 数字列 */
.num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.num-unit {
  font-weight: 500;
  color: #9aacbd;
  margin-left: 2px;
}

/* 库存状态 */
.stock-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.stock-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stock-ok .stock-value { color: var(--primary-dark); }
.stock-ok .stock-dot { background: var(--primary); }

.stock-low .stock-value { color: var(--warn); }
.stock-low .stock-dot { background: var(--warn); }

.stock-danger .stock-value { color: var(--danger); }
.stock-danger .stock-dot { background: var(--danger); }

.stock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stock-tag {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.stock-tag.ok { background: #e8f7ef; color: #0d7a4d; border: 1px solid #c5ecda; }
.stock-tag.low { background: var(--warn-light); color: #b07a1e; border: 1px solid #f2ddb5; }
.stock-tag.danger { background: var(--danger-light); color: var(--danger); border: 1px solid #f8d5d0; }

/* 供应商数量 */
.supplier-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.supplier-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #eef5ff;
  color: #2a6fa8;
  border: 1px solid #dce8fa;
}

.supplier-count.zero {
  background: #f5f7f9;
  color: #9aacbd;
  border-color: #e6ecf1;
}

.supplier-label {
  font-weight: 500;
  color: #9aacbd;margin-left:6px;
}

/* 成本价格 */
.price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.price::before {
  content: '¥';
  font-weight: 600;
  margin-right: 1px;
  opacity: 0.6;
}

.price-total {
  display: block;
  font-weight: 500;
  color: #9aacbd;
  margin-top: 2px;
}

/* 操作按钮 */
.row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.icon-btn .material-icons-outlined { font-size: 17px; }

.icon-btn.edit { background: #eef5ff; color: #2a6fa8; }
.icon-btn.edit:hover { background: #dfebff; }

.icon-btn.delete { background: var(--danger-light); color: var(--danger); }
.icon-btn.delete:hover { background: #fde3e0; }

/* 空状态 */
.nodata {
  text-align: center;
  padding: 70px 20px;
  color: #a0b8cc;
}

.nodata .material-icons-outlined {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ===== 弹窗 ===== */
/* 表单网格 */
.item-grid {
display: flex;
flex-direction: column;
gap: 20px;
}

.fields {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;margin-bottom:10px;
}

.fields-row {
display: flex;
gap: 20px;
flex-wrap: wrap;margin-bottom:10px;
}
.fields label {
font-size: 0.8rem;
font-weight: 600;
color: #334155;
letter-spacing: 0.3px;
text-transform: uppercase;
opacity: 0.85;margin-bottom:6px;
}
.fields-row .fields:nth-of-type(2n){margin-left:16px;}
.fields .input {
width: 100%;
padding: 6px 10px;
border: 1px solid #d1d9e6;
border-radius: 6px;
font-size: 0.95rem;
background: #ffffff;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
outline: none;
color: #0f172a;
}


.fields .input:focus {
border-color: #2563eb;
}

.fields .input[type="number"] {
-moz-appearance: textfield;
}
.fields .input[type="number"]::-webkit-outer-spin-button,
.fields .input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* 供应商区域 */
.supplier-section {
margin-top: 28px;
border-top: 2px solid #e9eef4;
padding-top: 22px;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}

.section-header h3 {
font-size: 1.1rem;
font-weight: 700;
color: #0b1e33;
letter-spacing: -0.2px;
}

/* 按钮 — 无圆角，扁平风格 */
.btns {
border: none;
border-radius: 0;              /* 无圆角 */
padding: 8px 18px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #ffffff;
color: #1e293b;
border: 1.5px solid #cbd5e1;
letter-spacing: 0.2px;
}

.btns:hover {
background: #f8fafc;
border-color: #94a3b8;
}

.btns-primary {
background: #1e3a8a;
border: 1.5px solid #1e3a8a;
color: white;
}

.btns-primary:hover {
background: #1e40af;
border-color: #1e40af;
}

.btns-sm {
padding: 6px 16px;
font-size: 0.8rem;
}

/* 供应商列表 */
.supplier-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid #e2e8f0;
background: #ffffff;
margin-bottom: 8px;
}

.supplier-row {
display: flex;
gap: 0;
align-items: stretch;
background: #ffffff;
border-bottom: 1px solid #eef2f6;
transition: background 0.1s ease;
position: relative;
}

.supplier-row:last-child {
border-bottom: none;
}

.supplier-row:hover {
background: #fafcff;
}

/* 供应商行内的字段区域 — 无圆角，用内边距和边框分隔 */
.supplier-row .fields{
flex: 1;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: transparent;
border-right: 1px solid #eef2f6;
min-width: 0;margin-bottom:0;
}

.supplier-row .fields:last-of-type {
border-right: none;
}

.supplier-row .fields label {
font-size: 0.75rem;
white-space: nowrap;
text-transform: none;
letter-spacing: 0;
opacity: 0.7;
font-weight: 500;
color: #475569;
flex-shrink: 0;margin-bottom:0;
margin-right:6px;
}

.supplier-row .input {
border: none;
padding: 8px 0;
font-size: 0.95rem;
background: transparent;
box-shadow: none;
border-radius: 0;
flex: 1;
min-width: 0;
color: #0f172a;
}

.supplier-row .input:focus {
box-shadow: none;
background: #f1f5f9;
padding-left: 8px;
padding-right: 8px;
border-radius: 0;
}

.supplier-row .input[type="text"] {
min-width: 80px;
}

.supplier-row .input[type="number"] {
min-width: 80px;
text-align: right;
}

/* 删除按钮 — 方形，无圆角 */
.remove-btn {
flex-shrink: 0;
background: #ffffff;
border: none;
border-left: 1px solid #eef2f6;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 400;
color: #94a3b8;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
line-height: 1;
padding: 0;
border-radius: 0;
}

.remove-btn:hover {
background: #fee2e2;
color: #b91c1c;
}

/* 空状态提示 */
.empty-message {
color: #64748b;
font-size: 0.9rem;
text-align: center;
padding: 32px 16px;
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 0;
margin-bottom: 8px;
font-weight: 500;
letter-spacing: 0.2px;
}

/* 底部操作栏 */
.action-bar {
margin-top: 28px;
display: flex;
gap: 12px;
justify-content: flex-end;
border-top: 2px solid #e9eef4;
padding-top: 24px;
}

/* 隐藏域 */
.hidden-input {
display: none;
}

/* 小屏幕适配 */
@media (max-width: 640px) {
.cards {
padding: 20px 16px;
}
.fields-row {
flex-direction: column;
gap: 16px;
}
.supplier-row .fields {
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 10px 12px;
}
.supplier-row .fields label {
font-size: 0.7rem;
}
.supplier-row .input {
width: 100%;
padding: 6px 0;
}
.remove-btn {
width: 44px;
}
}

/* 细微的滚动条美化 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 0;            /* 无圆角 */
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}