/* 食材表页样式（公司数据中心）
 *
 * 注意：这些 dict-* 类名原来是 ingredient-dict.css 里的。
 * 2026-09-30 删旧词典时把那个文件一起删了，结果「食材表」页失去样式、
 * 变成一坨纯文本。这里重新提供，并且按新页面的结构调过间距。
 */

/* 页头右侧的按钮组（跟 page-intro 并排时要能对齐） */
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-intro > div { min-width: 0; }
.page-intro h2 { margin: 2px 0 6px; }
.page-intro p { margin: 0; color: var(--soft); font-size: 12px; line-height: 1.75; max-width: 720px; }

/* 出错时的提示条 */
.dict-error {
  margin: 0 0 15px;
  padding: 12px 15px;
  border-left: 5px solid #b9523b;
  border-radius: 10px;
  color: #8d3a28;
  background: #fdeeea;
  font-size: 12px;
}

/* 说明文字 */
.dict-note { color: var(--soft); font-size: 12px; line-height: 1.7; }

/* 三个 tab 那一行 */
.t-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.t-tabs input { margin-left: auto; }

/* 一组（一个品类 或 一条别名）*/
.dict-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.dict-row:last-child { border-bottom: 0; }
.dict-row.head { padding: 8px 4px; color: var(--soft); font-size: 10px; letter-spacing: .06em; }

.dict-main { min-width: 0; }

.dict-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dict-title b { font-size: 14px; color: var(--ink); }
.dict-count { color: var(--soft); font-size: 11px; }

/* 一排小圆角标签（品类里的名字 / 别名 / 基础储备）*/
.dict-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.dict-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #f7f9f8;
  color: #4a6068;
  font-size: 11px;
  line-height: 1.5;
}
/* 带"×"的（可点掉）右边留窄一点，让 × 贴着 */
.dict-chip:has(i) { padding-right: 5px; }

/* 未选中态（基础储备页里"点一下加进去"的那些）*/
.dict-chip.dim {
  background: #f2f2f2;
  color: #8d9498;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dict-chip.dim:hover { background: #e7efec; color: #3d6b5c; border-color: #b9d2c8; }

/* 标签里的删除小圆点 */
.dict-chip i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #9aa6aa;
  background: #e6ecea;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.dict-chip i:hover { color: #fff; background: #b9523b; }

.dict-more { align-self: center; color: var(--soft); font-size: 11px; }

/* 别名表的右侧操作列 */
.dict-row.split { grid-template-columns: minmax(0, 1fr) 110px; align-items: center; }
.dict-ops { display: flex; gap: 8px; justify-content: flex-end; }
.dict-ops button { padding: 7px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 别名的那一行：别名 → 标准名 */
.dict-arrow { margin: 0 8px; color: var(--soft); }

/* ── 配方 tab ─────────────────────────────────────────────
   默认折叠，点标题展开。35 道 × 每道 9 个材料 = 300 多行，
   全展开根本没法看。
*/
.recipe-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.recipe-toolbar .dict-note { flex: 1; min-width: 220px; }
.recipe-toolbar button { padding: 6px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.recipe-toolbar button.on { background: var(--green-soft); border-color: #b9d2c8; color: #3d6b5c; }

.recipe-block {
  border-bottom: 1px solid var(--line);
}
.recipe-block:last-child { border-bottom: 0; }
.recipe-block.open { background: #fbfcfb; }

.recipe-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 4px;
  cursor: pointer;
  user-select: none;
}
.recipe-head:hover { background: #f6f8f7; }
.recipe-caret { width: 12px; color: var(--soft); font-size: 11px; }
.recipe-head b { font-size: 14px; color: var(--ink); }
.recipe-head .dict-count { flex: 1; }
.recipe-head button { padding: 5px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 展开后的材料区，左侧缩进一点，视觉上从属于上面那道菜 */
.recipe-block.open .recipe-line:first-of-type { border-top: 1px solid var(--line); }
.recipe-block.open > div:not(.recipe-head) { padding-left: 22px; }

.recipe-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.recipe-line:hover { background: #f4f7f5; }

.recipe-mat {
  flex: 0 0 120px;
  font-size: 12px;
  font-weight: 700;
  color: #3f5a52;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「接受」「实际可用」这两个小标签 */
.recipe-tag {
  padding: 2px 7px;
  border-radius: 5px;
  background: #eef2f0;
  color: #7b8b88;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.recipe-tag.ok { background: var(--green-soft); color: #3d6b5c; }
.recipe-tag.warn { background: #fdf1e3; color: #9a6a25; }
.recipe-tag.used { background: #e8f3ee; color: #2f6a58; }

/* "实际可用"里的 chip：跟"接受"区分开，用绿色 */
.dict-chip.used { background: #eef6f2; border-color: #cfe3da; color: #37695a; }

@media (max-width: 650px) {
  .dict-row.split { grid-template-columns: 1fr; }
  .dict-ops { justify-content: flex-start; }
  .t-tabs input { margin-left: 0; width: 100%; }
  .recipe-mat { flex-basis: 100%; }
  .recipe-head .dict-count { flex-basis: 100%; }
  .recipe-block.open > div:not(.recipe-head) { padding-left: 6px; }
}