/* ════════════════════════════════════════════════════════
   CFJ-LINK 管理后台 — 通用组件（依赖 tokens.css）
   卡片 / 按钮 / 输入 / 表格 / 徽章 / 统计卡 / 页头 / 抽屉 等。
   类名与既有页面（provider / database / customers / rbac）保持兼容。
   ════════════════════════════════════════════════════════ */

/* ── 页头（页面标题 + 图标 + 副标题） ── */
.page { display: block; }
.page-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: var(--sp-lg);
}
.page-head-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
}
.page-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text); letter-spacing: -.01em; }
.page-sub   { margin: 3px 0 0; font-size: var(--fs-md); color: var(--text-2); }

/* ── 卡片 ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-md);
}
.card--error { border-color: var(--danger); border-left: 4px solid var(--danger); }
.card--empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px var(--sp-lg); }
.empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-2); color: var(--muted);
}
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--text); margin: 0; }
.card-sub   { font-size: var(--fs-sm); color: var(--text-2); margin: 4px 0 14px; line-height: var(--lh-snug); }
.card-sub.small { font-size: var(--fs-xs); color: var(--muted); }
.card-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.card-title-group { display: inline-flex; align-items: center; gap: 9px; }
.card-title-icon  { display: inline-flex; color: var(--accent); }

/* ── 统计卡网格（Stripe 式） ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-md) 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
}
.stat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: var(--fw-semi);
}
.stat-badge--idle    { background: var(--bg-2); color: var(--muted); }
.stat-badge--neutral { background: var(--accent-soft); color: var(--accent-deep); }
.stat-badge--ok      { background: var(--safe-bg); color: var(--safe-deep); }
.stat-badge--warn    { background: var(--warn-bg); color: var(--warn-deep); }
.stat-badge--down    { background: var(--danger-bg); color: var(--danger-deep); }
.stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1.05; letter-spacing: -.02em; }
.stat-label { margin-top: 6px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.stat-hint  { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }

/* ── 仪表盘两列（系统信息 + 快捷操作） ── */
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
@media (max-width: 760px) { .dash-cols { grid-template-columns: 1fr; } }

.spec-list { margin: 0; display: flex; flex-direction: column; }
.spec-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: 0; }
.spec-key { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
.spec-val { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); text-align: right; word-break: break-word; }

.quick-links { display: flex; flex-direction: column; gap: 8px; }
.quick-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.quick-link:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; transform: translateX(2px); }
.quick-link-icon { display: inline-flex; color: var(--accent); }
.quick-link-text { flex: 1; }
.quick-link-arrow { display: inline-flex; color: var(--muted); }
.quick-link:hover .quick-link-arrow { color: var(--accent); }

/* ── 空状态行（如「无待确认订单」） ── */
.empty-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 0; color: var(--safe-deep); font-size: var(--fs-md); font-weight: var(--fw-medium);
}
.empty-row-icon { display: inline-flex; color: var(--safe); }

/* ── 仪表盘：订单状态徽章组 ── */
.muted-line { color: var(--muted); font-size: var(--fs-sm); padding: 18px 0; text-align: center; }
.status-badges { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.status-chip-label { color: var(--text-2); }
.status-chip-count { font-weight: var(--fw-bold); color: var(--text); }
.status-chip--ok    { border-color: var(--safe);   background: var(--safe-bg); }
.status-chip--ok    .status-chip-count { color: var(--safe-deep); }
.status-chip--warn  { border-color: var(--warn);   background: var(--warn-bg); }
.status-chip--warn  .status-chip-count { color: var(--warn-deep); }
.status-chip--down  { border-color: var(--danger); background: var(--danger-bg); }
.status-chip--down  .status-chip-count { color: var(--danger-deep); }
.status-chip--idle  { background: var(--bg-2); }

/* ── 仪表盘：近 7 日营收迷你柱状图 ── */
.spark-wrap { min-height: 120px; }
.spark-svg { width: 100%; }
.spark-svg svg { display: block; }
.spark-caption { margin-top: 6px; text-align: right; color: var(--muted); }

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: var(--fw-semi); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform .05s, opacity var(--transition-fast);
  margin-right: 6px;
}
.btn:last-child { margin-right: 0; }
.btn:hover:not(:disabled) { background: var(--accent-deep); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--secondary { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--danger-deep); }
.btn--small  { padding: 5px 11px; font-size: var(--fs-sm); }
.btn--icon .btn-ico { display: inline-flex; align-items: center; }

/* ── 输入 ── */
.input, .textarea, .select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: var(--fs-md); font-family: inherit;
  background: var(--surface); color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.input.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.input-row { margin-bottom: 14px; }
.input-label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 6px; font-weight: var(--fw-medium); }
.textarea { font-family: var(--font-mono); font-size: var(--fs-sm); resize: vertical; }

