/* =========================================================
   1. 颜色变量优化：提升对比度
   ========================================================= */
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  /* 将主要文字和提示字符统一替换为更清晰的纯黑色，避免浅灰色的视觉疲劳 */
  --text: #000000; 
  --muted: #333333; 
  --muted2: #555555;
  --border: #d1d5db;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body {
  color: var(--text);
}

/* =========================================================
   2. 输入框与表单增强
   ========================================================= */
input[type="text"], 
input[type="number"], 
select, 
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  color: #000000 !important; /* 录入单号等数据后强制使用纯黑字体 */
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* 提示字符(Placeholder)颜色加深，使其看起来不再别扭 */
input::placeholder, 
textarea::placeholder {
  color: #666666; 
  text-align: left; /* 统一左对齐，去除居中带来的突兀感 */
}

/* 专门为多个快递单号预留的多行输入框样式 */
textarea.tracking-input {
  min-height: 90px; /* 高度足够同时容纳3到4个以上的快递单号 */
  line-height: 1.6;
  resize: vertical;
}

/* =========================================================
   3. 表格列宽与间距调整
   ========================================================= */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* 允许根据内容自适应宽度 */
}

.table th, 
.table td {
  padding: 14px 16px; /* 适当拉开稍微调整其他列的间距，使整体更美观 */
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

/* 针对较长的货件编号，设定最小宽度，避免频繁挤压到第二行 */
.col-shipment-id {
  min-width: 180px;
  word-wrap: break-word;
}

/* 多商品订单的容器，确保每个商品都能独立完整显示，不再折叠为单纯的 x2 */
.multi-product-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.multi-product-item {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eee;
}
.multi-product-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}