/**
 * Cyber Design System - 现代科技感设计系统
 * 基于 test.html 的设计规范
 */

// ============================================
// 设计变量 Design Tokens
// ============================================

// 主色调
@primary-color: #0052CC;
@cyber-blue: #00D2FF;
@cyber-blue-dark: #0052CC;

// 灰度色阶
@tech-gray-50: #F8FAFC;
@tech-gray-100: #F1F5F9;
@tech-gray-200: #E2E8F0;
@tech-gray-300: #CBD5E1;
@tech-gray-400: #94A3B8;
@tech-gray-500: #64748B;
@tech-gray-600: #475569;
@tech-gray-700: #334155;
@tech-gray-800: #1E293B;
@tech-gray-900: #0F172A;

// 功能色
@success-color: #10B981;
@warning-color: #F59E0B;
@error-color: #EF4444;

// 渐变
@cyber-gradient: linear-gradient(135deg, @cyber-blue 0%, @cyber-blue-dark 100%);
@page-gradient: radial-gradient(circle at top right, #f8fafc, #eff6ff);

// 圆角
@radius-sm: 8px;
@radius-md: 12px;
@radius-lg: 16px;
@radius-xl: 20px;
@radius-2xl: 24px;
@radius-3xl: 32px;

// 阴影
@shadow-soft-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
@shadow-cyber-glow: 0 0 20px rgba(0, 210, 255, 0.3);
@shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
@shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
@shadow-button: 0 4px 12px rgba(0, 82, 204, 0.25);

// ============================================
// 全局基础样式
// ============================================

// 页面背景
.cyber-page-bg {
  background: @page-gradient;
  min-height: 100vh;
}

// 内容容器
.cyber-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 32px;
}

// ============================================
// 玻璃态组件 Glass Components
// ============================================

// 玻璃态头部卡片
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: @radius-3xl;
  padding: 28px 32px;
  box-shadow: @shadow-glass;
}

// 玻璃态内容卡片
.glass-card {
  background: #ffffff;
  border-radius: @radius-3xl;
  box-shadow: @shadow-premium;
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

// ============================================
// 按钮系统 Button System
// ============================================

// 主渐变按钮
.cyber-button {
  background: @cyber-gradient;
  color: #ffffff;
  border: none;
  border-radius: @radius-xl;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: @shadow-button;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  &:hover {
    filter: brightness(1.1);
    box-shadow: @shadow-cyber-glow;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
    transform: none;
  }
}

// 幽灵按钮
.ghost-button {
  background: #ffffff;
  color: @tech-gray-600;
  border: 1px solid @tech-gray-200;
  border-radius: @radius-xl;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  &:hover {
    background: @tech-gray-50;
    border-color: @tech-gray-300;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  &:active {
    transform: translateY(0);
  }
}

// ============================================
// 输入框系统 Input System
// ============================================

.input-tech {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: @radius-xl;
  padding: 12px 16px;
  font-size: 14px;
  color: @tech-gray-800;
  transition: all 0.2s ease;
  box-shadow: @shadow-soft-inner;
  outline: none;

  &::placeholder {
    color: @tech-gray-400;
  }

  &:focus {
    border-color: rgba(0, 82, 204, 0.3);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08);
  }
}

// ============================================
// 标签系统 Label System
// ============================================

.label-tech {
  font-size: 11px;
  font-weight: 700;
  color: @tech-gray-400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  margin-bottom: 8px;
}

// 徽章标签
.badge-level {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-primary {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 82, 204, 0.08);
  color: @primary-color;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
}

// ============================================
// 表格系统 Table System  
// ============================================

.table-tech {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  thead tr {
    th {
      padding: 16px 16px 20px;
      font-size: 11px;
      font-weight: 700;
      color: @tech-gray-400;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid @tech-gray-100;
      text-align: left;
    }
  }

  tbody tr {
    transition: background 0.15s ease;

    &:hover {
      background: @tech-gray-50;
    }

    td {
      padding: 18px 16px;
      font-size: 14px;
      color: @tech-gray-600;
      border-bottom: 1px solid transparent;
    }
  }
}

// ============================================
// 分页系统 Pagination System
// ============================================

.pagination-tech {
  display: flex;
  align-items: center;
  gap: 8px;

  .page-btn {
    width: 36px;
    height: 36px;
    border-radius: @radius-xl;
    border: none;
    background: transparent;
    color: @tech-gray-600;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    &.active {
      background: @tech-gray-900;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    }
  }
}

// ============================================
// 信息区块 Info Block
// ============================================

.info-pill {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.5);
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 12px;
  font-weight: 500;

  .info-label {
    color: @tech-gray-400;
  }

  .info-value {
    color: @tech-gray-700;
    font-family: 'SF Mono', Monaco, monospace;
  }

  .info-divider {
    width: 1px;
    height: 12px;
    background: @tech-gray-200;
  }
}

// ============================================
// 页脚区块 Footer Section
// ============================================

