X-Agents/web/src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

body {
  @apply bg-dark-900 text-gray-100 font-sans;
}

/* 自定义下拉菜单类 */
.dark-select-dropdown {
  background-color: #1a1c25 !important;
  border: 1px solid #2a2c36 !important;
}

.dark-select-dropdown .el-select-dropdown__item {
  color: #ffffff !important;
  background-color: transparent !important;
}

.dark-select-dropdown .el-select-dropdown__item:hover,
.dark-select-dropdown .el-select-dropdown__item.hover {
  background-color: #1a1c25 !important;
}

.dark-select-dropdown .el-select-dropdown__item.is-selected {
  color: #ff9500 !important;
  background-color: transparent !important;
}

/* Element Plus 暗色主题 */
html.dark {
  --el-bg-color: #171922;
  --el-bg-color-overlay: #171922;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #a1a1aa;
  --el-border-color: #2a2c36;
  --el-border-color-light: #2a2c36;
  --el-fill-color-blank: #171922;
  --el-color-primary: #ff9500;
}

/* el-select 统一样式 */
html.dark .el-select {
  --el-select-input-focus-border-color: #ff9500;
}

html.dark .el-select .el-input__wrapper,
html.dark .el-select .el-select__wrapper {
  background-color: #1a1c25 !important;
  border: 1px solid #2a2c36;
  border-radius: 8px;
  transition: all 0.2s ease;
  padding: 2px 11px;
  min-height: 42px;
}

html.dark .el-select:hover .el-input__wrapper,
html.dark .el-select:hover .el-select__wrapper {
  background-color: #1a1c25 !important;
}

/* 修复鼠标移出后出现白色背景的问题 */
html.dark .el-select .el-input__wrapper:hover,
html.dark .el-select .el-select__wrapper:hover {
  background-color: #1a1c25 !important;
}

html.dark .el-select .el-input__wrapper,
html.dark .el-select .el-select__wrapper {
  background-color: #1a1c25 !important;
}

html.dark .el-form-item__content .el-input__wrapper,
html.dark .el-form-item__content .el-select .el-input__wrapper {
  background-color: #1a1c25 !important;
}

html.dark .el-select.el-select--large .el-input__wrapper {
  padding: 5px 11px;
  min-height: 46px;
}

html.dark .el-select .el-input__wrapper:hover {
  border-color: #ff9500;
}

html.dark .el-select .el-input__wrapper.is-focus {
  border-color: #ff9500;
}

html.dark .el-select .el-input__inner {
  color: #ffffff;
  line-height: 1.5;
}

html.dark .el-select .el-input__wrapper {
  display: flex;
  align-items: center;
}

html.dark .el-select .el-select__wrapper {
  box-shadow: none !important;
}

html.dark .el-select .el-select__wrapper .el-select__selected-item {
  line-height: normal;
}

html.dark .el-select .el-input__inner::placeholder {
  color: #6b7280 !important;
}

html.dark .el-select .el-select__placeholder {
  color: #6b7280 !important;
}

html.dark .el-input__inner::placeholder {
  color: #6b7280 !important;
}

/* 下拉箭头 */
html.dark .el-select .el-input__suffix .el-select__caret {
  color: #71717a;
  transition: transform 0.3s;
}

html.dark .el-select .el-input__suffix .el-select__caret.is-reverse {
  transform: rotate(180deg);
}

html.dark .el-select .el-input__suffix .el-select__caret.is-show-close {
  color: #71717a;
}

html.dark .el-select .el-input__suffix .el-select__caret:hover {
  color: #ff9500;
}

/* 下拉菜单 */
.el-select-dropdown.el-popper,
html.dark .el-select-dropdown {
  background-color: #1a1c25 !important;
  border: 1px solid #2a2c36 !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 修复鼠标移出后出现白色背景的问题 */
html.dark .el-select-dropdown__list {
  background-color: #1a1c25 !important;
}

html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  background-color: transparent;
}

html.dark .el-popper.is-light .el-popper__arrow::before,
html.dark .el-select-dropdown__arrow {
  background-color: #1a1c25 !important;
}

