/* ================================================
   金融研究仪表盘 - 通用组件 v1.3
   L4-1: 卡片/标签/按钮/表格/搜索/Loading/Toast
   ================================================ */

/* === 卡片 === */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
}

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

.card-stat {
  text-align: center;
  padding: var(--space-5);
}

.card-stat .l {
  font-size: var(--fs-sm);
  color: var(--t3);
  margin-bottom: var(--space-2);
}

.card-stat .v {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
}

.card-stat .s {
  font-size: var(--fs-xs);
  color: var(--t4);
}

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  font-family: inherit;
}

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

.btn-p { /* Primary */
  background: var(--accent);
  color: #fff;
}

.btn-p:hover:not(:disabled) {
  background: #4393e6;
}

.btn-o { /* Outline */
  background: transparent;
  border-color: var(--border);
  color: var(--t2);
}

.btn-o:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-g { /* Ghost */
  background: transparent;
  color: var(--t2);
}

.btn-g:hover:not(:disabled) {
  background: var(--hover-bg);
}

.btn-s { /* Small */
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

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

/* === 标签 === */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* 分类标签 */
.tag.t-macro { background: rgba(210, 153, 34, 0.15); color: var(--cat-macro); }
.tag.t-comm { background: rgba(163, 113, 247, 0.15); color: var(--cat-comm); }
.tag.t-stock { background: rgba(63, 185, 80, 0.15); color: var(--cat-stock); }
.tag.t-mix { background: rgba(247, 129, 102, 0.15); color: var(--cat-mix); }
.tag.t-other { background: var(--bg3); color: var(--cat-other); }

/* 状态标签 */
.tag.s-done { background: rgba(63, 185, 80, 0.15); color: var(--success); }
.tag.s-pending { background: var(--bg3); color: var(--t3); }
.tag.s-error { background: rgba(248, 81, 73, 0.15); color: var(--danger); }
.tag.s-active { background: rgba(88, 166, 255, 0.15); color: var(--info); }

/* 平台标签 */
.plat-tag {
  display: inline-flex;
  padding: 2px 6px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}

.plat-tag.bili { background: rgba(251, 114, 153, 0.15); color: #fb7299; }
.plat-tag.yt { background: rgba(255, 0, 0, 0.1); color: #ff0000; }
.plat-tag.other { background: var(--bg3); color: var(--t3); }

/* === 输入框 === */
.input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--t1);
  transition: border-color var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
}

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

/* === 选择框 === */
.select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--t1);
  cursor: pointer;
}

.select:focus {
  outline: none;
  border-color: var(--accent);
}

/* === 搜索框 === */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box .input {
  padding-left: 32px;
  width: 200px;
}

.search-box::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  font-size: var(--fs-sm);
}

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

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

.table th {
  background: var(--bg3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--t2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}

.table th:hover {
  background: var(--hover-bg);
}

.table th.sorted {
  color: var(--accent);
}

.sort-icon {
  margin-left: var(--space-1);
  font-size: var(--fs-xs);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border2);
  color: var(--t1);
}

.table tr:hover td {
  background: var(--hover-bg);
}

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

/* === 分页 === */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
}

.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--t2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pg-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.pg-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

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

/* === 加载状态 === */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  color: var(--t3);
}

.loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-right: var(--space-3);
  animation: spin 0.8s linear infinite;
}

/* === Toast === */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  padding: var(--space-3) var(--space-5);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--t1);
  box-shadow: var(--shadow-md);
  animation: slideUp 0.3s ease;
}

.toast.success {
  border-color: var(--success);
  color: var(--success);
}

.toast.error {
  border-color: var(--danger);
  color: var(--danger);
}

.toast.warning {
  border-color: var(--warn);
  color: var(--warn);
}

/* === 统计卡片网格 === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* === 网格布局 === */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

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

/* === Flex布局 === */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* === 引用复制按钮 === */
.ref-copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

[data-ref]:hover .ref-copy-btn {
  opacity: 1;
}

.ref-copy-btn:hover {
  background: var(--hover-bg);
}

.ref-copy-btn.copied {
  color: var(--success);
}

/* === 空状态 === */
.empty-state {
  text-align: center;
  padding: var(--space-10);
  color: var(--t3);
}

.empty-state .icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state .text {
  font-size: var(--fs-sm);
}

/* === 错误状态 === */
.error-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--danger);
  background: rgba(248, 81, 73, 0.1);
  border-radius: var(--radius-lg);
}