/* ============================================================
   admin-unified.css — 统一组件库
   目标：消除所有 JS 页面中的 inline 样式，提供可复用的 CSS 类
   设计原则：类名遵循 BEM-like 风格，唯一来源为 tokens.css
   ============================================================ */

@import url('tokens.css');

/* ============================================================
   1. 工具类（Utilities）
   ============================================================ */

/* Flex */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1           { gap: var(--space-1); }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }
.gap-5           { gap: var(--space-5); }
.gap-6           { gap: var(--space-6); }

/* Grid */
.grid            { display: grid; }
.grid-cols-2     { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3     { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4     { grid-template-columns: repeat(4, 1fr); }

/* Spacing */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }

.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.m-0  { margin: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* Text */
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }
.text-nowrap    { white-space: nowrap; }
.text-xs        { font-size: var(--fs-xs); }
.text-sm        { font-size: var(--fs-sm); }
.text-base      { font-size: var(--fs-base); }
.text-md        { font-size: var(--fs-md); }
.text-lg        { font-size: var(--fs-lg); }
.text-xl        { font-size: var(--fs-xl); }
.text-2xl       { font-size: var(--fs-2xl); }
.fw-medium      { font-weight: var(--fw-medium); }
.fw-semibold    { font-weight: var(--fw-semibold); }
.fw-bold        { font-weight: var(--fw-bold); }
.mono           { font-family: var(--font-mono); }

/* Colors */
.c-primary  { color: var(--primary); }
.c-success  { color: var(--success); }
.c-danger   { color: var(--danger); }
.c-warning  { color: var(--warning); }
.c-orange   { color: var(--orange); }
.c-gold     { color: var(--gold); }
.c-purple   { color: var(--purple); }
.c-text-1   { color: var(--text-1); }
.c-text-2   { color: var(--text-2); }
.c-text-3   { color: var(--text-3); }
.c-inverse  { color: var(--text-inverse); }

/* Backgrounds */
.bg-primary  { background: var(--primary); }
.bg-success  { background: var(--success); }
.bg-danger   { background: var(--danger); }
.bg-warning  { background: var(--warning); }
.bg-purple   { background: var(--purple); }
.bg-card     { background: var(--bg-card); }
.bg-input    { background: var(--bg-input); }
.bg-hover    { background: var(--bg-hover); }

.bg-primary-light  { background: var(--primary-light); }
.bg-success-light  { background: var(--success-light); }
.bg-danger-light   { background: var(--danger-light); }
.bg-warning-light  { background: var(--warning-light); }
.bg-orange-light   { background: var(--orange-light); }
.bg-purple-light   { background: var(--purple-light); }
.bg-gold-light     { background: var(--gold-light); }

/* Borders & Radius */
.border     { border: 1px solid var(--border); }
.border-0   { border: none; }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-danger  { border-color: var(--danger); }
.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow    { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Cursor */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

/* Width & Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }

/* Display */
.block   { display: block; }
.inline-block { display: inline-block; }
.hidden  { display: none; }

/* Opacity */
.op-60  { opacity: 0.6; }
.op-80  { opacity: 0.8; }
.op-90  { opacity: 0.9; }

/* Transition */
.tr      { transition: var(--tr); }
.tr-slow { transition: var(--tr-slow); }

/* ============================================================
   2. 卡片组件（Card System）
   ============================================================ */

/* 基础卡片 */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: var(--tr);
}

.card-sm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* 渐变卡片 - 模式 A1 */
.card-gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--purple-light));
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: var(--tr);
}

.card-gradient:hover {
  border-color: var(--primary-border-hov);
}

/* 可交互卡片 - 模式 C1 */
.card-interactive {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: var(--tr);
}

.card-interactive:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.card-interactive-sm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: var(--tr);
}

.card-interactive-sm:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* 统计卡片 - 模式 A2 */
.stat-card {
  background: var(--primary-light);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
}

.stat-card--success {
  background: var(--success-light);
}

.stat-card--warning {
  background: var(--warning-light);
}