.footer-section {
  padding: 20px 32px;
  background: rgba(248, 250, 252, 0.5);
  border-top: 1px solid @tech-gray-100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.stat-group {
  display: flex;
  align-items: center;
  gap: 32px;

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .stat-label {
      font-size: 12px;
      color: @tech-gray-400;
      font-weight: 500;
    }

    .stat-value {
      font-size: 14px;
      font-weight: 700;
      color: @tech-gray-900;

      &.primary {
        color: @primary-color;
      }
    }
  }
}

// ============================================
// 滚动条美化 Scrollbar
// ============================================

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: @tech-gray-300;
  border-radius: 10px;

  &:hover {
    background: @tech-gray-400;
  }
}

// ============================================
// Element Plus 组件覆盖 - 输入框
// ============================================

.cyber-form {
  // 输入框
  .el-input__wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: @radius-xl !important;
    box-shadow: @shadow-soft-inner !important;
    padding: 4px 16px !important;
    transition: all 0.2s ease !important;

    &:hover {
      border-color: @tech-gray-300 !important;
    }

    &.is-focus {
      border-color: rgba(0, 82, 204, 0.3) !important;
      box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
    }
  }

  .el-input--large .el-input__wrapper {
    height: 44px !important;
  }

  // 选择器
  .el-select__wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: @radius-xl !important;
    box-shadow: @shadow-soft-inner !important;
    padding: 4px 16px !important;
    min-height: 44px !important;
    transition: all 0.2s ease !important;

    &:hover {
      border-color: @tech-gray-300 !important;
    }

    &.is-focus {
      border-color: rgba(0, 82, 204, 0.3) !important;
      box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
    }
  }

  // 复选框
  .el-checkbox {
    height: 44px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: @radius-xl;
    transition: all 0.2s ease;

    &:hover {
      border-color: @tech-gray-300;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: @primary-color;
      border-color: @primary-color;
    }

    .el-checkbox__label {
      font-weight: 600;
      color: @tech-gray-600;
    }
  }

  // 按钮 - 主要
  .el-button--primary {
    background: @cyber-gradient !important;
    border: none !important;
    border-radius: @radius-xl !important;
    font-weight: 600 !important;
    box-shadow: @shadow-button !important;
    transition: all 0.3s ease !important;
    height: 44px !important;
    padding: 0 24px !important;

    &:hover {
      filter: brightness(1.1);
      box-shadow: @shadow-cyber-glow !important;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }

    &:disabled,
    &.is-disabled {
      opacity: 0.6 !important;
      filter: none !important;
      transform: none !important;
      cursor: not-allowed !important;
    }
  }

  // 按钮 - 默认
  .el-button--default {
    background: #ffffff !important;
    border: 1px solid @tech-gray-200 !important;
    border-radius: @radius-xl !important;
    color: @tech-gray-600 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    height: 44px !important;
    padding: 0 20px !important;

    &:hover {
      background: @tech-gray-50 !important;
      border-color: @tech-gray-300 !important;
      transform: translateY(-1px);
    }
  }
}

// ============================================
// Element Plus 组件覆盖 - 表格
// ============================================

.cyber-table {
  .el-table {
    background: transparent !important;
    --el-table-border-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: rgba(248, 250, 252, 0.8);

    th.el-table__cell {
      background: transparent !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: @tech-gray-400 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.05em !important;
      padding: 16px 12px 20px !important;
      border-bottom: 1px solid @tech-gray-100 !important;
    }

    td.el-table__cell {
      padding: 16px 12px !important;
      font-size: 14px !important;
      color: @tech-gray-600 !important;
      border-bottom: 1px solid transparent !important;
    }

    .el-table__row:hover > td.el-table__cell {
      background: @tech-gray-50 !important;
    }
  }
}

// ============================================
// Element Plus 组件覆盖 - 分页
// ============================================

.cyber-pagination {
  .el-pagination {
    --el-pagination-bg-color: transparent;
    --el-pagination-hover-color: @primary-color;

    .el-pager li {
      min-width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: @radius-xl;
      font-weight: 700;
      font-size: 12px;
      margin: 0 2px;
      background: transparent;
      transition: all 0.2s ease;

      &:hover {
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      &.is-active {
        background: @tech-gray-900 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
      }
    }

    .btn-prev,
    .btn-next {
      background: transparent;
      border-radius: @radius-xl;
      transition: all 0.2s ease;

      &:hover {
        background: #ffffff;
        color: @primary-color;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }
    }

    .el-select__wrapper {
      background: #ffffff !important;
      border: 1px solid @tech-gray-200 !important;
      border-radius: @radius-xl !important;
    }
  }
}

// ============================================
// 布局辅助类 Layout Utilities
// ============================================

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

// 分割线
.divider-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, @tech-gray-200, transparent);
  margin: 24px 0;
}

.divider-vertical {
  width: 1px;
  height: 24px;
  background: @tech-gray-200;
}
