/* ========================================
   UI Enhancement Layer v1
   不改变数据结构，仅优化视觉表现
   ======================================== */

/* ===== 设计令牌增强 ===== */
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-primary-bg: #eff6ff;
  --color-primary-border: #93c5fd;
  --color-bg-page: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-bg-spotlight: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --shadow-card: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-card-hover: 0 8px 25px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-dropdown: 0 10px 30px rgba(0,0,0,.1), 0 3px 10px rgba(0,0,0,.06);
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-modal: 14px;
  --radius-tag: 6px;
  --transition-fast: .2s cubic-bezier(.4,0,.2,1);
  --transition-normal: .3s cubic-bezier(.4,0,.2,1);
}

/* ===== 全局背景 ===== */
html, body {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
}

#root {
  min-height: 100vh;
}

/* ===== 侧边栏增强 ===== */
.sidebar-gradient {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar-gradient .ant-menu {
  background: transparent !important;
}

.sidebar-gradient .ant-menu-item,
.sidebar-gradient .ant-menu-submenu-title {
  color: rgba(255,255,255,0.6) !important;
  border-radius: 10px !important;
  margin: 3px 10px !important;
  height: 42px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

.sidebar-gradient .ant-menu-item:hover,
.sidebar-gradient .ant-menu-submenu-title:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  transform: translateX(2px);
}

.sidebar-gradient .ant-menu-item-selected,
.sidebar-gradient .ant-menu-item-selected > a {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(59,130,246,0.2)) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(59,130,246,0.25), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.sidebar-gradient .ant-menu-item-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #3b82f6;
  border-radius: 0 3px 3px 0;
}

.sidebar-gradient .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: rgba(255,255,255,0.9) !important;
}

.sidebar-gradient .ant-menu-inline .ant-menu-item::after {
  border-right: none !important;
}

/* 侧边栏 Logo 区域 */
.sidebar-gradient > div:first-child {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 20px !important;
}

/* ===== 顶部导航栏增强 ===== */
.ant-layout-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(226,232,240,0.8) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 20px !important;
}

/* 面包屑 */
.ant-breadcrumb a {
  color: #64748b !important;
  font-weight: 500 !important;
  transition: color var(--transition-fast) !important;
}
.ant-breadcrumb a:hover {
  color: #3b82f6 !important;
}
.ant-breadcrumb li:last-child {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* ===== 卡片增强 ===== */
.ant-card {
  border-radius: var(--radius-card) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal) !important;
}

.ant-card-hoverable:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px);
}

.ant-card-head {
  border-bottom: 1px solid #f1f5f9 !important;
  min-height: 48px !important;
  padding: 0 16px !important;
}

.ant-card-head-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0f172a !important;
}

.ant-card-body {
  padding: 16px !important;
}

.ant-card-bordered {
  border-color: #e2e8f0 !important;
}