.stat-card--orange {
  background: var(--orange-light);
}

.stat-card-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  line-height: 1.2;
}

.stat-card-value--success { color: var(--success); }
.stat-card-value--orange  { color: var(--orange); }

.stat-card-label {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: var(--space-1);
}

/* 选中态卡片 */
.card-selected {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

/* 产品推荐卡片 */
.product-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.product-rank {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.product-rank--top3 {
  background: var(--gold);
  color: white;
}

.product-rank--other {
  background: var(--bg-card);
  color: var(--text-2);
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.product-meta {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.product-amount {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

.product-rate {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* ============================================================
   3. 头像系统（Avatar System） - 模式 B1
   ============================================================ */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.avatar--primary {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.avatar--success {
  background: linear-gradient(135deg, var(--success), #66bb6a);
  box-shadow: 0 2px 8px rgba(52,168,83,0.3);
}

.avatar--danger {
  background: linear-gradient(135deg, var(--danger), var(--orange));
  box-shadow: 0 2px 8px rgba(234,67,53,0.3);
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: var(--fs-2xl);
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--fs-sm);
}

/* ============================================================
   4. 徽标/标签系统（Badge System） - 模式 B2
   ============================================================ */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.badge--primary {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.badge--success {
  background: var(--success-light);
  color: var(--success);
}

.badge--danger {
  background: var(--danger-light);
  color: var(--danger);
}

.badge--warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge--orange {
  background: var(--orange-light);
  color: var(--orange);
}

.badge--purple {
  background: var(--purple-light);
  color: var(--purple);
}

.badge--gold {
  background: var(--gold-light);
  color: var(--gold);
}

.badge--pill {
  border-radius: 12px;
  padding: 4px 12px;
}

.badge--solid-primary {
  background: var(--primary);
  color: var(--text-inverse);
}

.badge--solid-success {
  background: var(--success);
  color: var(--text-inverse);
}

.badge--solid-danger {
  background: var(--danger);
  color: var(--text-inverse);
}

/* 排名标签 */
.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* 最新标签 */
.badge-newest {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  background: var(--primary);
  color: var(--text-inverse);
  border-radius: 10px;
}

/* 缓存标签 */
.badge-cache {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--warning-light);
  color: var(--warning);
  border-radius: var(--radius-xs);
}

/* 报告类型标签 */
.rv-badge {
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: var(--fw-medium);
}

.rv-badge-detail {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.rv-badge-simple {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}

/* ============================================================
   5. 按钮系统（Button System） - 模式 C2
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 主按钮 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
}

/* 危险按钮 */
.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
}

.btn-danger:hover:not(:disabled) {
  background: #c0392b;
}

/* 次要按钮 */
.btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--primary);
}

/* 透明按钮 */
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-2);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--primary);
  background: var(--bg-hover);
}

/* 关闭按钮 */
.btn-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--text-2);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.btn-close:hover {
  color: var(--text-1);
}

/* 图文关闭按钮 */
.btn-close--circle {
  width: 32px;
  height: 32px;
  background: var(--bg-input);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: var(--tr);
}

.btn-close--circle:hover {
  background: var(--danger-light);
  color: var(--danger);
}

/* 操作按钮行 */
.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 删除按钮（小型、danger 文字） */
.btn-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--fs-base);
  padding: 2px 6px;
}

/* 小标签按钮 */
.btn-tag {
  font-size: var(--fs-xs);
  padding: 3px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--tr);
}

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

/* ============================================================
   6. 模态框系统（Modal System） - 模式 E1-E3
   ============================================================ */

/* 覆盖层 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 模态框容器 */
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: modalIn 0.25s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-box--sm {
  width: 400px;
  max-width: 90vw;
}

.modal-box--md {
  width: 520px;
  max-width: 94vw;
}

.modal-box--lg {
  width: 700px;
  max-width: 96vw;
}

.modal-box--xl {
  width: 900px;
  max-width: 96vw;
}

