/* 通用表单（数据表页的「＋新增」「编辑整条」与视图标签）。只用 tokens.css 里的语义变量。 */

.jf-add { border-color: var(--green); color: var(--green); font-weight: 600; }
.jf-add:hover { background: var(--green-soft); }

.jf-views { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 16px 8px; border-bottom: 1px solid var(--line); }
.jf-views button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--radius-full);
  padding: 3px 12px; font-size: 12px; cursor: pointer; }
.jf-views button:hover { border-color: var(--green); color: var(--green); }
.jf-views button.on { background: var(--green); border-color: var(--green); color: var(--text-on-accent); }

.jf-edit { width: auto !important; padding: 0 8px; border: 1px solid var(--green) !important; color: var(--green) !important;
  background: var(--surface); border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; }

.jf-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(96vw, 640px); background: var(--surface); z-index: 60;
  border-left: 1px solid var(--line); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.jf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line); }
.jf-head b { display: block; font-size: 15px; color: var(--ink); }
.jf-head small { color: var(--muted); font-size: 11px; }
.jf-x { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer; font-size: 15px; }
.jf-body { flex: 1; overflow: auto; padding: 6px 16px 24px; }

/* 打开方式跟数据表页一致（老板 10-07）：小窗居中 / 靠边 / 全屏；面板宽过 680px 字段自动分栏（容器查询） */
.jf-panel { container-type: inline-size; }
.jf-panel.mode-modal { top: 4vh; bottom: 4vh; right: auto; left: 50%; transform: translateX(-50%); width: min(94vw, 960px);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 0 0 100vmax rgba(20, 35, 29, .38), var(--shadow-3); }
.jf-panel.mode-full { left: 0; width: auto; border-left: 0; }
@container (min-width: 680px) {
  .jf-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 20px; align-content: start; }
  .jf-sep, .jf-sub, .jf-field:has(textarea), .jf-field:has(.jf-rich), .jf-field:has(.jf-files), .jf-field:has(.jf-choices) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .jf-panel.mode-modal { top: 0; bottom: 0; left: 0; transform: none; width: 100vw; border-radius: 0; border: 0; }
}

.jf-field { padding: 9px 0; border-bottom: 1px solid var(--line); }
.jf-field > label, .jf-cell > label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2);
  margin-bottom: 5px; }
.jf-req { color: var(--danger-fg); font-style: normal; }
.jf-tag { font-style: normal; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-full);
  padding: 0 6px; margin-left: 4px; }
.jf-field input[type=text], .jf-field input[type=search], .jf-field input[type=date], .jf-field select, .jf-field textarea,
.jf-cell input[type=text], .jf-cell input[type=search], .jf-cell input[type=date], .jf-cell select, .jf-cell textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 13px; color: var(--ink); background: var(--surface); }
.jf-field textarea, .jf-cell textarea { resize: vertical; line-height: 1.6; }
.jf-rich { min-height: 72px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px;
  font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.jf-rich img { max-width: 100%; }
.jf-choices { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink); }
.jf-choices label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.jf-value { font-size: 13px; color: var(--ink); line-height: 1.6; min-height: 20px; overflow-wrap: anywhere; }
.jf-ro .jf-value { color: var(--ink-2); }
.jf-empty { color: var(--muted); font-size: 12px; margin: 0; }
.jf-why { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.jf-sep { margin: 14px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
.jf-thumb { max-height: 64px; margin: 2px 4px 2px 0; border-radius: var(--radius-sm); }

.jf-picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jf-picked input { flex: 1; min-width: 140px; }
.jf-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--green-soft); color: var(--ink);
  border-radius: var(--radius-full); padding: 2px 4px 2px 10px; font-size: 12px; }
.jf-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.jf-pop { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow-2); max-height: 240px; overflow: auto; }
.jf-pop button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); padding: 7px 10px; font-size: 13px; color: var(--ink); cursor: pointer; }
.jf-pop button:hover { background: var(--surface-hover); }
.jf-pop small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.jf-pop .jf-empty { padding: 8px 10px; }

.jf-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jf-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 3px 6px; font-size: 12px; color: var(--ink-2); max-width: 100%; }
.jf-file img { height: 40px; border-radius: var(--radius-sm); }
.jf-file button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.jf-upload { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12px;
  color: var(--blue); cursor: pointer; }

.jf-sub > label { font-weight: 600; }
.jf-row { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 6px 0; padding: 6px 10px 10px; }
.jf-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.jf-row-head button { border: 0; background: none; color: var(--danger-fg); cursor: pointer; font-size: 12px; }
.jf-row-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }

.jf-msg { padding: 8px 16px; font-size: 12px; line-height: 1.7; border-top: 1px solid var(--line); color: var(--ink-2); }
.jf-msg[data-kind="warn"] { background: var(--warning-bg); color: var(--warning-fg); }
.jf-msg[data-kind="bad"] { background: var(--warning-bg); color: var(--danger-fg); }
.jf-foot { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.jf-foot small { color: var(--muted); font-size: 11px; margin-left: auto; }
.jf-foot .dt-btn-primary:disabled { opacity: .5; cursor: default; }

/* 本系统自建表（shared/local-form.js）：详情按钮栏里的「删除」悬停变红，别和别的灰按钮一个样 */
.dt-act.lf-del:hover { border-color: var(--danger-fg); color: var(--danger-fg); }

/* 成员格选人（10-10） */
.jf-people { position: relative; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--surface); }
.jf-people input { flex: 1; min-width: 120px; border: 0; outline: none; background: none; padding: 4px; }
.jf-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; }
.jf-chip button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 2px; }
.jf-people-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 2px; max-height: 240px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent); }
.jf-people-list button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; cursor: pointer; }
.jf-people-list button:hover { background: var(--surface-hover); }
.jf-people-list small { color: var(--muted); }