/* shadcn/ui风格的CSS变量和通用样式 */

/* 亮色模式变量 */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
  
  /* 暗色模式变量 */
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
  
  /* 实用样式类 */
  .bg-background { background-color: hsl(var(--background)); }
  .text-foreground { color: hsl(var(--foreground)); }
  .bg-card { background-color: hsl(var(--card)); }
  .text-card-foreground { color: hsl(var(--card-foreground)); }
  .bg-primary { background-color: hsl(var(--primary)); }
  .text-primary-foreground { color: hsl(var(--primary-foreground)); }
  .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
  .text-destructive { color: hsl(var(--destructive)); }
  .border-border { border-color: hsl(var(--border)); }
  .border-input { border-color: hsl(var(--input)); }
  .ring-ring { --tw-ring-color: hsl(var(--ring)); }
  .text-muted-foreground { color: hsl(var(--muted-foreground)); }
  .focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); }
  
  /* 暗色模式切换功能 */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
    }
  }
  
  /* 通用元素样式重置 */
  * {
    border-color: hsl(var(--border));
  }
  
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  
  /* 表单元素基础样式 */
  input, select, textarea {
    background-color: hsl(var(--background));
    border-color: hsl(var(--input));
  }
  
  /* 输入框聚焦时的环状效果 */
  input:focus-visible, 
  select:focus-visible, 
  textarea:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) hsl(var(--ring));
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  }
  
  /* 禁用状态样式 */
  input:disabled,
  select:disabled,
  textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* 侧边栏背景色 */
  .sidebar-bg {
    background-color: #fbfbfb;
  }

  .dark .sidebar-bg {
    background-color: hsl(var(--card));
  }

  /* 动画效果库 */
  /* 淡入动画效果，用于页面加载或元素进入 */
  .animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
  }

  /* 向上淡入，适用于列表项或卡片 */
  .animate-fade-up {
    animation: fadeUp 0.5s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
  }

  /* 向右淡入，适用于侧边进入的元素 */
  .animate-fade-right {
    animation: fadeRight 0.5s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
    opacity: 0;
    transform: translateX(-20px);
  }

  /* 弹跳效果，适用于按钮或交互元素 */
  .animate-bounce-in {
    animation: bounceIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards;
    transform: scale(0.95);
  }

  /* 脉动效果，用于提示或强调 */
  .animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
  }

  /* 渐变背景动画 */
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradientMove 8s ease infinite;
  }

  /* 轻微悬浮效果 */
  .hover-float {
    transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  .hover-float:hover {
    transform: translateY(-5px);
  }

  /* 按钮点击效果 */
  .click-effect {
    transition: transform 0.1s cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  .click-effect:active {
    transform: scale(0.95);
  }

  /* 卡片悬浮阴影效果 */
  .card-hover {
    transition: box-shadow 0.3s cubic-bezier(0.36, 0.66, 0.04, 1), transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  .card-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /*transform: translateY(-3px);*/
  }

  /* 过渡组类 - 用于多元素序列动画 */
  .transition-group > * {
    opacity: 0;
    transform: translateY(15px);
  }

  .transition-group > *:nth-child(1) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.1s forwards; }
  .transition-group > *:nth-child(2) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.2s forwards; }
  .transition-group > *:nth-child(3) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.3s forwards; }
  .transition-group > *:nth-child(4) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.4s forwards; }
  .transition-group > *:nth-child(5) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.5s forwards; }
  .transition-group > *:nth-child(6) { animation: fadeUp 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) 0.6s forwards; }

  /* 表格行动画组 */
  .table-row-group > tr {
    opacity: 0;
    transform: translateX(-10px);
  }

  .table-row-group > tr:nth-child(odd) { 
    animation: fadeRight 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) calc(0.05s * var(--index, 0)) forwards; 
  }

  .table-row-group > tr:nth-child(even) { 
    animation: fadeRight 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) calc(0.05s * var(--index, 0) + 0.02s) forwards; 
  }

  /* 动画关键帧定义 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  @keyframes bounceIn {
    0% { 
      transform: scale(0.95);
      opacity: 0.7;
    }
    60% { 
      transform: scale(1.02);
      opacity: 0.9;
    }
    100% { 
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes pulseSoft {
    0% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0.8; transform: scale(1); }
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* 为减少闪烁，添加页面过渡效果 */
  .page-transition {
    animation: pageTransition 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  @keyframes pageTransition {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  /* 适用于模态框的动画 */
  .modal-overlay-enter {
    animation: fadeIn 0.2s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
  }

  .modal-content-enter {
    animation: modalEnter 0.3s cubic-bezier(0.17, 0.65, 0.33, 0.99) forwards;
  }
  
  .modal-overlay-exit {
    animation: fadeOut 0.2s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
  }
  
  .modal-content-exit {
    animation: modalExit 0.2s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
  }

  @keyframes modalEnter {
    from { 
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
    to { 
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
  
  @keyframes modalExit {
    from { 
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    to { 
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
  }
  
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* Toast动画效果 */
  @keyframes toastIn {
    from { 
      opacity: 0;
      transform: translateX(20px);
    }
    to { 
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes toastOut {
    from { 
      opacity: 1;
      transform: translateX(0);
    }
    to { 
      opacity: 0;
      transform: translateX(20px);
    }
  }

  .animate-fade-out {
    animation: toastOut 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
  }