/**
 * V21 UI 组件库 - 组件样式
 * 统一使用 CSS 变量，支持深色/浅色主题自动切换
 */

/* ============================================================
   Button 按钮
   ============================================================ */
.xx-btn {
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-extrabold) !important;
  transition: var(--transition-all) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.xx-btn-primary {
  background: var(--gradient-primary) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-primary) !important;
}

.xx-btn-primary:hover,
.xx-btn-primary:focus {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px);
}

.xx-btn-secondary {
  background: var(--secondary-color) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}

.xx-btn-secondary:hover,
.xx-btn-secondary:focus {
  background: var(--secondary-hover) !important;
  transform: translateY(-1px);
}

.xx-btn-ghost {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.xx-btn-ghost:hover,
.xx-btn-ghost:focus {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.xx-btn-text {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.xx-btn-text:hover,
.xx-btn-text:focus {
  background: var(--primary-soft) !important;
  color: var(--primary-color) !important;
}

.xx-btn-danger {
  background: var(--error-color) !important;
  color: var(--text-inverse) !important;
  border: none !important;
}

.xx-btn-danger:hover,
.xx-btn-danger:focus {
  background: var(--error-hover) !important;
  transform: translateY(-1px);
}

.xx-btn-link {
  background: transparent !important;
  border: none !important;
  color: var(--text-link) !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.xx-btn-link:hover,
.xx-btn-link:focus {
  color: var(--text-link-hover) !important;
  text-decoration: underline;
}

/* 尺寸 */
.xx-btn-sm {
  padding: 6px 14px !important;
  font-size: var(--font-size-sm) !important;
}

.xx-btn-md {
  padding: 10px 20px !important;
  font-size: var(--font-size-base) !important;
}

.xx-btn-lg {
  padding: 14px 28px !important;
  font-size: var(--font-size-md) !important;
}

/* ============================================================
   Input 输入框
   ============================================================ */
.xx-input .ant-input,
.xx-input.ant-input {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  background: var(--bg-primary) !important;
  transition: var(--transition-colors) !important;
  font-size: var(--font-size-base) !important;
}

.xx-input .ant-input:hover,
.xx-input.ant-input:hover {
  border-color: var(--primary-color) !important;
}

.xx-input .ant-input:focus,
.xx-input.ant-input:focus,
.xx-input .ant-input-focused,
.xx-input.ant-input-focused {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.xx-input .ant-input::placeholder,
.xx-input.ant-input::placeholder {
  color: var(--text-tertiary) !important;
}

/* 错误状态 */
.xx-input-error .ant-input,
.xx-input-error.ant-input {
  border-color: var(--error-color) !important;
}

.xx-input-error .ant-input:focus,
.xx-input-error.ant-input:focus {
  box-shadow: 0 0 0 3px var(--error-soft) !important;
}

/* 前缀/后缀图标 */
.xx-input .ant-input-prefix,
.xx-input .ant-input-suffix {
  color: var(--text-tertiary) !important;
}

/* 搜索框 */
.xx-input-search .ant-input-search-button {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  background: var(--gradient-primary) !important;
  border: none !important;
}

/* ============================================================
   Select 选择器
   ============================================================ */
.xx-select .ant-select-selector {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-color) !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-colors) !important;
  min-height: 40px;
}

.xx-select .ant-select-selector:hover {
  border-color: var(--primary-color) !important;
}

.xx-select.ant-select-focused .ant-select-selector {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.xx-select .ant-select-selection-placeholder {
  color: var(--text-tertiary) !important;
}

/* 下拉菜单 */
.xx-select-dropdown .ant-select-item {
  border-radius: var(--radius-xs) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-fast) !important;
}

.xx-select-dropdown .ant-select-item-option-active {
  background: var(--primary-soft) !important;
  color: var(--primary-color) !important;
}

.xx-select-dropdown .ant-select-item-option-selected {
  background: var(--primary-soft) !important;
  color: var(--primary-color) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* ============================================================
   Modal 对话框
   ============================================================ */
.xx-modal .ant-modal-content {
  border-radius: var(--radius-xl) !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.xx-modal .ant-modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: var(--space-lg) var(--space-xl) !important;
}

.xx-modal .ant-modal-title {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-primary) !important;
}

.xx-modal .ant-modal-close {
  color: var(--text-tertiary) !important;
  transition: var(--transition-fast) !important;
}

.xx-modal .ant-modal-close:hover {
  color: var(--text-primary) !important;
}

.xx-modal .ant-modal-body {
  padding: var(--space-xl) !important;
  color: var(--text-primary) !important;
}

.xx-modal .ant-modal-footer {
  border-top: 1px solid var(--border-light) !important;
  padding: var(--space-md) var(--space-xl) !important;
}

/* 确认对话框 */
.xx-modal-confirm .ant-modal-content {
  border-radius: var(--radius-xl) !important;
}

.xx-modal-confirm .ant-modal-confirm-body > .anticon {
  font-size: 24px !important;
}

/* ============================================================
   Table 表格
   ============================================================ */
.xx-table .ant-table {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.xx-table .ant-table-thead > tr > th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-size: var(--font-size-sm) !important;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.xx-table .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-fast) !important;
}

.xx-table .ant-table-tbody > tr:hover > td {
  background: var(--primary-soft) !important;
}

.xx-table .ant-table-tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* 排序图标 */
.xx-table .ant-table-column-sorter-up.active,
.xx-table .ant-table-column-sorter-down.active {
  color: var(--primary-color) !important;
}

/* 分页 */
.xx-table .ant-pagination {
  padding: var(--space-md) 0 !important;
}

/* ============================================================
   Card 卡片
   ============================================================ */
.xx-card-v21 {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition-all) !important;
  overflow: hidden;
}

.xx-card-v21 .ant-card-head {
  border-bottom: 1px solid var(--border-light) !important;
  padding: 0 var(--space-xl) !important;
  min-height: 56px !important;
}

.xx-card-v21 .ant-card-head-title {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-primary) !important;
}