/* ===== 统计卡片增强 ===== */
.ant-statistic-title {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

.ant-statistic-content-value {
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
}

.ant-statistic-content-value-int {
  letter-spacing: -0.5px;
}

/* ===== 表格增强 ===== */
.ant-table-wrapper .ant-table {
  border-radius: 10px !important;
  overflow: hidden;
}

.ant-table-thead > tr > th {
  background: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #475569 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 10px 16px !important;
  text-transform: none;
  letter-spacing: 0;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #334155 !important;
  transition: background var(--transition-fast) !important;
}

.ant-table-tbody > tr:hover > td {
  background: #f0f7ff !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td {
  background: #eff6ff !important;
}

/* ===== 按钮增强 ===== */
.ant-btn {
  border-radius: var(--radius-button) !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

.ant-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(59,130,246,0.3) !important;
}

.ant-btn-primary:hover {
  background: linear-gradient(135deg, #4f8ef5, #3b82f6) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4) !important;
  transform: translateY(-1px);
}

.ant-btn-primary:active {
  transform: translateY(0);
}

.ant-btn-default {
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

.ant-btn-default:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: #eff6ff !important;
}

.ant-btn-link {
  color: #3b82f6 !important;
  font-weight: 500 !important;
}

.ant-btn-link:hover {
  color: #2563eb !important;
}

/* ===== 标签增强 ===== */
.ant-tag {
  border-radius: var(--radius-tag) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 1px 8px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 18px !important;
}

.ant-tag-blue, .ant-tag-processing {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.ant-tag-green, .ant-tag-success {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

.ant-tag-red, .ant-tag-error {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.ant-tag-orange, .ant-tag-warning {
  background: #fffbeb !important;
  color: #d97706 !important;
}

.ant-tag-purple {
  background: #faf5ff !important;
  color: #9333ea !important;
}

.ant-tag-default {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

/* ===== 输入框增强 ===== */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-picker,
.ant-select .ant-select-selector {
  border-radius: 8px !important;
  border-color: #e2e8f0 !important;
  transition: all var(--transition-fast) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-picker:hover,
.ant-select .ant-select-selector:hover {
  border-color: #94a3b8 !important;
}

.ant-input:focus,
.ant-input-affix-wrapper-focused,
.ant-picker-focused,
.ant-select-focused .ant-select-selector {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* ===== Modal 增强 ===== */
.ant-modal-content {
  border-radius: var(--radius-modal) !important;
  box-shadow: var(--shadow-dropdown) !important;
  overflow: hidden;
}

.ant-modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 16px 24px !important;
  margin-bottom: 0 !important;
}

.ant-modal-title {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #0f172a !important;
}

.ant-modal-body {
  padding: 20px 24px !important;
}

.ant-modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding: 12px 24px !important;
}

/* ===== Tabs 增强 ===== */
.ant-tabs-tab {
  font-weight: 500 !important;
  color: #64748b !important;
  padding: 8px 4px !important;
  transition: color var(--transition-fast) !important;
}

.ant-tabs-tab:hover {
  color: #3b82f6 !important;
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.ant-tabs-ink-bar {
  background: #3b82f6 !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.ant-tabs-top > .ant-tabs-nav::before {
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ===== Progress 增强 ===== */
.ant-progress-circle .ant-progress-text {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0f172a !important;
}

.ant-progress-steps-item {
  border-radius: 2px !important;
}

/* ===== List 增强 ===== */
.ant-list-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background var(--transition-fast) !important;
  border-radius: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin: 0 -8px !important;
}

.ant-list-item:hover {
  background: #f8fafc !important;
}

.ant-list-item-meta-title {
  font-size: 13px !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}

.ant-list-item-meta-description {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* ===== Descriptions 增强 ===== */
.ant-descriptions-item-label {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.ant-descriptions-item-content {
  color: #0f172a !important;
  font-size: 13px !important;
}

.ant-descriptions-bordered .ant-descriptions-view {
  border-radius: 8px !important;
  overflow: hidden;
}

/* ===== Badge 增强 ===== */
.ant-badge-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* ===== 滚动条增强 ===== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* ===== Dropdown 增强 ===== */
.ant-dropdown-menu {
  border-radius: 10px !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: 4px !important;
}

.ant-dropdown-menu-item {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: all var(--transition-fast) !important;
}

.ant-dropdown-menu-item:hover {
  background: #eff6ff !important;
}

/* ===== Spin 增强 ===== */
.ant-spin-dot-item {
  background-color: #3b82f6 !important;
}

/* ===== Empty 增强 ===== */
.ant-empty-description {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

/* ===== 页面容器增强 ===== */
.page-container {
  padding: 16px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

.page-header {
  margin-bottom: 16px !important;
}

.page-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* ===== 过滤栏增强 ===== */
.filter-bar {
  background: #fff !important;
  border-radius: var(--radius-card) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

/* ===== 表格区域增强 ===== */
.table-section {
  background: #fff !important;
  border-radius: var(--radius-card) !important;
  padding: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

/* ===== 统计卡片网格 ===== */
.stat-card-grid {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* ===== 分页增强 ===== */
.ant-pagination-item {
  border-radius: 6px !important;
  border-color: #e2e8f0 !important;
  transition: all var(--transition-fast) !important;
}

.ant-pagination-item-active {
  border-color: #3b82f6 !important;
  background: #3b82f6 !important;
}

.ant-pagination-item-active a {
  color: #fff !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border-radius: 6px !important;
  border-color: #e2e8f0 !important;
}

/* ===== Select 增强 ===== */
.ant-select-dropdown {
  border-radius: 10px !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: 4px !important;
}

.ant-select-item {
  border-radius: 6px !important;
  transition: all var(--transition-fast) !important;
}

.ant-select-item-option-selected {
  background: #eff6ff !important;
  font-weight: 600 !important;
}

/* ===== Tooltip 增强 ===== */
.ant-tooltip-inner {
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* ===== Avatar 增强 ===== */
.ant-avatar {
  box-shadow: 0 2px 6px rgba(59,130,246,0.2) !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .ant-card {
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  .ant-card-body {
    padding: 12px !important;
  }

  .ant-table-thead > tr > th {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .ant-table-tbody > tr > td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .ant-statistic-content-value {
    font-size: 22px !important;
  }

  .ant-btn {
    min-height: 36px !important;
  }

  .ant-input,
  .ant-input-affix-wrapper,
  .ant-picker,
  .ant-select .ant-select-selector {
    min-height: 36px !important;
  }

  .ant-modal {
    max-width: calc(100vw - 16px) !important;
    margin: 8px !important;
  }

  .ant-modal-body {
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    padding: 16px !important;
  }

  .page-container {
    padding: 8px !important;
  }

  .ant-layout-sider {
    display: none !important;
  }
}

/* ===== 动画 ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ant-card,
.filter-bar,
.table-section {
  animation: fadeInUp 0.3s ease-out;
}

/* ===== 焦点可访问性 ===== */
.ant-btn:focus-visible,
.ant-input:focus-visible,
.ant-select-selector:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ===== 选中文本 ===== */
::selection {
  background: rgba(59,130,246,0.2);
  color: #0f172a;
}