/*
 * design/themes/fluent-form.css —— Fluent 风格表单皮肤
 * inspired by Microsoft Fluent 2（SharePoint / Office 语系），非官方实现；
 * 与 Microsoft 无关，全部样式为本仓库手写仿制。
 * 关键仿制特征：Segoe UI 字族、#faf9f8 画布、32px 控件、聚焦下划线（无外圈光晕）、
 * 8px 卡片、主色 #0f6cbd。
 */
body[data-style="fluent"] {
  --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --bg: #faf9f8;
  --surface: #ffffff;
  --border: #e0e0e0;
  --ink: #242424;
  --ink-2: #616161;
  --ink-3: #979797;
  --accent: #0f6cbd;
  --accent-ink: #ffffff;
  --danger: #b10e1c;
  --danger-ring: rgba(177, 14, 28, .22);
  --ctl-h: 32px;
  --btn-h: 32px;
  --ctl-radius: 4px;
  --panel-radius: 8px;
  --focus-ring: rgba(15, 108, 189, .18);
  --opt-hover: #f5f5f5;
  --filter-row-bg: #fafafa;
  --chip-radius: 2px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 8px 16px rgba(0, 0, 0, .14);
}

/* ---------- 按钮 ---------- */
.ui-btn-primary { background: var(--accent); color: var(--accent-ink); }
.ui-btn-primary:hover { background: #115ea3; }
.ui-btn-secondary { background: var(--surface); color: var(--ink); border-color: #d1d1d1; }
.ui-btn-secondary:hover { background: #f5f5f5; }

/* ---------- 控件：32px，聚焦走底部强调线（统一控件高的自定规则） ---------- */
.f-form input[type="text"], .f-form input[type="number"], .f-form input[type="date"], .f-textarea,
.f-form .dd-body, .tier-row input, .q-fcell input, .ui-in, .ui-in-num {
  transition: border-color .1s ease;
}
.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 1px 0 0 var(--accent); /* Fluent 式底部强调线 */
}

/* ---------- 表格 ---------- */
.q-table th, .q-table td { border-bottom: 1px solid #f0f0f0; }
.q-table tbody tr:hover td { background: #f8f8f8; }
.q-head-row th { color: var(--ink); background: #ffffff; }

/* ---------- 徽标（subtle 底三态） ---------- */
.q-badge.is-draft { background: #f0f0f0; color: #424242; }
.q-badge.is-sent { background: #dff6dd; color: #0e700e; }
.q-badge.is-expired { background: #fff4ce; color: #8a6116; }

/* ---------- 卡片与弹窗 ---------- */
.ui-panel { border-color: #edebe9; }
.ui-modal-head { border-bottom-color: #edebe9; }
.ui-modal-foot { border-top-color: #edebe9; background: #ffffff; }

/* ---------- 下拉 ---------- */
.dd-body { border-color: #616161; } /* 输入框边框偏深是该语言的仿制特征 */
.dd-panel { border-color: #edebe9; }
.dd-opt.is-sel { background: #f3f9fd; }
.dd-tri { color: var(--ink-2); }