/* 模态框头部 */
.modal-header {
  padding: var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, var(--primary-light), var(--purple-light));
  border-bottom: 1px solid var(--border);
  position: relative;
}

.modal-header--left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: none;
}

.modal-header-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.modal-header-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--space-1);
}

/* 模态框内容体 */
.modal-body {
  padding: var(--space-5);
  overflow: auto;
  flex: 1;
}

/* 模态框底部 */
.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
}

/* 信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--text-2);
  font-size: var(--fs-base);
}

.info-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* 模态框过渡动画 */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================
   7. 表单控件（Form Controls） - 模式 D1-D2
   ============================================================ */

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 6px;
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: var(--tr);
  outline: none;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.form-input--sm {
  width: 46px;
  text-align: center;
}

.form-input--numeric {
  text-align: right;
  width: 100px;
}

.form-input--wide {
  width: 110px;
}

.form-input--full {
  width: 100%;
  padding: 6px 10px;
}

.form-input--hidden {
  display: none;
}

.form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: var(--tr);
  outline: none;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--primary);
}

.form-checkbox,
.form-radio {
  margin-right: var(--space-1);
  cursor: pointer;
}

/* ============================================================
   8. 表格系统（Table System） - 模式 C3
   ============================================================ */

.table-row {
  border-bottom: 1px solid var(--border);
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  padding: var(--space-3);
  font-size: var(--fs-base);
}

.table-cell--sm {
  padding: var(--space-2);
}

.table-cell--numeric {
  text-align: right;
  font-weight: var(--fw-semibold);
}

.table-cell--center {
  text-align: center;
}

.table-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-3);
}

.table-error {
  text-align: center;
  padding: 40px;
  color: var(--danger);
}

/* 表格行内编辑 */
.edit-row {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   9. Tab 切换系统
   ============================================================ */

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tab-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--tr);
  user-select: none;
}

.tab-item:hover {
  color: var(--primary);
}

.tab-item--active {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--primary);
}

.tab-content {
  display: none;
}

.tab-content--active {
  display: block;
}

/* ============================================================
   10. 跟进记录卡片（模式回溯）
   ============================================================ */

/* 跟进消息气泡 */
.fu-card {
  background: linear-gradient(135deg, var(--primary-light-2), var(--purple-light));
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  padding: var(--space-3);
  min-height: 60px;
  cursor: pointer;
  transition: var(--tr);
}

.fu-card:hover {
  border-color: var(--primary-border-hov);
}

/* 下一跟卡片 */
.fu-next-card {
  background: var(--success-light);
  border: 1px solid var(--success-border);
  border-radius: 10px;
  padding: var(--space-3);
  cursor: pointer;
  transition: var(--tr);
}

.fu-next-card:hover {
  background: rgba(52,168,83,0.15);
}

/* ============================================================
   11. 历史记录卡片
   ============================================================ */

.history-card {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: var(--space-3);
}

.history-card--latest {
  border: 2px solid var(--primary);
}

.history-stat {
  text-align: center;
}

.history-stat-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.history-stat-label {
  font-size: 10px;
  color: var(--text-3);
}

/* 历史记录数据来源标签 */
.history-source {
  font-size: var(--fs-xs);
  color: var(--text-2);
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: var(--radius-xs);
  margin-top: var(--space-2);
}

/* ============================================================
   12. 评分/等级色（辅助类）
   ============================================================ */

.grade-a-plus { color: #34a853; }
.grade-a      { color: #1a73e8; }
.grade-b-plus { color: #ff6b35; }
.grade-b      { color: #f4b942; }
.grade-c      { color: #8b949e; }
.grade-d      { color: #ea4335; }

/* ============================================================
   13. 匹配分析区域
   ============================================================ */

.match-analysis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ============================================================
   14. 产品列表（匹配结果）
   ============================================================ */

.match-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ============================================================
   15. 团队管理（性能排行）
   ============================================================ */

.perf-medal {
  font-size: 18px;
}

.perf-rank-num {
  font-size: 14px;
  color: var(--text-2);
}