.xx-card-v21 .ant-card-body {
  padding: var(--space-xl) !important;
}

.xx-card-v21 .ant-card-actions {
  border-top: 1px solid var(--border-light) !important;
  background: var(--bg-secondary) !important;
}

.xx-card-v21 .ant-card-actions > li {
  margin: var(--space-sm) 0 !important;
}

/* 悬浮卡片 */
.xx-card-hover:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* ============================================================
   Tag 标签 / Badge 徽标
   ============================================================ */
.xx-tag {
  border-radius: var(--radius-xs) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: 2px 10px !important;
  line-height: 1.6 !important;
  border: none !important;
}

.xx-tag-primary {
  background: var(--primary-soft) !important;
  color: var(--primary-color) !important;
}

.xx-tag-success {
  background: var(--success-soft) !important;
  color: var(--success-color) !important;
}

.xx-tag-warning {
  background: var(--warning-soft) !important;
  color: var(--warning-color) !important;
}

.xx-tag-error {
  background: var(--error-soft) !important;
  color: var(--error-color) !important;
}

.xx-tag-info {
  background: var(--info-soft) !important;
  color: var(--info-color) !important;
}

/* Badge */
.xx-badge .ant-badge-count {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-primary) !important;
}

.xx-badge .ant-badge-status-dot {
  width: 8px !important;
  height: 8px !important;
}

/* ============================================================
   Tooltip 文字提示 / Popover 气泡卡片
   ============================================================ */
.xx-tooltip .ant-tooltip-inner {
  background: var(--color-gray-800) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  font-size: var(--font-size-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

.xx-tooltip .ant-tooltip-arrow::before {
  background: var(--color-gray-800) !important;
}

/* Popover */
.xx-popover .ant-popover-inner {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.xx-popover .ant-popover-inner-content {
  color: var(--text-primary) !important;
  padding: var(--space-md) !important;
}

.xx-popover .ant-popover-title {
  color: var(--text-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ============================================================
   Form 表单
   ============================================================ */
.xx-form .ant-form-item-label > label {
  color: var(--text-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-base) !important;
}

.xx-form .ant-form-item-explain-error {
  color: var(--error-color) !important;
  font-size: var(--font-size-sm) !important;
}

.xx-form .ant-form-item {
  margin-bottom: var(--space-lg) !important;
}

/* 表单项间距紧凑 */
.xx-form-compact .ant-form-item {
  margin-bottom: var(--space-md) !important;
}

/* ============================================================
   Pagination 分页
   ============================================================ */
.xx-pagination .ant-pagination-item {
  border-radius: var(--radius-xs) !important;
  border-color: var(--border-color) !important;
  transition: var(--transition-fast) !important;
}

.xx-pagination .ant-pagination-item a {
  color: var(--text-primary) !important;
}

.xx-pagination .ant-pagination-item:hover {
  border-color: var(--primary-color) !important;
}

.xx-pagination .ant-pagination-item:hover a {
  color: var(--primary-color) !important;
}

.xx-pagination .ant-pagination-item-active {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
}

.xx-pagination .ant-pagination-item-active a {
  color: var(--text-inverse) !important;
}

.xx-pagination .ant-pagination-prev .ant-pagination-item-link,
.xx-pagination .ant-pagination-next .ant-pagination-item-link {
  border-radius: var(--radius-xs) !important;
  color: var(--text-secondary) !important;
}

.xx-pagination .ant-pagination-disabled .ant-pagination-item-link {
  color: var(--text-disabled) !important;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
  .xx-btn-lg {
    padding: 12px 20px !important;
    font-size: var(--font-size-base) !important;
  }

  .xx-card-v21 .ant-card-body {
    padding: var(--space-md) !important;
  }

  .xx-card-v21 .ant-card-head {
    padding: 0 var(--space-md) !important;
  }

  .xx-modal .ant-modal-body {
    padding: var(--space-md) !important;
  }

  .xx-modal .ant-modal-header {
    padding: var(--space-md) !important;
  }

  .xx-form .ant-form-item {
    margin-bottom: var(--space-md) !important;
  }
}

@media (max-width: 480px) {
  .xx-btn-lg {
    width: 100%;
    justify-content: center;
  }

  .xx-btn-md {
    padding: 8px 16px !important;
  }
}