/* ===================== 全局变量 ===================== */
:root{
  --stroke:#e5e7eb;
  --soft:#f8fafc;
  --ink:#0f172a;
}

/* ===================== 基础组件 ===================== */
.card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
}

.field{
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:.6rem .8rem;
  width:100%;
  box-sizing:border-box;
}
.field.invalid{ border-color:#ef4444; }

.btn{
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:.6rem 1rem;
  background:var(--soft);
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.btn:hover{ background:#e0f2fe; }
.btn-primary{
  background:linear-gradient(90deg,#06b6d4,#8b5cf6);
  color:#fff;border:none;
}

.navbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1.2rem;background:#fff;border-bottom:1px solid var(--stroke);
}

.section{ margin:1rem 0; }
.section-title{ font-weight:600;margin-bottom:.5rem; }
.text-muted,.muted{ color:#6b7280;font-size:.9rem; }
.text-small{ font-size:.8rem; }
.footer{ text-align:center;padding:1rem;font-size:.85rem;color:#6b7280; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}
.break-anywhere{ overflow-wrap:anywhere; }
.req{ color:#ef4444;margin-left:.25rem; }

.input-combo{ position:relative; }
.input-combo .star{
  position:absolute; left:.5rem; top:50%; transform:translateY(-50%);
  color:#ef4444; font-weight:700; pointer-events:none;
}
.input-combo input{ padding-left:1.25rem; }

/* 固定宽度（用于数量/金额等） */
.w-120{ width:120px; }
.w-180{ width:180px; }
.w-200{ width:200px; }
.w-220{ width:220px; }

/* ===================== 候选卡片区域 ===================== */
/* 外层面板：允许横向滚动，避免被挤压 */
.cands-panel{
  border:1px solid var(--stroke);
  background:var(--soft);
  border-radius:12px;
  padding:.75rem 1rem;
  width:100%;
  max-width:100%;
  overflow-x:auto; /* 关键 */
}

/* 只保留卡片网格，隐藏提示文字/说明等 */
.cands-panel > :not(.cands-grid){ display:none !important; }
/* 某些渲染函数会塞一个说明文字（text-xs），这里统一隐藏 */
[data-cands] > .text-xs{ display:none !important; }

/* 三列固定 + 卡片最小宽度；不足宽度时横向滚动 */
.cands-grid{
  display:grid;
  gap:.75rem;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  min-width: calc(220px * 3 + .75rem * 2); /* 防止卡片被压瘪 */
}

.candidate{
  cursor:pointer;
  padding:.65rem .75rem;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;
  width:100%;
}
.candidate:hover{ background:#f1f5f9; }
.candidate .title{ font-weight:600; line-height:1.3; color:var(--ink); }
.candidate .code{ color:#64748b; font-size:.85rem; }

/* ===================== 明细首行：项目名称 + 数量 + 金额 ===================== */
/* 你的 HTML/JS 里这一行容器通常是：#items .flex.flex-wrap.items-end.gap-3 */
#items .flex.flex-wrap.items-end{
  display:grid !important;
  grid-template-columns: minmax(260px, 1fr) 120px 200px; /* 名称自适应，数量/金额固定 */
  gap:12px;
  align-items:end;
}

/* 项目名称保持可伸展 */
#items .flex.flex-wrap.items-end > div:first-child{
  min-width:260px;
}

/* 数量、金额固定宽度（兜底，防被压缩） */
#items .w-120{ width:120px !important; flex:0 0 120px !important; }
#items .w-180,
#items .w-200{ width:200px !important; flex:0 0 200px !important; }

/* 这行的子项不要再换行，避免撑破布局 */
#items .flex.flex-wrap.items-end > *{ min-width:0; }

/* 小屏幕：仍保持三列，但交给父容器产生横向滚动（不强制折行） */
@media (max-width: 640px){
  #items .flex.flex-wrap.items-end{
    grid-template-columns: minmax(240px, 1fr) 110px 180px;
  }
}

/* ===================== “当前编码：未选择” 小字提示 ===================== */
/* 你的 JS 模板里用到：text-xs text-slate-500 w-full mt-1 */
.text-xs.text-slate-500{
  font-size: .85rem !important;
  color: #6b7280 !important;  /* slate-500 */
  margin-top: .25rem !important;
  display:block !important;   /* 独占一行，跟在候选区后面 */
  line-height:1.4;
}

/* 如果你改为自定义类名也兼容 */
.current-code{
  font-size:.85rem;
  color:#6b7280;
  margin-top:.25rem;
  display:block;
}

/* ===================== 其它通用行样式（可复用） ===================== */
.form-row{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.form-row .grow{ flex:1 1 0; }
.form-row .shrink{ flex:0 0 auto; }

table th, table td{ vertical-align:middle; }

.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#f8fafc; border:1px solid var(--stroke);
  padding:.15rem .5rem; border-radius:999px; font-size:.8rem;
}

/* ==== 让“项目名称”与数量/金额统一样式（#items 首行） ==== */

/* 1) 关闭把星号塞进输入框的做法，改为只在 label 上显示 */
#items .flex.flex-wrap.items-end .input-combo .star{
  display: none !important;
}
#items .flex.flex-wrap.items-end .input-combo input{
  padding-left: .8rem !important; /* 还原为普通输入的内边距 */
}

/* 2) 输入框高度/圆角/边框完全对齐数量、金额 */
#items .flex.flex-wrap.items-end input[type="text"],
#items .flex.flex-wrap.items-end input[type="number"]{
  height: 44px;                 /* 与数量/金额统一 */
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

/* 3) label 样式与其它字段统一 */
#items .flex.flex-wrap.items-end label{
  display: inline-block;
  margin-bottom: .35rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}

/* 4) 第一列（项目名称）保持与其它两列同一基线对齐 */
#items .flex.flex-wrap.items-end > div:first-child{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ====== 更深的 hover / active ====== */
.btn{
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease-in-out;
}

/* 普通按钮：hover 用 sky-200，active 用 sky-300 */
.btn:hover{
  background:#bae6fd;          /* 原来是 #e0f2fe，更深一档 */
  border-color:#93c5fd;
}
.btn:active{
  background:#93c5fd;          /* 再深一档 */
  border-color:#60a5fa;
  transform: translateY(1px);
}

/* 主要按钮：梯度整体加深 */
.btn-primary{
  background:linear-gradient(90deg,#06b6d4,#8b5cf6);
  color:#fff;border:none;
  box-shadow:0 6px 16px rgba(2,6,23,.12);
}
.btn-primary:hover{
  background:linear-gradient(90deg,#0ea5e9,#7c3aed);  /* 深一档 */
}
.btn-primary:active{
  background:linear-gradient(90deg,#0284c7,#6d28d9);  /* 再深一档 */
  transform: translateY(1px);
}

/* 可访问性：键盘聚焦有清晰描边 */
.btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* 禁用态（可选） */
.btn:disabled,
.btn[disabled]{
  opacity:.55; cursor:not-allowed;
  transform:none; box-shadow:none;
}