/* 创小助 组件层 v1.0 — 按钮/卡片/表单/表格/徽章/提示 */
/* 依赖 global_ux.css 的设计令牌变量 */

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: var(--radius-btn); font-weight: 500;
  text-decoration: none; cursor: pointer; transition: all 0.15s;
  border: none; line-height: 1.4; white-space: nowrap;
  font-family: inherit;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm  { padding: 6px 14px; font-size: 13px; height: 34px; }
.btn-md  { padding: 8px 20px; font-size: 14px; height: 40px; }
.btn-lg  { padding: 12px 28px; font-size: 16px; height: 48px; }

.btn-primary { background: linear-gradient(135deg, #2B6CB0, #3182CE); color: white; box-shadow: 0 1px 3px rgba(43,108,176,0.2); }
.btn-primary:hover { background: linear-gradient(135deg, #1A4D80, #2B6CB0); color: white; box-shadow: 0 2px 8px rgba(43,108,176,0.3); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(43,108,176,0.2); }
.btn-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg-hover); }
.btn-soft { background: var(--color-bg-hover); color: var(--color-primary); border: 1px solid transparent; }
.btn-soft:hover { background: #dbeafe; border-color: #bfdbfe; }
.btn-link { background: none; border: none; color: var(--color-primary); padding: 4px 8px; text-decoration: none; }
.btn-link:hover { text-decoration: underline; background: var(--color-bg-hover); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-primary); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #b91c1c; color: white; }
.btn-success { background: var(--color-success); color: white; }
.btn-success:hover { background: #15803d; color: white; }
.btn-soft-warning { background: #FFFAF0; color: #DD6B20; border: 1px solid #FBD38D; }
.btn-soft-warning:hover { background: #FFF3E0; border-color: #F6AD55; }
.btn-soft-success { background: #F0FFF4; color: #166534; border: 1px solid #BBF7D0; }
.btn-soft-success:hover { background: #DCFCE7; border-color: #86EFAC; }

/* ============================================================
   卡片
   ============================================================ */
.card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-card-padding);
  box-shadow: var(--card-shadow);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.card-title { font-size: 16px; font-weight: 600; color: var(--color-text); }
.card-body { }
.card-footer {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.card-hover:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.card-clickable { cursor: pointer; }
.card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.card-compact { padding: 12px 16px; }
.card-flat { box-shadow: none; border-color: var(--color-border-light); }

/* ============================================================
   表单
   ============================================================ */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-size: 14px; font-weight: 500;
  margin-bottom: 6px; color: var(--color-text);
}
.form-input {
  display: block; width: 100%;
  padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: white; color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.form-input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-input.error { border-color: var(--color-danger); }
.form-input::placeholder { color: var(--color-text-muted); }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 4px; }
.form-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-select {
  appearance: none; padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.form-row { display: flex; gap: 16px; }
.form-row > * { flex: 1; }
@media (max-width: 640px) { .form-row { flex-direction: column; gap: 0; } }

/* ============================================================
   表格
   ============================================================ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 12px 16px;
  font-weight: 600; font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px; font-size: 14px;
  border-bottom: 1px solid var(--color-border-light);
}
.table tr:hover td { background: var(--color-bg-hover); }
.table-sm td, .table-sm th { padding: 8px 12px; font-size: 13px; }
.table-compact td, .table-compact th { padding: 6px 10px; font-size: 13px; }

/* ============================================================
   徽章 / 标签
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; font-size: 12px; font-weight: 500;
  border-radius: 999px; white-space: nowrap;
}
.badge-blue { background: var(--color-bg-hover); color: var(--color-primary); }
.badge-green { background: #f0fdf4; color: #166534; }
.badge-red { background: #fef2f2; color: #991b1b; }
.badge-yellow { background: #fffbeb; color: #92400e; }
.badge-gray { background: #f1f5f9; color: #475569; }

/* ============================================================
   提示 / Toast
   ============================================================ */
.alert {
  padding: 12px 16px; border-radius: var(--radius-btn);
  font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: var(--color-bg-hover); color: var(--color-primary-dark); border: 1px solid #bfdbfe; }

/* ============================================================
   下接菜单
   ============================================================ */
.user-dropdown, [data-dropdown-menu] {
  display: none; position: absolute; top: 100%; right: 0;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--dropdown-shadow);
  min-width: 160px; padding: 6px 0; z-index: 200; margin-top: 6px;
}
.user-dropdown.show, [data-dropdown-menu].show { display: block; }
.user-dropdown a, [data-dropdown-menu] a {
  display: block; padding: 8px 16px; font-size: 14px;
  color: var(--color-text); text-decoration: none;
}
.user-dropdown a:hover, [data-dropdown-menu] a:hover { background: var(--color-bg-hover); color: var(--color-primary); }
.user-dropdown .divider, [data-dropdown-menu] .divider { height: 1px; background: var(--color-border); margin: 4px 0; }

/* ============================================================
   空状态
   ============================================================ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-state-title { font-size: 16px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 8px; }

/* ============================================================
   骨架屏
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
  border-radius: 6px; height: 16px; margin-bottom: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   手风琴组件
   ============================================================ */
.acc-row{border:1px solid #e2e8f0;border-radius:10px;background:#fff;overflow:hidden;margin-bottom:10px;transition:border-color 0.15s,box-shadow 0.15s}
.acc-row:hover{border-color:#cbd5e1}
.acc-row.open{border-color:#3b82f6;box-shadow:0 2px 12px rgba(59,130,246,0.1)}
.acc-summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;flex-wrap:wrap}
.acc-summary .acc-title{font-weight:600;font-size:14px;color:#1e293b;white-space:nowrap;flex-shrink:0}
.acc-summary .acc-hint{font-size:11px;color:#94a3b8;flex:1;min-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-summary .acc-arrow{font-size:12px;color:#94a3b8;transition:transform 0.2s;flex-shrink:0;margin-left:auto}
.acc-row.open .acc-arrow{transform:rotate(180deg)}
.acc-detail{display:none;border-top:1px solid #f1f5f9;padding:16px 18px}
.acc-row.open .acc-detail{display:block}

/* ============================================================
   垂直标签页
   ============================================================ */
.vtab-wrap{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;display:flex}
.vtab-nav{width:190px;flex-shrink:0;background:#f8fafc;border-right:1px solid #e2e8f0;padding:6px 0}
.vtab-nav .vtab{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:13px;color:#64748b;transition:all 0.15s;border-left:3px solid transparent;user-select:none}
.vtab-nav .vtab:hover{background:#f1f5f9;color:#334155}
.vtab-nav .vtab.active{background:#fff;color:#2563eb;font-weight:600;border-left-color:#2563eb}
.vtab-num{width:22px;height:22px;border-radius:50%;background:#e2e8f0;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;color:#64748b}
.vtab.active .vtab-num{background:#2563eb;color:#fff}
.vtab-content{flex:1;padding:20px 24px;min-height:320px}
.vtab-pane{display:none}
.vtab-pane.active{display:block}

@media (max-width: 768px) {
 .vtab-wrap{flex-direction:column}
 .vtab-nav{width:100%;border-right:none;border-bottom:1px solid #e2e8f0;padding:0;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .vtab-nav .vtab{border-left:none;border-bottom:2px solid transparent;white-space:nowrap;padding:10px 12px;font-size:12px;flex-shrink:0}
 .vtab-nav .vtab.active{border-left:none;border-bottom-color:#2563eb;background:#fff}
 .vtab-content{padding:14px 16px}
}