/* 强制覆盖所有可能的白色背景 */
html.dark .el-select-dropdown__item.hover,
html.dark .el-select-dropdown__item:hover {
  background-color: #1a1c25 !important;
}

html.dark .el-select-dropdown.el-popper[x-placement^="bottom"] .el-select-dropdown__item {
  background-color: #1a1c25 !important;
}

html.dark .el-select-dropdown__item {
  color: #ffffff !important;
  padding: 8px 12px;
  transition: all 0.2s;
}

html.dark .el-select-dropdown__item:hover {
  background-color: #1a1c25 !important;
}

html.dark .el-select-dropdown__item.is-selected {
  color: #ff9500;
  font-weight: 600;
  background-color: transparent;
}

html.dark .el-select-dropdown__item.is-selected::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #ff9500;
  border-radius: 50%;
  margin-right: 8px;
}

/* 空状态 */
html.dark .el-select-dropdown__empty {
  color: #71717a;
  padding: 20px 0;
}

/* popper 箭头 */
.el-popper.is-light,
html.dark .el-popper.is-light {
  background: #1a1c25 !important;
  border: 1px solid #2a2c36 !important;
}

.el-popper.is-light .el-popper__arrow::before,
html.dark .el-popper.is-light .el-popper__arrow::before {
  background: #1a1c25 !important;
  border-color: #2a2c36 !important;
}

/* 选中项文字居中 */
html.dark .el-select .el-select__wrapper {
  display: flex;
  align-items: center;
}

html.dark .el-select .el-select__selected-item,
html.dark .el-select .el-select__placeholder {
  line-height: 20px !important;
  display: flex;
  align-items: center;
}

html.dark .el-select .el-select__selected-item > span {
  display: inline-flex;
  align-items: center;
}

/* 多选标签 */
html.dark .el-select .el-tag {
  background-color: #2a2c36;
  border-color: transparent;
  color: #ffffff;
  border-radius: 4px;
}

html.dark .el-select .el-tag .el-tag__close {
  color: #71717a;
}

html.dark .el-select .el-tag .el-tag__close:hover {
  background-color: #ff9500;
  color: #ffffff;
}

/* el-checkbox 暗色主题 - 金黄色选中 */
html.dark .el-checkbox {
  --el-checkbox-checked-text-color: #ffb700;
  --el-checkbox-checked-bg-color: #ffb700;
  --el-checkbox-checked-border-color: #ffb700;
  --el-checkbox-input-border-color-hover: #ffb700;
}

html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ffb700;
  border-color: #ffb700;
}

html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #1f2937;
}

html.dark .el-checkbox .el-checkbox__label {
  color: #e5e7eb;
}

html.dark .el-checkbox:hover .el-checkbox__inner {
  border-color: #ffb700;
}

