@charset "utf-8";
/* ============================================
 * components.css - Shared UI Components
 * gdnms.com 公共组件 v1.0
 * 按钮/表单/表格/卡片/弹窗/分页/标签/列表/Tab/轮播
 * ============================================ */

/* === 按钮 === */
.btn {
  display: inline-block; padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--font-normal);
  line-height: 1.5; text-align: center; white-space: nowrap;
  cursor: pointer; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-bg);
  color: var(--color-text); transition: all var(--transition);
  -webkit-appearance: none;
}
.btn:hover { background: var(--color-bg-hover); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-white); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--success { background: var(--color-success); border-color: var(--color-success); color: var(--color-text-white); }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-white); }
.btn--warning { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-text-white); }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

/* === 表单 === */
.form-group { margin-bottom: var(--space-4); }
.form-input {
  display: block; width: 100%; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); transition: border-color var(--transition); box-sizing: border-box;
}
.form-input:focus { border-color: var(--color-primary); }

/* === 表格 === */
.data-table, #data {
  width: 100%; table-layout: fixed; margin: 0 auto;
  border-collapse: collapse; border: 1px solid var(--color-border-light);
  font-size: var(--text-base); font-family: Arial, sans-serif;
}
.data-table th, #data th {
  border: 1px solid var(--color-border-light); padding: var(--space-2) var(--space-3);
  background: var(--color-bg-hover); text-align: left;
  font-weight: var(--font-normal); color: var(--color-text);
}
.data-table td, #data td {
  border: 1px solid var(--color-border-light); padding: var(--space-2) var(--space-1);
  color: var(--color-text-secondary);
}
.data-table tbody tr:nth-child(even), #data tbody tr:nth-child(even) { background: var(--color-bg-secondary); }
.data-table tbody tr:hover, #data tbody tr:hover { background: #e8f4ff; cursor: pointer; transition: background-color var(--transition); }
#data tr:last-child td { border-bottom: 1px solid var(--color-border-light); }
#data td:hover { background: #d1e7ff; position: relative; }

/* === 卡片 === */
.card { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }

/* === 标签 === */
.badge { display: inline-block; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: var(--radius-sm); }

/* === Tab选项卡 === */
.tab-box { border-bottom: 5px solid var(--color-primary); }