/*
 * VBUY AI Workbench · 表单填写状态（v10.87）
 *
 * 解决什么问题
 *   报价单那种一屏 30 多个格子的长表单，"哪些填过了、哪些还空着"扫一眼看不出来：
 *   所有框长得一样，标签和值的颜色也差不多，只能一行行读过去。
 *
 * 怎么用（三步，任何表单都能用）
 *   1. 给表单（或包住它的面板）挂 class="field-states"；
 *   2. 输入框不用手写任何东西 —— 引入 public/field-state.js，调
 *      applyFieldStates(root, { aiKeys, touchedKeys }) 自动打标记；
 *   3. AI 填过的格子想标成"待核对"，把那些字段的 key 放进 aiKeys。
 *
 * 两条状态（可以只用一个）
 *   .is-filled  有值                → 浅蓝底 + 左侧主色条
 *   .is-ai      值是 AI 填的且没被人动过 → 琥珀底 + 左侧琥珀条（盖在 .is-filled 上）
 *
 * 规矩（别改错）
 *   - 只用底色 + 左侧色条 + 边框色表示状态，**不改尺寸、不动布局**，
 *     所以套到任何表单上都不会把版式挤坏；
 *   - 左侧那条 3px 色条不能省：只有浅底的话会被误读成"这一格被选中了"，
 *     加了色条读起来才是"这一格有内容"；
 *   - 字段名不浅于 var(--muted)：再浅就掉到对比度 4.5:1 以下了；
 *   - 只在挂了 .field-states 的表单里生效，不会波及其它页面。
 */

.field-states label > span,
.field-states .field > span {
  color: var(--field-label-color);
}

.field-states input,
.field-states select,
.field-states textarea {
  color: var(--field-value-color);
  font-weight: var(--field-value-weight);
}

.field-states input::placeholder,
.field-states textarea::placeholder {
  color: var(--field-placeholder-color);
  font-weight: var(--fw-normal);
}

/* 有值 —— 一列"实心块"，扫一眼就知道填到哪了 */
.field-states input.is-filled,
.field-states select.is-filled,
.field-states textarea.is-filled {
  background: var(--field-filled-bg);
  border-color: var(--field-filled-line);
  box-shadow: inset 3px 0 0 var(--field-filled-bar);
}

/* AI 填的、人还没核对 —— 换另一种色调（写在后面，所以盖得住 .is-filled） */
.field-states input.is-ai,
.field-states select.is-ai,
.field-states textarea.is-ai {
  background: var(--field-ai-bg);
  border-color: var(--field-ai-line);
  box-shadow: inset 3px 0 0 var(--field-ai-bar);
}

/* 聚焦时状态色要让位：正在改的那一格必须一眼看出是"当前格子" */
.field-states input.is-filled:focus,
.field-states select.is-filled:focus,
.field-states textarea.is-filled:focus,
.field-states input.is-ai:focus,
.field-states select.is-ai:focus,
.field-states textarea.is-ai:focus {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand), 0 0 0 3px rgba(29, 111, 224, .14);
}

/* 只读/禁用就别再花哨了 */
.field-states input:disabled,
.field-states select:disabled,
.field-states textarea:disabled {
  background: var(--canvas);
  box-shadow: none;
}