/* 系统 · 数据字典（#/system/dictionary · 两级页面 v0.6.1）
 * 主色 #3B82F6 · 双端断点 768px · 约定：模块样式独立成文件，不堆进 app.css
 *
 * 🔴 v0.6.1 的形态变化（改之前先读，别把 chip 那套搬回来）
 *   一级页 = 字段**列表行**（`.dt-row`）—— 11 行固定高度，与取值数量无关
 *   二级页 = 取值**整行**（`.dt-item`）—— 值 + 备注 + 右侧「改名 / 停用」
 *   原来是 chip（`.dt-chip`）平铺：横排元素里塞值+备注+4 个按钮，手机端一行只放得下
 *   一个；现在值左、操作右，一行装一条。
 */

.dt-loading,
.dt-err { padding: 18px 4px; color: var(--text-3); font-size: var(--fs-base); }
.dt-err { color: var(--danger); }

/* 顶部说明条（两级页共用） */
.dt-tool {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 14px; font-size: var(--fs-base); color: var(--text-3);
}
.dt-tool-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt-sum b { color: var(--text-2); font-weight: 600; }
.dt-hint a, .dt-hint b { color: var(--text-2); font-weight: 600; }
.dt-hint a { color: var(--brand); }
.dt-back { color: var(--brand); text-decoration: none; white-space: nowrap; }
.dt-back:hover { text-decoration: underline; }

/* 搜索框：二级页里 300+ 个职位靠翻是翻不到的，只能靠搜 */
.dt-search {
  width: 200px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 9px; font-size: var(--fs-base); font-family: inherit; color: var(--text);
  background: var(--card);
}
.dt-search:focus { border-color: var(--brand); }
.dt-hit b { color: var(--text-2); font-weight: 600; }

/* ---------------- 一级页：字段列表行 ---------------- */

.dt-rows { display: flex; flex-direction: column; }
.dt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.dt-row:last-child { border-bottom: 0; }
.dt-row:hover { background: var(--line-2); }
.dt-row.off { opacity: .6; }
.dt-row-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.dt-row-tags { display: flex; align-items: center; gap: 8px; flex: none; }
.dt-caret { color: var(--text-3); flex: none; font-size: var(--fs-md); line-height: 1; }

.dt-key-label { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.dt-key-code {
  font-size: var(--fs-sm); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.dt-tag { font-size: var(--fs-sm); padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.dt-tag.edit { background: var(--brand-weak); color: var(--brand-dark); }
.dt-tag.ro { background: var(--line-2); color: var(--text-3); }
/* 「自定义」= 业务方在页面上自己建的字段（内置字段不带这个标记） */
.dt-tag.own { background: var(--warn-weak); color: var(--warn); }
.dt-count { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }

/* ---------------- 二级页：取值行 ---------------- */

.dt-items { display: flex; flex-direction: column; }
.dt-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.dt-item:last-child { border-bottom: 0; }
.dt-item-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
/* 行内操作位：原来 gap 2px —— 「改名」和「停用」两颗**同色同号**的小按钮贴在一起，
   用户 2026-10-13 实测时点错的就是它们。现在 8px + 中间一道竖线（.dt-opsep），
   并给「停用」上了语义色（.dt-ic.warn），不再靠读两个汉字去分辨。 */
.dt-item-ops { display: flex; align-items: center; gap: 8px; flex: none; }
/* .act-sep 的**紧凑版**：行内按钮只有 11.5px 字号，16px 高的竖线在这儿显得突兀，
   而且行内空间金贵（手机 390px），所以短 2px、且不吃 margin（间距全靠 gap:8px）。 */
.dt-opsep { width: 1px; height: 14px; background: #D5D9E0; flex: none; }
.dt-v {
  font-size: var(--fs-md); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
/* 备注：装的是**数据**不是口径文案。超长省略，全文在 title（row 里只让位不换行） */
.dt-r {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--text-3);
}
.dt-item.locked .dt-r { color: var(--warn); }
.dt-item.off { opacity: .6; }
.dt-item.off .dt-v { text-decoration: line-through; }
.dt-item.locked { background: var(--warn-weak); }
.dt-item.editing { padding: 6px 4px; gap: 6px; }
.dt-item.editing .dt-edit-input,
.dt-item.editing .dt-edit-remark { flex: 1 1 0; min-width: 0; }

/* 「展开全部 N」/「收起」：不参与样式，只把超长列表压到一行 */
.dt-more {
  margin-top: 10px;
  border: 1px dashed var(--line); background: transparent; cursor: pointer;
  color: var(--text-3); font-size: var(--fs-sm); font-family: inherit;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.dt-more:hover { border-color: var(--brand); color: var(--brand); }
.dt-more b { font-weight: 600; }

.dt-badge {
  font-size: var(--fs-xs); padding: 0 6px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--text-3); color: #fff;
}
.dt-lock {
  font-size: var(--fs-xs); padding: 0 6px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--warn); color: #fff; cursor: help;
}

/* 行内小操作按钮（改名 / 写备注 / 停用 / 启用 / 存 / 取消） */
.dt-ic {
  border: 0; background: transparent; color: var(--text-3);
  font-size: var(--fs-sm); font-family: inherit; line-height: 1;
  padding: 3px 5px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
}
.dt-ic:hover { background: var(--line-2); color: var(--brand); }
.dt-ic.ok { color: var(--ok); }
.dt-ic.ok:hover { color: var(--ok); }
/* 停用 = 琥珀。⚠️ 必须连 :hover 一起覆盖 —— 否则鼠标一移上去就变回基础款的品牌蓝，
   等于白上了色（`.dt-ic.warn:hover` 的特异性高于 `.dt-ic:hover`，能压住）。 */
.dt-ic.warn { color: var(--warn); }
.dt-ic.warn:hover { background: var(--warn-weak); color: var(--warn); }
/* `.dt-empty` 已随 B4e 五态统一删除（改用公共 `.empty[data-ui-state]`），原规则：
   font-size: var(--fs-base); color: var(--text-3); */

.dt-edit-input,
.dt-edit-remark,
.dt-add-input,
.dt-add-remark {
  border: 1px solid var(--brand); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: var(--fs-base); font-family: inherit; color: var(--text);
  background: var(--card);
}
.dt-add-input { width: 200px; }
.dt-add-remark { width: 170px; }
/* 锁定值：取值只读（被业务逻辑引用，改了会静默改变业务含义），只有备注可写 */
.dt-edit-input[readonly] {
  border-color: var(--line); background: var(--line-2); color: var(--text-3);
  cursor: not-allowed;
}

/* 说明与新增行 */
.dt-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; }
.dt-add { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 轻提示（与其它模块同款；类名已登记进 ui.js: clearToasts） */

/* ---------------- 手机端 ---------------- */
@media (max-width: 768px) {
  .dt-tool { flex-direction: column; align-items: stretch; gap: 8px; }
  .dt-tool-l { flex-direction: column; align-items: stretch; gap: 8px; }
  .dt-search { width: 100%; }
  .dt-back { align-self: flex-start; }
  /* 390px 下「名称 + er.xxx_yyy + 标记 + 条数 + ›」放不下一行：
     键名是**给开发看的**技术串，二级页里也有（且可复制），列表行优先保住名称与标记 */
  .dt-key-code { display: none; }
  .dt-row { padding: 12px 4px; }
  .dt-item { padding: 11px 4px; }
  .dt-add-input, .dt-add-remark { width: 100%; }
  .dt-item.editing { flex-wrap: wrap; }
}