/* ── 表格 ── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { background: var(--bg-2); font-weight: var(--fw-semi); color: var(--text-2); font-size: var(--fs-xs); letter-spacing: .3px; }
.table tbody tr:hover { background: var(--surface-2); }

/* ── Toast ── */
.toast-root { position: fixed; top: calc(var(--topbar-h) + 14px); right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius); background: var(--text); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-lg);
  animation: toast-in .25s var(--ease-out); pointer-events: auto; max-width: 380px;
}
.toast--success { background: var(--safe-deep); }
.toast--error   { background: var(--danger-deep); }
.toast--warn    { background: var(--warn-deep); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── KV / 字段 ── */
.kv-grid { display: grid; grid-template-columns: 200px 1fr; gap: 10px 16px; font-size: var(--fs-sm); align-items: center; }
.kv-grid dt { color: var(--muted); }
.kv-grid dd { margin: 0; color: var(--text); word-break: break-all; }

/* ── 徽章 ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: var(--fw-semi); background: var(--bg-2); color: var(--text-2);
}
.badge--active { background: var(--accent); color: #fff; }
.badge--ok     { background: var(--safe-bg); color: var(--safe-deep); }
.badge--warn   { background: var(--warn-bg); color: var(--warn-deep); }
.badge--error  { background: var(--danger-bg); color: var(--danger-deep); }
.badge--info   { background: var(--info-bg); color: var(--info); }   /* KYC 人工审核（蓝） */
.small-pad     { padding: 1px 6px; font-size: 10px; margin-left: 4px; }

/* ════════════════════════════════════════════════════════
   供应商页
   ════════════════════════════════════════════════════════ */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-md); margin-top: 8px; }
.provider-card { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-md); background: var(--surface-2); transition: border-color var(--transition-fast), background var(--transition-fast); }
.provider-card--active { border-color: var(--accent); background: var(--accent-soft); }
.provider-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.provider-card-name { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--text); }
.provider-card-desc { font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 14px; min-height: 36px; }

.cred-section { padding: var(--sp-md) 0; border-top: 1px dashed var(--border); }
.cred-section:first-of-type { border-top: 0; }
.cred-section-title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); margin: 0 0 12px; }
.cred-actions { margin-top: 8px; }
.cred-result { margin-top: 12px; }

/* 代理商管理页：行操作 / 详情操作 / 复制邀请码按钮 */
.agent-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-md); }
.agent-copy-btn { margin-left: 8px; vertical-align: middle; }
.agent-edit { margin-top: var(--sp-md); border-top: 1px dashed var(--border); }

.switch-group { display: inline-flex; gap: 8px; }
.btn--toggle { background: var(--surface); color: var(--accent); border: 1px solid var(--border-strong); }
.btn--toggle.active { background: var(--accent); color: #fff; cursor: default; border-color: var(--accent); }
.btn--toggle:disabled { opacity: .6; }
.result-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--border-strong); }
.result-box--ok    { background: var(--safe-bg); border-left-color: var(--safe); }
.result-box--error { background: var(--danger-bg); border-left-color: var(--danger); }
.result-msg { margin: 8px 0 4px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.pre-block { background: #0F1320; color: #9DE7B8; padding: 12px; border-radius: var(--radius-sm); font-size: var(--fs-xs); max-height: 240px; overflow: auto; margin: 6px 0 0; font-family: var(--font-mono); }

/* ════════════════════════════════════════════════════════
   数据库浏览页
   ════════════════════════════════════════════════════════ */
.db-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-md); min-height: 70vh; }
.db-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); max-height: 78vh; overflow-y: auto; }
.db-sidebar-title { margin: 0 0 8px; font-size: var(--fs-md); color: var(--text-2); }
.db-table-list { list-style: none; margin: 0; padding: 0; }
.db-table-item { padding: 8px 10px; cursor: pointer; border-radius: var(--radius-sm); margin-bottom: 2px; transition: background var(--transition-fast); }
.db-table-item:hover { background: var(--surface-2); }
.db-table-item.active { background: var(--accent-soft); }
.db-table-item.readonly .db-table-name { color: var(--muted); }
.db-table-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.db-table-row-count { margin-top: 2px; }

/* min-width:0 关键：grid 轨道默认 min-width:auto 会被宽表撑破，导致整页横向溢出且
   .data-table-wrap 的 overflow-x 失效。设为 0 让轨道可收缩，宽表在 wrap 内部横向滚动。 */
.db-main { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-md); box-shadow: var(--shadow-sm); }
.db-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.db-table-title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--text); margin-right: 10px; }
.db-hint { margin-left: 8px; }

/* 受限滚动视口：宽表横向、长表纵向都在卡片内部滚动，配合 sticky 表头不溢出页面。 */
.data-table-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); padding: 9px 10px; text-align: left; font-weight: var(--fw-semi); color: var(--text-2); font-size: var(--fs-xs); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; max-width: 320px; }
.data-table tbody tr:hover { background: var(--surface-2); }
.col-type { display: block; font-weight: 400; color: var(--muted); margin-top: 1px; }
.actions-col { white-space: nowrap; text-align: right; }
.encrypted-cell { color: var(--warn-deep); }

.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }

/* ── 抽屉 ── */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: var(--z-drawer); display: flex; justify-content: flex-end; animation: fade .15s; }
.drawer { width: min(560px, 100vw); background: var(--surface); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; animation: slide .2s var(--ease-out); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.drawer-head h3 { margin: 0; font-size: var(--fs-lg); }
.drawer-close { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--muted); }
.drawer-body { padding: 16px 18px; flex: 1; }
.drawer-foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); text-align: right; }

/* ── 移动端 ── */
@media (max-width: 768px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-sidebar { max-height: 40vh; }
  .kv-grid { grid-template-columns: 1fr; }
  .card { padding: var(--sp-md); }
}