/* ==========================================================================
   components.css — 统一组件类（Design_System 组件层）
   ==========================================================================
   仅消费 tokens.css 中登记的设计令牌（R6.1/R6.7），不出现硬编码原始值。
   依赖加载顺序：tokens.css → base.css → layout.css → components.css。

   覆盖功能等价元素的一致组件类（R6.2）：
     .btn(+变体) · .badge · .card · .input · .select · .toggle · .table
     .tabs/.tab · .nav-group*（可折叠导航分组）· .skeleton · .empty-state
     .error-state · .toast
   所有可交互组件均带可见焦点环（--focus-ring，对相邻背景 ≥ 3:1，R6.5/R6.6）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按钮 .btn（+ 变体 / 尺寸 / 状态）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--fg-default);
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.btn:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
}

.btn:active {
  background-color: var(--bg-base);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn:disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 主操作（品牌强调色，白字 ≥ 4.5:1） */
.btn-primary {
  color: var(--accent-fg);
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-primary:active {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
}

/* 危险操作 */
.btn-danger {
  color: var(--accent-fg);
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  filter: brightness(1.08);
}

/* 次要 / 幽灵 / 文本按钮 */
.btn-secondary {
  color: var(--fg-default);
  background-color: var(--bg-surface);
  border-color: var(--border);
}

.btn-ghost {
  color: var(--fg-muted);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--bg-raised);
  color: var(--fg-default);
  border-color: transparent;
}

/* 尺寸变体 */
.btn-sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}

.btn-lg {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-lg);
}

.btn-icon {
  padding: var(--sp-2);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. 徽章 .badge（状态语义变体）
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  min-height: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--fg-muted);
  background-color: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-accent {
  color: var(--accent);
  background-color: var(--accent-muted);
  border-color: transparent;
}

.badge-success {
  color: var(--success);
  background-color: var(--success-muted);
  border-color: transparent;
}

.badge-warning {
  color: var(--warning);
  background-color: var(--warning-muted);
  border-color: transparent;
}

.badge-danger {
  color: var(--danger);
  background-color: var(--danger-muted);
  border-color: transparent;
}

.badge-info {
  color: var(--info);
  background-color: var(--info-muted);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   3. 卡片 .card
   -------------------------------------------------------------------------- */
.card {
  display: block;
  padding: var(--sp-4);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
}

.card-body {
  color: var(--fg-muted);
}

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   4. 表单控件 .input / .select / .toggle
   -------------------------------------------------------------------------- */
.input,
.select {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.input::placeholder {
  color: var(--fg-subtle);
}

.input:hover,
.select:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.input:focus-visible,
.select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--accent);
}

.input:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 校验错误态：边框转危险色（非文本图形 ≥ 3:1） */
.input.invalid,
.select.invalid {
  border-color: var(--danger);
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-subtle) 50%),
                    linear-gradient(135deg, var(--fg-subtle) 50%, transparent 50%);
  background-position: calc(100% - var(--sp-4)) center, calc(100% - var(--sp-3)) center;
  background-size: var(--sp-1) var(--sp-1), var(--sp-1) var(--sp-1);
  background-repeat: no-repeat;
  padding-right: var(--sp-7);
}

/* 表单字段标签与说明 */
.field {
  display: block;
  margin-bottom: var(--sp-3);
}

.field-label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

.field-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

.field-error {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--danger);
}

/* 开关 .toggle（基于 checkbox 的滑块；轨道/滑块对底 ≥ 3:1） */
.toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: calc(var(--sp-8) + var(--sp-2));
  height: var(--sp-5);
  cursor: pointer;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.toggle-thumb {
  position: absolute;
  top: 50%;
  left: var(--sp-1);
  width: calc(var(--sp-3) + 1px);
  height: calc(var(--sp-3) + 1px);
  transform: translateY(-50%);
  background-color: var(--fg-muted);
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.toggle input:checked + .toggle-track {
  background-color: var(--accent);
  border-color: var(--accent);
}

.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translate(calc(var(--sp-5) - 1px), -50%);
  background-color: var(--accent-fg);
}

.toggle input:focus-visible + .toggle-track {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   5. 表格 .table
   -------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  color: var(--fg-default);
}