/* 柱状图增长动画 */
@keyframes bar-grow {
  from {
    height: 0;
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.chart-bar {
  height: 0;
  opacity: 0;
  animation: bar-grow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 进度条增长动画 */
@keyframes progress-grow {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: var(--target-width);
    opacity: 1;
  }
}

.progress-bar {
  width: 0;
  opacity: 0;
  animation: progress-grow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== 通用组件交互优化 ===== */

/* 通用弹窗动画 */
@keyframes modal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes modal-scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-overlay {
  animation: modal-fade-in 0.2s ease-out forwards;
}

.modal-content {
  animation: modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 按钮交互优化 */
.btn-primary {
  @apply bg-gradient-to-r from-primary-orange to-red-500 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all duration-200;
}

.btn-primary:hover {
  @apply from-orange-500 to-red-600;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.btn-primary:disabled {
  @apply opacity-50 cursor-not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  @apply bg-dark-600 text-gray-300 px-4 py-2 rounded-lg border border-dark-500 transition-all duration-200;
}

.btn-secondary:hover {
  @apply bg-dark-500 border-gray-500;
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-icon {
  @apply p-2 rounded-lg transition-all duration-150;
}

.btn-icon:hover {
  @apply bg-dark-500;
  transform: scale(1.05);
}

.btn-icon:active {
  transform: scale(0.95);
}

/* 表单输入框交互 */
.input-field {
  @apply w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 transition-all duration-200;
}

.input-field:focus {
  @apply outline-none border-primary-orange;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

.input-field:hover:not(:focus) {
  @apply border-gray-500;
}

/* 表格样式优化 */
.table-row {
  @apply border-t border-dark-600 transition-all duration-200;
}

.table-row:hover {
  @apply bg-dark-600/50;
}

.table-row:active {
  @apply bg-dark-600;
}

/* 表格头部 */
.table-header {
  @apply bg-dark-600 text-sm font-medium text-gray-400;
}

/* 搜索框交互 */
.search-input {
  @apply bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 transition-all duration-200;
}

.search-input:focus {
  @apply outline-none border-primary-orange;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

.search-input:hover:not(:focus) {
  @apply border-gray-500;
}

/* 空状态优化 */
.empty-state {
  @apply py-12 text-center transition-all duration-300;
}

.empty-state-icon {
  @apply text-gray-500 text-4xl mb-3 transition-transform duration-300;
}

.empty-state:hover .empty-state-icon {
  @apply text-gray-400;
  transform: scale(1.1);
}

/* 卡片悬停效果 */
.card-hover {
  @apply transition-all duration-200;
}

.card-hover:hover {
  @apply shadow-lg;
  transform: translateY(-2px);
}

/* 标签/徽章样式 */
.badge {
  @apply px-2 py-1 rounded text-sm font-medium transition-all duration-200;
}

.badge-success {
  @apply bg-green-500/20 text-green-400;
}

.badge-warning {
  @apply bg-yellow-500/20 text-yellow-400;
}

.badge-error {
  @apply bg-red-500/20 text-red-400;
}

.badge-info {
  @apply bg-blue-500/20 text-blue-400;
}

.badge-default {
  @apply bg-gray-500/20 text-gray-400;
}

/* 状态指示点 */
.status-dot {
  @apply w-2 h-2 rounded-full transition-all duration-200;
}

.status-dot-active {
  @apply bg-primary-success;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot-inactive {
  @apply bg-gray-500;
}

.status-dot-error {
  @apply bg-primary-danger;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* 加载动画 */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-pulse {
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* 步骤指示器 */
.step-indicator {
  @apply flex items-center justify-center gap-4 py-4;
}

.step-item {
  @apply flex items-center gap-2;
}

.step-circle {
  @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300;
}

.step-line {
  @apply w-16 h-0.5 transition-all duration-300;
}

/* 复选框优化 */
.checkbox-custom {
  @apply w-4 h-4 rounded border-dark-500 bg-dark-600 text-primary-cyan transition-all duration-200;
}

.checkbox-custom:focus {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

.checkbox-custom:checked {
  @apply bg-primary-cyan border-primary-cyan;
}

/* 工具提示 */
.tooltip {
  @apply absolute z-50 px-2 py-1 text-xs rounded bg-dark-700 text-white shadow-lg pointer-events-none opacity-0 transition-opacity duration-200;
}

.tooltip-visible {
  @apply opacity-100;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  @apply w-2 h-2;
}

::-webkit-scrollbar-track {
  @apply bg-dark-800 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-dark-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-600;
}

/* 渐变文字 */
.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-orange to-red-500;
}

/* 玻璃拟态效果 */
.glass {
  @apply bg-dark-700/80 backdrop-blur-md border border-dark-500/50;
}

/* 焦点环 */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-primary-orange/50 focus:ring-offset-2 focus:ring-offset-dark-900;
}

/* ===== 加载动画 ===== */

/* 简洁旋转 Loading */
@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spin {
  animation: loading-spin 1s linear infinite;
}

/* 三个点脉冲 */
@keyframes loading-dots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  animation: loading-dots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

/* 进度条动画 */
@keyframes loading-progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.loading-progress-bar {
  animation: loading-progress 2s ease-in-out infinite;
}

/* 骨架屏闪烁 */
@keyframes loading-skeleton {
  0% { opacity: 0.4; }
  50% { opacity: 0.7; }
  100% { opacity: 0.4; }
}

.loading-skeleton {
  animation: loading-skeleton 1.5s ease-in-out infinite;
}