/*
 * design/themes/salesforce-form.css —— Lightning 风格表单皮肤
 * inspired by Salesforce Lightning Design System (SLDS 2)，非官方实现；
 * 与 Salesforce 无关，全部样式为本仓库手写仿制。
 * 关键仿制特征：#f3f2f2 画布、白卡片 + 细边框、品牌 #0176d3、
 * 12px 大写表头、32px 控件、只读走静态文本。官方字体未随本仓库分发，回退 Segoe UI。
 */
body[data-style="salesforce"] {
  --font: "Salesforce Sans", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --bg: #f3f2f2;
  --surface: #ffffff;
  --border: #dddbda;
  --ink: #181818;
  --ink-2: #5e5e5e;
  --ink-3: #939393;
  --accent: #0176d3;
  --accent-ink: #ffffff;
  --danger: #ea001e;
  --danger-ring: rgba(234, 0, 30, .2);
  --ctl-h: 32px;
  --btn-h: 32px;
  --ctl-radius: 4px;
  --panel-radius: 4px;
  --focus-ring: rgba(1, 118, 211, .2);
  --opt-hover: #f3f3f3;
  --filter-row-bg: #fafaf9;
  --chip-radius: 15rem;
  --shadow-1: 0 2px 4px rgba(0, 0, 0, .07);
  --shadow-2: 0 10px 24px rgba(0, 0, 0, .16);
}

/* ---------- 按钮（brand / neutral） ---------- */
.ui-btn-primary { background: var(--accent); color: var(--accent-ink); }
.ui-btn-primary:hover { background: #025fac; }
.ui-btn-secondary { background: var(--surface); color: var(--ink); border-color: #c9c7c5; }
.ui-btn-secondary:hover { background: #f3f3f3; }

/* ---------- 控件（深边框 + 聚焦外圈阴影） ---------- */
.f-form input:focus, .f-form input:focus-visible, .f-textarea:focus, .tier-row input:focus,
.dd-body:focus-visible, .q-fcell input:focus, .ui-in:focus, .ui-in:focus-visible, .ui-in-num:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 3px var(--accent); /* 聚焦光环 */
}
.f-form input, .f-form .dd-body, .tier-row input, .q-fcell input, .ui-in, .ui-in-num { border-color: #c9c7c5; }

/* ---------- 表格（表头大写小字） ---------- */
.q-head-row th { color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.q-table th, .q-table td { border-bottom: 1px solid #f0f0f0; }
.q-table tbody tr:hover td { background: #f4f6fe; }
.q-filter-row th { background: #fafaf9; }

/* ---------- 徽标（badge 胶囊三态） ---------- */
.q-badge { border-radius: 15rem; }
.q-badge.is-draft { background: #f0f0f0; color: #444; }
.q-badge.is-sent { background: #ebf7ee; color: #2e844a; }
.q-badge.is-expired { background: #fdf7ef; color: #8f4700; }

/* ---------- 卡片与弹窗 ---------- */
.ui-panel { border-color: #dddbda; }
.ui-panel-head h3 { font-weight: 700; }
.ui-modal { border-radius: 8px; }
.ui-modal-head { background: var(--surface); border-bottom-color: #ececec; }
.ui-modal-foot { background: #f3f2f2; border-top-color: #ececec; }
.ui-modal-title { font-weight: 700; }

/* ---------- 下拉 ---------- */
.dd-panel { border-color: #e5e5e5; }
.dd-opt.is-sel { background: #eff1fd; }