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

/* 自定义样式 */
:root {
  --sidebar-width: 200px;

  --color-bg-sidebar: #1e293b;
  --color-accent: #38bdf8;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
  color: #1e293b;
}

/* 禁止选中（桌面应用体验） */
body {
  user-select: none;
  -webkit-user-select: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 按钮基础样式 */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-slate-900;
}

.btn-primary {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white;
  @apply hover:from-primary-400 hover:to-primary-500;
  @apply active:from-primary-600 active:to-primary-700;
}

.btn-secondary {
  @apply bg-slate-700 text-slate-200;
  @apply hover:bg-slate-600;
  @apply active:bg-slate-800;
}

.btn-ghost {
  @apply bg-transparent text-slate-300;
  @apply hover:bg-slate-700/50;
}

/* 卡片样式 */
.card {
  @apply bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50;
  @apply shadow-lg shadow-black/20;
}

/* 动画 */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(56, 189, 248, 0.2);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* 页面切换动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.3s ease-out forwards;
}

/* 更新通知弹出动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out forwards;
}