.table th,
.table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
}

.table th {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background-color: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}

.table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.table tbody tr:hover {
  background-color: var(--bg-surface);
}

.table td {
  color: var(--fg-muted);
}

/* 紧凑表格 */
.table-compact th,
.table-compact td {
  padding: var(--sp-1) var(--sp-2);
}

/* --------------------------------------------------------------------------
   6. 标签页 .tabs / .tab（Section_Tab 等页内分区）
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.tab:hover {
  color: var(--fg-default);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   7. 可折叠导航分组 .nav-group*（Primary_Navigation 使用）
   折叠/展开过渡使用 --dur-base = 300ms（R3.1）。
   -------------------------------------------------------------------------- */
.nav-group {
  margin-bottom: var(--sp-2);
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.nav-group-header:hover {
  background-color: var(--bg-raised);
}

.nav-group-header:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.nav-group-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-group-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--fg-subtle);
  transition: transform var(--dur-base) var(--ease-standard);
}

/* 折叠时箭头旋转，给出状态指示符（R3.1）。
   chevron 是 .nav-group-header 的后代，状态由 header 的 aria-expanded 驱动。 */
.nav-group-header[aria-expanded="false"] .nav-group-chevron {
  transform: rotate(-90deg);
}

/* 展开内容：用 grid-template-rows 0fr→1fr 平滑折叠（R3.1，300ms）。
   关键：折叠技巧要求 grid 只有“单一子元素”才能整体收起。导航条目有多个，
   故在 index.html 用 .nav-group-items-inner 把它们包成单一子元素；外层 grid
   对该唯一子元素做 1fr↔0fr 过渡，任意数量条目都能完整收起、不留空白。 */
.nav-group-items {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-standard);
}

/* 折叠态：唯一子元素行高归零；overflow:hidden 将其裁剪为 0 高度（不留空白）。
   条目的键盘不可聚焦由 index.html 的 :tabindex="-1" 绑定保证（R3.2）。 */
.nav-group-items.collapsed {
  grid-template-rows: 0fr;
}

/* 单一内层容器（grid 的唯一子元素）：min-height:0 允许其被压缩到 0，
   overflow:hidden 在折叠时裁掉内部条目。 */
.nav-group-items-inner {
  min-height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. 骨架屏 .skeleton（加载占位）
   -------------------------------------------------------------------------- */
.skeleton {
  display: block;
  min-height: var(--sp-4);
  background-color: var(--bg-raised);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(
    90deg,
    var(--bg-raised) 0%,
    var(--bg-surface) 50%,
    var(--bg-raised) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--dur-base) var(--ease-standard) infinite;
}

.skeleton-text {
  height: var(--fs-md);
  margin-bottom: var(--sp-2);
}

.skeleton-title {
  height: var(--fs-xl);
  width: 40%;
  margin-bottom: var(--sp-3);
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   9. 空状态 .empty-state / 错误状态 .error-state（统一异步状态机视觉，R8.2）
   -------------------------------------------------------------------------- */
.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}

.empty-state-icon,
.error-state-icon {
  color: var(--fg-subtle);
}

.error-state-icon {
  color: var(--danger);
}

.empty-state-title,
.error-state-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
}

.empty-state-message,
.error-state-message {
  max-width: 420px;
  font-size: var(--fs-md);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   10. Toast 通知 .toast（类型变体 + 进出动效）
   定位由 layout.css 的 .toast-container 负责；此处为单条样式。
   -------------------------------------------------------------------------- */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  animation: toast-in var(--dur-base) var(--ease-out);
}

.toast-success { border-left-color: var(--success); }
.toast-warning { border-left-color: var(--warning); }
.toast-danger,
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--info); }

.toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.toast-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
}

.toast-message {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  word-break: break-word;
}

.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-5);
  height: var(--sp-5);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--fg-subtle);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.toast-close:hover {
  color: var(--fg-default);
  background-color: var(--bg-surface);
}

.toast-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* 移除中：淡出滑出 */
.toast-removing {
  animation: toast-out var(--dur-base) var(--ease-standard) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(var(--sp-6)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--sp-6)); }
}