/* ==========================================================================
   components-form.css  |  「6」v7.0 组件层（表单 / 按钮 / 徽标 / 输入框）
   --------------------------------------------------------------------------
   components.css 拆分件之一（与 components-feedback.css 同源，base.html 引入顺序不变）。
   只引用 semantic/component Token，零硬编码 hex。焦点环统一
   box-shadow: 0 0 0 3px var(--focus-ring)。
   ========================================================================== */

/* [hidden] 必须战胜组件 display 类（如 .badge 的 inline-flex），否则
   JS 切 hidden 属性不生效——HTML 标准行为，全局兜底 */
[hidden] { display: none !important; }

/* ---- 图标三档（16/20/24，禁 18/22；createIcons 后 class 保留在 svg 上）---- */
.i16 { width: 16px; height: 16px; }
.i16 svg, svg.i16 { width: 16px; height: 16px; stroke-width: 1.75; }  /* 16px 档视觉均衡 */
.i20 { width: 20px; height: 20px; }
.i20 svg, svg.i20 { width: 20px; height: 20px; }
.i24 { width: 24px; height: 24px; }
.i24 svg, svg.i24 { width: 24px; height: 24px; }
svg.lucide { display: block; flex-shrink: 0; }

/* ---- 按钮（3.1：primary/secondary/ghost/danger/icon-only）---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 32px; padding: var(--space-2) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-body);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-warm); color: var(--meta);
  border-color: var(--border); cursor: not-allowed; pointer-events: none;
}
.btn-primary { background: var(--accent-solid); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-solid-hover); }
.btn-primary:active { background: var(--accent-solid-active); }
.btn-secondary { background: var(--surface); color: var(--fg-2); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-warm); color: var(--fg); }
.btn-secondary:active { background: var(--surface-warm); border-color: var(--muted); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-warm); color: var(--fg); }
.btn-ghost:active { background: var(--surface-warm); color: var(--fg); }
.btn-danger { background: var(--danger-solid); color: var(--accent-on); }
.btn-danger:hover { background: var(--danger-solid-hover); }
.btn-danger:active { background: var(--danger-solid-active); }
.btn-sm { min-height: 28px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
/* icon-only：32px 视觉；移动端由 shell.css 提升到 44px 触控 */
.btn-icon {
  min-height: 32px; width: 32px; padding: 0;
  background: transparent; color: var(--muted); border-color: transparent;
}
.btn-icon:hover { background: var(--surface-warm); color: var(--fg); }
.btn-icon:active { background: var(--surface-warm); color: var(--fg); }
.btn-icon svg { width: 20px; height: 20px; }
/* Loading：保留变体底色 + spinner + aria-busy + 宽度锁定 */
.btn[aria-busy="true"] { pointer-events: none; position: relative; }
.btn-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent-text);
  border-radius: var(--radius-pill);
  animation: btn-spin 0.7s var(--ease-linear) infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Success：短暂切换（「已复制」类确认，1.2s 复原由 JS 控制）*/
.btn.is_success { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
.btn.is_success svg { color: var(--success-text); }

/* ---- 纯图标按钮 tooltip（data-tip，hover/focus 可见）---- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-2xs); font-weight: var(--weight-regular); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
  z-index: var(--z-dropdown);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* ---- kbd 徽标（命令面板 / 顶栏快捷键提示）---- */
.kbd {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--surface-warm); color: var(--muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-tight);
}

/* ---- 徽标（3.3：neutral/accent/success/warn/danger）---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: var(--leading-tight);
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-neutral { background: var(--surface-warm); color: var(--fg-2); border: 1px solid var(--border); }
.badge-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); }

/* ---- 输入框（3.2：label 可见，helper 具体描述）---- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); }
.input {
  width: 100%; min-height: 32px; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.input::placeholder { color: var(--meta); }
.input:hover { border-color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.input:disabled { background: var(--surface-warm); color: var(--meta); cursor: not-allowed; }
.field-helper { font-size: var(--text-sm); color: var(--muted); }
.field-error .input { border-color: var(--danger); }
.field-error .input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }
.field-error .field-helper { color: var(--danger-text); display: inline-flex; align-items: center; gap: var(--space-1); }
.field-error .field-helper svg { width: 14px; height: 14px; }

/* ---- 焦点环补强（组件 hover 会覆盖全局 :focus-visible，此处按组件重申）---- */
.btn:focus-visible, .btn-icon:focus-visible, .nav-item:focus-visible,
.tabbar-item:focus-visible, .cmdk-item:focus-visible, .input:focus-visible,
.topbar-search:focus-visible, .menu-item:focus-visible, .brand:focus-visible,
.data-row-click:focus-visible, .skip-link:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- 存量修饰符兼容（既有模板 class="btn ghost|sm|danger" → 新变体同款）----
   特异性 0,2,0 且本文件后加载，覆盖 style.css 旧修饰符；不清洗存量模板。 */
.btn.ghost { background: transparent; color: var(--fg-2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-warm); color: var(--fg); }
.btn.ghost:active { background: var(--surface-warm); color: var(--fg); }
.btn.sm { min-height: 28px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn.danger { background: var(--danger-solid); color: var(--accent-on); }
.btn.danger:hover { background: var(--danger-solid-hover); }
.btn.danger:active { background: var(--danger-solid-active); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }