/* ============================================================
   tables.css — 表格系统
   统一所有页面的表格样式（以任务中心为模板）
   ============================================================ */

/* ---- 表格容器 ---- */
.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---- 表格横向滚动容器 ---- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- 数据表格 ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

/* 表头：加 !important 覆盖所有页面的内联样式 */
.data-table thead {
  background: var(--bg-input);
}

/* 覆盖页面上 <tr style="background:var(--bg-input)"> 的内联写法 */
.data-table thead tr {
  background: var(--bg-input) !important;
}

.data-table th {
  padding: 10px 14px !important;
  text-align: left !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px;
  user-select: none;
  background: transparent;
}

/* 操作列强制居中 */
.data-table th.actions-col,
.data-table td.actions-col {
  text-align: center !important;
}

/* 复选框列 */
.data-table th.check-col,
.data-table td.check-col {
  text-align: center !important;
  width: 40px;
}

/* 表体单元格 */
.data-table td {
  padding: 11px 14px;
  font-size: var(--fs-base);
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.5;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* 行交互 */
.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: var(--bg-hover) !important;
}

.data-table tbody tr.clickable {
  cursor: pointer;
}

/* 行选中态 */
.data-table tbody tr.row-selected {
  background: var(--primary-light-2) !important;
}

/* 复选框选中行 */
.data-table tbody tr.row-checked {
  background: rgba(102,126,234,0.06) !important;
}

/* ---- 分页栏 ---- */
.table-pagination {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-pagination__info {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- 表格计数信息栏 ---- */
.table-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---- 空状态 ---- */
.table-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
}

.table-empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.table-empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.table-empty-state p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 20px;
}

/* ---- 加载中占位行 ---- */
.table-loading {
  text-align: center;
  padding: 40px 16px !important;
  color: var(--text-3);
}

/* 自动匹配所有页面中带加载中文字的表格单元格 — 免改HTML */
.data-table td[style*="text-align:center;padding:40px;color:var(--text-3)"]::before,
.data-table td[style*="padding:40px;text-align:center;color:var(--text-3)"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: table-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

.table-loading .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: table-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes table-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   漏斗表格（保持不变）
   ============================================================ */
.funnel-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.funnel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.funnel-table thead {
  background: var(--bg-input);
}

.funnel-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.funnel-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.funnel-table tbody tr:hover {
  background: var(--primary-light-2);
}

.funnel-table tbody tr:last-child td {
  border-bottom: none;
}

/* 客户信息单元格 */
.funnel-customer {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.funnel-customer-avatar.avt-blue   { background: linear-gradient(135deg, #667eea, #8b74d6); }
.funnel-customer-avatar.avt-orange { background: linear-gradient(135deg, #ff6b35, #ff9a76); }
.funnel-customer-avatar.avt-gold   { background: linear-gradient(135deg, #f4b942, #ffd166); }
.funnel-customer-avatar.avt-green  { background: linear-gradient(135deg, #34a853, #5fca7d); }
.funnel-customer-avatar.avt-gray   { background: linear-gradient(135deg, #8b949e, #adb5bd); }

.funnel-customer-name {
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 2px;
}

.funnel-customer-phone {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* 阶段标签 */
.funnel-stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.funnel-stage-tag.tag-intention  { background: var(--primary-light);  color: var(--primary); }
.funnel-stage-tag.tag-following  { background: var(--orange-light);  color: var(--orange); }
.funnel-stage-tag.tag-offer      { background: var(--gold-light);    color: #c77d00; }
.funnel-stage-tag.tag-signed     { background: var(--success-light); color: var(--success); }
.funnel-stage-tag.tag-ended      { background: rgba(139,148,158,0.12); color: #8b949e; }

.funnel-amount {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--success);
}

/* 表格操作列 */
.funnel-table .actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  align-items: center;
}

.action-btns {
  display: flex;
  gap: 6px;
}

.act-btn {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-2);
  transition: var(--tr);
  font-family: inherit;
}

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

.act-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* 阶段筛选 Tab */
.funnel-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}

.funnel-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: var(--tr);
  background: none;
  border: 1px solid transparent;
  color: var(--text-2);
  font-family: inherit;
}

.funnel-tab:hover {
  background: var(--bg-input);
}

.funnel-tab.active {
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: var(--fw-medium);
}

.funnel-tab .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: var(--fs-xs);
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.2);
}

.funnel-tab:not(.active) .count {
  background: var(--bg-input);
}

/* 空状态 */
.funnel-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-3);
}

.funnel-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

/* 编辑框样式 */
.fu-edit-select:focus,
.fu-edit-textarea:focus,
.fu-edit-date:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-border);
}

.fu-edit-textarea {
  line-height: 1.4;
}