@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--secondary { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-text-white); }
.btn--secondary:hover { background: var(--color-secondary-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--info { background: var(--color-info); border-color: var(--color-info); color: var(--color-text-white); }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-lg); }
.btn--block { display: block; width: 100%; }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-text-white); }
.btn_small_edit { padding: 3px; background: var(--color-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-white); font-size: var(--text-xs); cursor: pointer; }
.btn_small_del { padding: 3px; background: #f98d8d; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-white); font-size: var(--text-xs); cursor: pointer; }
.btn_small_show { padding: 3px; background: #099be0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-white); font-size: var(--text-xs); cursor: pointer; }

/* === 表单 === */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }
.form-label .required { color: var(--color-danger); }
.form-input, .form-select, .form-textarea {
  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, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-input.is-error { border-color: var(--color-danger); }
.form-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.form-error { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-danger); }
.selectBox { width: 80%; height: 40px; line-height: 40px; padding: 0 var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-base); }
.textBox2 { width: 100%; line-height: 25px; padding: var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-base); box-sizing: border-box; font-family: "Microsoft YaHei", Arial, sans-serif; }

/* === 表格 === */
.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; }
#data td.pop-content:hover::after {
  content: attr(data-tooltip); position: absolute; width: 100%; top: -30px; left: 50%;
  transform: translateX(-50%); background: #706f6f; color: var(--color-text-white);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs); z-index: var(--z-popover); pointer-events: none;
}

/* === 卡片 === */
.card { background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; }
.card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-lg); font-weight: var(--font-semibold); }
.card__body { padding: var(--space-5); }
.card__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); }

/* === 弹窗 === */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-modal); }
.modal--open { display: block; }
.modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal__content { position: relative; margin: 10% auto; max-width: 500px; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.modal__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-lg); font-weight: var(--font-semibold); }
.modal__body { padding: var(--space-5); }
.modal__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); text-align: right; }
.modal__close { position: absolute; top: var(--space-3); right: var(--space-4); font-size: var(--text-2xl); color: var(--color-text-muted); cursor: pointer; }
.modal__close:hover { color: var(--color-text); }
#cwxBg { position: absolute; display: none; background: rgba(0,0,0,0.5); left: 0; top: 0; z-index: var(--z-modal-overlay); }
#cwxWd { position: absolute; display: none; border: 10px solid #CCC; padding: var(--space-2); background: var(--color-bg); z-index: var(--z-modal); }

/* === 分页 === */
.pagination { display: flex; justify-content: center; gap: var(--space-1); margin-top: var(--space-5); }
.pagination__item a, .pagination__item span { display: inline-block; padding: var(--space-2); min-width: 15px; border: 1px solid var(--color-border-light); text-align: center; color: var(--color-text-muted); }
.pagination__item a:hover { background: var(--color-bg-hover); }
.pagination__item.is-active span, .pagination__item.is-active a { background: var(--color-primary); color: var(--color-text-white); border-color: var(--color-primary); }
.page { margin-top: var(--space-5); text-align: center; }
.page a { display: inline-block; background: var(--color-bg); color: var(--color-text-muted); padding: var(--space-2); min-width: 15px; border: 1px solid var(--color-border-light); }
.page span { display: inline-block; padding: var(--space-2); min-width: 15px; border: 1px solid var(--color-border-light); }
.page span.current { display: inline-block; background: var(--color-success); color: var(--color-text-white); padding: var(--space-2); min-width: 15px; border: 1px solid var(--color-success); }
.page .pagination li { display: inline-block; margin-right: var(--space-1); text-align: center; }
.page .pagination li.active span { background: var(--color-success); color: var(--color-text-white); border: 1px solid var(--color-success); }

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

/* === 列表 === */
.list { list-style: none; }
.list__item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); }
.list__item:last-child { border-bottom: none; }
.list__item:hover { background: var(--color-bg-hover); }

/* === Tab选项卡 === */
.tab-box { border-bottom: 5px solid var(--color-primary); padding-left: var(--space-5); }
.tab-item { display: inline-block; border-left: 2px solid var(--color-border); border-top: 2px solid var(--color-border); border-right: 2px solid var(--color-border); height: 50px; line-height: 45px; font-size: var(--text-base); background: var(--color-bg-secondary); }
.tab-item--active { display: inline-block; border-left: 2px solid var(--color-primary); border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); height: 60px; line-height: 60px; font-size: var(--text-xl); background: var(--color-primary); color: var(--color-text-white); }
.tab-item a, .tab-item--active a { width: 100%; height: 100%; padding-left: var(--space-5); padding-right: var(--space-5); display: block; }
.tab-item--active a { color: var(--color-text-white); }
.tab-box--secondary { border-bottom-color: var(--color-secondary); }
.tab-box--secondary .tab-item--active { border-color: var(--color-secondary); background: var(--color-secondary); }

/* === 轮播 === */
.carousel { position: relative; overflow: hidden; }
.carousel__item { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.carousel__item--active { display: block; }
.carousel__dots { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: var(--z-dropdown); }
.carousel__dot { display: inline-block; width: 13px; height: 13px; margin: 0 var(--space-1); background: rgba(255,255,255,0.5); border-radius: var(--radius-full); cursor: pointer; }
.carousel__dot--active { background: var(--color-text-white); }